# 校园疫情防控管理系统
## 简介
本系统是一个为加强校园疫情防控的管理平台,可实现用户健康情况信息的收集和管理,登录用户可分为管理员,教师,学生。首页是一个校园疫情防控情况的图表展示;管理员可实现用户信息的管理以及发布疫情通知,其余用户都可接受到此通知;教师可查看班级学生的健康表情况以及对学生的申请离校作出批准;学生端可申请外出,健康表填报等。
关键技术点:
1.用户权限的控制:
- 前端控制页面级的权限。首先前端会有一份路由表,它表示了每一个路由可访问的权限。当用户登录之后,通过 token 获取用户的 role ,动态根据用户的 role 算出其对应有权限的路由,再通过router.addRoutes动态挂载路由,实现不同权限的用户显示不同的用户菜单和限制其所能进入的页面。
- 后端则会验证每一个涉及请求的操作,验证其是否有该操作的权限,每一个后端请求不管是 get 还是 post 都会让前端在请求 header里面携带用户的 token,后端解析token获取type用户类型来验证用户是否有权限执行该操作。若没有权限则抛出一个对应的状态码,前端检测到该状态码,做出相对应的操作。详情见权限控制篇
2.表格的分页:
- 前端分页:一次性请求所有数据,然后前端对数据进行截取展示,在element-ui的el-table的数据中实现,代码:
```js
// 前端分页算法
setTableData() {
return this.tableData.slice((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize)
}
```
- 后端分页:需要通过axios异步发送当前所在页数和每页显示条数发送给后端,后端根据条件通过mysql语句查询对应数据返回展示。部分代码:
```js
deleteRow(index, rows) {
// console.log(index, rows)
removeClass({
c_id: rows.c_id,
searchClass: this.inputSearchClass,
searchFlag: this.searchFlag,
pageSize: this.pageSize,
currPage: this.currentPage - 1
}).then((response) => {
this.successOpen(response.msg)
```
3.express 全局错误处理:
由于在express框架中错误处理中间件函数不能自动捕获Promise错误,会报一个 `UnhandledPromiseRejectionWarning` 全局错误,需要自己进行处理,提升开发体验。
- promise.then().catch(),来捕获promise错误,并通过next()将错误发送给异常中间件中,就可以捕获到错误,从而方便用户作出错误处理,但此方法每个函数都要使用.catch()
- 随着async/await 流行以及配合try/catch 也可以捕获错误。但是代码存在大量重复的try/catch。
- 通过express后引入require(‘express-async-errors’)的方式就可以在express中捕获错误。他的本质就是代替了在每个express路由方法中打补丁的方式,通过复写express中Layer#handle方法,把每个Routing Function的错误统一用 next(err) 传递给错误处理中间件函数中,对错误进行统一处理。
最后给出了自定义的全局异常处理中间件函数,配合boom插件 返回错误对应的状态码以及信息,方便我们进行错误的处理及排查。
```js
/**
* 自定义路由异常处理中间件
* 注意两点:
* 第一,方法的参数不能减少
* 第二,方法的必须放在路由最后
// */
router.use((err, req, res, next) => {
console.log(err)
// token 失效的错误提示
if (err.name && err.name === 'UnauthorizedError') {
const { status = 401, message } = err
new Result(null, 'Token验证失败', {
error: status,
errMsg: message
}).jwtError(res.status(status)) // 动态改变返回的状态码
} else {
console.log(err)
// message就是自己写的
const msg = (err && err.message) || '系统错误'
const statusCode = (err.output && err.output.statusCode) || 500
const errorMsg = (err.output && err.output.payload && err.output.payload.error) || err.message
new Result(null, msg, {
error: statusCode,
errorMsg
}).fail(res.status(statusCode))
}
})
```
## 技术栈
1.使用vue+element-ui+vuex+vue-router+axios+echart框架进行前端开发
2.使用nodejs+express+mysql框架进行后端开发
3.前后端分离开发
## 前端目录结构
```bash
├── build // 构建相关
├── config // 配置相关
├── src // 源代码
│ ├── api // 所有请求
│ ├── assets // 主题 字体等静态资源
│ ├── components // 全局公用组件
│ ├── directive // 全局指令
│ ├── filtres // 全局 filter
│ ├── icons // 项目所有 svg icons
│ ├── router // 路由
│ ├── store // 全局 store管理
│ ├── styles // 全局样式
│ ├── utils // 全局公用方法
│ ├── views // 组件
│ ├── App.vue // 入口页面
│ ├── main.js // 入口 加载组件 初始化等
│ └── permission.js // 权限管理
├── .babelrc // babel-loader 配置
├── eslintrc.js // eslint 配置项
├── .gitignore // git 忽略项
├── favicon.ico // favicon图标
├── index.html // html模板
└── package.json // package.json
```
## 后端目录结构
```bash
├── bin // 运行相关
├── dao // 数据操作
├── model // 数据库操作
├── public // 静态文件
├── components // 路由
├── directive // 公用方法
├── app.js // 入口
└── package.json // package.json
```
## 功能
```bash
- 登录
- 用户验证
- 管理员端
- 学生端
- 教师端
- 权限验证
- 页面权限
- 指令权限
- 权限配置
- 管理员端
- 首页 防控情况图表显示
- 人员管理 添加/删除/搜索/编辑
- 添加班级 搜索/删除
- 发布通知 发布/详情/移除
- 学生端
- 首页 防控情况图表显示
- 我的通知 查看/阅读
- 健康填报 填表上报
- 请假申请 分页获取/申请
- 个人信息 获取/头像上传/密码修改
- 教师端
- 首页 防控情况图表显示
- 发布通知 发布通知 发布/详情/移除
- 请假管理 分页获取/同意/拒绝
- 健康查看 分页获取查看/选择班级
- 个人信息 获取/头像上传/密码修改
- 错误页面
- 401
- 404
- 表格
- 分页
- 删除
- 搜索
- 添加
- 动态
- 拖拽
```
## 开发
```bash
# 克隆项目
git clone https://gitee.com/anyway1212/epidemic-prevention.git
# 前端
1. vue-prevention # 进入前端目录
2. npm install # 安装依赖
# 后端
1. node-prevention # 进入后端目录
2. npm install # 安装依赖
3. # 需要解压redis,完成后点击redis-server.exe 用来临时存储上传的用户数据,同时在pbulic目录下新建upload文件夹临时存放文件
# 数据库添加
1. # 使用navicat添加创建一个数据库并将数据库文件夹中的表直接添加进去就可以,navicat破解教程和如何创建数据库网上可查。
2. # 进入node-prevention目录下的model文件夹的model.js文件,修改mysql连接配置 改为自己的数据库
# 启动
1. npm run dev # 前端目录
2. npm run start # 后端目录
```
## 项目效�
没有合适的资源?快使用搜索试试~ 我知道了~
基于nodejs+vue的校园疫情防控管理系统源码+数据库(毕业设计).zip
共268个文件
js:91个
vue:68个
svg:46个
1.该资源内容由用户上传,如若侵权请联系客服进行举报
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
版权申诉
5星 · 超过95%的资源 2 下载量 146 浏览量
2022-11-29
13:31:20
上传
评论 2
收藏 7.26MB ZIP 举报
温馨提示
基于nodejs+vue的校园疫情防控管理系统源码+数据库(java毕业设计).zip已获导师指导并通过的高分项目下载即可使用,无需修改,确保可以直接运行! 本项目是一套基于nodejs+vue的校园疫情防控管理系统,主要针对计算机相关专业的正在做毕设的学生和需要项目实战的Java学习者。也可作为课程设计、期末大作业 包含:项目源码、数据库脚本、软件目实战练习的工具、项目说明等,该项目可以直接作为毕设使用。 系统是一个为加强校园疫情防控的管理平台,可实现用户健康情况信息的收集和管理,登录用户可分为管理员,教师,学生。首页是一个校园疫情防控情况的图表展示;管理员可实现用户信息的管理以及发布疫情通知,其余用户都可接受到此通知;教师可查看班级学生的健康表情况以及对学生的申请离校作出批准;学生端可申请外出,健康表填报等。基于nodejs+vue的校园疫情防控管理系统源码+数据库(毕业设计).zip基于nodejs+vue的校园疫情防控管理系统源码+数据库(毕业设计).zip基于nodejs+vue的校园疫情防控管理系统源码+数据库(毕业设计).zip
资源推荐
资源详情
资源评论
收起资源包目录
基于nodejs+vue的校园疫情防控管理系统源码+数据库(毕业设计).zip (268个子文件)
index.css 414KB
waves.css 825B
style.css 111B
.env.development 138B
.editorconfig 244B
.eslintignore 34B
表格.gif 639KB
表格拖拽.gif 453KB
动态表格.gif 396KB
401.gif 160KB
.gitignore 281B
.gitignore 256B
index.hbs 302B
index.hbs 302B
index.hbs 185B
index.html 488B
favicon.ico 66KB
1.jpg 126KB
2021070521342331626.jpg 126KB
2021070521332138239.jpg 126KB
2021070521373765901.jpg 10KB
2021070521350574461.jpg 10KB
admin_mod.js 14KB
admin_dao.js 11KB
user_dao.js 11KB
student_dao.js 8KB
index.js 8KB
student_mod.js 8KB
user_mod.js 7KB
language.js 7KB
index.js 7KB
.eslintrc.js 5KB
model.js 5KB
user.js 4KB
vue.config.js 4KB
permission.js 4KB
tagsView.js 4KB
tools.js 4KB
permission.js 3KB
upload.js 3KB
redisUtils.js 3KB
request.js 3KB
user.js 3KB
drag.js 2KB
sticky.js 2KB
jwtUtils.js 2KB
fileUtils.js 2KB
admin.js 2KB
waves.js 2KB
index.js 2KB
index.js 2KB
student.js 2KB
validate.js 2KB
admin.js 2KB
scroll-to.js 2KB
mailUtil.js 2KB
dynamicLoadScript.js 2KB
resize.js 2KB
clipboard.js 2KB
mysqlUtli.js 1KB
Result.js 1KB
resize.js 1KB
effectRipple.js 1KB
main.js 1KB
app.js 1KB
prompt.js 1KB
ResizeHandler.js 1KB
student.js 1KB
prompt.js 1KB
open-window.js 1KB
adaptive.js 1KB
prompt.js 1KB
parseTime.spec.js 1KB
user.js 1KB
validate.spec.js 1KB
formatTime.spec.js 1KB
app.js 955B
error-log.js 920B
index.js 892B
settings.js 811B
jest.config.js 766B
getters.js 741B
permission.js 694B
settings.js 692B
index.js 687B
Hamburger.spec.js 641B
clipboard.js 633B
FixiOSBug.js 633B
SvgIcon.spec.js 621B
data2blob.js 616B
plugins.js 569B
permission.js 561B
babel.config.js 557B
default-options.js 556B
toolbar.js 484B
registUtil.js 455B
errorLog.js 406B
param2Obj.spec.js 397B
plopfile.js 379B
auth.js 301B
共 268 条
- 1
- 2
- 3
资源评论
- 糖醋鱼1352023-11-15实在是宝藏资源、宝藏分享者!感谢大佬~
- QianyuEnd2023-07-04发现一个宝藏资源,资源有很高的参考价值,赶紧学起来~
程序员张小妍
- 粉丝: 1w+
- 资源: 2604
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功