實訓五
學生管理
一茬贵、后臺三步驟：
1、打開projectName文件沼头，在models目錄下創(chuàng)建student.js文件
projectName/db/models/student.js：
const mongoose = require('mongoose')
const Schema= mongoose.Schema
const feld={
name: String,
//人物標簽
age:Number,
student_number: Number,
gender:String,
school : { type: Schema.Types.ObjectId, ref: 'School' },
academy : { type: Schema.Types.ObjectId, ref: 'Academy' },
classs : { type: Schema.Types.ObjectId, ref: 'Classs' }
}
//自動添加更新時間創(chuàng)建時間:
let personSchema = new mongoose.Schema(feld, {timestamps: {createdAt: 'created', updatedAt: 'updated'}})
module.exports= mongoose.model('Student',personSchema)
2爷绘、在routes目錄下添加student.js：
projectName/routes/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 classs= require('./routes/student')
app.use(student.routes(), student.allowedMethods())
二、前臺三步驟：
1进倍、在src/views目錄下添加student目錄
image.png
在student目錄下添加editor.vue：
vue-admin-template/src/views/student/editor.vue：
<template>
<div class="dashboard-container">
<el-form ref="form" :model="form" label-width="80px">
<!-- 編輯框：學校選擇列表-->
<el-form-item label="所屬學校">
<el-select v-model="form.school" placeholder="請選擇" @change="schoolChange">
<el-option
v-for="item in schools"
:key="item._id"
:label="item.name"
:value="item._id">
</el-option>
</el-select>
</el-form-item>
<!-- 編輯框：學院選擇列表-->
<el-form-item label="所屬學院">
<el-select v-model="form.academy" placeholder="請選擇">
<el-option
v-for="item in academys"
:key="item._id"
:label="item.name"
:value="item._id">
</el-option>
</el-select>
</el-form-item>
<!-- 編輯框：班級選擇列表-->
<el-form-item label="所屬班級">
<el-select v-model="form.classs" placeholder="請選擇">
<el-option
v-for="item in classs"
:key="item._id"
:label="item.name"
:value="item._id">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="用戶名">
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="年齡">
<el-input v-model="form.age"></el-input>
</el-form-item>
<el-form-item label="學號">
<el-input v-model="form.student_number"></el-input>
</el-form-item>
<el-form-item label="性別">
<el-input v-model="form.gender"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">立即創(chuàng)建</el-button>
<el-button>取消</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
name: 'student',
computed: {
...mapGetters([
'name'
])
},
data(){
return{
schools:[],
academys:[],
classs:[],
//列表內容
options: [
],
apiModel:'student',
form:{}
}
},
methods:{
onSubmit(){
if(this.form._id){
this.$http.post(`/api/${this.apiModel}/update`,this.form).then(res => {
console.log('bar:', res)
this.$router.push({path:this.apiModel})
this.form={}
})
}else
{
this.$http.post('/api/'+this.apiModel+'/add',this.form).then(res => {
console.log('bar:', res)
this.$router.push({path:this.apiModel})
this.form={}
})
}
},
schoolChange(val1){
//顯示學院選擇欄目
this.$http.post('/api/academy/get',{school:val1}).then(res => {
if(res&&res.length>0){
this.academys = res
console.log('res:', res)
}
})
}
},
mounted() {
if(this.$route.query._id){
this.$http.post('/api/'+this.apiModel+'/get',{_id:this.$route.query._id}).then(res => {
if(res&&res.length>0){
this.form = res[0]
this.schoolChange(this.form.school)
}
})
}
//顯示學校選擇欄目
this.$http.post('/api/school/find').then(res => {
if(res&&res.length>0){
this.schools = res
console.log('res:', res)
}
})
//顯示班級欄目
this.$http.post('/api/classs/find').then(res => {
if(res&&res.length>0){
this.classs = res
console.log('res:', res)
}
})
}
}
</script>
<style lang="scss" scoped>
.dashboard {
&-container {
margin: 30px;
}
&-text {
font-size: 30px;
line-height: 46px;
}
}
</style>
2.在student目錄下添加index.vue：
vue-admin-template/src/views/student/index.vue：
<template>
<div class="dashboard-container">
<el-table
:data="users"
style="width: 100%"
:row-class-name="tableRowClassName">
<el-table-column
prop="name"
label="名字"
width="180">
</el-table-column>
<el-table-column
prop="age"
label="年齡"
width="180">
</el-table-column>
<el-table-column
prop="student_number"
label="學號">
</el-table-column>
<el-table-column
prop="gender"
label="性別">
</el-table-column>
<!-- 列表添加項目
-->
<el-table-column
prop="school"
label="學校名稱"
width="180">
<template slot-scope="scope" >
<span class="" v-if="scope.row.school">
<el-tag
:type="scope.row.school.name === '深圳信息職業(yè)技術學院' ? 'primary' : 'success'"
disable-transitions>{{scope.row.school.name}}</el-tag>
</span>
</template>
</el-table-column>
<el-table-column
prop="academy"
label="學院名稱"
width="180">
<template slot-scope="scope" >
<span class="" v-if="scope.row.academy">
<el-tag
:type="scope.row.academy.name === '軟件學院' ? 'primary' : 'success'"
disable-transitions>{{scope.row.academy.name}}</el-tag>
</span>
</template>
</el-table-column>
<el-table-column
prop="classs"
label="班級名稱"
width="180">
<template slot-scope="scope" >
<span class="" v-if="scope.row.classs">
<el-tag
:type="scope.row.classs.name === '18軟工4-3' ? 'primary' : 'success'"
disable-transitions>{{scope.row.classs.name}}</el-tag>
</span>
</template>
</el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button
size="mini"
@click="handleEdit(scope.$index, scope.row)">編輯
</el-button>
<el-button
size="mini"
type="danger"
@click="handleDelete(scope.$index, scope.row)">刪除
</el-button>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
name: 'student',
computed: {
...mapGetters([
'name'
])
},
data() {
return {
apiModel:'student',
users: {}
}
},
methods: {
onSubmit() {
console.log(123434)
},
handleEdit(index, item) {
this.$router.push({ path: '/'+this.apiModel+'/editor', query: {_id:item._id} })
},
handleDelete(index, item) {
this.$http.post('/api/'+this.apiModel+'/delete', item).then(res => {
console.log('res:', res)
this.findUser()
})
},
findUser(){
this.$http.post('/api/'+this.apiModel+'/find', this.user).then(res => {
console.log('res:', res)
this.users = res
})
}
},
mounted() {
this.findUser()
}
}
</script>
<style lang="scss" scoped>
.dashboard {
&-container {
margin: 30px;
}
&-text {
font-size: 30px;
line-height: 46px;
}
}
</style>
3.在index.js中添加路由：
{
path: '/student',
component: Layout,
meta: { title: '學生管理', icon: 'example' },
redirect: '/student',
children: [{
path: 'student',
name: 'student',
component: () => import('@/views/student/index'),
meta: { title: '學生管理', icon: 'user' }
},
{
path: 'editor',
name: 'editor',
component: () => import('@/views/student/editor'),
meta: { title: '添加學生', icon: 'user' }
}]
},
學生管理效果圖：
image.png
這樣就完成了土至。
實訓六
老師管理
一、后臺三步驟：
1猾昆、打開projectName文件陶因，在models目錄下創(chuàng)建teacher.js文件
projectName/db/models/teacher.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' },
student : { type: Schema.Types.ObjectId, ref: 'Student' }
}
//自動添加更新時間創(chuàng)建時間:
let personSchema = new mongoose.Schema(feld, {timestamps: {createdAt: 'created', updatedAt: 'updated'}})
module.exports= mongoose.model('Teacher',personSchema)
2.在routes目錄下添加teacher.js：
projectName/routes/teacher.js：
const router = require('koa-router')()
let Model = require("../db/models/teacher");
router.prefix('/teacher')
router.get('/', function (ctx, next) {
ctx.body = 'this is a users response!'
})
router.post('/add', async function (ctx, next) {
console.log(ctx.request.body)
let model = new Model(ctx.request.body);
model = await model.save();
console.log('user',model)
ctx.body = model
})
router.post('/find', async function (ctx, next) {
let models = await Model.
find({}).populate('student').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 teacher= require('./routes/teacher')
app.use(teacher.routes(), teacher.allowedMethods())
二、前臺三步驟：
1.在src/views目錄下添加teacher目錄
image.png
在teacher目錄下添加editor.vue：
vue-admin-template/src/views/teacher/editor.vue：
<template>
<div class="dashboard-container">
<el-form ref="form" :model="form" label-width="80px">
<!-- 編輯框：學校選擇列表-->
<el-form-item label="所屬學校">
<el-select v-model="form.school" placeholder="請選擇" @change="schoolChange">
<el-option
v-for="item in schools"
:key="item._id"
:label="item.name"
:value="item._id">
</el-option>
</el-select>
</el-form-item>
<!-- 編輯框：學院選擇列表-->
<el-form-item label="所屬學院">
<el-select v-model="form.academy" placeholder="請選擇">
<el-option
v-for="item in academys"
:key="item._id"
:label="item.name"
:value="item._id">
</el-option>
</el-select>
</el-form-item>
<!-- 編輯框：班級選擇列表-->
<el-form-item label="所屬班級">
<el-select v-model="form.classs" placeholder="請選擇">
<el-option
v-for="item in classs"
:key="item._id"
:label="item.name"
:value="item._id">
</el-option>
</el-select>
</el-form-item>
<!-- 編輯框：學生選擇列表-->
<el-form-item label="所選學生">
<el-select v-model="form.student" placeholder="請選擇">
<el-option
v-for="item in students"
: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>
<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:[],
classs:[],
students:[],
//列表內容
options: [
],
apiModel:'teacher',
form:{}
}
},
methods:{
onSubmit(){
if(this.form._id){
this.$http.post(`/api/${this.apiModel}/update`,this.form).then(res => {
console.log('bar:', res)
this.$router.push({path:this.apiModel})
this.form={}
})
}else
{
this.$http.post('/api/'+this.apiModel+'/add',this.form).then(res => {
console.log('bar:', res)
this.$router.push({path:this.apiModel})
this.form={}
})
}
},
schoolChange(val1){
//顯示學院選擇欄目
this.$http.post('/api/academy/get',{school:val1}).then(res => {
if(res&&res.length>0){
this.academys = res
console.log('res:', res)
}
})
}
},
mounted() {
if(this.$route.query._id){
this.$http.post('/api/'+this.apiModel+'/get',{_id:this.$route.query._id}).then(res => {
if(res&&res.length>0){
this.form = res[0]
this.schoolChange(this.form.school)
}
})
}
//顯示學校選擇欄目
this.$http.post('/api/school/find').then(res => {
if(res&&res.length>0){
this.schools = res
console.log('res:', res)
}
})
//顯示班級欄目
this.$http.post('/api/classs/find').then(res => {
if(res&&res.length>0){
this.classs = res
console.log('res:', res)
}
})
//顯示學生欄目
this.$http.post('/api/student/find').then(res => {
if(res&&res.length>0){
this.students = res
console.log('res:', res)
}
})
}
}
</script>
<style lang="scss" scoped>
.dashboard {
&-container {
margin: 30px;
}
&-text {
font-size: 30px;
line-height: 46px;
}
}
</style>
2.在teacher目錄下添加index.vue：
vue-admin-template/src/views/teacher/index.vue：
<template>
<div class="dashboard-container">
<el-table
:data="users"
style="width: 100%"
:row-class-name="tableRowClassName">
<el-table-column
prop="name"
label="名字"
width="180">
</el-table-column>
<el-table-column
prop="age"
label="年齡"
width="180">
</el-table-column>
<el-table-column
prop="gender"
label="性別">
</el-table-column>
<!-- 列表添加項目
-->
<el-table-column
prop="school"
label="學校名稱"
width="180">
<template slot-scope="scope" >
<span class="" v-if="scope.row.school">
<el-tag
:type="scope.row.school.name === '深圳信息職業(yè)技術學院' ? 'primary' : 'success'"
disable-transitions>{{scope.row.school.name}}</el-tag>
</span>
</template>
</el-table-column>
<el-table-column
prop="academy"
label="學院名稱"
width="180">
<template slot-scope="scope" >
<span class="" v-if="scope.row.academy">
<el-tag
:type="scope.row.academy.name === '軟件學院' ? 'primary' : 'success'"
disable-transitions>{{scope.row.academy.name}}</el-tag>
</span>
</template>
</el-table-column>
<el-table-column
prop="classs"
label="班級名稱"
width="180">
<template slot-scope="scope" >
<span class="" v-if="scope.row.classs">
<el-tag
:type="scope.row.classs.name === '18軟工4-3' ? 'primary' : 'success'"
disable-transitions>{{scope.row.classs.name}}</el-tag>
</span>
</template>
</el-table-column>
<el-table-column
prop="student"
label="學生名稱"
width="180">
<template slot-scope="scope" >
<span class="" v-if="scope.row.student">
<el-tag
:type="scope.row.student.name === '湯圓' ? 'primary' : 'success'"
disable-transitions>{{scope.row.student.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中添加路由：
{
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
到碼云可查看完整版代碼贴见，鏈接如下：
