實(shí)訓(xùn)1
1.安裝 nodejs
<meta charset="utf-8">
根據(jù)自己電腦系統(tǒng)及位數(shù)選擇躁绸,選擇windows64位.msi
格式安裝包
打開(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
啟動(dòng)成功
刪除多余界面 router/index
刪除后的界面如下
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
/* Layout */
import Layout from '@/layout'
/**
* Note: sub-menu only appear when route children.length >= 1
* Detail see: https://panjiachen.github.io/vue-element-admin-site/guide/essentials/router-and-nav.html
*
* hidden: true if set true, item will not show in the sidebar(default is false)
* alwaysShow: true if set true, will always show the root menu
* if not set alwaysShow, when item has more than one children route,
* it will becomes nested mode, otherwise not show the root menu
* redirect: noRedirect if set noRedirect will no redirect in the breadcrumb
* name:'router-name' the name is used by <keep-alive> (must set!!!)
* meta : {
roles: ['admin','editor'] control the page roles (you can set multiple roles)
title: 'title' the name show in sidebar and breadcrumb (recommend set)
icon: 'svg-name'/'el-icon-x' the icon show in the sidebar
breadcrumb: false if set false, the item will hidden in breadcrumb(default is true)
activeMenu: '/example/list' if set path, the sidebar will highlight the path you set
}
*/
/**
* constantRoutes
* a base page that does not have permission requirements
* all roles can be accessed
*/
export const constantRoutes = [
{
path: '/login',
component: () => import('@/views/login/index'),
hidden: true
},
{
path: '/404',
component: () => import('@/views/404'),
hidden: true
},
{
path: '/',
component: Layout,
redirect: '/dashboard',
children: [{
path: 'dashboard',
name: 'Dashboard',
component: () => import('@/views/dashboard/index'),
meta: { title: 'Dashboard', icon: 'dashboard' }
}]
},
// 404 page must be placed at the end !!!
{ path: '*', redirect: '/404', hidden: true }
]
const createRouter = () => new Router({
// mode: 'history', // require service support
scrollBehavior: () => ({ y: 0 }),
routes: constantRoutes
})
const router = createRouter()
// Detail see: https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465
export function resetRouter() {
const newRouter = createRouter()
router.matcher = newRouter.matcher // reset router
}
export default router
安裝ES6語(yǔ)法插件
npm install --save es6-promise
安裝老師Axios 插件
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){//用戶登錄時(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代理:
vue.config.js ↓
'use strict'
const path = require('path')
const defaultSettings = require('./src/settings.js')
function resolve(dir) {
return path.join(__dirname, dir)
}
const name = defaultSettings.title || 'vue Admin Template' // page title
// If your port is set to 80,
// use administrator privileges to execute the command line.
// For example, Mac: sudo npm run
// You can change the port by the following methods:
// port = 9528 npm run dev OR npm run dev --port = 9528
const port = process.env.port || process.env.npm_config_port || 9528 // dev port
// All configuration item explanations can be find in https://cli.vuejs.org/config/
module.exports = {
/**
* You will need to set publicPath if you plan to deploy your site under a sub path,
* for example GitHub Pages. If you plan to deploy your site to https://foo.github.io/bar/,
* then publicPath should be set to "/bar/".
* In most cases please use '/' !!!
* Detail: https://cli.vuejs.org/config/#publicpath
*/
publicPath: '/',
outputDir: 'dist',
assetsDir: 'static',
lintOnSave: process.env.NODE_ENV === 'development',
productionSourceMap: false,
devServer: {
port: port,
open: true,
overlay: {
warnings: false,
errors: true
},
proxy: {
// change xxx-api/login => mock/login
// detail: https://cli.vuejs.org/config/#devserver-proxy
[process.env.VUE_APP_BASE_API]: {
target: `http://127.0.0.1:${port}/mock`,
changeOrigin: true,
pathRewrite: {
['^' + process.env.VUE_APP_BASE_API]: ''
}
},
['/api']: {
target: `http://127.0.0.1:3000`,
changeOrigin: true,
pathRewrite: {
['^' + '/api']: ''
}
}
},
after: require('./mock/mock-server.js')
},
configureWebpack: {
// provide the app's title in webpack's name field, so that
// it can be accessed in index.html to inject the correct title.
name: name,
resolve: {
alias: {
'@': resolve('src')
}
}
},
chainWebpack(config) {
config.plugins.delete('preload') // TODO: need test
config.plugins.delete('prefetch') // TODO: need test
// set svg-sprite-loader
config.module
.rule('svg')
.exclude.add(resolve('src/icons'))
.end()
config.module
.rule('icons')
.test(/\.svg$/)
.include.add(resolve('src/icons'))
.end()
.use('svg-sprite-loader')
.loader('svg-sprite-loader')
.options({
symbolId: 'icon-[name]'
})
.end()
// set preserveWhitespace
config.module
.rule('vue')
.use('vue-loader')
.loader('vue-loader')
.tap(options => {
options.compilerOptions.preserveWhitespace = true
return options
})
.end()
config
// https://webpack.js.org/configuration/devtool/#development
.when(process.env.NODE_ENV === 'development',
config => config.devtool('cheap-source-map')
)
config
.when(process.env.NODE_ENV !== 'development',
config => {
config
.plugin('ScriptExtHtmlWebpackPlugin')
.after('html')
.use('script-ext-html-webpack-plugin', [{
// `runtime` must same as runtimeChunk name. default is `runtime`
inline: /runtime\..*\.js$/
}])
.end()
config
.optimization.splitChunks({
chunks: 'all',
cacheGroups: {
libs: {
name: 'chunk-libs',
test: /[\\/]node_modules[\\/]/,
priority: 10,
chunks: 'initial' // only package third parties that are initially dependent
},
elementUI: {
name: 'chunk-elementUI', // split elementUI into a single package
priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app
test: /[\\/]node_modules[\\/]_?element-ui(.*)/ // in order to adapt to cnpm
},
commons: {
name: 'chunk-commons',
test: resolve('src/components'), // can customize your rules
minChunks: 3, // minimum common number
priority: 5,
reuseExistingChunk: true
}
}
})
config.optimization.runtimeChunk('single')
}
)
}
}
main.js中加入http
添加代碼如下:
import http from './utils/http'
Vue.use(http)
調(diào)用接口:
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的歡迎界面就代表成功了映屋。
安裝本地mongodb或者在mongodb官網(wǎng)新建免費(fèi)的云端服務(wù)器
第一步:創(chuàng)建集群
如果已經(jīng)有了集群的界面如下
第三步:創(chuàng)建IP白名單
0.0.0.0/0代表所有IP都可以訪問(wèn)!
image.png
第四步:load Sample Data
第五步:創(chuàng)建數(shù)據(jù)庫(kù)
創(chuàng)建完成如下
安裝mongoose
npm install mongoose --save
安裝過(guò)程問(wèn)題:卡著不動(dòng)
例如如下:
解決該問(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ù)自己需要下載編輯器
db目錄下創(chuàng)建一個(gè)config.js
config.js ↓
module.exports = {
// dbs: 'mongodb://139.159.253.110:27017/test1'
dbs: 'mongodb+srv://xxwozixin:<需要修改>@cluster0-7d5kk.mongodb.net/test?retryWrites=true&w=majority'
}
修改根目錄app.js
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ù)
npm run dev
到這里前后端就連接通了湾蔓,可以開(kāi)始操作數(shù)據(jù)庫(kù)
實(shí)訓(xùn)2
目標(biāo):學(xué)校管理
一瘫析、后臺(tái)三步驟:
1、打開(kāi)projectName(你創(chuàng)建的文件名)文件默责,在models目錄下創(chuàng)建school.js文件聪富,接著文件操作:
備注:我的文件名是:yuejia
代碼如下:
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())
二俄占、前臺(tái)三步驟:
打開(kāi)vue-admin-template-master文件,在src/views目錄下創(chuàng)建一個(gè)school模塊:并在school目錄下創(chuàng)建vue文件葡缰。添加editor.vue 和index.vue
1.editor.vue為編輯文件亏掀,用于創(chuàng)建學(xué)校記錄;
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é)果滤愕;
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中添加路由:
{
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' }
}]
},
實(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文件间影,接著文件操作:
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文件:
代碼如下:
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中掛載路由:
代碼如下:
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模塊:
并在academy目錄下創(chuàng)建vue文件裙顽。
1.editor.vue為編輯文件付燥,用于創(chuàng)建學(xué)院記錄;
代碼如下:
<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é)果键科;
<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中添加路由:
{
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' }
}]
},
實(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文件勋锤,接著文件操作:
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文件:
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())
二怪得、前臺(tái)三步驟:
打開(kāi)vue-admin-template-master文件咱枉,在src/views目錄下創(chuàng)建一個(gè)classs模塊卑硫,并在academy目錄下創(chuàng)建vue文件。
1.editor.vue為編輯文件蚕断,用于創(chuàng)建班級(jí)記錄欢伏;
代碼如下:
<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é)果
代碼如下:
<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中添加路由:
{
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' }
}]
},
實(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文件,接著文件操作:
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文件:
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())
二、前臺(tái)三步驟:
打開(kāi)vue-admin-template-master文件带斑,在src/views目錄下創(chuàng)建一個(gè)student模塊鼓寺,并在student目錄下創(chuàng)建vue文件。
1.editor.vue為編輯文件勋磕,用于創(chuàng)建班級(jí)記錄妈候;
<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é)果挂滓;
<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中添加路由:
代碼如下:
{
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' }
}]
},
實(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文件,接著文件操作:
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文件:
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())
二柠辞、前臺(tái)三步驟:
打開(kāi)vue-admin-template-master文件团秽,在src/views目錄下創(chuàng)建一個(gè)teacher模塊,并在teacher目錄下創(chuàng)建vue文件叭首。
1.editor.vue為編輯文件习勤,用于創(chuàng)建班級(jí)記錄;
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中添加路由:
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í)訓(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)目:
- 學(xué)校管理系統(tǒng) school-manager-admin(環(huán)境配置)
- nodejs vue-element-admin(實(shí)訓(xùn)續(xù)2)
- nodejs vue-element-admin(實(shí)訓(xùn)續(xù)3)
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