張俊東的vue實訓(xùn)（一到六）

實訓(xùn)一（校園管理系統(tǒng)1-部署環(huán)境，云端本地數(shù)據(jù)庫相連）

1.安裝 nodejs

官網(wǎng)下載
npm install –g vue-cli
鏡像下載
Npm config set registry https://registry.npm.taobao.org

2.新建文件夾在搜索欄輸入cmd

3.輸入
vue init webpack my-project
(一直下一步层释，除第一個yes搀缠，其他都no)

4.完成后輸入
cd my-project

5.再輸入運行
npm run dev

6.自動獲得網(wǎng)址

2.安裝 git

官網(wǎng)下載安裝即可奠伪，一切都選擇默認。

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

1608038953(1).png

啟動成功

1608038978(1).png

刪除多余界面,用編輯器打開 vue-admin-template/src/router/index
刪除后的界面如下

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

4.安裝ES6語法插件

npm install --save es6-promise

1608039574(1).png

5.加入Axios 插件

用編輯器新建一個js文件命名為http谦纱，存放在vue-admin-template/src/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;') {//默認發(fā)application/json請求，如果application/x-www-form-urlencoded;需要使用transformRequest對參數(shù)進行處理
    /*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;

6.配置axios代理：

打開vue-admin-template文件夾找到vue.config.js君编，向其中加入如下代碼

 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']: ''
        }
      }
    },

1608041021(1).png

7.打開vue-admin-template/src/main.js

加入http

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

8.調(diào)用接口：

打開vue-admin-template\src\views\dashboard下的index
替換為如下代碼
index.vue ↓

<template>
  <div class="dashboard-container">
    歡迎登錄校園管理系統(tǒng)：
    <div class="dashboard-text">學校：{{schoolCount}}</div>
    <div class="dashboard-text">學院：{{academyCount}}</div>
     <div class="dashboard-text">班級：{{classsCount}}</div>
    <div class="dashboard-text">學生：{{studentCount}}</div>
    <div class="dashboard-text">老師：{{teacherCount}}</div>
    
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'

  export default {
    name: 'Dashboard',
    computed: {
      ...mapGetters([
        'name'
      ])
    },

    data() {
      return {
        studentCount:'',
        schoolCount:'',
        teacherCount:'',
        academyCount:'',
        classsCount:''
      }
    },

    mounted(){
      this.$http.post('/api/school/find', this.user).then(res => {
        console.log('res:', res)
        console.log('res:'.length)
        this.schoolCount = res.length
      })
      this.$http.post('/api/student/find', this.user).then(res => {
        console.log('res:', res)
        console.log('res:'.length)
        this.studentCount = res.length
      })
      this.$http.post('/api/classs/find', this.user).then(res => {
        console.log('res:', res)
        console.log('res:'.length)
        this.classsCount = res.length
      })
      this.$http.post('/api/teacher/find', this.user).then(res => {
        console.log('res:', res)
        console.log('res:'.length)
        this.teacherCount = res.length
      })
      this.$http.post('/api/academy/find', this.user).then(res => {
        console.log('res:', res)
        console.log('res:'.length)
        this.academyCount = res.length
      })
    }



  }

</script>

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

9.打開命令提示符：

全局安裝koa-generator,執(zhí)行下面命令

npm install -g koa-generator

構(gòu)建koa2項目代碼如下

koa2 projectName

構(gòu)建成功界面

1608041631(1).png

初始化后臺項目插件跨嘉，命令屬下:

cd projectName

初始化項目，如果沒有安裝git工具會報錯:

npm install

界面成功

1608041965(1).png

在瀏覽器打開地址：
http://localhost:3000/
出現(xiàn)koa2的歡迎界面就代表成功

1608042001(1).png

10. 安裝本地mongodb或者在mongodb官網(wǎng)新建免費的云端服務(wù)器吃嘿。

云端建立集群步驟

（這里引用熊薪老師的步驟
鏈接：http://www.reibang.com/p/e3ce106ede47）

11.本地配置mongodb

打開projectName輸入cmd打開命令提示符
安裝mongoose

npm install mongoose-save

在projectName中創(chuàng)建db目錄祠乃，db下創(chuàng)建models
新建兩個JS文件將config.js放入db梦重，user.js 放入models
代碼如下：
config.js ↓

module.exports = {
    // dbs: 'mongodb://139.159.253.110:27017/test1'
    dbs: 'mongodb+srv://ZJD:zjd20000512@cluster0-7d5kk.mongodb.net/ZJD?retryWrites=true&w=majority'
}

注意此處要換成自己建立的用戶名和數(shù)據(jù)庫名（可去云端查看）

1608084829(1).png

user.js ↓

const mongoose = require('mongoose')
const feld={
    name: String,
    age: Number,
    //人物標簽
    labels:Number
}
//自動添加更新時間創(chuàng)建時間:
let personSchema = new mongoose.Schema(feld, {timestamps: {createdAt: 'created', updatedAt: 'updated'}})
module.exports= mongoose.model('User',personSchema)

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

修改projectName\router下的users.js
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

打開projectName輸入cmd打開命令提示符，重啟項目
注意先關(guān)掉前面我們啟動的服務(wù)再運行

npm run dev

結(jié)果成功界面

image.png

實訓(xùn)二（校園管理系統(tǒng)2-學校管理）

一亮瓷、后臺三步驟：

1琴拧、打開projectName文件，在db/models目錄下創(chuàng)建school.js文件嘱支，接著文件操作：

const feld={
    name: String,
    //人物標簽
    where:String,
    leixing: String
}
//自動添加更新時間創(chuàng)建時間:
let personSchema = new mongoose.Schema(feld, {timestamps: {createdAt: 'created', updatedAt: 'updated'}})
module.exports= mongoose.model('School',personSchema)

2艾蓝、找到projectName下的routes目錄創(chuàng)建school.js文件：

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

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

//數(shù)據(jù)庫增刪改查
router.post('/add', async function (ctx, next) {
    console.log(ctx.request.body)
    let model = new Model(ctx.request.body);
    model = await model.save();
    console.log('user',model)
    ctx.body = model
})

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

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

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

3.在app.js中掛載路由：

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

二斗塘、前臺三步驟：

1.打開vue-admin-template-master文件赢织，在src/views目錄下創(chuàng)建一個school模塊(文件夾),并在school目錄下創(chuàng)建vue文件。
2.editor.vue為編輯文件馍盟，用于創(chuàng)建學校記錄于置；

<template>
  <div class="dashboard-container">
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="學校名稱">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="位置">
        <el-input v-model="form.where"></el-input>
      </el-form-item>
      <el-form-item label="類型">
        <el-input v-model="form.leixing"></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: '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>

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

index.vue為目錄文件，用于顯示結(jié)果贞岭；

<template>
  <div class="dashboard-container">
    <el-table
      :data="users"
      style="width: 100%"
      :row-class-name="tableRowClassName">
<!--      <el-table-column-->
<!--        prop="_id"-->
<!--        label="學校_id"-->
<!--        width="180">-->
<!--      </el-table-column>-->
      <el-table-column
        prop="name"
        label="學校名稱"
        width="180">
      </el-table-column>
      <el-table-column
        prop="where"
        label="位置"
        width="180">
      </el-table-column>
      <el-table-column
        prop="leixing"
        label="類型">
      </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: '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>

<style lang="scss" scoped>
  .dashboard {
    &-container {
      margin: 30px;
    }

    &-text {
      font-size: 30px;
      line-height: 46px;
    }
  }
</style>

3.在vue-admin-template\src\router目錄下的index.js中添加路由：

{
    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' }
      }]
  },

三八毯、注意觀察數(shù)據(jù)庫連接是否斷開：

image.png

四、結(jié)果界面：

image.png

image.png

實訓(xùn)三（校園管理系統(tǒng)3-創(chuàng)建學院管理模塊）

一瞄桨、后臺三步驟：

1话速、打開projectName文件，在db/models目錄下創(chuàng)建academy.js文件芯侥，接著文件操作：

const mongoose = require('mongoose')
const Schema= mongoose.Schema
const feld={
    name: String,
    //人物標簽
    major:String,
    renshu: Number,
    school : { type: Schema.Types.ObjectId, ref: 'School' }
}
//自動添加更新時間創(chuàng)建時間:
let schema = new Schema(feld, {timestamps: {createdAt: 'created', updatedAt: 'updated'}})
module.exports= mongoose.model('Academy',schema)

2泊交、找到projectName下的routes目錄，創(chuàng)建academy.js文件：

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

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

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

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

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

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

3.打開projectName/app.js在其中中掛載路由：

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

二柱查、前臺三步驟：

打開vue-admin-template-master文件廓俭，在src/views目錄下創(chuàng)建一個academy模塊：并在academy目錄下創(chuàng)建vue文件。

1.editor.vue為編輯文件唉工，用于創(chuàng)建學院記錄：

<template>
  <div class="dashboard-container">
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="學院名稱">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="專業(yè)">
        <el-input v-model="form.major"></el-input>
      </el-form-item>
      <el-form-item label="人數(shù)">
        <el-input v-model="form.renshu"></el-input>
      </el-form-item>

      <el-form-item label="所屬學校">
        <el-select v-model="form.school" placeholder="請選擇">
          <el-option
            v-for="item in options"
            :key="item._id"
            :label="item.name"
            :value="item._id">
          </el-option>
        </el-select>
      </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: '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>

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

2.index.vue為目錄文件研乒，用于顯示結(jié)果：

  <template>
  <div class="dashboard-container">
    <el-table
      :data="users"
      style="width: 100%"
      :row-class-name="tableRowClassName">

      <el-table-column
        prop="_id"
        label="學院_id"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="學院名稱"
        width="180">
      </el-table-column>
      <el-table-column
        prop="major"
        label="專業(yè)"
        width="180">
      </el-table-column>
      <el-table-column
        prop="renshu"
        label="人數(shù)">
      </el-table-column>

      <el-table-column
        prop="school"
        label="學校名稱"
        width="180">
        <template slot-scope="scope" >
          <span class="" 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-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: '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>

<style lang="scss" scoped>
  .dashboard {
    &-container {
      margin: 30px;
    }

    &-text {
      font-size: 30px;
      line-height: 46px;
    }
  }
</style>

3.在vue-admin-template\src\router\index.js中添加路由：

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

三、注意查看數(shù)據(jù)庫連接是否斷開

四淋硝、結(jié)果界面：

image.png

實訓(xùn)四（校園管理系統(tǒng)4-創(chuàng)建班級管理模塊）

一雹熬、后臺三步驟：

1、打開projectName文件谣膳，在db/models目錄下創(chuàng)建classs.js文件竿报，接著文件操作：

const mongoose = require('mongoose')
const Schema= mongoose.Schema
const feld={
    name: String,
    //人物標簽
    level:String,
    renshu: Number,
    school : { type: Schema.Types.ObjectId, ref: 'School' },
    academy : { type: Schema.Types.ObjectId, ref: 'Academy' }
}
//自動添加更新時間創(chuàng)建時間:
let personSchema = new mongoose.Schema(feld, {timestamps: {createdAt: 'created', updatedAt: 'updated'}})
module.exports= mongoose.model('Classs',personSchema)

2、找到projectName下的routes目錄参歹，創(chuàng)建classs.js文件：

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

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

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

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

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

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

3.在app.js中掛載路由：

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

二仰楚、前臺三步驟：

打開vue-admin-template-master文件，在src/views目錄下創(chuàng)建一個classs模塊，并在academy目錄下創(chuàng)建vue文件僧界。

1.editor.vue為編輯文件侨嘀，用于創(chuàng)建班級記錄：

<template>
  <div class="dashboard-container">
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="所屬學校">
        <el-select v-model="form.school" placeholder="請選擇" @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>
<!--      編輯框：學院選擇列表-->
      <el-form-item label="所屬學院">
        <el-select v-model="form.academy" placeholder="請選擇">
          <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="專業(yè)">
        <el-input v-model="form.level"></el-input>
      </el-form-item>
      <el-form-item label="人數(shù)">
        <el-input v-model="form.renshu"></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: '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){
        //顯示學院選擇欄目
        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)
          }
        })
      }

      //顯示學校選擇欄目
      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>

2.index.vue為目錄文件，用于顯示結(jié)果：

 <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="level"
        label="專業(yè)"
        width="180">
      </el-table-column>
      <el-table-column
        prop="renshu"
        label="人數(shù)">
      </el-table-column>
<!--      列表添加項目
-->
      <el-table-column
        prop="school"
        label="學校名稱"
        width="180">
        <template slot-scope="scope" >
          <span class="" v-if="scope.row.school">
            <el-tag
              :type="scope.row.school.name === '深圳信息職業(yè)技術(shù)學院' ? 'primary' : 'success'"
              disable-transitions>{{scope.row.school.name}}</el-tag>
          </span>
        </template>
      </el-table-column>
      <el-table-column
        prop="academy"
        label="學院名稱"
        width="180">
        <template slot-scope="scope" >
          <span class="" v-if="scope.row.academy">
            <el-tag
              :type="scope.row.academy.name === '軟件學院' ? '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: '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>

<style lang="scss" scoped>
  .dashboard {
    &-container {
      margin: 30px;
    }

    &-text {
      font-size: 30px;
      line-height: 46px;
    }
  }
</style>

3.在vue-admin-template\src\router\index.js中添加路由：

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

三捂襟、注意查看數(shù)據(jù)庫連接是否斷開

四咬腕、結(jié)果界面

image.png

實訓(xùn)五（校園管理系統(tǒng)5-創(chuàng)建學生管理模塊）

一、后臺三步驟：

1葬荷、打開projectName文件涨共，在db/models目錄下創(chuàng)建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' }

}
//自動添加更新時間創(chuàng)建時間:
let personSchema = new mongoose.Schema(feld, {timestamps: {createdAt: 'created', updatedAt: 'updated'}})
module.exports= mongoose.model('Student',personSchema)

2宠漩、找到projectName下的routes目錄举反，創(chuàng)建student.js文件：

const router = require('koa-router')()
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中掛載路由：

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

二、前臺三步驟：

打開vue-admin-template-master文件扒吁，在src/views目錄下創(chuàng)建一個student模塊火鼻，并在student目錄下創(chuàng)建vue文件。

1.editor.vue為編輯文件雕崩，用于創(chuàng)建班級記錄魁索；

<template>
  <div class="dashboard-container">
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="所屬學校">
        <el-select v-model="form.school" placeholder="請選擇" @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>
      <!--      編輯框：學院選擇列表-->
      <el-form-item label="所屬學院">
        <el-select v-model="form.academy" placeholder="請選擇">
          <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-select v-model="form.classs" placeholder="請選擇">
          <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="學號">
        <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){
        //顯示學院選擇欄目
        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)
          }
        })
      }

      //顯示學校選擇欄目
      this.$http.post('/api/school/find').then(res => {
        if(res&&res.length>0){
          this.schools = res
          console.log('res:', res)
        }
      })
      //顯示班級欄目
      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>

2.index.vue為目錄文件，用于顯示結(jié)果：

<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="學號">
      </el-table-column>
      <el-table-column
        prop="gender"
        label="性別">
      </el-table-column>
      <!--      列表添加項目
-->
      <el-table-column
        prop="school"
        label="學校名稱"
        width="180">
        <template slot-scope="scope" >
          <span class="" v-if="scope.row.school">
            <el-tag
              :type="scope.row.school.name === '深圳信息職業(yè)技術(shù)學院' ? 'primary' : 'success'"
              disable-transitions>{{scope.row.school.name}}</el-tag>
          </span>
        </template>
      </el-table-column>
      <el-table-column
        prop="academy"
        label="學院名稱"
        width="180">
        <template slot-scope="scope" >
          <span class="" v-if="scope.row.academy">
            <el-tag
              :type="scope.row.academy.name === '軟件學院' ? 'primary' : 'success'"
              disable-transitions>{{scope.row.academy.name}}</el-tag>
          </span>

        </template>
      </el-table-column>

      <el-table-column
        prop="classs"
        label="班級名稱"
        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>

3.在vue-admin-template\src\router\index.js中添加路由：

 {
    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' }
      }]
  },

三盼铁、注意查看數(shù)據(jù)庫連接是否斷開

四粗蔚、結(jié)果界面

image.png

實訓(xùn)一（校園管理系統(tǒng)6-創(chuàng)建老師管理模塊）

一、后臺三步驟：

1饶火、打開projectName文件鹏控，在db/models目錄下創(chuàng)建teacher.js文件，接著文件操作：

const mongoose = require('mongoose')
const Schema= mongoose.Schema
const feld={
    name: String,
    age: String,
    //人物標簽
    level:String,
    gender:String,
    school : { type: Schema.Types.ObjectId, ref: 'School' },
    academy : { type: Schema.Types.ObjectId, ref: 'Academy' }
}
//自動添加更新時間創(chuàng)建時間:
let personSchema = new mongoose.Schema(feld, {timestamps: {createdAt: 'created', updatedAt: 'updated'}})
module.exports= mongoose.model('Teacher',personSchema)

2趁窃、找到projectName下的routes目錄牧挣，創(chuàng)建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中掛載路由：

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

二、前臺三步驟：

打開vue-admin-template-master文件醒陆，在src/views目錄下創(chuàng)建一個teacher模塊，并在teacher目錄下創(chuàng)建vue文件裆针。

1.editor.vue為編輯文件刨摩，用于創(chuàng)建班級記錄；

<template>
  <div class="dashboard-container">
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="所屬學校">
        <el-select v-model="form.school" placeholder="請選擇" @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>
      <!--      編輯框：學院選擇列表-->
      <el-form-item label="所屬學院">
        <el-select v-model="form.academy" placeholder="請選擇">
          <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="級別">
        <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){
        //顯示學院選擇欄目
        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)
          }
        })
      }

      //顯示學校選擇欄目
      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>

2.index.vue為目錄文件世吨，用于顯示結(jié)果澡刹；

<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="等級">
      </el-table-column>
      <el-table-column
        prop="gender"
        label="性別">
      </el-table-column>
      <!--      列表添加項目
-->
      <el-table-column
        prop="school"
        label="學校名稱"
        width="180">
        <template slot-scope="scope" >
          <span class="" v-if="scope.row.school">
            <el-tag
              :type="scope.row.school.name === '深圳信息職業(yè)技術(shù)學院' ? 'primary' : 'success'"
              disable-transitions>{{scope.row.school.name}}</el-tag>
          </span>
        </template>
      </el-table-column>
      <el-table-column
        prop="academy"
        label="學院名稱"
        width="180">
        <template slot-scope="scope" >
          <span class="" v-if="scope.row.academy">
            <el-tag
              :type="scope.row.academy.name === '軟件學院' ? '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>

3.在vue-admin-template\src\router\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' }
      }]
  },

三、注意查看數(shù)據(jù)庫連接是否斷開

四耘婚、結(jié)果界面

image.png

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者

人面猴
序言：七十年代末罢浇，一起剝皮案震驚了整個濱河市，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌袖外，老刑警劉巖拢锹，帶你破解...
沈念sama閱讀 219,366評論 6贊 508
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件花吟，死亡現(xiàn)場離奇詭異，居然都是意外死亡灾锯，警方通過查閱死者的電腦和手機，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 93,521評論 3贊 395
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進店門嗅榕，熙熙樓的掌柜王于貴愁眉苦臉地迎上來顺饮，“玉大人，你說我怎么就攤上這事凌那〖嫘郏” “怎么了？”我有些...
開封第一講書人閱讀 165,689評論 0贊 356
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵帽蝶，是天一觀的道長君旦。經(jīng)常有香客問我，道長嘲碱，這世上最難降的妖魔是什么金砍？我笑而不...
開封第一講書人閱讀 58,925評論 1贊 295
?港島之戀（遺憾婚禮）
正文為了忘掉前任，我火速辦了婚禮麦锯，結(jié)果婚禮上恕稠，老公的妹妹穿的比我還像新娘。我一直安慰自己扶欣，他們只是感情好鹅巍，可當我...
茶點故事閱讀 67,942評論 6贊 392
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布。她就那樣靜靜地躺著料祠，像睡著了一般骆捧。火紅的嫁衣襯著肌膚如雪。梳的紋絲不亂的頭發(fā)上髓绽，一...
開封第一講書人閱讀 51,727評論 1贊 305
城市分裂傳說
那天敛苇，我揣著相機與錄音，去河邊找鬼顺呕。笑死枫攀，一個胖子當著我的面吹牛，可吹牛的內(nèi)容都是我干的株茶。我是一名探鬼主播来涨，決...
沈念sama閱讀 40,447評論 3贊 420
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼启盛！你這毒婦竟也來了蹦掐？” 一聲冷哼從身側(cè)響起技羔，我...
開封第一講書人閱讀 39,349評論 0贊 276
萬榮殺人案實錄
序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎卧抗，沒想到半個月后藤滥，有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體，經(jīng)...
沈念sama閱讀 45,820評論 1贊 317
?護林員之死
正文獨居荒郊野嶺守林人離奇死亡颗味，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點故事閱讀 37,990評論 3贊 337
?白月光啟示錄
正文我和宋清朗相戀三年超陆，在試婚紗的時候發(fā)現(xiàn)自己被綠了。大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片浦马。...
茶點故事閱讀 40,127評論 1贊 351
活死人
序言：一個原本活蹦亂跳的男人離奇死亡时呀，死狀恐怖，靈堂內(nèi)的尸體忽然破棺而出晶默，到底是詐尸還是另有隱情谨娜，我是刑警寧澤，帶...
沈念sama閱讀 35,812評論 5贊 346
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布磺陡，位于F島的核電站趴梢，受9級特大地震影響，放射性物質(zhì)發(fā)生泄漏币他。R本人自食惡果不足惜坞靶，卻給世界環(huán)境...
茶點故事閱讀 41,471評論 3贊 331
男人毒藥：我在死后第九天來索命
文/蒙蒙一、第九天我趴在偏房一處隱蔽的房頂上張望蝴悉。院中可真熱鬧彰阴，春花似錦、人聲如沸拍冠。這莊子的主人今日做“春日...
開封第一講書人閱讀 32,017評論 0贊 22
一樁弒父案，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽庆杜。三九已至射众，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間晃财，已是汗流浹背叨橱。一陣腳步聲響...
開封第一講書人閱讀 33,142評論 1贊 272
情欲美人皮
我被黑心中介騙來泰國打工，沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留拓劝，地道東北人雏逾。一個月前我還...
沈念sama閱讀 48,388評論 3贊 373
代替公主和親
正文我出身青樓，卻偏偏與公主長得像郑临，于是被迫代替她去往敵國和親。傳聞我的和親對象是個殘疾皇子屑宠，可洞房花燭夜當晚...
茶點故事閱讀 45,066評論 2贊 355

張俊東的vue實訓(xùn)（一到六）

實訓(xùn)一（校園管理系統(tǒng)1-部署環(huán)境，云端本地數(shù)據(jù)庫相連）

1.安裝 nodejs

2.安裝 git

3.下載 vue-element-admin

4.安裝ES6語法插件

5.加入Axios 插件

6.配置axios代理：

7.打開vue-admin-template/src/main.js

8.調(diào)用接口：

9.打開命令提示符：

10. 安裝本地mongodb或者在mongodb官網(wǎng)新建免費的云端服務(wù)器吃嘿。

云端建立集群步驟

11.本地配置mongodb

結(jié)果成功界面 image.png

實訓(xùn)二（校園管理系統(tǒng)2-學校管理）

一亮瓷、后臺三步驟：

二斗塘、前臺三步驟：

三八毯、注意觀察數(shù)據(jù)庫連接是否斷開： image.png

四、結(jié)果界面： image.png

實訓(xùn)三（校園管理系統(tǒng)3-創(chuàng)建學院管理模塊）

一瞄桨、后臺三步驟：

二柱查、前臺三步驟：

三、注意查看數(shù)據(jù)庫連接是否斷開

四淋硝、結(jié)果界面：

實訓(xùn)四（校園管理系統(tǒng)4-創(chuàng)建班級管理模塊）

一雹熬、后臺三步驟：

二仰楚、前臺三步驟：

三捂襟、注意查看數(shù)據(jù)庫連接是否斷開

四咬腕、結(jié)果界面

實訓(xùn)五（校園管理系統(tǒng)5-創(chuàng)建學生管理模塊）

一、后臺三步驟：

二、前臺三步驟：

三盼铁、注意查看數(shù)據(jù)庫連接是否斷開

四粗蔚、結(jié)果界面 image.png

實訓(xùn)一（校園管理系統(tǒng)6-創(chuàng)建老師管理模塊）

一、后臺三步驟：

二、前臺三步驟：

三、注意查看數(shù)據(jù)庫連接是否斷開

四耘婚、結(jié)果界面 image.png

推薦閱讀更多精彩內(nèi)容

結(jié)果成功界面

image.png

三八毯、注意觀察數(shù)據(jù)庫連接是否斷開：

image.png

四、結(jié)果界面：

image.png

四粗蔚、結(jié)果界面

image.png

四耘婚、結(jié)果界面

image.png