项目介绍
是一个较为完整的全栈教务管理系统项目 适合刚学习过Vue和NodeJs的人 或者缺少项目经验的人 通过练习该项目 可以快速提升 ElementUi 和 Vue 的使用 同时对于 NodeJs 的 Express 框架使用也有很大提升 包括 mongodb 数据库的使用等... 该项目的功能较为丰富 实际细节大家可以在查看代码时或演示功能时发现 通过完整的练习 该项目是一个可以写到简历上的项目
视频辅助教程介绍地址
该项目的页面多 功能也多 一定要动手实现一遍哦~
接口文档在根目录下的 api_doc.md 中查看 !!!
接口文档在根目录下的 api_doc.md 中查看 !!!
接口文档在根目录下的 api_doc.md 中查看 !!!
项目的容错提示并没有写的特别特别的完整 因为省时间吗~ 具体可以通过接口返回值进行判断. code === 201 && message === "success"
同时项目中的代码还有很多可以优化的地方 看看您是否能发现 并修改代码~
项目启动
接口导入
项目使用 POSTMAN 进行接口的测试 将根目录下的 jwxt.postman_collection.json 中的集合接口导入到 POSTMAN 中 查看详细参数
根目录下的 api_doc.md 是后台接口的简易文档 可以预览一下
手动启动
- yarn install
- yarn serve
- node server/server.js
记得安装数据库 开启数据库 并连接数据库!!! 具体解释看下面数据库部分的解释
项目服务端配置文件在 /server/config/index.js
数据库
需要安装 Mongodb 数据库 并搭建复制集 因为用到了Mongodb的事务 Mongodb 的事务是基于复制集集群生效的
需要将 根目录下的 db_data 中的集合文件 导入到 数据库中生成集合结构
搭建两台即可 搭建前先把根目录下的数据库数据导入到mongodb数据库中(使用指令和可视化工具均可) 在进行复制集的搭建(搭建方式自行百度一下,在windows上即可,不搭建复制集也可以 就是在进行支付操作时报错了不会进行回滚,为了更快速的启动项目也可以选择先不搭建复制集)
本例中复制集集群开启了集群安全认证 为了减少复杂度 你们在搭建的时候可以将认证去掉(不设置开启认证 默认就是没认证的) 在使用mongoose连接时就不需要用户名和密码了
配置文件在 /server/config/index.js
技术栈
前台
- Vue2 + VueRouter3 + Vuex3 + ElementUi + Axios + Socket.io (主要用于支付时获取服务器的主动推送,使用AJAX长轮询也可以实现,这里为了项目的丰富性 使用了 Socket.io)
支付功能是站内的虚拟币支付 不是真钱 流程和真实支付类似 只不过支付是在我们自己的服务器操作的(这里只是简单实现一下,增加项目的丰富性)
后台/后端的支付相关界面
NodeJs + Express + Jquery + Art-Template (后台的几个支付相关的界面)
数据库
Mongodb
功能点 知识点
大致写一下功能点(每一个功能都是前后端都要实现的 不只是前端) 还有一些细节的东西只有您写了这个项目才能体会到~
- 数据库的设计(10个集合) - 由于时间问题 没有画集合之间的关联关系图... 也没有做特别的细化
- 使用到了Mongodb的高可用复制集集群+集群认证+复制集集群事务处理
- 整体界面布局使用 ElementUi 并兼容移动端 , 同时使用到了 百分之 60 - 70 的 ElementUi 组件
- 登录业务 - 包含不同角色的登录 + 后台 JWT 的校验 + 路由守卫的校验 + 页面访问控制
- 导航菜单权限 - 不同角色拥有不同的权限 高级别角色拥有低级别角色的权限
- 搜索学生 - 首页的搜索 不知道搜索什么了 就搜学生吧 ~
- 控制面板页面数据的同步
- 查询交易额 - 当天/上个星期/上个月
- 查询新增学生人数 - 当天/上个星期/上个月
- 控制面板明星学生查询 - 总分最高的
- 控制面板活动时间线查询
- 学生添加 - 一共 16 个控件
- 邮件通知 - 学生添加成功 发送邮件通知学生
- 学生视图
- 学生编辑
- 学生名单 - 查询/分页/搜索/删除(假删除,标识)
- 老师添加 - 一共 13 个控件
- 老师视图
- 老师编辑
- 老师名单 - 查询/分页/搜索/删除(假删除,标识)
- 学院列表 - 查询/分页/搜索/删除(假删除,标识)
- 学院添加
- 学院编辑
- 科目列表 - 查询/分页/搜索/删除(假删除,标识)
- 科目添加
- 科目编辑
- 薪资管理 - 查询/分页/搜索/删除(假删除,标识,这个删除联动 老师删除的功能)
- 收费管理(订单管理...) - 查询/分页/搜索/删除(假删除,标识)
- 花费管理 - 查询/分页/搜索/删除(假删除,标识)
- Excel 数据表格的导出
- 学生个人简历 - 支持导出PDF
- 交易支付 - 支持移动端和PC端(PC端生成二维码并加上用户头像,扫码支付,移动端直接跳转到支付服务器地址) - (当然是假支付,站内的虚拟货币,默认每个学生和老师都是1000元,只是为了熟悉一下类似相关的业务,支付后台也是手动简单实现一下)
- 支付结果查询/自动反馈 - Websocket 实现
- 活动添加 - 定时任务的练习 - 通过添加活动在指定的时间通过批量发送邮件通知学生(这做的比较简单 没有按班级划分直接所有学生了,严格应按照班级划分 活动也是 )
- 收件箱功能 - 含未读通知提示与发送邮件(站内邮箱)
- 登出功能
- 错误日志记录
- 接口防刷中间件开发
- ...等功能
上面只是将大致的功能点写到了 这里 其实还有很多细节性的处理 大家可以在代码中查看
页面
- 整个项目页面为 28 个 全部使用 ElementUi 开发 项目中ElementUi的组件我们大概有用到百分之 60 - 70 所以练手 ElementUi 的使用也是不错的
页面结构
- pages
- Account
- AccountCharge
- AccountSpend
- AccountTrade
- Actively
- ControlBoard
- Department
- DepartmentAdd
- DepartmentEdit
- index.vue
- Libary
- Login
- NotFound
- PostMan
- Profile
- Student
- StudentAdd
- StudentEdit
- StudentView
- index.vue
- Subject
- SubjectAdd
- SubjectEdit
- index.vue
- Teacher
- TeacherAdd
- TeacherEdit
- TeacherView
- index.vue
- TestList
- index.vue (未开发)
- Time
- index.vue (未开发)
组件
- Breadcrumb
- CustomTag
- Footer
- Header
- Nav
- PanelDesc
- ToggleContent