教务系统实训一

实训(一)

1.安装 nodejs

2.安装 git

3.下载 vue-element-admin

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

cd vue-admin-template

npm install

npm run dev


启动成功


启动成功

进入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'/'el-icon-x' 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: '首页', icon: 'dashboard' }

    }]

  },

    {

      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: '/student',

      component: Layout,

      meta: { title: '学生管理', icon: 'example' },

      redirect: '/student',

      children: [{

        path: 'student',

        name: 'student',

        component: () => import('@/views/student/index'),

        meta: { title: '学生管理', icon: 'user' }

      },

        {

          path: 'editor',

          name: 'editor',

          component: () => import('@/views/student/editor'),

          meta: { title: '添加学生', icon: 'user' }

        }]

    },


    {

        path: '/teacher',

        component: Layout,

        meta: { title: '老师管理', icon: 'example' },

        redirect: '/teacher',

        children: [{

          path: 'teacher',

          name: 'teacher',

          component: () => import('@/views/teacher'),

          meta: { title: '老师管理', icon: 'user' }

        },

          {

            path: 'editor',

            name: 'editor',

            component: () => import('@/views/teacher/editor'),

            meta: { title: '添加老师', icon: 'user' }

          }]

      },


      // 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

安装ES6语法插件

npm install --save es6-promise

打开utils/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代理,修改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')

        }

      )

  }

}


在src/main.js 最后插入http,结果如下:

import http from './utils/http'

Vue.use(http)

打开views/dashboard/index.vue文件,结果如下:

  .dashboard {

    &-container {

      margin: 30px;

    }

    &-text {

      font-size: 30px;

      line-height: 46px;

    }

  }

全局安装koa-generator,执行下面命令

npm install -g koa-generator

构建koa2项目代码如下

koa2 projectName


构建成功

初始化后台项目插件,命令属下:

cd projectName

npm install

项目试运行

npm run dev

在浏览器打开地址:

http://localhost:3000/

出现koa2的欢迎界面则代表成功


启动成功

安装mongoose

npm install mongoose --save

打开projectName项目,创建db文件夹和config.js

更换自己的密码

module.exports={// dbs: 'mongodb://139.159.253.110:27017/test1'dbs:'mongodb+srv://xxwozixin:<需要修改>@cluster0-7d5kk.mongodb.net/test?retryWrites=true&w=majority'}

打开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

constKoa=require('koa')constapp=newKoa()constviews=require('koa-views')constjson=require('koa-json')constonerror=require('koa-onerror')constbodyparser=require('koa-bodyparser')constlogger=require('koa-logger')constindex=require('./routes/index')constusers=require('./routes/users')constmongoose=require('mongoose')constdbconfig=require('./db/config')mongoose.connect(dbconfig.dbs,{useNewUrlParser:true,useUnifiedTopology:true})constdb=mongoose.connectiondb.on('error',console.error.bind(console,'connection error:'));db.once('open',function(){console.log('mongoose 连接成功')});// error handleronerror(app)// middlewaresapp.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'}))// loggerapp.use(async(ctx,next)=>{conststart=newDate()awaitnext()constms=newDate()-startconsole.log(`${ctx.method} ${ctx.url} - ${ms}ms`)})// routesapp.use(index.routes(),index.allowedMethods())app.use(users.routes(),users.allowedMethods())// error-handlingapp.on('error',(err,ctx)=>{console.error('server error',err,ctx)});module.exports=app// error handleronerror(app)// middlewaresapp.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'}))// loggerapp.use(async(ctx,next)=>{conststart=newDate()awaitnext()constms=newDate()-startconsole.log(`${ctx.method} ${ctx.url} - ${ms}ms`)})// routesapp.use(index.routes(),index.allowedMethods())app.use(users.routes(),users.allowedMethods())// error-handlingapp.on('error',(err,ctx)=>{console.error('server error',err,ctx)});module.exports=app

打开routes/users.js,结果如下:

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 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

启动的服务在运行

npm run dev


你可能感兴趣的:(教务系统实训一)