網(wǎng)站前端開(kāi)發(fā)實(shí)訓(xùn)

實(shí)訓(xùn)1

1.安裝 nodejs

<meta charset="utf-8">

點(diǎn)擊這里下載

根據(jù)自己電腦系統(tǒng)及位數(shù)選擇躁绸,選擇windows64位.msi格式安裝包

image.png

image.png

image.png

打開(kāi)cmd窗口练湿,執(zhí)行命令node -v查看node版本
v14.7.0
最新版的node在安裝時(shí)同時(shí)也安裝了npm,執(zhí)行npm -v查看npm版本

F:\網(wǎng)頁(yè)UI實(shí)訓(xùn)\nodejs\node_modules\npm>node -v
v14.15.1

2.安裝 git

安裝包下載地址:https://gitforwindows.org/

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
image.png

啟動(dòng)成功


image.png

刪除多余界面 router/index

image.png

刪除后的界面如下

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

/* Layout */
import Layout from '@/layout'

/**
 * Note: sub-menu only appear when route children.length >= 1
 * Detail see: https://panjiachen.github.io/vue-element-admin-site/guide/essentials/router-and-nav.html
 *
 * hidden: true                   if set true, item will not show in the sidebar(default is false)
 * alwaysShow: true               if set true, will always show the root menu
 *                                if not set alwaysShow, when item has more than one children route,
 *                                it will becomes nested mode, otherwise not show the root menu
 * redirect: noRedirect           if set noRedirect will no redirect in the breadcrumb
 * name:'router-name'             the name is used by <keep-alive> (must set!!!)
 * meta : {
    roles: ['admin','editor']    control the page roles (you can set multiple roles)
    title: 'title'               the name show in sidebar and breadcrumb (recommend set)
    icon: 'svg-name'/'el-icon-x' the icon show in the sidebar
    breadcrumb: false            if set false, the item will hidden in breadcrumb(default is true)
    activeMenu: '/example/list'  if set path, the sidebar will highlight the path you set
  }
 */

/**
 * constantRoutes
 * a base page that does not have permission requirements
 * all roles can be accessed
 */
export const constantRoutes = [
  {
    path: '/login',
    component: () => import('@/views/login/index'),
    hidden: true
  },

  {
    path: '/404',
    component: () => import('@/views/404'),
    hidden: true
  },

  {
    path: '/',
    component: Layout,
    redirect: '/dashboard',
    children: [{
      path: 'dashboard',
      name: 'Dashboard',
      component: () => import('@/views/dashboard/index'),
      meta: { title: 'Dashboard', icon: 'dashboard' }
    }]
  },
  // 404 page must be placed at the end !!!
  { path: '*', redirect: '/404', hidden: true }
]

const createRouter = () => new Router({
  // mode: 'history', // require service support
  scrollBehavior: () => ({ y: 0 }),
  routes: constantRoutes
})

const router = createRouter()

// Detail see: https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465
export function resetRouter() {
  const newRouter = createRouter()
  router.matcher = newRouter.matcher // reset router
}

export default router

安裝ES6語(yǔ)法插件
npm install --save es6-promise
image.png
安裝老師Axios 插件

http.js


image.png

代碼如下

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){//用戶登錄時(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) {
      var str = [];
      for (var p in obj)
        str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
      return str.join("&")
    };
  }
  //config.header['Content-Type'] = 'application/x-www-form-urlencoded; charset=UTF-8';

  return config;
}, function (error) {
  // Do something with request error
  // Vue.$vux.loading.hide()
  return Promise.reject(error);
});

Axios.interceptors.response.use(
  response => {
    // Vue.$vux.loading.hide();
    return response.data;
  },
  error => {
    // Vue.$vux.loading.hide();
    if (error.response) {
      switch (error.response.status) {
        case 404:
          Message({
            message: '' || 'Error',
            type: 'error',
            duration: 5 * 1000
          })
          break;
        default:
          Message({
            message: '' || 'Error',
            type: 'error',
            duration: 5 * 1000
          })
      }
    } else if (error instanceof Error) {
      console.error(error);
    } else {
      Message({
        message: '' || 'Error',
        type: 'error',
        duration: 5 * 1000
      })
    }

    return Promise.reject(error.response);
  });

export default Vue.prototype.$http = Axios;

配置axios代理:


image.png

vue.config.js ↓

'use strict'
const path = require('path')
const defaultSettings = require('./src/settings.js')

function resolve(dir) {
  return path.join(__dirname, dir)
}

const name = defaultSettings.title || 'vue Admin Template' // page title

// If your port is set to 80,
// use administrator privileges to execute the command line.
// For example, Mac: sudo npm run
// You can change the port by the following methods:
// port = 9528 npm run dev OR npm run dev --port = 9528
const port = process.env.port || process.env.npm_config_port || 9528 // dev port

// All configuration item explanations can be find in https://cli.vuejs.org/config/
module.exports = {
  /**
   * You will need to set publicPath if you plan to deploy your site under a sub path,
   * for example GitHub Pages. If you plan to deploy your site to https://foo.github.io/bar/,
   * then publicPath should be set to "/bar/".
   * In most cases please use '/' !!!
   * Detail: https://cli.vuejs.org/config/#publicpath
   */
  publicPath: '/',
  outputDir: 'dist',
  assetsDir: 'static',
  lintOnSave: process.env.NODE_ENV === 'development',
  productionSourceMap: false,
  devServer: {
    port: port,
    open: true,
    overlay: {
      warnings: false,
      errors: true
    },
    proxy: {
      // change xxx-api/login => mock/login
      // detail: https://cli.vuejs.org/config/#devserver-proxy
      [process.env.VUE_APP_BASE_API]: {
        target: `http://127.0.0.1:${port}/mock`,
        changeOrigin: true,
        pathRewrite: {
          ['^' + process.env.VUE_APP_BASE_API]: ''
        }
      },
      ['/api']: {
        target: `http://127.0.0.1:3000`,
        changeOrigin: true,
        pathRewrite: {
          ['^' + '/api']: ''
        }
      }
    },
    after: require('./mock/mock-server.js')
  },
  configureWebpack: {
    // provide the app's title in webpack's name field, so that
    // it can be accessed in index.html to inject the correct title.
    name: name,
    resolve: {
      alias: {
        '@': resolve('src')
      }
    }
  },
  chainWebpack(config) {
    config.plugins.delete('preload') // TODO: need test
    config.plugins.delete('prefetch') // TODO: need test

    // set svg-sprite-loader
    config.module
      .rule('svg')
      .exclude.add(resolve('src/icons'))
      .end()
    config.module
      .rule('icons')
      .test(/\.svg$/)
      .include.add(resolve('src/icons'))
      .end()
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]'
      })
      .end()

    // set preserveWhitespace
    config.module
      .rule('vue')
      .use('vue-loader')
      .loader('vue-loader')
      .tap(options => {
        options.compilerOptions.preserveWhitespace = true
        return options
      })
      .end()

    config
    // https://webpack.js.org/configuration/devtool/#development
      .when(process.env.NODE_ENV === 'development',
        config => config.devtool('cheap-source-map')
      )

    config
      .when(process.env.NODE_ENV !== 'development',
        config => {
          config
            .plugin('ScriptExtHtmlWebpackPlugin')
            .after('html')
            .use('script-ext-html-webpack-plugin', [{
            // `runtime` must same as runtimeChunk name. default is `runtime`
              inline: /runtime\..*\.js$/
            }])
            .end()
          config
            .optimization.splitChunks({
              chunks: 'all',
              cacheGroups: {
                libs: {
                  name: 'chunk-libs',
                  test: /[\\/]node_modules[\\/]/,
                  priority: 10,
                  chunks: 'initial' // only package third parties that are initially dependent
                },
                elementUI: {
                  name: 'chunk-elementUI', // split elementUI into a single package
                  priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app
                  test: /[\\/]node_modules[\\/]_?element-ui(.*)/ // in order to adapt to cnpm
                },
                commons: {
                  name: 'chunk-commons',
                  test: resolve('src/components'), // can customize your rules
                  minChunks: 3, //  minimum common number
                  priority: 5,
                  reuseExistingChunk: true
                }
              }
            })
          config.optimization.runtimeChunk('single')
        }
      )
  }
}

main.js中加入http


image.png

添加代碼如下:

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

調(diào)用接口:


image.png

index.vue ↓

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

<script>
  import { mapGetters } from 'vuex'

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

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

后端(server)

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

npm install -g koa-generator

構(gòu)建koa2項(xiàng)目代碼如下(projectName是你自己取的項(xiàng)目名稱)

koa2 projectName

構(gòu)建成功信息:
D:\project>koa2 projectName
create : projectName
create : projectName/package.json
create : projectName/app.js
create : projectName/public
create : 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:
SET DEBUG=koa* & npm start projectName
create : projectName/public/javascripts
D:\project>

初始化后臺(tái)項(xiàng)目插件,命令屬下:

cd projectName
npm install

項(xiàng)目試運(yùn)行

npm run dev

這里koa2模板提示信息做的并不好刊殉,沒(méi)有輸出測(cè)試地址繁成,成功后出現(xiàn)如下界面代表成功了凄贩。

D:\project\projectName>npm run dev

> projectName@0.1.0 dev D:\project\projectName
> nodemon bin/www
[nodemon] 1.19.4
[nodemon] to restart at any time, enter `rs`
[nodemon] watching dir(s): *.*
[nodemon] watching extensions: js,mjs,json
[nodemon] starting `node bin/www`

在瀏覽器打開(kāi)地址:
http://localhost:3000/
出現(xiàn)koa2的歡迎界面就代表成功了映屋。

image.png

安裝本地mongodb或者在mongodb官網(wǎng)新建免費(fèi)的云端服務(wù)器

image.png

第一步:創(chuàng)建集群


image.png

如果已經(jīng)有了集群的界面如下


image.png
第二步:創(chuàng)建用戶(注意記住帳號(hào)密碼,為后邊登錄帳號(hào)密碼)

image.png

image.png

image.png

第三步:創(chuàng)建IP白名單
image.png

0.0.0.0/0代表所有IP都可以訪問(wèn)!
image.png
第四步:load Sample Data
image.png

第五步:創(chuàng)建數(shù)據(jù)庫(kù)
image.png

image.png

image.png
image.png

創(chuàng)建完成如下
image.png

安裝mongoose

npm install mongoose --save

安裝過(guò)程問(wèn)題:卡著不動(dòng)

例如如下:


image.png
解決該問(wèn)題如下:

建議不要直接使用 cnpm 安裝以來(lái)同蜻,會(huì)有各種詭異的 bug棚点。可以通過(guò)如下操作解決 npm 下載速度慢的問(wèn)題

npm install --registry=https://registry.npm.taobao.org

在建好的nodejs項(xiàng)目中根目錄創(chuàng)建db目錄
作者用的webstorm,可以根據(jù)自己需要下載編輯器


image.png

db目錄下創(chuàng)建一個(gè)config.js


image.png

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

修改根目錄app.js

image.png

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

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

重啟項(xiàng)目
關(guān)掉前面我們啟動(dòng)的服務(wù)在運(yùn)行

第6步:連接數(shù)據(jù)庫(kù)


image.png

image.png
npm run dev
image.png

到這里前后端就連接通了湾蔓,可以開(kāi)始操作數(shù)據(jù)庫(kù)

實(shí)訓(xùn)2

目標(biāo):學(xué)校管理

image.png

一瘫析、后臺(tái)三步驟:

1、打開(kāi)projectName(你創(chuàng)建的文件名)文件默责,在models目錄下創(chuàng)建school.js文件聪富,接著文件操作:

備注:我的文件名是:yuejia


image.png

代碼如下:

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

2、找到項(xiàng)目文件夾(yuejia)下的routes目錄的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ù)庫(kù)增刪改查
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())
image.png

二俄占、前臺(tái)三步驟:

打開(kāi)vue-admin-template-master文件,在src/views目錄下創(chuàng)建一個(gè)school模塊:并在school目錄下創(chuàng)建vue文件葡缰。添加editor.vue 和index.vue

image.png
1.editor.vue為編輯文件亏掀,用于創(chuàng)建學(xué)校記錄;
image.png

editor.vue代碼如下:

<template>
  <div class="dashboard-container">
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="學(xué)校名稱">
        <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>
2.index.vue為目錄文件泛释,用于顯示結(jié)果滤愕;
image.png

index.vue代碼如下

<template>
  <div class="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-column
        prop="name"
        label="學(xué)校名稱"
        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.在index.js中添加路由:
image.png
{
    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' }
      }]
  },
image.png

image.png

實(shí)訓(xùn)3

目標(biāo):創(chuàng)建學(xué)院管理模塊(學(xué)院和學(xué)校關(guān)聯(lián)起來(lái))

1、打開(kāi)projectName(yuejia)文件怜校,在models目錄下創(chuàng)建academy.js文件间影,接著文件操作:

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

2、找到projectName(yuejia)下的routes目錄茄茁,創(chuàng)建academy.js文件:

image.png

代碼如下:

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.在app.js中掛載路由:

image.png

代碼如下:
const academy = require('./routes/academy')
app.use(academy.routes(), academy.allowedMethods())

二魂贬、前臺(tái)三步驟:

打開(kāi)vue-admin-template-master文件,在src/views目錄下創(chuàng)建一個(gè)academy模塊:

image.png

并在academy目錄下創(chuàng)建vue文件裙顽。

1.editor.vue為編輯文件付燥,用于創(chuàng)建學(xué)院記錄;

image.png

代碼如下:

<template>
  <div class="dashboard-container">
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="學(xué)院名稱">
        <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="所屬學(xué)校">
        <el-select v-model="form.school" placeholder="請(qǐng)選擇">
          <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é)果键科;

image.png
  <template>
  <div class="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-column
        prop="name"
        label="學(xué)院名稱"
        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="學(xué)校名稱"
        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.在index.js中添加路由:

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

實(shí)訓(xùn)4

目標(biāo):創(chuàng)建班級(jí)管理模塊(班級(jí)和學(xué)院、學(xué)校關(guān)聯(lián)起來(lái))

一漩怎、后臺(tái)三步驟:

1勋颖、打開(kāi)projectNamea(yuejia)文件,在models目錄下創(chuàng)建classs.js文件勋锤,接著文件操作:

image.png
const mongoose = require('mongoose')
const Schema= mongoose.Schema
const feld={
    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í)間:
let personSchema = new mongoose.Schema(feld, {timestamps: {createdAt: 'created', updatedAt: 'updated'}})
module.exports= mongoose.model('Classs',personSchema)

2饭玲、找到projectName(yuejia)下的routes目錄,創(chuàng)建classs.js文件:

image.png
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中掛載路由:

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

二怪得、前臺(tái)三步驟:

打開(kāi)vue-admin-template-master文件咱枉,在src/views目錄下創(chuàng)建一個(gè)classs模塊卑硫,并在academy目錄下創(chuàng)建vue文件。

1.editor.vue為編輯文件蚕断,用于創(chuàng)建班級(jí)記錄欢伏;

image.png

image.png

代碼如下:

<template>
  <div class="dashboard-container">
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="所屬學(xué)校">
        <el-select v-model="form.school" placeholder="請(qǐng)選擇" @change="schoolChange">
          <el-option
            v-for="item in schools"
            :key="item._id"
            :label="item.name"
            :value="item._id">
          </el-option>
        </el-select>
      </el-form-item>
<!--      編輯框:學(xué)院選擇列表-->
      <el-form-item label="所屬學(xué)院">
        <el-select v-model="form.academy" placeholder="請(qǐng)選擇">
          <el-option
            v-for="item in academys"
            :key="item._id"
            :label="item.name"
            :value="item._id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="班級(jí)名稱">
        <el-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){
        //顯示學(xué)院選擇欄目
        this.$http.post('/api/academy/get',{school:val1}).then(res => {
          if(res&&res.length>0){
            this.academys = res
            console.log('res:', res)
          }
        })
      }
    },
    mounted() {
      if(this.$route.query._id){
        this.$http.post('/api/'+this.apiModel+'/get',{_id:this.$route.query._id}).then(res => {
          if(res&&res.length>0){
            this.form = res[0]
            this.schoolChange(this.form.school)
          }
        })
      }

      //顯示學(xué)校選擇欄目
      this.$http.post('/api/school/find').then(res => {
        if(res&&res.length>0){
          this.schools = res
          console.log('res:', res)
        }
      })
    }
  }
</script>

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

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

image.png

代碼如下:

 <template>
  <div class="dashboard-container">
    <el-table
      :data="users"
      style="width: 100%"
      :row-class-name="tableRowClassName">
      <el-table-column
        prop="name"
        label="班級(jí)名稱"
        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>
<!--      列表添加項(xiàng)目
-->
      <el-table-column
        prop="school"
        label="學(xué)校名稱"
        width="180">
        <template slot-scope="scope" >
          <span class="" v-if="scope.row.school">
            <el-tag
              :type="scope.row.school.name === '深圳信息職業(yè)技術(shù)學(xué)院' ? 'primary' : 'success'"
              disable-transitions>{{scope.row.school.name}}</el-tag>
          </span>
        </template>
      </el-table-column>
      <el-table-column
        prop="academy"
        label="學(xué)院名稱"
        width="180">
        <template slot-scope="scope" >
          <span class="" v-if="scope.row.academy">
            <el-tag
              :type="scope.row.academy.name === '軟件學(xué)院' ? 'primary' : 'success'"
              disable-transitions>{{scope.row.academy.name}}</el-tag>
          </span>

        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleEdit(scope.$index, scope.row)">編輯
          </el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)">刪除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'

  export default {
    name: '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.在index.js中添加路由:

image.png

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

image.png

實(shí)訓(xùn)五

目標(biāo):創(chuàng)建班級(jí)管理模塊(學(xué)生和班級(jí)亿乳、學(xué)院硝拧、學(xué)校關(guān)聯(lián)起來(lái))

一、后臺(tái)三步驟:

1葛假、打開(kāi)projectName(yuejia)文件障陶,在models目錄下創(chuàng)建student.js文件,接著文件操作:

image.png

models目錄下student.js

const mongoose = require('mongoose')
const Schema = mongoose.Schema
const feld={
    name: String,
    age: Number,
    student_number:Number,
    gender:String,
    school : { type: Schema.Types.ObjectId, ref: 'School' },
    academy : { type: Schema.Types.ObjectId, ref: 'Academy' },
    classs : { type: Schema.Types.ObjectId, ref: 'Classs' }

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

2聊训、找到projectName(yuejia)下的routes目錄抱究,創(chuàng)建student.js文件:

image.png

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中掛載路由:

image.png

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

二、前臺(tái)三步驟:

打開(kāi)vue-admin-template-master文件带斑,在src/views目錄下創(chuàng)建一個(gè)student模塊鼓寺,并在student目錄下創(chuàng)建vue文件。

1.editor.vue為編輯文件勋磕,用于創(chuàng)建班級(jí)記錄妈候;

image.png

image.png
  <div class="dashboard-container">
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="所屬學(xué)校">
        <el-select v-model="form.school" placeholder="請(qǐng)選擇" @change="schoolChange">
          <el-option
            v-for="item in schools"
            :key="item._id"
            :label="item.name"
            :value="item._id">
          </el-option>
        </el-select>
      </el-form-item>
      <!--      編輯框:學(xué)院選擇列表-->
      <el-form-item label="所屬學(xué)院">
        <el-select v-model="form.academy" placeholder="請(qǐng)選擇">
          <el-option
            v-for="item in academys"
            :key="item._id"
            :label="item.name"
            :value="item._id">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="所屬班級(jí)">
        <el-select v-model="form.classs" placeholder="請(qǐng)選擇">
          <el-option
            v-for="item in classs"
            :key="item._id"
            :label="item.name"
            :value="item._id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="用戶名">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="年齡">
        <el-input v-model="form.age"></el-input>
      </el-form-item>
      <el-form-item label="學(xué)號(hào)">
        <el-input v-model="form.student_number"></el-input>
      </el-form-item>
      <el-form-item label="性別">
        <el-input v-model="form.gender"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">立即創(chuàng)建</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'

  export default {
    name: 'student',
    computed: {
      ...mapGetters([
        'name'
      ])
    },
    data(){
      return{
        schools:[],
        academys:[],
        classs:[],
        options: [
        ],
        apiModel:'student',
        form:{}
      }
    },
    methods:{
      onSubmit(){
        if(this.form._id){
          this.$http.post(`/api/${this.apiModel}/update`,this.form).then(res => {
            console.log('bar:', res)
            this.$router.push({path:this.apiModel})
            this.form={}
          })
        }else
        {
          this.$http.post('/api/'+this.apiModel+'/add',this.form).then(res => {
            console.log('bar:', res)
            this.$router.push({path:this.apiModel})
            this.form={}
          })
        }
      },
      schoolChange(val1){
        //顯示學(xué)院選擇欄目
        this.$http.post('/api/academy/get',{school:val1}).then(res => {
          if(res&&res.length>0){
            this.academys = res
            console.log('res:', res)
          }
        })
      }
    },

    mounted() {
      if(this.$route.query._id){
        this.$http.post('/api/'+this.apiModel+'/get',{_id:this.$route.query._id}).then(res => {
          if(res&&res.length>0){
            this.form = res[0]
            this.schoolChange(this.form.school)
          }
        })
      }

      //顯示學(xué)校選擇欄目
      this.$http.post('/api/school/find').then(res => {
        if(res&&res.length>0){
          this.schools = res
          console.log('res:', res)
        }
      })
      //顯示班級(jí)欄目
      this.$http.post('/api/classs/find').then(res => {
        if(res&&res.length>0){
          this.classs = res
          console.log('res:', res)
        }
      })
    }
  }
</script>

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

2.index.vue為目錄文件,用于顯示結(jié)果挂滓;

image.png
<template>
  <div class="dashboard-container">
    <el-table
      :data="users"
      style="width: 100%"
      :row-class-name="tableRowClassName">
      <el-table-column
        prop="name"
        label="名字"
        width="180">
      </el-table-column>
      <el-table-column
        prop="age"
        label="年齡"
        width="180">
      </el-table-column>
      <el-table-column
        prop="student_number"
        label="學(xué)號(hào)">
      </el-table-column>
      <el-table-column
        prop="gender"
        label="性別">
      </el-table-column>
      <!--      列表添加項(xiàng)目
-->
      <el-table-column
        prop="school"
        label="學(xué)校名稱"
        width="180">
        <template slot-scope="scope" >
          <span class="" v-if="scope.row.school">
            <el-tag
              :type="scope.row.school.name === '深圳信息職業(yè)技術(shù)學(xué)院' ? 'primary' : 'success'"
              disable-transitions>{{scope.row.school.name}}</el-tag>
          </span>
        </template>
      </el-table-column>
      <el-table-column
        prop="academy"
        label="學(xué)院名稱"
        width="180">
        <template slot-scope="scope" >
          <span class="" v-if="scope.row.academy">
            <el-tag
              :type="scope.row.academy.name === '軟件學(xué)院' ? 'primary' : 'success'"
              disable-transitions>{{scope.row.academy.name}}</el-tag>
          </span>

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

      <el-table-column
        prop="classs"
        label="班級(jí)名稱"
        width="180">
        <template slot-scope="scope" >
          <span class="" v-if="scope.row.classs">
            <el-tag
              :type="scope.row.classs.name === '18軟工4-3' ? 'primary' : 'success'"
              disable-transitions>{{scope.row.classs.name}}</el-tag>
          </span>

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

      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleEdit(scope.$index, scope.row)">編輯
          </el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)">刪除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'

  export default {
    name: 'student',
    computed: {
      ...mapGetters([
        'name'
      ])
    },
    data() {
      return {
        apiModel:'student',
        users: {}
      }
    },
    methods: {
      onSubmit() {
        console.log(123434)
      },
      handleEdit(index, item) {
        this.$router.push({ path: '/'+this.apiModel+'/editor', query: {_id:item._id} })
      },
      handleDelete(index, item) {
        this.$http.post('/api/'+this.apiModel+'/delete', item).then(res => {
          console.log('res:', res)
          this.findUser()
        })

      },
      findUser(){
        this.$http.post('/api/'+this.apiModel+'/find', this.user).then(res => {
          console.log('res:', res)
          this.users = res
        })
      }
    },
    mounted() {
      this.findUser()
    }
  }
</script>

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

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

3.在index.js中添加路由:

image.png

代碼如下:

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

image.png

實(shí)訓(xùn)6

目標(biāo):創(chuàng)建班級(jí)管理模塊(老師和學(xué)院苦银、學(xué)校關(guān)聯(lián)起來(lái))

一、后臺(tái)三步驟:

1赶站、打開(kāi)projectName文件幔虏,在models目錄下創(chuàng)建teacher.js文件,接著文件操作:

image.png

teacher.js 代碼如下:

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

2亲怠、找到projectName(yuejia)下的routes目錄所计,創(chuàng)建teacher.js文件:

image.png

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中掛載路由:

image.png

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

二柠辞、前臺(tái)三步驟:

打開(kāi)vue-admin-template-master文件团秽,在src/views目錄下創(chuàng)建一個(gè)teacher模塊,并在teacher目錄下創(chuàng)建vue文件叭首。

1.editor.vue為編輯文件习勤,用于創(chuàng)建班級(jí)記錄;

image.png

image.png

teacher\editor.vue代碼如下:

<template>
  <div class="dashboard-container">
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="所屬學(xué)校">
        <el-select v-model="form.school" placeholder="請(qǐng)選擇" @change="schoolChange">
          <el-option
            v-for="item in schools"
            :key="item._id"
            :label="item.name"
            :value="item._id">
          </el-option>
        </el-select>
      </el-form-item>
      <!--      編輯框:學(xué)院選擇列表-->
      <el-form-item label="所屬學(xué)院">
        <el-select v-model="form.academy" placeholder="請(qǐng)選擇">
          <el-option
            v-for="item in academys"
            :key="item._id"
            :label="item.name"
            :value="item._id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="用戶名">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="年齡">
        <el-input v-model="form.age"></el-input>
      </el-form-item>
      <el-form-item label="性別">
        <el-input v-model="form.gender"></el-input>
      </el-form-item>
      <el-form-item label="級(jí)別">
        <el-input v-model="form.level"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">立即創(chuàng)建</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'

  export default {
    name: 'teacher-editor',
    computed: {
      ...mapGetters([
        'name'
      ])
    },
    data(){
      return{
        schools:[],
        academys:[],
        options: [
        ],
        apiModel:'teacher',
        form:{}
      }
    },
    methods:{
      onSubmit(){
        if(this.form._id){
          this.$http.post(`/api/${this.apiModel}/update`,this.form).then(res => {
            console.log('bar:', res)
            this.$router.push({path:this.apiModel})
            this.form={}
          })
        }else
        {
          this.$http.post('/api/'+this.apiModel+'/add',this.form).then(res => {
            console.log('bar:', res)
            this.$router.push({path:this.apiModel})
            this.form={}
          })
        }
      },
      schoolChange(val1){
        //顯示學(xué)院選擇欄目
        this.$http.post('/api/academy/get',{school:val1}).then(res => {
          if(res&&res.length>0){
            this.academys = res
            console.log('res:', res)
          }
        })
      }
    },

    mounted() {
      if(this.$route.query._id){
        this.$http.post('/api/'+this.apiModel+'/get',{_id:this.$route.query._id}).then(res => {
          if(res&&res.length>0){
            this.form = res[0]
            this.schoolChange(this.form.school)
          }
        })
      }

      //顯示學(xué)校選擇欄目
      this.$http.post('/api/school/find').then(res => {
        if(res&&res.length>0){
          this.schools = res
          console.log('res:', res)
        }
      })
    }
  }
</script>

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

2.index.vue為目錄文件焙格,用于顯示結(jié)果图毕;

teacher\index.vue代碼如下:

<template>
  <div class="dashboard-container">
    <el-table
      :data="users"
      style="width: 100%"
      :row-class-name="tableRowClassName">
      <el-table-column
        prop="name"
        label="名字"
        width="180">
      </el-table-column>
      <el-table-column
        prop="age"
        label="年齡"
        width="180">
      </el-table-column>
      <el-table-column
        prop="level"
        label="等級(jí)">
      </el-table-column>
      <el-table-column
        prop="gender"
        label="性別">
      </el-table-column>
      <!--      列表添加項(xiàng)目
-->
      <el-table-column
        prop="school"
        label="學(xué)校名稱"
        width="180">
        <template slot-scope="scope" >
          <span class="" v-if="scope.row.school">
            <el-tag
              :type="scope.row.school.name === '深圳信息職業(yè)技術(shù)學(xué)院' ? 'primary' : 'success'"
              disable-transitions>{{scope.row.school.name}}</el-tag>
          </span>
        </template>
      </el-table-column>
      <el-table-column
        prop="academy"
        label="學(xué)院名稱"
        width="180">
        <template slot-scope="scope" >
          <span class="" v-if="scope.row.academy">
            <el-tag
              :type="scope.row.academy.name === '軟件學(xué)院' ? 'primary' : 'success'"
              disable-transitions>{{scope.row.academy.name}}</el-tag>
          </span>

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

      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleEdit(scope.$index, scope.row)">編輯
          </el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)">刪除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'

  export default {
    name: 'teacher',
    computed: {
      ...mapGetters([
        'name'
      ])
    },
    data() {
      return {
        apiModel:'teacher',
        users: {}
      }
    },
    methods: {
      onSubmit() {
        console.log(123434)
      },
      handleEdit(index, item) {
        this.$router.push({ path: '/'+this.apiModel+'/editor', query: {_id:item._id} })
      },
      handleDelete(index, item) {
        this.$http.post('/api/'+this.apiModel+'/delete', item).then(res => {
          console.log('res:', res)
          this.findUser()
        })

      },
      findUser(){
        this.$http.post('/api/'+this.apiModel+'/find', this.user).then(res => {
          console.log('res:', res)
          this.users = res
        })
      }
    },
    mounted() {
      this.findUser()
    }
  }
</script>

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

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

3.在index.js中添加路由:

image.png

image.png

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' }
      }]
  },
image.png

image.png

實(shí)訓(xùn)總結(jié):

school-manager 校園管理后臺(tái)服務(wù)

實(shí)現(xiàn)了簡(jiǎn)單的校園管理業(yè)務(wù)。特點(diǎn)是環(huán)境基礎(chǔ)良好眷唉,適合教學(xué)予颤,和二次開(kāi)發(fā)囤官。

  • 1.學(xué)校增刪蓋查

  • 2.專業(yè)增刪改查

  • 3.班級(jí)層刪改查

  • 4.學(xué)生增刪改查

  • 5.老師增刪改查

軟件架構(gòu)

nodejs (koa2 mongoose)
element-ui
admin-element

開(kāi)發(fā)工具

數(shù)據(jù)庫(kù):mongodb
ide(項(xiàng)目開(kāi)發(fā)工具):webstorm

安裝教程

一. 后臺(tái)服務(wù)代碼地址 school-manager-server 代碼倉(cāng)庫(kù)

https://gitee.com/boooom/school-manager-server

# 克隆項(xiàng)目
git clone https://gitee.com/boooom/school-manager-server.git

# 進(jìn)入項(xiàng)目目錄
cd school-manager-server

# 安裝依賴
npm install

# 建議不要直接使用 cnpm 安裝以來(lái),會(huì)有各種詭異的 bug蛤虐〉骋可以通過(guò)如下操作解決 npm 下載速度慢的問(wèn)題
npm install --registry=https://registry.npm.taobao.org

# 啟動(dòng)服務(wù)
npm run dev

二. 前端界面代碼地址 school-manager-admin 代碼倉(cāng)庫(kù)

https://gitee.com/boooom/school-manager-admin

# 克隆項(xiàng)目
git clone https://gitee.com/boooom/school-manager-admin

# 進(jìn)入項(xiàng)目目錄
cd school-manager-admin

# 安裝依賴
npm install

# 啟動(dòng)服務(wù)
npm run dev

參與貢獻(xiàn)

school-manager-admin

school-manager-admin這是一個(gè)極簡(jiǎn)的 vue admin 管理后臺(tái)。它只包含了 Element UI & axios & iconfont & permission control & lint驳庭,這些搭建后臺(tái)必要的東西刑顺。

目前版本為 v4.0+ 基于 vue-cli 進(jìn)行構(gòu)建,若你想使用舊版本饲常,可以切換分支到tag/3.11.0蹲堂,它不依賴 vue-cli

Extra

如果你想要根據(jù)用戶角色來(lái)動(dòng)態(tài)生成側(cè)邊欄和 router贝淤,你可以使用該分支permission-control

相關(guān)項(xiàng)目

在這里我們使用了- electron-vue-admin

寫了一個(gè)系列的教程配套文章柒竞,如何從零構(gòu)建后一個(gè)完整的后臺(tái)項(xiàng)目:

Build Setup 以下是后臺(tái)管理的操作


# 建議不要直接使用 cnpm 安裝以來(lái),會(huì)有各種詭異的 bug播聪∧芊福可以通過(guò)如下操作解決 npm 下載速度慢的問(wèn)題
npm install --registry=https://registry.npm.taobao.org

# 啟動(dòng)服務(wù)
npm run dev

瀏覽器訪問(wèn) http://localhost:9528

發(fā)布

# 構(gòu)建測(cè)試環(huán)境
npm run build:stage

# 構(gòu)建生產(chǎn)環(huán)境
npm run build:prod

其它

# 預(yù)覽發(fā)布環(huán)境效果
npm run preview

# 預(yù)覽發(fā)布環(huán)境效果 + 靜態(tài)資源分析
npm run preview -- --report

# 代碼格式檢查
npm run lint

# 代碼格式檢查并自動(dòng)修復(fù)
npm run lint -- --fix

總體效果圖

image.png
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市犬耻,隨后出現(xiàn)的幾起案子踩晶,更是在濱河造成了極大的恐慌,老刑警劉巖枕磁,帶你破解...
    沈念sama閱讀 211,290評(píng)論 6 491
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件渡蜻,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡计济,警方通過(guò)查閱死者的電腦和手機(jī)茸苇,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,107評(píng)論 2 385
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)沦寂,“玉大人学密,你說(shuō)我怎么就攤上這事〈兀” “怎么了腻暮?”我有些...
    開(kāi)封第一講書人閱讀 156,872評(píng)論 0 347
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)毯侦。 經(jīng)常有香客問(wèn)我哭靖,道長(zhǎng),這世上最難降的妖魔是什么侈离? 我笑而不...
    開(kāi)封第一講書人閱讀 56,415評(píng)論 1 283
  • 正文 為了忘掉前任试幽,我火速辦了婚禮,結(jié)果婚禮上卦碾,老公的妹妹穿的比我還像新娘铺坞。我一直安慰自己起宽,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,453評(píng)論 6 385
  • 文/花漫 我一把揭開(kāi)白布济榨。 她就那樣靜靜地躺著燎含,像睡著了一般。 火紅的嫁衣襯著肌膚如雪腿短。 梳的紋絲不亂的頭發(fā)上屏箍,一...
    開(kāi)封第一講書人閱讀 49,784評(píng)論 1 290
  • 那天,我揣著相機(jī)與錄音橘忱,去河邊找鬼赴魁。 笑死,一個(gè)胖子當(dāng)著我的面吹牛钝诚,可吹牛的內(nèi)容都是我干的颖御。 我是一名探鬼主播,決...
    沈念sama閱讀 38,927評(píng)論 3 406
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼凝颇,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼潘拱!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起拧略,我...
    開(kāi)封第一講書人閱讀 37,691評(píng)論 0 266
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤芦岂,失蹤者是張志新(化名)和其女友劉穎,沒(méi)想到半個(gè)月后垫蛆,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體禽最,經(jīng)...
    沈念sama閱讀 44,137評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,472評(píng)論 2 326
  • 正文 我和宋清朗相戀三年袱饭,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了川无。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 38,622評(píng)論 1 340
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡虑乖,死狀恐怖懦趋,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情疹味,我是刑警寧澤仅叫,帶...
    沈念sama閱讀 34,289評(píng)論 4 329
  • 正文 年R本政府宣布,位于F島的核電站佛猛,受9級(jí)特大地震影響惑芭,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜继找,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,887評(píng)論 3 312
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望逃沿。 院中可真熱鬧婴渡,春花似錦幻锁、人聲如沸。這莊子的主人今日做“春日...
    開(kāi)封第一講書人閱讀 30,741評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至柠并,卻和暖如春岭接,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背臼予。 一陣腳步聲響...
    開(kāi)封第一講書人閱讀 31,977評(píng)論 1 265
  • 我被黑心中介騙來(lái)泰國(guó)打工鸣戴, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人粘拾。 一個(gè)月前我還...
    沈念sama閱讀 46,316評(píng)論 2 360
  • 正文 我出身青樓窄锅,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親缰雇。 傳聞我的和親對(duì)象是個(gè)殘疾皇子入偷,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,490評(píng)論 2 348

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