校园管理系统 |柒秒

school-manager校园管理后台服务,实现了简单的校园管理业务。

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

集成方案: vue-element-admin
基础模板: vue-admin-template
桌面终端: electron-vue-admin
Typescript 版: vue-typescript-admin-template (鸣谢: @Armour)
Others: awesome-project

• 特点
  1、学校增删改查
  2、学院增删改查
  3、班级增删改查
  4、学生增删改查
  5、教师增删改查

• 软件架构
  nodejs （koa2 mongoose）
  elemet-ui
  admin-element

• 开发工具
  数据库：mongodb
  vscode

• 安装教程

前端服务代码vue-admin-template
1、安装nodejs:http://nodejs.cn/
2、安装git:https://git-scm.com/downloads
3、下载vue-element-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

启动成功效果图


删除router/index下的代码，结果代码如下

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 <keep-alive> (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: '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

安装ES6语法插件：

npm install --save es6-promise

在utils下新建一个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;

在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')
        }
      )
  }
}

main.js中加入http:

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

在index.vue调用接口：

<template>
  <div class="dashboard-container">
    欢迎
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'

  export default {
    name: 'Dashboard',
    computed: {
      ...mapGetters([
        'name'
      ])
    },
    mounted(){
      this.$http.get('/api/users/add').then(res => {
        console.log('this.panels', res)
      })
    }
  }
</script>

<style lang="scss" scoped>
  .dashboard {
    &-container {
      margin: 30px;
    }
    &-text {
      font-size: 30px;
      line-height: 46px;
    }
  }
</style>

全局化安装koa-generator：

npm install -g koa-generator

创建后台项目：（本文以test为例）

koa2 test
//进入项目
cd projectName
//初始化项目
npm install
//运行项目
npm run dev
//运行成功的效果
D:\project\test>npm run dev

> test@0.1.0 dev D:\project\test
> 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`

打开http://localhost:3000/,
出现koa2的欢迎界面就代表成功了

在mongodb官网新建数据库
在后台项目test下新建db目录
旗下有db/models/user.js，db/config.js
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'
}

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：

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 index = require('./routes/index')
const users = require('./routes/users')


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
app.use(index.routes(), index.allowedMethods())
app.use(users.routes(), users.allowedMethods())

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

module.exports = app

// 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
app.use(index.routes(), index.allowedMethods())
app.use(users.routes(), users.allowedMethods())

// error-handling
app.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/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

重启项目，成功连接数据库即可

到这里前端就已经设置成功了
接着是添加后台项目的代码
在db下的models目录创建模块，routes下添加路由


用浏览器访问http://localhost:9528，最终的界面效果如下：