實(shí)訓(xùn)五
學(xué)生管理篇（可將學(xué)校毁渗、學(xué)院题暖、班級(jí)與學(xué)生關(guān)聯(lián)起來）
一、從后端（projectName）添加學(xué)生模塊
1梆暮、在models目錄下添加student.js：
image.png
projectName/db/models/student.js：
const mongoose = require('mongoose')
const Schema = mongoose.Schema
const feld={
name: String,
age: Number,
student_number:Number,
gender:String,
school : { type: Schema.Types.ObjectId, ref: 'School' },
academy : { type: Schema.Types.ObjectId, ref: 'Academy' },
classs : { type: Schema.Types.ObjectId, ref: 'Classs' }
}
//自動(dòng)添加更新時(shí)間創(chuàng)建時(shí)間:
let personSchema = new mongoose.Schema(feld, {timestamps: {createdAt: 'created', updatedAt: 'updated'}})
module.exports= mongoose.model('Student',personSchema)
2服协、在routes目錄下添加student.js：
image.png
let Model = require("../db/models/student");
router.prefix('/student')
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('classs').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中加上student模塊的路由：
添加部分為：
student模塊的路由
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())
const student = require('./routes/student')
app.use(student.routes(), student.allowedMethods())
// error-handling
app.on('error', (err, ctx) => {
console.error('server error', err, ctx)
});
module.exports = app
二惕蹄、從前端（vue-admin-template）添加學(xué)生模塊
1蚯涮、在src/views目錄下添加student目錄（模塊）治专，如圖所示：
前端布局的student模塊
①在student目錄下添加editor.vue：
vue-admin-template/src/views/student/editor.vue：
<template>
<div class="dashboard-container">
<el-form ref="form" :model="form" label-width="80px">
<el-form-item label="所屬學(xué)校">
<el-select v-model="form.school" placeholder="請(qǐng)選擇" @change="schoolChange">
<el-option
v-for="item in schools"
:key="item._id"
:label="item.name"
:value="item._id">
</el-option>
</el-select>
</el-form-item>
<!-- 編輯框：學(xué)院選擇列表-->
<el-form-item label="所屬學(xué)院">
<el-select v-model="form.academy" placeholder="請(qǐng)選擇">
<el-option
v-for="item in academys"
:key="item._id"
:label="item.name"
:value="item._id">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="所屬班級(jí)">
<el-select v-model="form.classs" placeholder="請(qǐng)選擇">
<el-option
v-for="item in classs"
:key="item._id"
:label="item.name"
:value="item._id">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="用戶名">
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="年齡">
<el-input v-model="form.age"></el-input>
</el-form-item>
<el-form-item label="學(xué)號(hào)">
<el-input v-model="form.student_number"></el-input>
</el-form-item>
<el-form-item label="性別">
<el-input v-model="form.gender"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">立即創(chuàng)建</el-button>
<el-button>取消</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
name: 'student',
computed: {
...mapGetters([
'name'
])
},
data(){
return{
schools:[],
academys:[],
classs:[],
options: [
],
apiModel:'student',
form:{}
}
},
methods:{
onSubmit(){
if(this.form._id){
this.$http.post(`/api/${this.apiModel}/update`,this.form).then(res => {
console.log('bar:', res)
this.$router.push({path:this.apiModel})
this.form={}
})
}else
{
this.$http.post('/api/'+this.apiModel+'/add',this.form).then(res => {
console.log('bar:', res)
this.$router.push({path:this.apiModel})
this.form={}
})
}
},
schoolChange(val1){
//顯示學(xué)院選擇欄目
this.$http.post('/api/academy/get',{school:val1}).then(res => {
if(res&&res.length>0){
this.academys = res
console.log('res:', res)
}
})
}
},
mounted() {
if(this.$route.query._id){
this.$http.post('/api/'+this.apiModel+'/get',{_id:this.$route.query._id}).then(res => {
if(res&&res.length>0){
this.form = res[0]
this.schoolChange(this.form.school)
}
})
}
//顯示學(xué)校選擇欄目
this.$http.post('/api/school/find').then(res => {
if(res&&res.length>0){
this.schools = res
console.log('res:', res)
}
})
//顯示班級(jí)欄目
this.$http.post('/api/classs/find').then(res => {
if(res&&res.length>0){
this.classs = res
console.log('res:', res)
}
})
}
}
</script>
<style lang="scss" scoped>
.dashboard {
&-container {
margin: 30px;
}
&-text {
font-size: 30px;
line-height: 46px;
}
}
</style>
效果圖：
editor.vue的效果圖
②在student目錄下添加index.vue：
vue-admin-template/src/views/student/index.vue：
<template>
<div class="dashboard-container">
<el-table
:data="users"
style="width: 100%"
:row-class-name="tableRowClassName">
<el-table-column
prop="name"
label="名字"
width="180">
</el-table-column>
<el-table-column
prop="age"
label="年齡"
width="180">
</el-table-column>
<el-table-column
prop="student_number"
label="學(xué)號(hào)">
</el-table-column>
<el-table-column
prop="gender"
label="性別">
</el-table-column>
<!-- 列表添加項(xiàng)目
-->
<el-table-column
prop="school"
label="學(xué)校名稱"
width="180">
<template slot-scope="scope" >
<span class="" v-if="scope.row.school">
<el-tag
:type="scope.row.school.name === '深圳信息職業(yè)技術(shù)學(xué)院' ? 'primary' : 'success'"
disable-transitions>{{scope.row.school.name}}</el-tag>
</span>
</template>
</el-table-column>
<el-table-column
prop="academy"
label="學(xué)院名稱"
width="180">
<template slot-scope="scope" >
<span class="" v-if="scope.row.academy">
<el-tag
:type="scope.row.academy.name === '軟件學(xué)院' ? 'primary' : 'success'"
disable-transitions>{{scope.row.academy.name}}</el-tag>
</span>
</template>
</el-table-column>
<el-table-column
prop="classs"
label="班級(jí)名稱"
width="180">
<template slot-scope="scope" >
<span class="" v-if="scope.row.classs">
<el-tag
:type="scope.row.classs.name === '18軟工4-3' ? 'primary' : 'success'"
disable-transitions>{{scope.row.classs.name}}</el-tag>
</span>
</template>
</el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button
size="mini"
@click="handleEdit(scope.$index, scope.row)">編輯
</el-button>
<el-button
size="mini"
type="danger"
@click="handleDelete(scope.$index, scope.row)">刪除
</el-button>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
name: 'student',
computed: {
...mapGetters([
'name'
])
},
data() {
return {
apiModel:'student',
users: {}
}
},
methods: {
onSubmit() {
console.log(123434)
},
handleEdit(index, item) {
this.$router.push({ path: '/'+this.apiModel+'/editor', query: {_id:item._id} })
},
handleDelete(index, item) {
this.$http.post('/api/'+this.apiModel+'/delete', item).then(res => {
console.log('res:', res)
this.findUser()
})
},
findUser(){
this.$http.post('/api/'+this.apiModel+'/find', this.user).then(res => {
console.log('res:', res)
this.users = res
})
}
},
mounted() {
this.findUser()
}
}
</script>
<style lang="scss" scoped>
.dashboard {
&-container {
margin: 30px;
}
&-text {
font-size: 30px;
line-height: 46px;
}
}
</style>
效果圖：
index.vue的效果圖
2卖陵、在router下的index.js中添加student模塊的路由：
添加部分：
student模塊的路由
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 <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' 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: '學(xué)校管理', icon: 'example' },
redirect: 'school',
children: [{
path: 'school',
name: 'school',
component: () => import('@/views/school/index'),
meta: { title: '學(xué)校管理', icon: 'school' }
},
{
path: 'editor',
name: 'editor',
component: () => import('@/views/school/editor'),
meta: { title: '添加學(xué)校', icon: 'school' }
}]
},
{
path: '/academy',
component: Layout,
meta: { title: '學(xué)院管理', icon: 'example' },
redirect: 'academy',
children: [{
path: 'academy',
name: 'academy',
component: () => import('@/views/academy/index'),
meta: { title: '學(xué)院管理', icon: 'academy' }
},
{
path: 'editor',
name: 'editor',
component: () => import('@/views/academy/editor'),
meta: { title: '添加學(xué)院', icon: 'academy' }
}]
},
{
path: '/classs',
component: Layout,
meta: { title: '班級(jí)管理', icon: 'example' },
redirect: 'classs',
children: [{
path: 'classs',
name: 'classs',
component: () => import('@/views/classs/index'),
meta: { title: '班級(jí)管理', icon: 'classs' }
},
{
path: 'editor',
name: 'editor',
component: () => import('@/views/classs/editor'),
meta: { title: '添加班級(jí)', icon: 'classs' }
}]
},
{
path: '/student',
component: Layout,
meta: { title: '學(xué)生管理', icon: 'example' },
redirect: 'student',
children: [{
path: 'student',
name: 'student',
component: () => import('@/views/student/index'),
meta: { title: '學(xué)生管理', icon: 'student' }
},
{
path: 'editor',
name: 'editor',
component: () => import('@/views/student/editor'),
meta: { title: '添加學(xué)生', icon: 'student' }
}]
},
{
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
這樣學(xué)生管理模塊就構(gòu)建好了，最終的效果圖：
學(xué)生管理模塊
實(shí)訓(xùn)六
教師管理篇（可將學(xué)校张峰、學(xué)院泪蔫、班級(jí)、學(xué)生與教師關(guān)聯(lián)起來）
一喘批、從后端（projectName）添加教師模塊
1撩荣、在models目錄下添加teacher.js：
image.png
projectName/db/models/teacher.js：
const mongoose = require('mongoose')
const Schema= mongoose.Schema
const feld={
name: String,
age: String,
//人物標(biāo)簽
level:String,
gender:String,
school : { type: Schema.Types.ObjectId, ref: 'School' },
academy : { type: Schema.Types.ObjectId, ref: 'Academy' }
}
//自動(dòng)添加更新時(shí)間創(chuàng)建時(shí)間:
let personSchema = new mongoose.Schema(feld, {timestamps: {createdAt: 'created', updatedAt: 'updated'}})
module.exports= mongoose.model('Teacher',personSchema)
2铣揉、在routes目錄下添加teacher.js：
image.png
projectName/routes/teacher.js：
const router = require('koa-router')()
let Model = require("../db/models/teacher");
router.prefix('/teacher')
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中加上teacher模塊的路由：
添加部分為：
teacher模塊的路由
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())
const student = require('./routes/student')
app.use(student.routes(), student.allowedMethods())
const teacher = require('./routes/teacher')
app.use(teacher.routes(), teacher.allowedMethods())
// error-handling
app.on('error', (err, ctx) => {
console.error('server error', err, ctx)
});
module.exports = app
二餐曹、從前端（vue-admin-template）添加教師模塊
1逛拱、在src/views目錄下添加teacher目錄（模塊），如圖所示：
前端布局的teacher模塊
①在teacher目錄下添加editor.vue：
vue-admin-template/src/views/teacher/editor.vue：
<template>
<div class="dashboard-container">
<el-form ref="form" :model="form" label-width="80px">
<el-form-item label="所屬學(xué)校">
<el-select v-model="form.school" placeholder="請(qǐng)選擇" @change="schoolChange">
<el-option
v-for="item in schools"
:key="item._id"
:label="item.name"
:value="item._id">
</el-option>
</el-select>
</el-form-item>
<!-- 編輯框：學(xué)院選擇列表-->
<el-form-item label="所屬學(xué)院">
<el-select v-model="form.academy" placeholder="請(qǐng)選擇">
<el-option
v-for="item in academys"
:key="item._id"
:label="item.name"
:value="item._id">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="用戶名">
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="年齡">
<el-input v-model="form.age"></el-input>
</el-form-item>
<el-form-item label="性別">
<el-input v-model="form.gender"></el-input>
</el-form-item>
<el-form-item label="級(jí)別">
<el-input v-model="form.level"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">立即創(chuàng)建</el-button>
<el-button>取消</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
name: 'teacher-editor',
computed: {
...mapGetters([
'name'
])
},
data(){
return{
schools:[],
academys:[],
options: [
],
apiModel:'teacher',
form:{}
}
},
methods:{
onSubmit(){
if(this.form._id){
this.$http.post(`/api/${this.apiModel}/update`,this.form).then(res => {
console.log('bar:', res)
this.$router.push({path:this.apiModel})
this.form={}
})
}else
{
this.$http.post('/api/'+this.apiModel+'/add',this.form).then(res => {
console.log('bar:', res)
this.$router.push({path:this.apiModel})
this.form={}
})
}
},
schoolChange(val1){
//顯示學(xué)院選擇欄目
this.$http.post('/api/academy/get',{school:val1}).then(res => {
if(res&&res.length>0){
this.academys = res
console.log('res:', res)
}
})
}
},
mounted() {
if(this.$route.query._id){
this.$http.post('/api/'+this.apiModel+'/get',{_id:this.$route.query._id}).then(res => {
if(res&&res.length>0){
this.form = res[0]
this.schoolChange(this.form.school)
}
})
}
//顯示學(xué)校選擇欄目
this.$http.post('/api/school/find').then(res => {
if(res&&res.length>0){
this.schools = res
console.log('res:', res)
}
})
}
}
</script>
<style lang="scss" scoped>
.dashboard {
&-container {
margin: 30px;
}
&-text {
font-size: 30px;
line-height: 46px;
}
}
</style>
效果圖：
editor.vue的效果圖
②在teacher目錄下添加index.vue：
vue-admin-template/src/views/teacher/index.vue：
<template>
<div class="dashboard-container">
<el-table
:data="users"
style="width: 100%"
:row-class-name="tableRowClassName">
<el-table-column
prop="name"
label="名字"
width="180">
</el-table-column>
<el-table-column
prop="age"
label="年齡"
width="180">
</el-table-column>
<el-table-column
prop="level"
label="等級(jí)">
</el-table-column>
<el-table-column
prop="gender"
label="性別">
</el-table-column>
<!-- 列表添加項(xiàng)目
-->
<el-table-column
prop="school"
label="學(xué)校名稱"
width="180">
<template slot-scope="scope" >
<span class="" v-if="scope.row.school">
<el-tag
:type="scope.row.school.name === '深圳信息職業(yè)技術(shù)學(xué)院' ? 'primary' : 'success'"
disable-transitions>{{scope.row.school.name}}</el-tag>
</span>
</template>
</el-table-column>
<el-table-column
prop="academy"
label="學(xué)院名稱"
width="180">
<template slot-scope="scope" >
<span class="" v-if="scope.row.academy">
<el-tag
:type="scope.row.academy.name === '軟件學(xué)院' ? 'primary' : 'success'"
disable-transitions>{{scope.row.academy.name}}</el-tag>
</span>
</template>
</el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button
size="mini"
@click="handleEdit(scope.$index, scope.row)">編輯
</el-button>
<el-button
size="mini"
type="danger"
@click="handleDelete(scope.$index, scope.row)">刪除
</el-button>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
name: 'teacher',
computed: {
...mapGetters([
'name'
])
},
data() {
return {
apiModel:'teacher',
users: {}
}
},
methods: {
onSubmit() {
console.log(123434)
},
handleEdit(index, item) {
this.$router.push({ path: '/'+this.apiModel+'/editor', query: {_id:item._id} })
},
handleDelete(index, item) {
this.$http.post('/api/'+this.apiModel+'/delete', item).then(res => {
console.log('res:', res)
this.findUser()
})
},
findUser(){
this.$http.post('/api/'+this.apiModel+'/find', this.user).then(res => {
console.log('res:', res)
this.users = res
})
}
},
mounted() {
this.findUser()
}
}
</script>
<style lang="scss" scoped>
.dashboard {
&-container {
margin: 30px;
}
&-text {
font-size: 30px;
line-height: 46px;
}
}
</style>
效果圖：
index.vue的效果圖
2台猴、在router下的index.js中添加teacher模塊的路由：
添加部分：
teacher模塊的路由
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 <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' 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: '/school',
component: Layout,
meta: { title: '學(xué)校管理', icon: 'example' },
redirect: 'school',
children: [{
path: 'school',
name: 'school',
component: () => import('@/views/school'),
meta: { title: '學(xué)校管理', icon: 'school' }
},
{
path: 'editor',
name: 'editor',
component: () => import('@/views/school/editor'),
meta: { title: '添加學(xué)校', icon: 'school' }
}]
},
{
path: '/academy',
component: Layout,
meta: { title: '學(xué)院管理', icon: 'example' },
redirect: 'academy',
children: [{
path: 'academy',
name: 'academy',
component: () => import('@/views/academy'),
meta: { title: '學(xué)院管理', icon: 'academy' }
},
{
path: 'editor',
name: 'editor',
component: () => import('@/views/academy/editor'),
meta: { title: '添加學(xué)院', icon: 'academy' }
}]
},
{
path: '/classs',
component: Layout,
meta: { title: '班級(jí)管理', icon: 'example' },
redirect: '/classs',
children: [{
path: 'classs',
name: 'classs',
component: () => import('@/views/classs'),
meta: { title: '班級(jí)管理', icon: 'classs' }
},
{
path: 'editor',
name: 'editor',
component: () => import('@/views/classs/editor'),
meta: { title: '添加班級(jí)', icon: 'classs' }
}]
},
{
path: '/student',
component: Layout,
meta: { title: '學(xué)生管理', icon: 'example' },
redirect: '/student',
children: [{
path: 'student',
name: 'student',
component: () => import('@/views/student/index'),
meta: { title: '學(xué)生管理', icon: 'user' }
},
{
path: 'editor',
name: 'editor',
component: () => import('@/views/student/editor'),
meta: { title: '添加學(xué)生', 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' }
}]
},
{
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
這樣教師管理模塊就構(gòu)建好了朽合，最終的效果圖：
教師管理模塊
const school = require('./routes/school')
const academy = require('./routes/academy')
const classs= require('./routes/classs')
const student= require('./routes/student')
const teacher= require('./routes/teacher')
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())
app.use(school.routes(),school.allowedMethods())
app.use(academy.routes(), academy.allowedMethods())
app.use(classs.routes(), classs.allowedMethods())
app.use(student.routes(), student.allowedMethods())
app.use(teacher.routes(), teacher.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
校園管理系統(tǒng)（總結(jié)）
介紹
school-manager校園管理后臺(tái)服務(wù)
實(shí)現(xiàn)了簡(jiǎn)單的校園管理業(yè)務(wù)。
特點(diǎn)：
- 1饱狂、學(xué)校增刪改查
- 2曹步、學(xué)院增刪改查
- 3、班級(jí)增刪改查
- 4休讳、學(xué)生增刪改查
- 5讲婚、教師增刪改查
軟件架構(gòu)：
nodejs （koa2 mongoose）
elemet-ui
admin-element
開發(fā)工具：
數(shù)據(jù)庫：mongodb
ide（項(xiàng)目開發(fā)工具）：webstorm
安裝教程
一、后端服務(wù)代碼地址 school-manager-server 代碼倉庫（即 projectName）
https://gitee.com/xdnclover/school-manager-server
#克隆項(xiàng)目
git clone https://gitee.com/xdnclover/school-manager-server.git
#進(jìn)入項(xiàng)目的目錄
cd school-manager-server
#安裝項(xiàng)目依賴包
npm install
# 建議不要直接使用 cnpm 安裝以來俊柔，會(huì)有各種詭異的 bug筹麸。可以通過如下操作解決 npm 下載速度慢的問題
npm install --registry=https://registry.npm.taobao.org
#啟動(dòng)項(xiàng)目
npm run dev
二雏婶、前端服務(wù)代碼地址 school-manager-admin 代碼倉庫（即 vue-admin-template）
https://gitee.com/xdnclover/school-manager-admin
#克隆項(xiàng)目
git clone https://gitee.com/xdnclover/school-manager-admin.git
#進(jìn)入項(xiàng)目的目錄
cd school-manager-admin
#安裝項(xiàng)目依賴包
npm install
# 建議不要直接使用 cnpm 安裝以來竹捉，會(huì)有各種詭異的 bug∩薪荆可以通過如下操作解決 npm 下載速度慢的問題
npm install --registry=https://registry.npm.taobao.org
#啟動(dòng)項(xiàng)目
npm run dev
參與文獻(xiàn)
school-manager-admin
school-manager-admin這是一個(gè)極簡(jiǎn)的 vue admin 管理后臺(tái)块差。它只包含了 Element UI & axios & iconfont & permission control & lint，這些搭建后臺(tái)必要的東西倔丈。
目前版本為 v4.0+ 基于 vue-cli 進(jìn)行構(gòu)建憨闰，若你想使用舊版本，可以切換分支到tag/3.11.0需五，它不依賴 vue-cli鹉动。
Extra
如果你想要根據(jù)用戶角色來動(dòng)態(tài)生成側(cè)邊欄和 router，你可以使用該分支permission-control
相關(guān)項(xiàng)目
在這里我們使用了- electron-vue-admin
Build Setup 以下是后臺(tái)管理的操作
# 建議不要直接使用 cnpm 安裝以來宏邮，會(huì)有各種詭異的 bug泽示。可以通過如下操作解決 npm 下載速度慢的問題
npm install --registry=https://registry.npm.taobao.org
# 啟動(dòng)服務(wù)
npm run dev
用瀏覽器訪問請(qǐng)點(diǎn)擊以下地址：
發(fā)布
# 構(gòu)建測(cè)試環(huán)境
npm run build:stage
# 構(gòu)建生產(chǎn)環(huán)境
npm run build:prod
其它
# 預(yù)覽發(fā)布環(huán)境效果
npm run preview
# 預(yù)覽發(fā)布環(huán)境效果 + 靜態(tài)資源分析
npm run preview -- --report
# 代碼格式檢查
npm run lint
# 代碼格式檢查并自動(dòng)修復(fù)
npm run lint -- --fix
