基于Vue的校园资源管理系统(前端代码)

作者：Jackshijin

项目背景

这是本人在毕业的时候选择的毕业设计方向，指导老师团队的课题有小程序、安卓开发、机器学习和嵌入式，而我选择了Web。。。因为我想找前端相关的工作，所以选了这个方向，后端也是JS一把梭，这是最气的，课题选得好能有个nice的毕业旅行，像我这种选的不好的还碰上疫情在家效率低下，肝通宵常有的事。这个项目简单的技术栈是Vue+Express.js,数据库是MySQL，还有Redis（登录验证码）,UI用的是ElementUI，开发周期四个月。项目功能：简单易见，从论文题目就可以看出来，是对校园资源的管理，有简单划分三种角色，游客、校内人员和管理员。想搞这个的痛点是社团活动申请场地或资源必须纸质调表申请，太慢了流程太繁琐了。。。
系统采用的是老一套的Element的上左右的layout布局，全部spa，没有懒加载因为这次没什么图片很多都是表单的操作，权限控制全是在前端控制的，因为在后端控制的话每次都要维护一份用户的可操作内容的表有点难搞，所以就选择在前端控制，做的也不成样子。。。

项目地址

本来是有线上地址的，因为服务器仅仅开了半年，答辩完了就没续费，自己也懒。过去了好几个月我才来复盘。。。项目是前后分离开发的，前端代码仓库地址：传送门 后端的代码仓库地址sourceManageApi

基本架构和功能

用户登录和注册
*登录：通过账号和密码可以进行登录，登录后的用户信息用sessionStorage来保存
*注册：必填项：昵称、邮箱、密码、确认密码，这里的表单校验和密码二次校验也不多说，主要是发送验证码功能，用的是QQ邮箱的smtp服务（免费。。。），验证码是随机的四位数字或字母，redis存验证码验证码有效时间是一分钟，登录和注册都是走接口校验的。

导航展示首页

• 外部链接： 展示一些技术文档的官网和学校的一些官方网站
• 技术栈：卡片式展示采用的技术
• ToDoList（充数菜单）说实话这个展示首页就是充数的，因为是毕设所以页面丰富一些好说话

资源列表页

• 这个页面主要是条件搜索组件和列表展示，用于搜索和展示校园内的教室、场地以及架空层等资源，可以进行的操作是：管理员——编辑资源、删除资源、添加资源，报修资源、申请使用——普通用户，这些操作区分角色——用户登录就在本地维护一个用户角色类型， 每个页面要用到就在本地取，退出销毁。这里不得不提ElementUI的弹窗组件和消息状态提醒的组件真的好用，自己写一次类似功能就知道element有多香

数据统计页

• 这个页面主要是对系统的各类型的数据进行整合统计展示，用了一些Echarts图表，因为用户量少资源少，所以写接口count(XX)的时候夸大了一点点

报表管理模块

• 申请报表处理流程：用户创建申请表–>用户修改申请表（在提交之前）–>用户提交申请表–>管理员进行审核（通过或者拒绝）–>用户查看详细信息（包括基本信息、处理流程和结果理由）；其实就是将线下的申请使用某个场地的流程搬到了线上，唯一的遗憾是没有电子签章功能。。。
• 报修表处理流程：用户填写报修表–>管理员进行处理，三个状态：已处理、处理中、取消（不存在故障的报销选择忽视）

评论和文章公告发表模块

评论：这个评论模块写了好久，最终实现的是类似简书那种的样式效果，可以对评论进行回复和点赞，当然还有发表评论
文章/公告功能：按道理这个有点类似社区灌水交流的功能在一个管理系统中出现似乎是画蛇添足，但当时的初衷是用户可以通过这个功能反映问题，也可以借这个板块发布一些活动的宣传等，管理员可以通过这个板块发布公告，以及一些升级提醒，发布失物招领和招聘等等。反正也是有一点充数的嫌疑。

个人中心模块
这个模块由个人发表页和修改密码页组成

• 个人发表页：展示用户发表的建议和文章，用户可以对自己的内容进行编辑和删除，管理员可以进行罪恶的删帖
• 修改密码：修改密码（下一次登录后才生效）

用户管理模块
管理员才有的模块：对用户信息进行增删改查&新增管理员

性能测试

接口测试
这一块在不写在前端这里，什么高并发多线程，根本没有考虑，能把接口写完已经大吉大利了。。。

页面响应速度测试
利用的Chrome的DevTools 来对每个页面渲染速度进行测试，开启Memory选项观测页面加载速度，对加载慢的页面进行优化，十分实用。

兼容性测试：手动点点点，在各大pc端浏览器进行点点点，看看能不能用，移动端没有适配，况且那么多表单在移动端也不好展示。

构建后包体积分析：webpack-bundle-analyzer 命令来分析打包后的文件大小分析，最后出来的是一张形象展示每个文件大小的图片，装逼利器，太大的文件可以通过分包来解决（分包这个我现在也不懂）

一些遗漏的点

• 从根本上的来说搞这个系统真的是大杂烩，为了能有东西写论文也只能各种加
• 这个只是介绍部分重要的功能，一些管理系统该有的点还是有的
• 还得再提一下ElementUI的强大，前期用的有多爽，工作就有多痛苦；因为写这些玩意不需要写很多css，要做页面还原的时候就会巨慢
• css应该多写，没有什么基础是不能通过刻意练习来提高的
• 这里面有不少的功能都是可以抽成组件进行复用的，但是这个也搁置了

关于答辩

豆瓣写了一个帖子：传送门
博客有记录一些坑点：传送门,不过到现在都还没补上。。。

注意

• 项目直接clone然后 npm install 再 run 的话是跑不起来的，因为这里的接口是线上的接口，还有qq邮箱的smtp服务也是要自己配的；而服务器到期了，线上的接口直接调用肯定会报错的！
• 可以把相关的接口数据自己mock, smtp服务本地开发也可以用的