实训一

1、安装 nodejs

进入 node 网站：https://nodejs.org/zh-cn/，下载nodejs

根据自己电脑系统及位数选择，选择windows64位.msi格式安装包

image.png

打开cmd窗口，执行命令node -v查看node版本
v14.7.0
最新版的node在安装时同时也安装了npm,执行npm -v查看npm版本

F:\网页UI实训\nodejs\node_modules\npm>node -v
v14.15.1

2、安装 git

进入 git 网站：https://git-scm.com/downloads，下载git

前端：

3、下载 vue-admin-template（前端）

建议
本项目的定位是后台集成方案，不太适合当基础模板来进行二次开发。因为本项目集成了很多你可能用不到的功能，会造成不少的代码冗余。如果你的项目不关注这方面的问题，也可以直接基于它进行二次开发。

基础模板：vue-admin-template

完成终端：school-manager-admin


# clone the project
git clone https://github.com/PanJiaChen/vue-admin-template.git

# enter the project directory
cd vue-admin-template

# install dependency
npm install

# develop
npm run dev

image.png

项目运行成功后打开浏览器

输入网址：http：//localhost:9528/
可以看到以下界面：

image.png

4、开始创建项目

我所使用的开发软件是JetBrains WebStorm

①下载vue-admin-template

②进入vue-admin-template项目

③初始化vue-admin-template项目

④运行vue-admin-template

clone the project
git clone https://gitee.com/xdnclover/vue-admin-template.git* enter the project directory
cd vue-admin-template* install dependency
npm install* develop
npm run dev

image.png

5、编辑vue-admin-template项目

（1）找到vue-admin-template/src/router/index.js，将以下代码删除

image.png

 {
    path: '/example',
    component: Layout,
    redirect: '/example/table',
    name: 'Example',
    meta: { title: 'Example', icon: 'example' },
    children: [
      {
        path: 'table',
        name: 'Table',
        component: () => import('@/views/table/index'),
        meta: { title: 'Table', icon: 'table' }
      },
      {
        path: 'tree',
        name: 'Tree',
        component: () => import('@/views/tree/index'),
        meta: { title: 'Tree', icon: 'tree' }
      }
    ]
  },
{
    path: '/form',
    component: Layout,
    children: [
      {
        path: 'index',
        name: 'Form',
        component: () => import('@/views/form/index'),
        meta: { title: 'Form', icon: 'form' }
      }
    ]
  },
  {
    path: '/nested',
    component: Layout,
    redirect: '/nested/menu1',
    name: 'Nested',
    meta: {
      title: 'Nested',
      icon: 'nested'
    },
    children: [
      {
        path: 'menu1',
        component: () => import('@/views/nested/menu1/index'), // Parent router-view
        name: 'Menu1',
        meta: { title: 'Menu1' },
        children: [
          {
            path: 'menu1-1',
            component: () => import('@/views/nested/menu1/menu1-1'),
            name: 'Menu1-1',
            meta: { title: 'Menu1-1' }
          },
          {
            path: 'menu1-2',
            component: () => import('@/views/nested/menu1/menu1-2'),
            name: 'Menu1-2',
            meta: { title: 'Menu1-2' },
            children: [
              {
                path: 'menu1-2-1',
                component: () => import('@/views/nested/menu1/menu1-2/menu1-2-1'),
                name: 'Menu1-2-1',
                meta: { title: 'Menu1-2-1' }
              },
              {
                path: 'menu1-2-2',
                component: () => import('@/views/nested/menu1/menu1-2/menu1-2-2'),
                name: 'Menu1-2-2',
                meta: { title: 'Menu1-2-2' }
              }
            ]
          },
          {
            path: 'menu1-3',
            component: () => import('@/views/nested/menu1/menu1-3'),
            name: 'Menu1-3',
            meta: { title: 'Menu1-3' }
          }
        ]
      },
      {
        path: 'menu2',
        component: () => import('@/views/nested/menu2/index'),
        meta: { title: 'menu2' }
      }
    ]
  },
  {
    path: 'external-link',
    component: Layout,
    children: [
      {
        path: 'https://panjiachen.github.io/vue-element-admin-site/#/',
        meta: { title: 'External Link', icon: 'link' }
      }
    ]
  },

则index.js的内容为：

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

/* Layout */
import Layout from '@/layout'

/**
 * Note: sub-menu only appear when route children.length >= 1
 * Detail see: https://panjiachen.github.io/vue-element-admin-site/guide/essentials/router-and-nav.html
 *
 * hidden: true                   if set true, item will not show in the sidebar(default is false)
 * alwaysShow: true               if set true, will always show the root menu
 *                                if not set alwaysShow, when item has more than one children route,
 *                                it will becomes nested mode, otherwise not show the root menu
 * redirect: noRedirect           if set noRedirect will no redirect in the breadcrumb
 * name:'router-name'             the name is used by  (must set!!!)
 * meta : {
    roles: ['admin','editor']    control the page roles (you can set multiple roles)
    title: 'title'               the name show in sidebar and breadcrumb (recommend set)
    icon: 'svg-name'             the icon show in the sidebar
    breadcrumb: false            if set false, the item will hidden in breadcrumb(default is true)
    activeMenu: '/example/list'  if set path, the sidebar will highlight the path you set
  }
 */

/**
 * constantRoutes
 * a base page that does not have permission requirements
 * all roles can be accessed
 */
export const constantRoutes = [
  {
    path: '/login',
    component: () => import('@/views/login/index'),
    hidden: true
  },

  {
    path: '/404',
    component: () => import('@/views/404'),
    hidden: true
  },

  {
    path: '/',
    component: Layout,
    redirect: '/dashboard',
    children: [{
      path: 'dashboard',
      name: 'Dashboard',
      component: () => import('@/views/dashboard/index'),
      meta: { title: 'Dashboard', icon: 'dashboard' }
    }]
  },
  // 404 page must be placed at the end !!!
  { path: '*', redirect: '/404', hidden: true }
]

const createRouter = () => new Router({
  // mode: 'history', // require service support
  scrollBehavior: () => ({ y: 0 }),
  routes: constantRoutes
})

const router = createRouter()

// Detail see: https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465
export function resetRouter() {
  const newRouter = createRouter()
  router.matcher = newRouter.matcher // reset router
}

export default router

效果图：

image.png

（2）安装ES6语法插件

npm install --save es6-promise

image.png

（3）编写Axios 插件

①在vue-admin-template/src/untils中添加http.js：

import Vue from 'vue';
import Axios from 'axios';
import {Promise} from 'es6-promise';

import {MessageBox, Message} from 'element-ui'

Axios.defaults.timeout = 30000; // 1分钟
Axios.defaults.baseURL = '';

Axios.interceptors.request.use(function (config) {
  // Do something before request is sent
  //change method for get
  /*if(process.env.NODE_ENV == 'development'){
      config['method'] = 'GET';
      console.log(config)
  }*/
  if (config['MSG']) {
    // Vue.prototype.$showLoading(config['MSG']);
  } else {
    // Vue.prototype.$showLoading();
  }
  // if(user.state.token){//用户登录时每次请求将token放入请求头中
  //   config.headers["token"] = user.state.token;
  // }

  if (config['Content-Type'] === 'application/x-www-form-urlencoded;') {//默认发application/json请求，如果application/x-www-form-urlencoded;需要使用transformRequest对参数进行处理
    /*config['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';*/
    config.headers['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';
    config['transformRequest'] = function (obj) {
      var str = [];
      for (var p in obj)
        str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
      return str.join("&")
    };
  }
  //config.header['Content-Type'] = 'application/x-www-form-urlencoded; charset=UTF-8';

  return config;
}, function (error) {
  // Do something with request error
  // Vue.$vux.loading.hide()
  return Promise.reject(error);
});

Axios.interceptors.response.use(
  response => {
    // Vue.$vux.loading.hide();
    return response.data;
  },
  error => {
    // Vue.$vux.loading.hide();
    if (error.response) {
      switch (error.response.status) {
        case 404:
          Message({
            message: '' || 'Error',
            type: 'error',
            duration: 5 * 1000
          })
          break;
        default:
          Message({
            message: '' || 'Error',
            type: 'error',
            duration: 5 * 1000
          })
      }
    } else if (error instanceof Error) {
      console.error(error);
    } else {
      Message({
        message: '' || 'Error',
        type: 'error',
        duration: 5 * 1000
      })
    }

    return Promise.reject(error.response);
  });

export default Vue.prototype.$http = Axios;

②配置axios代理：

添加部分为：

image.png

修改完vue.config.js的代码为：

vue-admin-template/vue.config.js：

'use strict'
const path = require('path')
const defaultSettings = require('./src/settings.js')

function resolve(dir) {
  return path.join(__dirname, dir)
}

const name = defaultSettings.title || 'vue Admin Template' // page title

// If your port is set to 80,
// use administrator privileges to execute the command line.
// For example, Mac: sudo npm run
// You can change the port by the following methods:
// port = 9528 npm run dev OR npm run dev --port = 9528
const port = process.env.port || process.env.npm_config_port || 9528 // dev port

// All configuration item explanations can be find in https://cli.vuejs.org/config/
module.exports = {
  /**
   * You will need to set publicPath if you plan to deploy your site under a sub path,
   * for example GitHub Pages. If you plan to deploy your site to https://foo.github.io/bar/,
   * then publicPath should be set to "/bar/".
   * In most cases please use '/' !!!
   * Detail: https://cli.vuejs.org/config/#publicpath
   */
  publicPath: '/',
  outputDir: 'dist',
  assetsDir: 'static',
  lintOnSave: process.env.NODE_ENV === 'development',
  productionSourceMap: false,
  devServer: {
    port: port,
    open: true,
    overlay: {
      warnings: false,
      errors: true
    },
    proxy: {
      // change xxx-api/login => mock/login
      // detail: https://cli.vuejs.org/config/#devserver-proxy
      [process.env.VUE_APP_BASE_API]: {
        target: `http://127.0.0.1:${port}/mock`,
        changeOrigin: true,
        pathRewrite: {
          ['^' + process.env.VUE_APP_BASE_API]: ''
        }
      },
      ['/api']: {
        target: `http://127.0.0.1:3000`,
        changeOrigin: true,
        pathRewrite: {
          ['^' + '/api']: ''
        }
      }
    },
    after: require('./mock/mock-server.js')
  },
  configureWebpack: {
    // provide the app's title in webpack's name field, so that
    // it can be accessed in index.html to inject the correct title.
    name: name,
    resolve: {
      alias: {
        '@': resolve('src')
      }
    }
  },
  chainWebpack(config) {
    config.plugins.delete('preload') // TODO: need test
    config.plugins.delete('prefetch') // TODO: need test

    // set svg-sprite-loader
    config.module
      .rule('svg')
      .exclude.add(resolve('src/icons'))
      .end()
    config.module
      .rule('icons')
      .test(/\.svg$/)
      .include.add(resolve('src/icons'))
      .end()
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]'
      })
      .end()

    // set preserveWhitespace
    config.module
      .rule('vue')
      .use('vue-loader')
      .loader('vue-loader')
      .tap(options => {
        options.compilerOptions.preserveWhitespace = true
        return options
      })
      .end()

    config
    // https://webpack.js.org/configuration/devtool/#development
      .when(process.env.NODE_ENV === 'development',
        config => config.devtool('cheap-source-map')
      )

    config
      .when(process.env.NODE_ENV !== 'development',
        config => {
          config
            .plugin('ScriptExtHtmlWebpackPlugin')
            .after('html')
            .use('script-ext-html-webpack-plugin', [{
              // `runtime` must same as runtimeChunk name. default is `runtime`
              inline: /runtime\..*\.js$/
            }])
            .end()
          config
            .optimization.splitChunks({
            chunks: 'all',
            cacheGroups: {
              libs: {
                name: 'chunk-libs',
                test: /[\\/]node_modules[\\/]/,
                priority: 10,
                chunks: 'initial' // only package third parties that are initially dependent
              },
              elementUI: {
                name: 'chunk-elementUI', // split elementUI into a single package
                priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app
                test: /[\\/]node_modules[\\/]_?element-ui(.*)/ // in order to adapt to cnpm
              },
              commons: {
                name: 'chunk-commons',
                test: resolve('src/components'), // can customize your rules
                minChunks: 3, //  minimum common number
                priority: 5,
                reuseExistingChunk: true
              }
            }
          })
          config.optimization.runtimeChunk('single')
        }
      )
  }
}

（4）在vue-admin-template/src/utils/main.js添加http的路由

import http from './utils/http'
Vue.use(http)

image.png

（5）在dashboard中调用接口

添加部分为：

image.png

vue-admin-template/src/views/dashboard/index.vue：

vue-admin-template/src/views/dashboard/index.vue

代码如下：

后端

6.安装koa-generator

①下载koa-generator：

npm install -g koa-generator

②构建koa2项目（搭建后端项目平台）：

koa2 projectName

成功的信息：

E:\nodejs\vue\vue-admin-template>koa2 projectName

   create : projectName
   create : projectName/package.json
   create : projectName/app.js
   create : projectName/public
   create : projectName/routes
   create : projectName/routes/index.js
   create : projectName/routes/users.js
   create : projectName/views
   create : projectName/views/index.pug
   create : projectName/views/layout.pug
   create : projectName/views/error.pug
   create : projectName/bin
   create : projectName/bin/www
   create : projectName/public/stylesheets
   create : projectName/public/stylesheets/style.css

   install dependencies:
     > cd projectName && npm install

   run the app:
     > SET DEBUG=koa* & npm start projectName

   create : projectName/public/javascripts
   create : projectName/public/images

③进入projectName项目:

cd projectName

④初始化projectName项目

npm install

⑤运行projectName项目

npm run dev

这里koa2模板提示信息做的并不好，没有输出测试地址，成功后出现如下界面代表成功了。成功的信息：

D:\project\projectName>npm run dev

> [email protected] dev D:\project\projectName
> nodemon bin/www
[nodemon] 1.19.4
[nodemon] to restart at any time, enter `rs`
[nodemon] watching dir(s): *.*
[nodemon] watching extensions: js,mjs,json
[nodemon] starting `node bin/www`

在浏览器打开地址：（默认是3000）

http://localhost:3000/

出现koa2的欢迎界面就代表成功了。

http://localhost:3000/

或者
可以使用基础模板：projectName
直接下载即可

7、安装本地mongodb或者在mongodb官网新建免费的云端服务器

数据库代码（这是我的数据库，若有建此项目时，需要换成自己的数据库）：

module.exports = {
    // dbs: 'mongodb://139.159.253.110:27017/test1'
    dbs: 'mongodb+srv://:[email protected]/test?retryWrites=true&w=majority'
}

module.exports = {
    // dbs: 'mongodb://139.159.253.110:27017/test1'
    dbs: 'mongodb+srv://<用户名>:<密码>@cluster0.kfozz.mongodb.net/<数据库名>?retryWrites=true&w=majority'
}

如何创建自己的数据库：/

找到mongodb的官网，注册登录

image.png

第一步：创建集群

image.png

如果已经有了集群的界面如下

image.png

第二步：创建用户（注意记住帐号密码，为后边登录帐号密码）

image.png

第三步：创建IP白名单

image.png

0.0.0.0/0代表所有IP都可以访问!
image.png
第四步：load Sample Data

image.png

第五步：创建数据库

image.png

创建完成如下

image.png

连接数据库

image.png

选择connect，就会出现以下界面

image.png

选择Connect Your Application，就会出现以下界面

image.png

8、安装mongoose

npm install mongoose --save

若安装过程问题:卡着不动

例如如下：

image.png

解决该问题如下：

建议不要直接使用 cnpm 安装以来，会有各种诡异的 bug。可以通过如下操作解决 npm 下载速度慢的问题

npm install --registry=https://registry.npm.taobao.org

9、编辑projectName项目

在projectName下创建db目录：

db目录

①在db下创建config.js

image.png

projectName/db/config.js：

module.exports = {
    // dbs: 'mongodb://139.159.253.110:27017/test1'
    dbs: 'mongodb+srv://yuejia:@cluster0.kfozz.mongodb.net/test?retryWrites=true&w=majority'
}

此处需要修改为上面的数据库链接，还要将密码填写进去

②在db下创建models目录

image.png

在models创建user.js

projectName/db/models/user.js：

const mongoose = require('mongoose')
const feld={
    name: String,
    age: Number,
    //人物标签
    labels:Number
}
//自动添加更新时间创建时间:
let personSchema = new mongoose.Schema(feld, {timestamps: {createdAt: 'created', updatedAt: 'updated'}})
module.exports= mongoose.model('User',personSchema)

③修改app.js

添加部分为：

image.png

const Koa = require('koa')
const app = new Koa()
const views = require('koa-views')
const json = require('koa-json')
const onerror = require('koa-onerror')
const bodyparser = require('koa-bodyparser')
const logger = require('koa-logger')


const mongoose = require('mongoose')
const dbconfig = require('./db/config')
mongoose.connect(dbconfig.dbs,{useNewUrlParser: true,useUnifiedTopology: true})
const db = mongoose.connection
db.on('error',console.error.bind(console,'connection error:'));
db.once('open',function () {
  console.log('mongoose 连接成功')
});
// error handler
onerror(app)

// middlewares
app.use(bodyparser({
  enableTypes:['json', 'form', 'text']
}))
app.use(json())
app.use(logger())
app.use(require('koa-static')(__dirname + '/public'))

app.use(views(__dirname + '/views', {
  extension: 'pug'
}))

// logger
app.use(async (ctx, next) => {
  const start = new Date()
  await next()
  const ms = new Date() - start
  console.log(`${ctx.method} ${ctx.url} - ${ms}ms`)
})

const index = require('./routes/index')
app.use(index.routes(), index.allowedMethods())
const users = require('./routes/users')
app.use(users.routes(), users.allowedMethods())


// error-handling


// routes


app.on('error', (err, ctx) => {
  console.error('server error', err, ctx)
});

module.exports = app

④在users.js中添加user的路由

projectName/routes/users.js：

image.png

const router = require('koa-router')()
const User = require('../db/models/user')
router.prefix('/users')

router.get('/add', function (ctx, next) {
  ctx.body = 'this is a users/bar response'
})

router.get('/', function (ctx, next) {
  ctx.body = 'this is a users response!'
})

router.get('/bar', function (ctx, next) {
  ctx.body = 'this is a users/bar response'
})


module.exports = router

10、重启项目

关闭正在运行的dev后，重新启动服务

npm run dev

如果出现了一下信息，则数据库连接成功

E:\nodejs\node.exe E:\nodejs\node_modules\npm\bin\npm-cli.js run dev --scripts-prepend-node-path=auto

> [email protected] dev E:\nodejs\vue\projectName
> nodemon bin/www

[nodemon] 1.19.4
[nodemon] to restart at any time, enter `rs`
[nodemon] watching dir(s): *.*
[nodemon] watching extensions: js,mjs,json
[nodemon] starting `node bin/www`
mongoose 连接成功

效果图：

image.png

到此整个前后端平台搭建成功，可以开始创建项目了

实训二

学校管理篇

一、从后端（projectName）添加学校模块

1、在models目录下添加school.js：

projectName/db/models/school.js：

const mongoose = require('mongoose')
const feld={
    name: String,
    //人物标签
    where:String,
    leixing: String
}
//自动添加更新时间创建时间:
let personSchema = new mongoose.Schema(feld, {timestamps: {createdAt: 'created', updatedAt: 'updated'}})
module.exports= mongoose.model('School',personSchema)

2、在routes目录下添加school.js：

const router = require('koa-router')()
//建立模块，require(“../db/models/文件名”)
let Model = require("../db/models/school");
router.prefix('/school')

router.get('/', function (ctx, next) {
    ctx.body = 'this is a users response!'
})

//数据库增删改查
router.post('/add', async function (ctx, next) {
    console.log(ctx.request.body)
    let model = new Model(ctx.request.body);
    model = await model.save();
    console.log('user',model)
    ctx.body = model
})

router.post('/find', async function (ctx, next) {
    let models = await Model.
    find({})
    ctx.body = models
})

router.post('/get', async function (ctx, next) {
    // let users = await User.
    // find({})
    console.log(ctx.request.body)
    let model = await Model.find(ctx.request.body)
    console.log(model)
    ctx.body = model
})

router.post('/update', async function (ctx, next) {
    console.log(ctx.request.body)
    let pbj = await Model.update({ _id: ctx.request.body._id }, ctx.request.body);
    ctx.body = pbj
})
router.post('/delete', async function (ctx, next) {
    console.log(ctx.request.body)
    await Model.remove({ _id: ctx.request.body._id });
    ctx.body = 'shibai '
})
module.exports = router

3、在app.js中加上school模块的路由：

添加部分为：

school模块路由

代码如下projectName/app.js：

const school = require('./routes/school')
app.use(school.routes(),school.allowedMethods())

总代码：

const Koa = require('koa')
const app = new Koa()
const views = require('koa-views')
const json = require('koa-json')
const onerror = require('koa-onerror')
const bodyparser = require('koa-bodyparser')
const logger = require('koa-logger')


const mongoose = require('mongoose')
const dbconfig = require('./db/config')
mongoose.connect(dbconfig.dbs,{useNewUrlParser: true,useUnifiedTopology: true})
const db = mongoose.connection
db.on('error',console.error.bind(console,'connection error:'));
db.once('open',function () {
  console.log('mongoose 连接成功')
});
// error handler
onerror(app)

// middlewares
app.use(bodyparser({
  enableTypes:['json', 'form', 'text']
}))
app.use(json())
app.use(logger())
app.use(require('koa-static')(__dirname + '/public'))

app.use(views(__dirname + '/views', {
  extension: 'pug'
}))

// logger
app.use(async (ctx, next) => {
  const start = new Date()
  await next()
  const ms = new Date() - start
  console.log(`${ctx.method} ${ctx.url} - ${ms}ms`)
})



const index = require('./routes/index')
app.use(index.routes(), index.allowedMethods())
const users = require('./routes/users')
app.use(users.routes(), users.allowedMethods())
const school = require('./routes/school')
app.use(school.routes(),school.allowedMethods())
// error-handling

// routes


app.on('error', (err, ctx) => {
  console.error('server error', err, ctx)
});

module.exports = app

二、从前端（vue-admin-template）添加学校模块

1、在src/views目录下添加school目录（模块），如图所示：

前端布局的school模块

①在school目录下添加editor.vue：

vue-admin-template/src/views/school/editor.vue：

效果图：

editor.vue的效果图

②在school目录下添加index.vue：

vue-admin-template/src/views/school/index.vue：

效果图：

index.vue的效果图

2、在router下的index.js中添加school模块的路由：

添加部分：

school模块的路由

vue-admin-template/src/router/index.js：

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

/* Layout */
import Layout from '@/layout'

/**
 * Note: sub-menu only appear when route children.length >= 1
 * Detail see: https://panjiachen.github.io/vue-element-admin-site/guide/essentials/router-and-nav.html
 *
 * hidden: true                   if set true, item will not show in the sidebar(default is false)
 * alwaysShow: true               if set true, will always show the root menu
 *                                if not set alwaysShow, when item has more than one children route,
 *                                it will becomes nested mode, otherwise not show the root menu
 * redirect: noRedirect           if set noRedirect will no redirect in the breadcrumb
 * name:'router-name'             the name is used by  (must set!!!)
 * meta : {
    roles: ['admin','editor']    control the page roles (you can set multiple roles)
    title: 'title'               the name show in sidebar and breadcrumb (recommend set)
    icon: 'svg-name'             the icon show in the sidebar
    breadcrumb: false            if set false, the item will hidden in breadcrumb(default is true)
    activeMenu: '/example/list'  if set path, the sidebar will highlight the path you set
  }
 */

/**
 * constantRoutes
 * a base page that does not have permission requirements
 * all roles can be accessed
 */
export const constantRoutes = [
  {
    path: '/login',
    component: () => import('@/views/login/index'),
    hidden: true
  },

  {
    path: '/school',
    component: Layout,
    meta: { title: '学校管理', icon: 'example' },
    redirect: 'school',
    children: [{
      path: 'school',
      name: 'school',
      component: () => import('@/views/school'),
      meta: { title: '学校管理', icon: 'school' }
    },
      {
        path: 'editor',
        name: 'editor',
        component: () => import('@/views/school/editor'),
        meta: { title: '添加学校', icon: 'school' }
      }]
  },

  {
    path: '/404',
    component: () => import('@/views/404'),
    hidden: true
  },

  {
    path: '/',
    component: Layout,
    redirect: '/dashboard',
    children: [{
      path: 'dashboard',
      name: 'Dashboard',
      component: () => import('@/views/dashboard/index'),
      meta: { title: 'Dashboard', icon: 'dashboard' }
    }]
  },
  // 404 page must be placed at the end !!!
  { path: '*', redirect: '/404', hidden: true }
]

const createRouter = () => new Router({
  // mode: 'history', // require service support
  scrollBehavior: () => ({ y: 0 }),
  routes: constantRoutes
})

const router = createRouter()

// Detail see: https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465
export function resetRouter() {
  const newRouter = createRouter()
  router.matcher = newRouter.matcher // reset router
}

export default router

这样学校管理模块就构建好了，最终的效果图

学校管理模块

实训三

学院管理篇（可将学校与学院关联起来）

一、从后端（projectName）添加学院模块

1、在models目录下添加academy.js：

image.png

projectName/db/models/academy.js：

const mongoose = require('mongoose')
const Schema= mongoose.Schema
const feld={
    name: String,
    //人物标签
    major:String,
    renshu: Number,
    school : { type: Schema.Types.ObjectId, ref: 'School' }
}
//自动添加更新时间创建时间:
let schema = new Schema(feld, {timestamps: {createdAt: 'created', updatedAt: 'updated'}})
module.exports= mongoose.model('Academy',schema)

2、在routes目录下添加academy.js：

projectName/routes/academy.js：

const router = require('koa-router')()
let Model = require("../db/models/academy");
router.prefix('/academy')

router.get('/', function (ctx, next) {
    ctx.body = 'this is a users response!'
})

router.post('/add', async function (ctx, next) {
    console.log(ctx.request.body)
    let model = new Model(ctx.request.body);
    model = await model.save();
    console.log('user',model)
    ctx.body = model
})

router.post('/find', async function (ctx, next) {
    let models = await Model.
    find({}).populate('school')
    ctx.body = models
})

router.post('/get', async function (ctx, next) {
    // let users = await User.
    // find({})
    console.log(ctx.request.body)
    let model = await Model.find(ctx.request.body)
    console.log(model)
    ctx.body = model
})

router.post('/update', async function (ctx, next) {
    console.log(ctx.request.body)
    let pbj = await Model.update({ _id: ctx.request.body._id }, ctx.request.body);
    ctx.body = pbj
})
router.post('/delete', async function (ctx, next) {
    console.log(ctx.request.body)
    await Model.remove({ _id: ctx.request.body._id });
    ctx.body = 'shibai '
})
module.exports = router

3、在app.js中加上academy模块的路由：

添加部分为：

academy模块的路由

projectName/app.js：

const Koa = require('koa')
const app = new Koa()
const views = require('koa-views')
const json = require('koa-json')
const onerror = require('koa-onerror')
const bodyparser = require('koa-bodyparser')
const logger = require('koa-logger')


const mongoose = require('mongoose')
const dbconfig = require('./db/config')
mongoose.connect(dbconfig.dbs,{useNewUrlParser: true,useUnifiedTopology: true})
const db = mongoose.connection
db.on('error',console.error.bind(console,'connection error:'));
db.once('open',function () {
  console.log('mongoose 连接成功')
});
// error handler
onerror(app)

// middlewares
app.use(bodyparser({
  enableTypes:['json', 'form', 'text']
}))
app.use(json())
app.use(logger())
app.use(require('koa-static')(__dirname + '/public'))

app.use(views(__dirname + '/views', {
  extension: 'pug'
}))

// logger
app.use(async (ctx, next) => {
  const start = new Date()
  await next()
  const ms = new Date() - start
  console.log(`${ctx.method} ${ctx.url} - ${ms}ms`)
})


// routes
const index = require('./routes/index')
app.use(index.routes(), index.allowedMethods())
const users = require('./routes/users')
app.use(users.routes(), users.allowedMethods())
const school = require('./routes/school')
app.use(school.routes(),school.allowedMethods())
const academy = require('./routes/academy')
app.use(academy.routes(), academy.allowedMethods())
// error-handling




app.on('error', (err, ctx) => {
  console.error('server error', err, ctx)
});

module.exports = app

二、从前端（vue-admin-template）添加学院模块

1、在src/views目录下添加academy目录（模块），如图所示：

前端布局的academy模块

①在academy目录下添加editor.vue：

vue-admin-template/src/views/academy/editor.vue：

效果图：

editor.vue的效果图

②在academy目录下添加index.vue：

vue-admin-template/src/views/academy/index.vue：

效果图：

index.vue的效果图

2、在router下的index.js中添加academy模块的路由：

添加部分：

academy模块的路由

vue-admin-template/src/router/index.js：

  {
    path: '/academy',
    component: Layout,
    meta: { title: '学院管理', icon: 'example' },
    redirect: 'academy',
    children: [{
      path: 'academy',
      name: 'academy',
      component: () => import('@/views/academy'),
      meta: { title: '学院管理', icon: 'academy' }
    },
      {
        path: 'editor',
        name: 'editor',
        component: () => import('@/views/academy/editor'),
        meta: { title: '添加学院', icon: 'academy' }
      }]
  },

总体代码如下：

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

/* Layout */
import Layout from '@/layout'

/**
 * Note: sub-menu only appear when route children.length >= 1
 * Detail see: https://panjiachen.github.io/vue-element-admin-site/guide/essentials/router-and-nav.html
 *
 * hidden: true                   if set true, item will not show in the sidebar(default is false)
 * alwaysShow: true               if set true, will always show the root menu
 *                                if not set alwaysShow, when item has more than one children route,
 *                                it will becomes nested mode, otherwise not show the root menu
 * redirect: noRedirect           if set noRedirect will no redirect in the breadcrumb
 * name:'router-name'             the name is used by  (must set!!!)
 * meta : {
    roles: ['admin','editor']    control the page roles (you can set multiple roles)
    title: 'title'               the name show in sidebar and breadcrumb (recommend set)
    icon: 'svg-name'             the icon show in the sidebar
    breadcrumb: false            if set false, the item will hidden in breadcrumb(default is true)
    activeMenu: '/example/list'  if set path, the sidebar will highlight the path you set
  }
 */

/**
 * constantRoutes
 * a base page that does not have permission requirements
 * all roles can be accessed
 */
export const constantRoutes = [
  {
    path: '/login',
    component: () => import('@/views/login/index'),
    hidden: true
  },

  {
    path: '/school',
    component: Layout,
    meta: { title: '学校管理', icon: 'example' },
    redirect: 'school',
    children: [{
      path: 'school',
      name: 'school',
      component: () => import('@/views/school'),
      meta: { title: '学校管理', icon: 'school' }
    },
      {
        path: 'editor',
        name: 'editor',
        component: () => import('@/views/school/editor'),
        meta: { title: '添加学校', icon: 'school' }
      }]
  },

  {
    path: '/academy',
    component: Layout,
    meta: { title: '学院管理', icon: 'example' },
    redirect: 'academy',
    children: [{
      path: 'academy',
      name: 'academy',
      component: () => import('@/views/academy'),
      meta: { title: '学院管理', icon: 'academy' }
    },
      {
        path: 'editor',
        name: 'editor',
        component: () => import('@/views/academy/editor'),
        meta: { title: '添加学院', icon: 'academy' }
      }]
  },

  {
    path: '/404',
    component: () => import('@/views/404'),
    hidden: true
  },

  {
    path: '/',
    component: Layout,
    redirect: '/dashboard',
    children: [{
      path: 'dashboard',
      name: 'Dashboard',
      component: () => import('@/views/dashboard/index'),
      meta: { title: 'Dashboard', icon: 'dashboard' }
    }]
  },
  // 404 page must be placed at the end !!!
  { path: '*', redirect: '/404', hidden: true }
]

const createRouter = () => new Router({
  // mode: 'history', // require service support
  scrollBehavior: () => ({ y: 0 }),
  routes: constantRoutes
})

const router = createRouter()

// Detail see: https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465
export function resetRouter() {
  const newRouter = createRouter()
  router.matcher = newRouter.matcher // reset router
}

export default router

这样学院管理模块就构建好了，最终的效果图：

学院管理模块

实训四

校园管理（可将学校、学院与班级关联起来）

一、从后端（projectName）添加班级模块

1、在models目录下添加classs.js：

image.png

projectName/db/models/classs.js：

const mongoose = require('mongoose')
const Schema= mongoose.Schema
const feld={
    name: String,
    //人物标签
    level:String,
    renshu: Number,
    school : { type: Schema.Types.ObjectId, ref: 'School' },
    academy : { type: Schema.Types.ObjectId, ref: 'Academy' }
}
//自动添加更新时间创建时间:
let personSchema = new mongoose.Schema(feld, {timestamps: {createdAt: 'created', updatedAt: 'updated'}})
module.exports= mongoose.model('Classs',personSchema)

2、在routes目录下添加classs.js：

image.png

projectName/routes/classs.js：

const router = require('koa-router')()
let Model = require("../db/models/classs");
router.prefix('/classs')

router.get('/', function (ctx, next) {
    ctx.body = 'this is a users response!'
})

router.post('/add', async function (ctx, next) {
    console.log(ctx.request.body)
    let model = new Model(ctx.request.body);
    model = await model.save();
    console.log('user',model)
    ctx.body = model
})

router.post('/find', async function (ctx, next) {
    let models = await Model.
    find({}).populate('academy').populate('school')
    ctx.body = models
})


router.post('/get', async function (ctx, next) {
    // let users = await User.
    // find({})
    console.log(ctx.request.body)
    let model = await Model.find(ctx.request.body)
    console.log(model)
    ctx.body = model
})

router.post('/update', async function (ctx, next) {
    console.log(ctx.request.body)
    let pbj = await Model.update({ _id: ctx.request.body._id }, ctx.request.body);
    ctx.body = pbj
})
router.post('/delete', async function (ctx, next) {
    console.log(ctx.request.body)
    await Model.remove({ _id: ctx.request.body._id });
    ctx.body = 'shibai '
})
module.exports = router

3、在app.js中加上classs模块的路由：

添加部分为:

classs模块的路由

projectName/app.js：

const Koa = require('koa')
const app = new Koa()
const views = require('koa-views')
const json = require('koa-json')
const onerror = require('koa-onerror')
const bodyparser = require('koa-bodyparser')
const logger = require('koa-logger')


const mongoose = require('mongoose')
const dbconfig = require('./db/config')
mongoose.connect(dbconfig.dbs,{useNewUrlParser: true,useUnifiedTopology: true})
const db = mongoose.connection
db.on('error',console.error.bind(console,'connection error:'));
db.once('open',function () {
  console.log('mongoose 连接成功')
});
// error handler
onerror(app)

// middlewares
app.use(bodyparser({
  enableTypes:['json', 'form', 'text']
}))
app.use(json())
app.use(logger())
app.use(require('koa-static')(__dirname + '/public'))

app.use(views(__dirname + '/views', {
  extension: 'pug'
}))

// logger
app.use(async (ctx, next) => {
  const start = new Date()
  await next()
  const ms = new Date() - start
  console.log(`${ctx.method} ${ctx.url} - ${ms}ms`)
})


// routes
const index = require('./routes/index')
app.use(index.routes(), index.allowedMethods())
const users = require('./routes/users')
app.use(users.routes(), users.allowedMethods())
const school = require('./routes/school')
app.use(school.routes(),school.allowedMethods())
const academy = require('./routes/academy')
app.use(academy.routes(), academy.allowedMethods())
const classs = require('./routes/classs')
app.use(classs.routes(), classs.allowedMethods())
// error-handling




app.on('error', (err, ctx) => {
  console.error('server error', err, ctx)
});

module.exports = app

二、从前端（vue-admin-template）添加班级模块

1、在src/views目录下添加classs目录（模块），如图所示：

前端布局的classs模块

①在classs目录下添加editor.vue：

vue-admin-template/src/views/classs/editor.vue：

效果图：

editor.vue的效果图

②在classs目录下添加index.vue：

vue-admin-template/src/views/classs/index.vue

效果图：

index.vue的效果图

2、在router下的index.js中添加classs模块的路由：

添加部分

classs模块的路由

vue-admin-template/src/router/index.js：

  {
    path: '/classs',
    component: Layout,
    meta: { title: '班级管理', icon: 'example' },
    redirect: '/classs',
    children: [{
      path: 'classs',
      name: 'classs',
      component: () => import('@/views/classs'),
      meta: { title: '班级管理', icon: 'classs' }
    },
      {
        path: 'editor',
        name: 'editor',
        component: () => import('@/views/classs/editor'),
        meta: { title: '添加班级', icon: 'classs' }
      }]
  },

总体代码如下：

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

/* Layout */
import Layout from '@/layout'

/**
 * Note: sub-menu only appear when route children.length >= 1
 * Detail see: https://panjiachen.github.io/vue-element-admin-site/guide/essentials/router-and-nav.html
 *
 * hidden: true                   if set true, item will not show in the sidebar(default is false)
 * alwaysShow: true               if set true, will always show the root menu
 *                                if not set alwaysShow, when item has more than one children route,
 *                                it will becomes nested mode, otherwise not show the root menu
 * redirect: noRedirect           if set noRedirect will no redirect in the breadcrumb
 * name:'router-name'             the name is used by  (must set!!!)
 * meta : {
    roles: ['admin','editor']    control the page roles (you can set multiple roles)
    title: 'title'               the name show in sidebar and breadcrumb (recommend set)
    icon: 'svg-name'             the icon show in the sidebar
    breadcrumb: false            if set false, the item will hidden in breadcrumb(default is true)
    activeMenu: '/example/list'  if set path, the sidebar will highlight the path you set
  }
 */

/**
 * constantRoutes
 * a base page that does not have permission requirements
 * all roles can be accessed
 */
export const constantRoutes = [
  {
    path: '/login',
    component: () => import('@/views/login/index'),
    hidden: true
  },

  {
    path: '/school',
    component: Layout,
    meta: { title: '学校管理', icon: 'example' },
    redirect: 'school',
    children: [{
      path: 'school',
      name: 'school',
      component: () => import('@/views/school'),
      meta: { title: '学校管理', icon: 'school' }
    },
      {
        path: 'editor',
        name: 'editor',
        component: () => import('@/views/school/editor'),
        meta: { title: '添加学校', icon: 'school' }
      }]
  },

  {
    path: '/academy',
    component: Layout,
    meta: { title: '学院管理', icon: 'example' },
    redirect: 'academy',
    children: [{
      path: 'academy',
      name: 'academy',
      component: () => import('@/views/academy'),
      meta: { title: '学院管理', icon: 'academy' }
    },
      {
        path: 'editor',
        name: 'editor',
        component: () => import('@/views/academy/editor'),
        meta: { title: '添加学院', icon: 'academy' }
      }]
  },

  {
    path: '/classs',
    component: Layout,
    meta: { title: '班级管理', icon: 'example' },
    redirect: 'classs',
    children: [{
      path: 'classs',
      name: 'classs',
      component: () => import('@/views/classs'),
      meta: { title: '班级管理', icon: 'classs' }
    },
      {
        path: 'editor',
        name: 'editor',
        component: () => import('@/views/classs/editor'),
        meta: { title: '添加班级', icon: 'classs' }
      }]
  },

  {
    path: '/404',
    component: () => import('@/views/404'),
    hidden: true
  },

  {
    path: '/',
    component: Layout,
    redirect: '/dashboard',
    children: [{
      path: 'dashboard',
      name: 'Dashboard',
      component: () => import('@/views/dashboard/index'),
      meta: { title: 'Dashboard', icon: 'dashboard' }
    }]
  },
  // 404 page must be placed at the end !!!
  { path: '*', redirect: '/404', hidden: true }
]

const createRouter = () => new Router({
  // mode: 'history', // require service support
  scrollBehavior: () => ({ y: 0 }),
  routes: constantRoutes
})

const router = createRouter()

// Detail see: https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465
export function resetRouter() {
  const newRouter = createRouter()
  router.matcher = newRouter.matcher // reset router
}

export default router

这样班级管理模块就构建好了，最终的效果图：

班级管理模块

网站前端开发-校园管理系统实训

实训一

1、安装 nodejs

进入 node 网站：https://nodejs.org/zh-cn/，下载nodejs

2、安装 git

进入 git 网站：https://git-scm.com/downloads，下载git

前端：

3、下载 vue-admin-template（前端）

项目运行成功后打开浏览器

4、开始创建项目

我所使用的开发软件是JetBrains WebStorm

①下载vue-admin-template

②进入vue-admin-template项目

③初始化vue-admin-template项目

④运行vue-admin-template

5、编辑vue-admin-template项目

（1）找到vue-admin-template/src/router/index.js，将以下代码删除

则index.js的内容为：

效果图：

（2）安装ES6语法插件

（3）编写Axios 插件

①在vue-admin-template/src/untils中添加http.js：

②配置axios代理：

添加部分为：

修改完vue.config.js的代码为：

vue-admin-template/vue.config.js：

（4）在vue-admin-template/src/utils/main.js添加http的路由

（5）在dashboard中调用接口

添加部分为： image.png

vue-admin-template/src/views/dashboard/index.vue：

后端

6.安装koa-generator

①下载koa-generator：

②构建koa2项目（搭建后端项目平台）：

成功的信息：

③进入projectName项目:

④初始化projectName项目

⑤运行projectName项目

这里koa2模板提示信息做的并不好，没有输出测试地址，成功后出现如下界面代表成功了。成功的信息：

在浏览器打开地址：（默认是3000）

出现koa2的欢迎界面就代表成功了。

7、安装本地mongodb或者在mongodb官网新建免费的云端服务器

数据库代码（这是我的数据库，若有建此项目时，需要换成自己的数据库）：

如何创建自己的数据库：/

找到mongodb的官网，注册登录

连接数据库

选择connect，就会出现以下界面

选择Connect Your Application，就会出现以下界面

8、安装mongoose

若安装过程问题:卡着不动

解决该问题如下：

9、编辑projectName项目

在projectName下创建db目录：

①在db下创建config.js

projectName/db/config.js：

此处需要修改为上面的数据库链接，还要将密码填写进去

②在db下创建models目录

在models创建user.js

projectName/db/models/user.js：

③修改app.js

添加部分为：

④在users.js中添加user的路由

projectName/routes/users.js：

10、重启项目

关闭正在运行的dev后，重新启动服务

如果出现了一下信息，则数据库连接成功

效果图：

到此整个前后端平台搭建成功，可以开始创建项目了

实训二

学校管理篇

一、从后端（projectName）添加学校模块

1、在models目录下添加school.js：

projectName/db/models/school.js：

2、在routes目录下添加school.js：

3、在app.js中加上school模块的路由：

添加部分为：

二、从前端（vue-admin-template）添加学校模块

1、在src/views目录下添加school目录（模块），如图所示：

①在school目录下添加editor.vue：

vue-admin-template/src/views/school/editor.vue：

添加部分为：

image.png