第一步：創(chuàng)建集群
image.png
如果已經(jīng)有了集群的界面如下
image.png
第二步：創(chuàng)建用戶（注意記住帳號(hào)密碼凌受，為后邊登錄胡帳號(hào)密碼）
創(chuàng)建用戶
1
2
第三步：創(chuàng)建IP白名單
創(chuàng)建白名單
0.0.0.0/0代表所有IP都可以訪問(wèn)
允許所有IP訪問(wèn)
第四步：load Sample Data
初始化數(shù)據(jù)庫(kù)
第五步：創(chuàng)建數(shù)據(jù)庫(kù)
創(chuàng)建數(shù)據(jù)庫(kù)
image.png
image.png
創(chuàng)建完成如下
image.png
第6步：連接數(shù)據(jù)庫(kù)
image.png
image.png
選擇自己需要軟件驅(qū)動(dòng)决摧，老師使用的是Node.js
本頁(yè)面注意不要翻譯,替換用戶與密碼涣脚，替換數(shù)據(jù)庫(kù)名字示辈。
image.png
1.安裝 nodejs
2.安裝 git
建議
本項(xiàng)目的定位是后臺(tái)集成方案，不太適合當(dāng)基礎(chǔ)模板來(lái)進(jìn)行二次開發(fā)遣蚀。因?yàn)楸卷?xiàng)目集成了很多你可能用不到的功能矾麻，會(huì)造成不少的代碼冗余。如果你的項(xiàng)目不關(guān)注這方面的問(wèn)題妙同，也可以直接基于它進(jìn)行二次開發(fā)射富。
集成方案:vue-element-admin
基礎(chǔ)模板:vue-admin-template
桌面終端:electron-vue-admin
Typescript 版:vue-typescript-admin-template(鳴謝:@Armour)
Others:awesome-project
# clone the projectgit clone https://github.com/PanJiaChen/vue-admin-template.git# enter the project directorycd vue-admin-template# install dependencynpm install# developnpm run dev
啟動(dòng)成功
啟動(dòng)成功圖片
刪除多余界面 router/index
刪除后的界面如下
importVuefrom'vue'importRouterfrom'vue-router'Vue.use(Router)/* Layout */importLayoutfrom'@/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
*/exportconstconstantRoutes=[{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}]constcreateRouter=()=>newRouter({// mode: 'history', // require service supportscrollBehavior:()=>({y:0}),routes:constantRoutes})constrouter=createRouter()// Detail see: https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465exportfunctionresetRouter(){constnewRouter=createRouter()router.matcher=newRouter.matcher// reset router}exportdefaultrouter
安裝ES6語(yǔ)法插件
npm install --save es6-promise
本人使用了自己寫的Axios 插件
http.js存放位置
http.js ↓
importVuefrom'vue';importAxiosfrom'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){//用戶登錄時(shí)每次請(qǐng)求將token放入請(qǐng)求頭中//? config.headers["token"] = user.state.token;// }if(config['Content-Type']==='application/x-www-form-urlencoded;'){//默認(rèn)發(fā)application/json請(qǐng)求，如果application/x-www-form-urlencoded;需要使用transformRequest對(duì)參數(shù)進(jìn)行處理/*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){varstr=[];for(varpinobj)str.push(encodeURIComponent(p)+"="+encodeURIComponent(obj[p]));returnstr.join("&")};}//config.header['Content-Type'] = 'application/x-www-form-urlencoded; charset=UTF-8';returnconfig;},function(error){// Do something with request error// Vue.$vux.loading.hide()returnPromise.reject(error);});Axios.interceptors.response.use(response=>{// Vue.$vux.loading.hide();returnresponse.data;},error=>{// Vue.$vux.loading.hide();if(error.response){switch(error.response.status){case404:Message({message:''||'Error',type:'error',duration:5*1000})break;default:Message({message:''||'Error',type:'error',duration:5*1000})}}elseif(errorinstanceofError){console.error(error);}else{Message({message:''||'Error',type:'error',duration:5*1000})}returnPromise.reject(error.response);});exportdefaultVue.prototype.$http=Axios;
配置axios代理：
vue.config.js
vue.config.js ↓
'use strict'constpath=require('path')constdefaultSettings=require('./src/settings.js')functionresolve(dir){returnpath.join(__dirname,dir)}constname=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 = 9528constport=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 testconfig.plugins.delete('prefetch')// TODO: need test// set svg-sprite-loaderconfig.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 preserveWhitespaceconfig.module.rule('vue').use('vue-loader').loader('vue-loader').tap(options=>{options.compilerOptions.preserveWhitespace=truereturnoptions}).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 packagepriority:20,// the weight needs to be larger than libs and app or it will be packaged into libs or apptest:/[\\/]node_modules[\\/]_?element-ui(.*)/// in order to adapt to cnpm},commons:{name:'chunk-commons',test:resolve('src/components'),// can customize your rulesminChunks:3,//? minimum common numberpriority:5,reuseExistingChunk:true}}})config.optimization.runtimeChunk('single')})}}
main.js中加入http
importhttpfrom'./utils/http'Vue.use(http)
調(diào)用接口：
index.vue
index.vue ↓
<template><divclass="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><stylelang="scss"scoped>.dashboard {? ? &-container {? ? ? margin: 30px;? ? }? ? &-text {? ? ? font-size: 30px;? ? ? line-height: 46px;? ? }? }</style>
6.全局安裝koa-generator,執(zhí)行下面命令
npm install -g koa-generator
7.構(gòu)建koa2項(xiàng)目代碼如下
koa2 projectName
構(gòu)建成功信息：
D:\project>koa2 projectName? create:projectName? create:projectName/package.json? create:projectName/app.js? create:projectName/publiccreate:projectName/public/images? 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/public/stylesheets? create:projectName/public/stylesheets/style.css? create:projectName/bin? create:projectName/bin/www? install dependencies:>cd projectName&&npm install? run the app:>SETDEBUG=koa*&npm start projectName? create:projectName/public/javascriptsD:\project>
初始化后臺(tái)項(xiàng)目插件粥帚，命令屬下:
cd projectName
初始化項(xiàng)目胰耗，如果沒(méi)有安裝git會(huì)報(bào)錯(cuò).
npm install
項(xiàng)目試運(yùn)行
npm run dev
這里koa2模板提示信息做的并不好，沒(méi)有輸出測(cè)試地址芒涡，成功后出現(xiàn)如下界面代表成功了柴灯。
D:\project\projectName>npm run dev>projectName@0.1.0dev D:\project\projectName>nodemon bin/www[nodemon]1.19.4[nodemon]to restart at any time,enter `rs`[nodemon]watchingdir(s):*.*[nodemon]watching extensions:js,mjs,json[nodemon]starting `node bin/www`
在瀏覽器打開地址：
出現(xiàn)koa2的歡迎界面就代表成功了。
8.安裝本地mongodb或者在mongodb官網(wǎng)新建免費(fèi)的云端服務(wù)器费尽。
本人在這里用的mongodb免費(fèi)云端數(shù)據(jù)庫(kù)赠群。
抱歉密碼不能公開，請(qǐng)自行換成自己的密碼
鏈接如下：
本人數(shù)據(jù)庫(kù)名為test
mongodb+srv://xxwozixin:@cluster0-7d5kk.mongodb.net/test?retryWrites=true&w=majority
安裝mongoose
npm install mongoose --save
在第7步建好的nodejs項(xiàng)目中根目錄創(chuàng)建db目錄
作者用的webstorm,可以根據(jù)自己需要下載編輯器
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'}
user.js ↓
constmongoose=require('mongoose')constfeld={name:String,age:Number,//人物標(biāo)簽labels:Number}//自動(dòng)添加更新時(shí)間創(chuàng)建時(shí)間:letpersonSchema=newmongoose.Schema(feld,{timestamps:{createdAt:'created',updatedAt:'updated'}})module.exports=mongoose.model('User',personSchema)
修改根目錄app.js
app.js
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
user.js ↓
constrouter=require('koa-router')()constUser=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
重啟項(xiàng)目
關(guān)掉前面我們啟動(dòng)的服務(wù)在運(yùn)行
npm run dev
如下結(jié)果代表成功連接數(shù)據(jù)庫(kù)
運(yùn)行成功
到這里前后端就連接通了旱幼，可以開始操作數(shù)據(jù)庫(kù)查描。
一、后臺(tái)三步驟：
1、打開projectName文件冬三，在models目錄下創(chuàng)建school.js文件匀油，接著文件操作：
constmongoose=require('mongoose')constfeld={name:String,//人物標(biāo)簽where:String,leixing:String}//自動(dòng)添加更新時(shí)間創(chuàng)建時(shí)間:letpersonSchema=newmongoose.Schema(feld,{timestamps:{createdAt:'created',updatedAt:'updated'}})module.exports=mongoose.model('School',personSchema)
2、找到projectName下的routes目錄：
constrouter=require('koa-router')()//建立模塊勾笆，require(“../db/models/文件名”)letModel=require("../db/models/school");router.prefix('/school')router.get('/',function(ctx,next){ctx.body='this is a users response!'})//數(shù)據(jù)庫(kù)增刪改查router.post('/add',asyncfunction(ctx,next){console.log(ctx.request.body)letmodel=newModel(ctx.request.body);model=awaitmodel.save();console.log('user',model)ctx.body=model})router.post('/find',asyncfunction(ctx,next){letmodels=awaitModel.find({})ctx.body=models})router.post('/get',asyncfunction(ctx,next){// let users = await User.// find({})console.log(ctx.request.body)letmodel=awaitModel.find(ctx.request.body)console.log(model)ctx.body=model})router.post('/update',asyncfunction(ctx,next){console.log(ctx.request.body)letpbj=awaitModel.update({_id:ctx.request.body._id},ctx.request.body);ctx.body=pbj})router.post('/delete',asyncfunction(ctx,next){console.log(ctx.request.body)awaitModel.remove({_id:ctx.request.body._id});ctx.body='shibai '})module.exports=router
3.在app.js中掛載路由：
constschool=require('./routes/school')app.use(school.routes(),school.allowedMethods())
二敌蚜、前臺(tái)三步驟：
打開vue-admin-template-master文件，在src/views目錄下創(chuàng)建一個(gè)school模塊：
11.png
并在school目錄下創(chuàng)建vue文件窝爪。
1.editor.vue為編輯文件弛车，用于創(chuàng)建學(xué)校記錄；
22.png
<template><divclass="dashboard-container"><el-formref="form":model="form"label-width="80px"><el-form-itemlabel="學(xué)校名稱"><el-inputv-model="form.name"></el-input></el-form-item><el-form-itemlabel="位置"><el-inputv-model="form.where"></el-input></el-form-item><el-form-itemlabel="類型"><el-inputv-model="form.leixing"></el-input></el-form-item><el-form-item><el-buttontype="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: 'school',? ? computed: {? ? ? ...mapGetters([? ? ? ? 'name'? ? ? ])? ? },? ? data(){? ? ? return{? ? ? ? apiModel:'school',? ? ? ? form:{}? ? ? }? ? },? ? methods:{? ? ? onSubmit(){? ? ? ? console.log('222:', 222)? ? ? ? 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={}? ? ? ? ? })? ? ? ? }? ? ? }? ? },? ? 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]? ? ? ? ? }? ? ? ? })? ? ? }? ? }? }</script><stylelang="scss"scoped>.dashboard {? ? &-container {? ? ? margin: 30px;? ? }? ? &-text {? ? ? font-size: 30px;? ? ? line-height: 46px;? ? }? }</style>
2.index.vue為目錄文件蒲每，用于顯示結(jié)果纷跛；
33.png
<template><divclass="dashboard-container"><el-table:data="users"style="width: 100%":row-class-name="tableRowClassName"><!--? ? ? <el-table-column--><!--? ? ? ? prop="_id"--><!--? ? ? ? label="學(xué)校_id"--><!--? ? ? ? width="180">--><!--? ? ? </el-table-column>--><el-table-columnprop="name"label="學(xué)校名稱"width="180"></el-table-column><el-table-columnprop="where"label="位置"width="180"></el-table-column><el-table-columnprop="leixing"label="類型"></el-table-column><el-table-columnlabel="操作"><templateslot-scope="scope"><el-buttonsize="mini"@click="handleEdit(scope.$index, scope.row)">編輯</el-button><el-buttonsize="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: 'school',? ? computed: {? ? ? ...mapGetters([? ? ? ? 'name'? ? ? ])? ? },? ? data() {? ? ? return {? ? ? ? apiModel:'school',? ? ? ? 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><stylelang="scss"scoped>.dashboard {? ? &-container {? ? ? margin: 30px;? ? }? ? &-text {? ? ? font-size: 30px;? ? ? line-height: 46px;? ? }? }</style>
3.在index.js中添加路由：
{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'}}]}
一、后臺(tái)三步驟：
1啃勉、打開projectName文件忽舟，在models目錄下創(chuàng)建academy.js文件，接著文件操作：
constmongoose=require('mongoose')constSchema=mongoose.Schemaconstfeld={name:String,//人物標(biāo)簽major:String,renshu:Number,school:{type:Schema.Types.ObjectId,ref:'School'}}//自動(dòng)添加更新時(shí)間創(chuàng)建時(shí)間:letschema=newSchema(feld,{timestamps:{createdAt:'created',updatedAt:'updated'}})module.exports=mongoose.model('Academy',schema)
2淮阐、找到projectName下的routes目錄叮阅，創(chuàng)建academy.js文件：
constrouter=require('koa-router')()letModel=require("../db/models/academy");router.prefix('/academy')router.get('/',function(ctx,next){ctx.body='this is a users response!'})router.post('/add',asyncfunction(ctx,next){console.log(ctx.request.body)letmodel=newModel(ctx.request.body);model=awaitmodel.save();console.log('user',model)ctx.body=model})router.post('/find',asyncfunction(ctx,next){letmodels=awaitModel.find({}).populate('school')ctx.body=models})router.post('/get',asyncfunction(ctx,next){// let users = await User.// find({})console.log(ctx.request.body)letmodel=awaitModel.find(ctx.request.body)console.log(model)ctx.body=model})router.post('/update',asyncfunction(ctx,next){console.log(ctx.request.body)letpbj=awaitModel.update({_id:ctx.request.body._id},ctx.request.body);ctx.body=pbj})router.post('/delete',asyncfunction(ctx,next){console.log(ctx.request.body)awaitModel.remove({_id:ctx.request.body._id});ctx.body='shibai '})module.exports=router
3.在app.js中掛載路由：
constacademy=require('./routes/academy')app.use(academy.routes(),academy.allowedMethods())
二、前臺(tái)三步驟：
打開vue-admin-template-master文件泣特，在src/views目錄下創(chuàng)建一個(gè)academy模塊：
academy.png
并在academy目錄下創(chuàng)建vue文件浩姥。
1.editor.vue為編輯文件，用于創(chuàng)建學(xué)院記錄状您；
添加學(xué)院.png
<template><divclass="dashboard-container"><el-formref="form":model="form"label-width="80px"><el-form-itemlabel="學(xué)院名稱"><el-inputv-model="form.name"></el-input></el-form-item><el-form-itemlabel="專業(yè)"><el-inputv-model="form.major"></el-input></el-form-item><el-form-itemlabel="人數(shù)"><el-inputv-model="form.renshu"></el-input></el-form-item><el-form-itemlabel="所屬學(xué)校"><el-selectv-model="form.school"placeholder="請(qǐng)選擇"><el-optionv-for="item in options":key="item._id":label="item.name":value="item._id"></el-option></el-select></el-form-item><el-form-item><el-buttontype="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: 'academy',? ? computed: {? ? ? ...mapGetters([? ? ? ? 'name'? ? ? ])? ? },? ? data(){? ? ? return{? ? ? ? options: [? ? ? ? ? ],? ? ? ? apiModel:'academy',? ? ? ? form:{}? ? ? }? ? },? ? methods:{? ? ? onSubmit(){? ? ? ? console.log('222:', 222)? ? ? ? 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={}? ? ? ? ? })? ? ? ? }? ? ? }? ? },? ? 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.$http.post('/api/school/find').then(res => {? ? ? ? if(res&&res.length>0){? ? ? ? ? this.options = res? ? ? ? ? console.log('res:', res)? ? ? ? }? ? ? })? ? }? }</script><stylelang="scss"scoped>.dashboard {? ? &-container {? ? ? margin: 30px;? ? }? ? &-text {? ? ? font-size: 30px;? ? ? line-height: 46px;? ? }? }</style>
2.index.vue為目錄文件勒叠，用于顯示結(jié)果；
學(xué)院管理.png
<template><divclass="dashboard-container"><el-table:data="users"style="width: 100%":row-class-name="tableRowClassName"><el-table-columnprop="_id"label="學(xué)院_id"width="180"></el-table-column><el-table-columnprop="name"label="學(xué)院名稱"width="180"></el-table-column><el-table-columnprop="major"label="專業(yè)"width="180"></el-table-column><el-table-columnprop="renshu"label="人數(shù)"></el-table-column><el-table-columnprop="school"label="學(xué)校名稱"width="180"><templateslot-scope="scope"><spanclass=""v-if="scope.row.school"><el-tag:type="scope.row.school.name === '深信' ? 'primary' : 'success'"disable-transitions>{{scope.row.school.name}}</el-tag></span></template></el-table-column><el-table-columnlabel="操作"><templateslot-scope="scope"><el-buttonsize="mini"@click="handleEdit(scope.$index, scope.row)">編輯</el-button><el-buttonsize="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: 'academy',? ? computed: {? ? ? ...mapGetters([? ? ? ? 'name'? ? ? ])? ? },? ? data() {? ? ? return {? ? ? ? apiModel:'academy',? ? ? ? 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><stylelang="scss"scoped>.dashboard {? ? &-container {? ? ? margin: 30px;? ? }? ? &-text {? ? ? font-size: 30px;? ? ? line-height: 46px;? ? }? }</style>
3.在index.js中添加路由：
{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'}}]},
一膏孟、后臺(tái)三步驟：
1眯分、打開projectName文件，在models目錄下創(chuàng)建classs.js文件柒桑，接著文件操作：
constmongoose=require('mongoose')constSchema=mongoose.Schemaconstfeld={name:String,//人物標(biāo)簽level:String,renshu:Number,school:{type:Schema.Types.ObjectId,ref:'School'},academy:{type:Schema.Types.ObjectId,ref:'Academy'}}//自動(dòng)添加更新時(shí)間創(chuàng)建時(shí)間:letpersonSchema=newmongoose.Schema(feld,{timestamps:{createdAt:'created',updatedAt:'updated'}})module.exports=mongoose.model('Classs',personSchema)
2弊决、找到projectName下的routes目錄，創(chuàng)建classs.js文件：
constrouter=require('koa-router')()letModel=require("../db/models/classs");router.prefix('/classs')router.get('/',function(ctx,next){ctx.body='this is a users response!'})router.post('/add',asyncfunction(ctx,next){console.log(ctx.request.body)letmodel=newModel(ctx.request.body);model=awaitmodel.save();console.log('user',model)ctx.body=model})router.post('/find',asyncfunction(ctx,next){letmodels=awaitModel.find({}).populate('academy').populate('school')ctx.body=models})router.post('/get',asyncfunction(ctx,next){// let users = await User.// find({})console.log(ctx.request.body)letmodel=awaitModel.find(ctx.request.body)console.log(model)ctx.body=model})router.post('/update',asyncfunction(ctx,next){console.log(ctx.request.body)letpbj=awaitModel.update({_id:ctx.request.body._id},ctx.request.body);ctx.body=pbj})router.post('/delete',asyncfunction(ctx,next){console.log(ctx.request.body)awaitModel.remove({_id:ctx.request.body._id});ctx.body='shibai '})module.exports=router
3.在app.js中掛載路由：
constclasss=require('./routes/classs')app.use(classs.routes(),classs.allowedMethods())
二魁淳、前臺(tái)三步驟：
打開vue-admin-template-master文件飘诗，在src/views目錄下創(chuàng)建一個(gè)classs模塊，并在academy目錄下創(chuàng)建vue文件界逛。
1.editor.vue為編輯文件昆稿，用于創(chuàng)建班級(jí)記錄；
班級(jí)添加.png
<template><divclass="dashboard-container"><el-formref="form":model="form"label-width="80px"><el-form-itemlabel="所屬學(xué)校"><el-selectv-model="form.school"placeholder="請(qǐng)選擇"@change="schoolChange"><el-optionv-for="item in schools":key="item._id":label="item.name":value="item._id"></el-option></el-select></el-form-item><!--? ? ? 編輯框：學(xué)院選擇列表--><el-form-itemlabel="所屬學(xué)院"><el-selectv-model="form.academy"placeholder="請(qǐng)選擇"><el-optionv-for="item in academys":key="item._id":label="item.name":value="item._id"></el-option></el-select></el-form-item><el-form-itemlabel="班級(jí)名稱"><el-inputv-model="form.name"></el-input></el-form-item><el-form-itemlabel="專業(yè)"><el-inputv-model="form.level"></el-input></el-form-item><el-form-itemlabel="人數(shù)"><el-inputv-model="form.renshu"></el-input></el-form-item><el-form-item><el-buttontype="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: 'classs',? ? computed: {? ? ? ...mapGetters([? ? ? ? 'name'? ? ? ])? ? },? ? data(){? ? ? return{? ? ? ? schools:[],? ? ? ? academys:[],? ? ? ? //列表內(nèi)容? ? ? ? options: [? ? ? ? ],? ? ? ? apiModel:'classs',? ? ? ? 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><stylelang="scss"scoped>.dashboard {? ? &-container {? ? ? margin: 30px;? ? }? ? &-text {? ? ? font-size: 30px;? ? ? line-height: 46px;? ? }? }</style>
2.index.vue為目錄文件息拜，用于顯示結(jié)果溉潭；
班級(jí)管理.png
<template><divclass="dashboard-container"><el-table:data="users"style="width: 100%":row-class-name="tableRowClassName"><el-table-columnprop="name"label="班級(jí)名稱"width="180"></el-table-column><el-table-columnprop="level"label="專業(yè)"width="180"></el-table-column><el-table-columnprop="renshu"label="人數(shù)"></el-table-column><!--? ? ? 列表添加項(xiàng)目
--><el-table-columnprop="school"label="學(xué)校名稱"width="180"><templateslot-scope="scope"><spanclass=""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-columnprop="academy"label="學(xué)院名稱"width="180"><templateslot-scope="scope"><spanclass=""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-columnlabel="操作"><templateslot-scope="scope"><el-buttonsize="mini"@click="handleEdit(scope.$index, scope.row)">編輯</el-button><el-buttonsize="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: 'classs',? ? computed: {? ? ? ...mapGetters([? ? ? ? 'name'? ? ? ])? ? },? ? data() {? ? ? return {? ? ? ? apiModel:'classs',? ? ? ? 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><stylelang="scss"scoped>.dashboard {? ? &-container {? ? ? margin: 30px;? ? }? ? &-text {? ? ? font-size: 30px;? ? ? line-height: 46px;? ? }? }</style>
3.在index.js中添加路由：
{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'}}]},
一净响、后臺(tái)三步驟：
1、打開projectName文件岛抄，在models目錄下創(chuàng)建student.js文件别惦，接著文件操作：
constmongoose=require('mongoose')constSchema=mongoose.Schemaconstfeld={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í)間:letpersonSchema=newmongoose.Schema(feld,{timestamps:{createdAt:'created',updatedAt:'updated'}})module.exports=mongoose.model('Student',personSchema)
2、找到projectName下的routes目錄夫椭，創(chuàng)建student.js文件：
constrouter=require('koa-router')()letModel=require("../db/models/student");router.prefix('/student')router.get('/',function(ctx,next){ctx.body='this is a users response!'})router.post('/add',asyncfunction(ctx,next){console.log(ctx.request.body)letmodel=newModel(ctx.request.body);model=awaitmodel.save();console.log('user',model)ctx.body=model})router.post('/find',asyncfunction(ctx,next){letmodels=awaitModel.find({}).populate('classs').populate('academy').populate('school')ctx.body=models})router.post('/get',asyncfunction(ctx,next){// let users = await User.// find({})console.log(ctx.request.body)letmodel=awaitModel.find(ctx.request.body)console.log(model)ctx.body=model})router.post('/update',asyncfunction(ctx,next){console.log(ctx.request.body)letpbj=awaitModel.update({_id:ctx.request.body._id},ctx.request.body);ctx.body=pbj})router.post('/delete',asyncfunction(ctx,next){console.log(ctx.request.body)awaitModel.remove({_id:ctx.request.body._id});ctx.body='shibai '})module.exports=router
3.在app.js中掛載路由：
constclasss=require('./routes/student')app.use(student.routes(),student.allowedMethods())
二、前臺(tái)三步驟：
打開vue-admin-template-master文件氯庆，在src/views目錄下創(chuàng)建一個(gè)student模塊蹭秋，并在student目錄下創(chuàng)建vue文件。
1.editor.vue為編輯文件堤撵，用于創(chuàng)建班級(jí)記錄仁讨；
添加學(xué)生.png
<template><divclass="dashboard-container"><el-formref="form":model="form"label-width="80px"><el-form-itemlabel="所屬學(xué)校"><el-selectv-model="form.school"placeholder="請(qǐng)選擇"@change="schoolChange"><el-optionv-for="item in schools":key="item._id":label="item.name":value="item._id"></el-option></el-select></el-form-item><!--? ? ? 編輯框：學(xué)院選擇列表--><el-form-itemlabel="所屬學(xué)院"><el-selectv-model="form.academy"placeholder="請(qǐng)選擇"><el-optionv-for="item in academys":key="item._id":label="item.name":value="item._id"></el-option></el-select></el-form-item><el-form-itemlabel="所屬班級(jí)"><el-selectv-model="form.classs"placeholder="請(qǐng)選擇"><el-optionv-for="item in classs":key="item._id":label="item.name":value="item._id"></el-option></el-select></el-form-item><el-form-itemlabel="用戶名"><el-inputv-model="form.name"></el-input></el-form-item><el-form-itemlabel="年齡"><el-inputv-model="form.age"></el-input></el-form-item><el-form-itemlabel="學(xué)號(hào)"><el-inputv-model="form.student_number"></el-input></el-form-item><el-form-itemlabel="性別"><el-inputv-model="form.gender"></el-input></el-form-item><el-form-item><el-buttontype="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><stylelang="scss"scoped>.dashboard {? ? &-container {? ? ? margin: 30px;? ? }? ? &-text {? ? ? font-size: 30px;? ? ? line-height: 46px;? ? }? }</style>
2.index.vue為目錄文件，用于顯示結(jié)果实昨；
<template><divclass="dashboard-container"><el-table:data="users"style="width: 100%":row-class-name="tableRowClassName"><el-table-columnprop="name"label="名字"width="180"></el-table-column><el-table-columnprop="age"label="年齡"width="180"></el-table-column><el-table-columnprop="student_number"label="學(xué)號(hào)"></el-table-column><el-table-columnprop="gender"label="性別"></el-table-column><!--? ? ? 列表添加項(xiàng)目
--><el-table-columnprop="school"label="學(xué)校名稱"width="180"><templateslot-scope="scope"><spanclass=""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-columnprop="academy"label="學(xué)院名稱"width="180"><templateslot-scope="scope"><spanclass=""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-columnprop="classs"label="班級(jí)名稱"width="180"><templateslot-scope="scope"><spanclass=""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-columnlabel="操作"><templateslot-scope="scope"><el-buttonsize="mini"@click="handleEdit(scope.$index, scope.row)">編輯</el-button><el-buttonsize="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><stylelang="scss"scoped>.dashboard {? ? &-container {? ? ? margin: 30px;? ? }? ? &-text {? ? ? font-size: 30px;? ? ? line-height: 46px;? ? }? }</style>
3.在index.js中添加路由：
{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'}}]},
1洞豁、打開projectName文件，在models目錄下創(chuàng)建teacher.js文件荒给，接著文件操作：
constmongoose=require('mongoose')constSchema=mongoose.Schemaconstfeld={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í)間:letpersonSchema=newmongoose.Schema(feld,{timestamps:{createdAt:'created',updatedAt:'updated'}})module.exports=mongoose.model('Teacher',personSchema)
2丈挟、找到projectName下的routes目錄，創(chuàng)建teacher.js文件：
constrouter=require('koa-router')()letModel=require("../db/models/teacher");router.prefix('/teacher')router.get('/',function(ctx,next){ctx.body='this is a users response!'})router.post('/add',asyncfunction(ctx,next){console.log(ctx.request.body)letmodel=newModel(ctx.request.body);model=awaitmodel.save();console.log('user',model)ctx.body=model})router.post('/find',asyncfunction(ctx,next){letmodels=awaitModel.find({}).populate('academy').populate('school')ctx.body=models})router.post('/get',asyncfunction(ctx,next){// let users = await User.// find({})console.log(ctx.request.body)letmodel=awaitModel.find(ctx.request.body)console.log(model)ctx.body=model})router.post('/update',asyncfunction(ctx,next){console.log(ctx.request.body)letpbj=awaitModel.update({_id:ctx.request.body._id},ctx.request.body);ctx.body=pbj})router.post('/delete',asyncfunction(ctx,next){console.log(ctx.request.body)awaitModel.remove({_id:ctx.request.body._id});ctx.body='shibai '})module.exports=router
3.在app.js中掛載路由：
constteacher=require('./routes/teacher')app.use(teacher.routes(),teacher.allowedMethods())
二志电、前臺(tái)三步驟：
打開vue-admin-template-master文件曙咽，在src/views目錄下創(chuàng)建一個(gè)teacher模塊，并在teacher目錄下創(chuàng)建vue文件挑辆。
1.editor.vue為編輯文件例朱，用于創(chuàng)建班級(jí)記錄；
添加老師.png
<template><divclass="dashboard-container"><el-formref="form":model="form"label-width="80px"><el-form-itemlabel="所屬學(xué)校"><el-selectv-model="form.school"placeholder="請(qǐng)選擇"@change="schoolChange"><el-optionv-for="item in schools":key="item._id":label="item.name":value="item._id"></el-option></el-select></el-form-item><!--? ? ? 編輯框：學(xué)院選擇列表--><el-form-itemlabel="所屬學(xué)院"><el-selectv-model="form.academy"placeholder="請(qǐng)選擇"><el-optionv-for="item in academys":key="item._id":label="item.name":value="item._id"></el-option></el-select></el-form-item><el-form-itemlabel="用戶名"><el-inputv-model="form.name"></el-input></el-form-item><el-form-itemlabel="年齡"><el-inputv-model="form.age"></el-input></el-form-item><el-form-itemlabel="性別"><el-inputv-model="form.gender"></el-input></el-form-item><el-form-itemlabel="級(jí)別"><el-inputv-model="form.level"></el-input></el-form-item><el-form-item><el-buttontype="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><stylelang="scss"scoped>.dashboard {? ? &-container {? ? ? margin: 30px;? ? }? ? &-text {? ? ? font-size: 30px;? ? ? line-height: 46px;? ? }? }</style>
2.index.vue為目錄文件鱼蝉，用于顯示結(jié)果洒嗤；
<template><divclass="dashboard-container"><el-table:data="users"style="width: 100%":row-class-name="tableRowClassName"><el-table-columnprop="name"label="名字"width="180"></el-table-column><el-table-columnprop="age"label="年齡"width="180"></el-table-column><el-table-columnprop="level"label="等級(jí)"></el-table-column><el-table-columnprop="gender"label="性別"></el-table-column><!--? ? ? 列表添加項(xiàng)目
--><el-table-columnprop="school"label="學(xué)校名稱"width="180"><templateslot-scope="scope"><spanclass=""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-columnprop="academy"label="學(xué)院名稱"width="180"><templateslot-scope="scope"><spanclass=""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-columnlabel="操作"><templateslot-scope="scope"><el-buttonsize="mini"@click="handleEdit(scope.$index, scope.row)">編輯</el-button><el-buttonsize="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><stylelang="scss"scoped>.dashboard {? ? &-container {? ? ? margin: 30px;? ? }? ? &-text {? ? ? font-size: 30px;? ? ? line-height: 46px;? ? }? }</style>
3.在index.js中添加路由：
{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'}}]},
