实训一（校园管理系统1-部署环境，云端本地数据库相连）
1.安装 nodejs
官网下载
npm install –g vue-cli
镜像下载
Npm config set registry https://registry.npm.taobao.org
2.新建文件夹在搜索栏输入cmd
3.输入
vue init webpack my-project
(一直下一步，除第一个yes，其他都no)
4.完成后输入
cd my-project
5.再输入运行
npm run dev
6.自动获得网址
2.安装 git
官网下载安装即可，一切都选择默认。
3.下载 vue-element-admin
# clone the project
git clone https://github.com/PanJiaChen/vue-admin-template.git
# enter the project directory
cd vue-admin-template
# install dependency
npm install
# develop
npm run dev
1608038953(1).png
1608038978(1).png
删除多余界面,用编辑器打开 vue-admin-template/src/router/index
删除后的界面如下
import Router from 'vue-router'
Vue.use(Router)
/* Layout */
import Layout from '@/layout'
/**
* Note: sub-menu only appear when route children.length >= 1
* Detail see: https://panjiachen.github.io/vue-element-admin-site/guide/essentials/router-and-nav.html
*
* hidden: true if set true, item will not show in the sidebar(default is false)
* alwaysShow: true if set true, will always show the root menu
* if not set alwaysShow, when item has more than one children route,
* it will becomes nested mode, otherwise not show the root menu
* redirect: noRedirect if set noRedirect will no redirect in the breadcrumb
* name:'router-name' the name is used by (must set!!!)
* meta : {
roles: ['admin','editor'] control the page roles (you can set multiple roles)
title: 'title' the name show in sidebar and breadcrumb (recommend set)
icon: 'svg-name' the icon show in the sidebar
breadcrumb: false if set false, the item will hidden in breadcrumb(default is true)
activeMenu: '/example/list' if set path, the sidebar will highlight the path you set
}
*/
/**
* constantRoutes
* a base page that does not have permission requirements
* all roles can be accessed
*/
export const constantRoutes = [
{
path: '/login',
component: () => import('@/views/login/index'),
hidden: true
},
{
path: '/404',
component: () => import('@/views/404'),
hidden: true
},
{
path: '/',
component: Layout,
redirect: '/dashboard',
children: [{
path: 'dashboard',
name: 'Dashboard',
component: () => import('@/views/dashboard/index'),
meta: { title: 'Dashboard', icon: 'dashboard' }
}]
},
// 404 page must be placed at the end !!!
{ path: '*', redirect: '/404', hidden: true }
]
const createRouter = () => new Router({
// mode: 'history', // require service support
scrollBehavior: () => ({ y: 0 }),
routes: constantRoutes
})
const router = createRouter()
// Detail see: https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465
export function resetRouter() {
const newRouter = createRouter()
router.matcher = newRouter.matcher // reset router
}
export default router
4.安装ES6语法插件
npm install --save es6-promise
1608039574(1).png
5.加入Axios 插件
用编辑器新建一个js文件命名为http，存放在vue-admin-template/src/utils下
http.js代码 ↓
import Vue from 'vue';
import Axios from 'axios';
import {Promise} from 'es6-promise';
import {MessageBox, Message} from 'element-ui'
Axios.defaults.timeout = 30000; // 1分钟
Axios.defaults.baseURL = '';
Axios.interceptors.request.use(function (config) {
// Do something before request is sent
//change method for get
/*if(process.env.NODE_ENV == 'development'){
config['method'] = 'GET';
console.log(config)
}*/
if (config['MSG']) {
// Vue.prototype.$showLoading(config['MSG']);
} else {
// Vue.prototype.$showLoading();
}
// if(user.state.token){//用户登录时每次请求将token放入请求头中
// config.headers["token"] = user.state.token;
// }
if (config['Content-Type'] === 'application/x-www-form-urlencoded;') {//默认发application/json请求，如果application/x-www-form-urlencoded;需要使用transformRequest对参数进行处理
/*config['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';*/
config.headers['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';
config['transformRequest'] = function (obj) {
var str = [];
for (var p in obj)
str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
return str.join("&")
};
}
//config.header['Content-Type'] = 'application/x-www-form-urlencoded; charset=UTF-8';
return config;
}, function (error) {
// Do something with request error
// Vue.$vux.loading.hide()
return Promise.reject(error);
});
Axios.interceptors.response.use(
response => {
// Vue.$vux.loading.hide();
return response.data;
},
error => {
// Vue.$vux.loading.hide();
if (error.response) {
switch (error.response.status) {
case 404:
Message({
message: '' || 'Error',
type: 'error',
duration: 5 * 1000
})
break;
default:
Message({
message: '' || 'Error',
type: 'error',
duration: 5 * 1000
})
}
} else if (error instanceof Error) {
console.error(error);
} else {
Message({
message: '' || 'Error',
type: 'error',
duration: 5 * 1000
})
}
return Promise.reject(error.response);
});
export default Vue.prototype.$http = Axios;
6.配置axios代理：
打开vue-admin-template文件夹找到vue.config.js，向其中加入如下代码
proxy: {
// change xxx-api/login => mock/login
// detail: https://cli.vuejs.org/config/#devserver-proxy
[process.env.VUE_APP_BASE_API]: {
target: `http://127.0.0.1:${port}/mock`,
changeOrigin: true,
pathRewrite: {
['^' + process.env.VUE_APP_BASE_API]: ''
}
},
['/api']: {
target: `http://127.0.0.1:3000`,
changeOrigin: true,
pathRewrite: {
['^' + '/api']: ''
}
}
},
1608041021(1).png
7.打开vue-admin-template/src/main.js
加入http
import http from './utils/http'
Vue.use(http)
8.调用接口：
打开vue-admin-template\src\views\dashboard下的index
替换为如下代码
index.vue ↓
欢迎登录校园管理系统：
学校：{{schoolCount}}
学院：{{academyCount}}
班级：{{classsCount}}
学生：{{studentCount}}
老师：{{teacherCount}}
9.打开命令提示符：
全局安装koa-generator,执行下面命令
npm install -g koa-generator
构建koa2项目代码如下
koa2 projectName
1608041631(1).png
初始化后台项目插件，命令属下:
cd projectName
初始化项目，如果没有安装git工具会报错:
npm install
界面成功
1608041965(1).png
http://localhost:3000/
出现koa2的欢迎界面就代表成功
1608042001(1).png
10. 安装本地mongodb或者在mongodb官网新建免费的云端服务器。
云端建立集群步骤
打开projectName输入cmd打开命令提示符
安装mongoose
npm install mongoose-save
在projectName中创建db目录，db下创建models
新建两个JS文件将config.js放入db，user.js 放入models
代码如下：
config.js ↓
module.exports = {
// dbs: 'mongodb://139.159.253.110:27017/test1'
dbs: 'mongodb+srv://ZJD:[email protected]/ZJD?retryWrites=true&w=majority'
}
user.js ↓
const mongoose = require('mongoose')
const feld={
name: String,
age: Number,
//人物标签
labels:Number
}
//自动添加更新时间创建时间:
let personSchema = new mongoose.Schema(feld, {timestamps: {createdAt: 'created', updatedAt: 'updated'}})
module.exports= mongoose.model('User',personSchema)
修改projectName下的app.js
const Koa = require('koa')
const app = new Koa()
const views = require('koa-views')
const json = require('koa-json')
const onerror = require('koa-onerror')
const bodyparser = require('koa-bodyparser')
const logger = require('koa-logger')
const index = require('./routes/index')
const users = require('./routes/users')
const mongoose = require('mongoose')
const dbconfig = require('./db/config')
mongoose.connect(dbconfig.dbs, {useNewUrlParser: true,useUnifiedTopology: true})
const db = mongoose.connection
db.on('error', console.error.bind(console, 'connection error:'));
db.once('open', function() {
console.log('mongoose 连接成功')
});
// error handler
onerror(app)
// middlewares
app.use(bodyparser({
enableTypes:['json', 'form', 'text']
}))
app.use(json())
app.use(logger())
app.use(require('koa-static')(__dirname + '/public'))
app.use(views(__dirname + '/views', {
extension: 'pug'
}))
// logger
app.use(async (ctx, next) => {
const start = new Date()
await next()
const ms = new Date() - start
console.log(`${ctx.method} ${ctx.url} - ${ms}ms`)
})
// routes
app.use(index.routes(), index.allowedMethods())
app.use(users.routes(), users.allowedMethods())
// error-handling
app.on('error', (err, ctx) => {
console.error('server error', err, ctx)
});
module.exports = app
// error handler
onerror(app)
// middlewares
app.use(bodyparser({
enableTypes:['json', 'form', 'text']
}))
app.use(json())
app.use(logger())
app.use(require('koa-static')(__dirname + '/public'))
app.use(views(__dirname + '/views', {
extension: 'pug'
}))
// logger
app.use(async (ctx, next) => {
const start = new Date()
await next()
const ms = new Date() - start
console.log(`${ctx.method} ${ctx.url} - ${ms}ms`)
})
// routes
app.use(index.routes(), index.allowedMethods())
app.use(users.routes(), users.allowedMethods())
// error-handling
app.on('error', (err, ctx) => {
console.error('server error', err, ctx)
});
module.exports = app
修改projectName\router下的users.js
users.js ↓
const router = require('koa-router')()
const User = require('../db/models/user')
router.prefix('/users')
router.get('/add', function (ctx, next) {
ctx.body = 'this is a users/bar response'
})
router.get('/', function (ctx, next) {
ctx.body = 'this is a users response!'
})
router.get('/bar', function (ctx, next) {
ctx.body = 'this is a users/bar response'
})
module.exports = router
打开projectName输入cmd打开命令提示符，重启项目
注意先关掉前面我们启动的服务再运行
npm run dev
结果成功界面
image.png
image.png
实训二（校园管理系统2-学校管理）
一、后台三步骤：
1、打开projectName文件，在db/models目录下创建school.js文件，接着文件操作：
const feld={
name: String,
//人物标签
where:String,
leixing: String
}
//自动添加更新时间创建时间:
let personSchema = new mongoose.Schema(feld, {timestamps: {createdAt: 'created', updatedAt: 'updated'}})
module.exports= mongoose.model('School',personSchema)
2、找到projectName下的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!'
})
//数据库增删改查
router.post('/add', async function (ctx, next) {
console.log(ctx.request.body)
let model = new Model(ctx.request.body);
model = await model.save();
console.log('user',model)
ctx.body = model
})
router.post('/find', async function (ctx, next) {
let models = await Model.
find({})
ctx.body = models
})
router.post('/get', async function (ctx, next) {
// let users = await User.
// find({})
console.log(ctx.request.body)
let model = await Model.find(ctx.request.body)
console.log(model)
ctx.body = model
})
router.post('/update', async function (ctx, next) {
console.log(ctx.request.body)
let pbj = await Model.update({ _id: ctx.request.body._id }, ctx.request.body);
ctx.body = pbj
})
router.post('/delete', async function (ctx, next) {
console.log(ctx.request.body)
await Model.remove({ _id: ctx.request.body._id });
ctx.body = 'shibai '
})
module.exports = router
3.在app.js中挂载路由：
const school = require('./routes/school')
app.use(school.routes(), school.allowedMethods())
二、前台三步骤：
1.打开vue-admin-template-master文件，在src/views目录下创建一个school模块(文件夹),并在school目录下创建vue文件。
2.editor.vue为编辑文件，用于创建学校记录；
立即创建
取消
index.vue为目录文件，用于显示结果；
编辑
删除
3.在vue-admin-template\src\router目录下的index.js中添加路由：
{
path: '/school',
component: Layout,
meta: { title: '学校管理', icon: 'example' },
redirect: 'school',
children: [{
path: 'school',
name: 'school',
component: () => import('@/views/school'),
meta: { title: '学校管理', icon: 'school' }
},
{
path: 'editor',
name: 'editor',
component: () => import('@/views/school/editor'),
meta: { title: '添加学校', icon: 'school' }
}]
},
三、注意观察数据库连接是否断开：
image.png
image.png
四、结果界面：
image.png
image.png
image.png
image.png
实训三（校园管理系统3-创建学院管理模块）
一、后台三步骤：
1、打开projectName文件，在db/models目录下创建academy.js文件，接着文件操作：
const mongoose = require('mongoose')
const Schema= mongoose.Schema
const feld={
name: String,
//人物标签
major:String,
renshu: Number,
school : { type: Schema.Types.ObjectId, ref: 'School' }
}
//自动添加更新时间创建时间:
let schema = new Schema(feld, {timestamps: {createdAt: 'created', updatedAt: 'updated'}})
module.exports= mongoose.model('Academy',schema)
2、找到projectName下的routes目录，创建academy.js文件：
const router = require('koa-router')()
let Model = require("../db/models/academy");
router.prefix('/academy')
router.get('/', function (ctx, next) {
ctx.body = 'this is a users response!'
})
router.post('/add', async function (ctx, next) {
console.log(ctx.request.body)
let model = new Model(ctx.request.body);
model = await model.save();
console.log('user',model)
ctx.body = model
})
router.post('/find', async function (ctx, next) {
let models = await Model.
find({}).populate('school')
ctx.body = models
})
router.post('/get', async function (ctx, next) {
// let users = await User.
// find({})
console.log(ctx.request.body)
let model = await Model.find(ctx.request.body)
console.log(model)
ctx.body = model
})
router.post('/update', async function (ctx, next) {
console.log(ctx.request.body)
let pbj = await Model.update({ _id: ctx.request.body._id }, ctx.request.body);
ctx.body = pbj
})
router.post('/delete', async function (ctx, next) {
console.log(ctx.request.body)
await Model.remove({ _id: ctx.request.body._id });
ctx.body = 'shibai '
})
module.exports = router
3.打开projectName/app.js在其中中挂载路由：
const academy = require('./routes/academy')
app.use(academy.routes(), academy.allowedMethods())
二、前台三步骤：
打开vue-admin-template-master文件，在src/views目录下创建一个academy模块：并在academy目录下创建vue文件。
1.editor.vue为编辑文件，用于创建学院记录：
立即创建
取消
2.index.vue为目录文件，用于显示结果：
{{scope.row.school.name}}
编辑
删除
3.在vue-admin-template\src\router\index.js中添加路由：
{
path: '/academy',
component: Layout,
meta: { title: '学院管理', icon: 'example' },
redirect: 'academy',
children: [{
path: 'academy',
name: 'academy',
component: () => import('@/views/academy'),
meta: { title: '学院管理', icon: 'academy' }
},
{
path: 'editor',
name: 'editor',
component: () => import('@/views/academy/editor'),
meta: { title: '添加学院', icon: 'academy' }
}]
},
三、注意查看数据库连接是否断开
四、结果界面：
image.png
实训四（校园管理系统4-创建班级管理模块）
一、后台三步骤：
1、打开projectName文件，在db/models目录下创建classs.js文件，接着文件操作：
const mongoose = require('mongoose')
const Schema= mongoose.Schema
const feld={
name: String,
//人物标签
level:String,
renshu: Number,
school : { type: Schema.Types.ObjectId, ref: 'School' },
academy : { type: Schema.Types.ObjectId, ref: 'Academy' }
}
//自动添加更新时间创建时间:
let personSchema = new mongoose.Schema(feld, {timestamps: {createdAt: 'created', updatedAt: 'updated'}})
module.exports= mongoose.model('Classs',personSchema)
2、找到projectName下的routes目录，创建classs.js文件：
const router = require('koa-router')()
let Model = require("../db/models/classs");
router.prefix('/classs')
router.get('/', function (ctx, next) {
ctx.body = 'this is a users response!'
})
router.post('/add', async function (ctx, next) {
console.log(ctx.request.body)
let model = new Model(ctx.request.body);
model = await model.save();
console.log('user',model)
ctx.body = model
})
router.post('/find', async function (ctx, next) {
let models = await Model.
find({}).populate('academy').populate('school')
ctx.body = models
})
router.post('/get', async function (ctx, next) {
// let users = await User.
// find({})
console.log(ctx.request.body)
let model = await Model.find(ctx.request.body)
console.log(model)
ctx.body = model
})
router.post('/update', async function (ctx, next) {
console.log(ctx.request.body)
let pbj = await Model.update({ _id: ctx.request.body._id }, ctx.request.body);
ctx.body = pbj
})
router.post('/delete', async function (ctx, next) {
console.log(ctx.request.body)
await Model.remove({ _id: ctx.request.body._id });
ctx.body = 'shibai '
})
module.exports = router
3.在app.js中挂载路由：
const classs= require('./routes/classs')
app.use(classs.routes(), classs.allowedMethods())
二、前台三步骤：
打开vue-admin-template-master文件，在src/views目录下创建一个classs模块，并在academy目录下创建vue文件。
1.editor.vue为编辑文件，用于创建班级记录：
立即创建
取消
2.index.vue为目录文件，用于显示结果：
{{scope.row.school.name}}
{{scope.row.academy.name}}
编辑
删除
3.在vue-admin-template\src\router\index.js中添加路由：
{
path: '/classs',
component: Layout,
meta: { title: '班级管理', icon: 'example' },
redirect: '/classs',
children: [{
path: 'classs',
name: 'classs',
component: () => import('@/views/classs'),
meta: { title: '班级管理', icon: 'classs' }
},
{
path: 'editor',
name: 'editor',
component: () => import('@/views/classs/editor'),
meta: { title: '添加班级', icon: 'classs' }
}]
},
三、注意查看数据库连接是否断开
四、结果界面
image.png
实训五（校园管理系统5-创建学生管理模块）
一、后台三步骤：
1、打开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' }
}
//自动添加更新时间创建时间:
let personSchema = new mongoose.Schema(feld, {timestamps: {createdAt: 'created', updatedAt: 'updated'}})
module.exports= mongoose.model('Student',personSchema)
2、找到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 student= require('./routes/student')
app.use(student.routes(), student.allowedMethods())
二、前台三步骤：
打开vue-admin-template-master文件，在src/views目录下创建一个student模块，并在student目录下创建vue文件。
1.editor.vue为编辑文件，用于创建班级记录；
立即创建
取消
2.index.vue为目录文件，用于显示结果：
{{scope.row.school.name}}
{{scope.row.academy.name}}
{{scope.row.classs.name}}
编辑
删除
3.在vue-admin-template\src\router\index.js中添加路由：
{
path: '/student',
component: Layout,
meta: { title: '学生管理', icon: 'example' },
redirect: '/student',
children: [{
path: 'student',
name: 'student',
component: () => import('@/views/student/index'),
meta: { title: '学生管理', icon: 'user' }
},
{
path: 'editor',
name: 'editor',
component: () => import('@/views/student/editor'),
meta: { title: '添加学生', icon: 'user' }
}]
},
三、注意查看数据库连接是否断开
四、结果界面
image.png
实训6
一、后台三步骤：
1、打开projectName文件，在db/models目录下创建teacher.js文件，接着文件操作：
const mongoose = require('mongoose')
const Schema= mongoose.Schema
const feld={
name: String,
age: String,
//人物标签
level:String,
gender:String,
school : { type: Schema.Types.ObjectId, ref: 'School' },
academy : { type: Schema.Types.ObjectId, ref: 'Academy' }
}
//自动添加更新时间创建时间:
let personSchema = new mongoose.Schema(feld, {timestamps: {createdAt: 'created', updatedAt: 'updated'}})
module.exports= mongoose.model('Teacher',personSchema)
2、找到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('academy').populate('school')
ctx.body = models
})
router.post('/get', async function (ctx, next) {
// let users = await User.
// find({})
console.log(ctx.request.body)
let model = await Model.find(ctx.request.body)
console.log(model)
ctx.body = model
})
router.post('/update', async function (ctx, next) {
console.log(ctx.request.body)
let pbj = await Model.update({ _id: ctx.request.body._id }, ctx.request.body);
ctx.body = pbj
})
router.post('/delete', async function (ctx, next) {
console.log(ctx.request.body)
await Model.remove({ _id: ctx.request.body._id });
ctx.body = 'shibai '
})
module.exports = router
3.在app.js中挂载路由：
const teacher= require('./routes/teacher')
app.use(teacher.routes(), teacher.allowedMethods())
二、前台三步骤：
打开vue-admin-template-master文件，在src/views目录下创建一个teacher模块，并在teacher目录下创建vue文件。
1.editor.vue为编辑文件，用于创建班级记录；
立即创建
取消
2.index.vue为目录文件，用于显示结果；
{{scope.row.school.name}}
{{scope.row.academy.name}}
编辑
删除
3.在vue-admin-template\src\router\index.js中添加路由：
{
path: '/teacher',
component: Layout,
meta: { title: '老师管理', icon: 'example' },
redirect: '/teacher',
children: [{
path: 'teacher',
name: 'teacher',
component: () => import('@/views/teacher'),
meta: { title: '老师管理', icon: 'user' }
},
{
path: 'editor',
name: 'editor',
component: () => import('@/views/teacher/editor'),
meta: { title: '添加老师', icon: 'user' }
}]
},
三、注意查看数据库连接是否断开
四、结果界面
image.png