基于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服务本地开发也可以用的

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

计算机毕业设计之java+springboot基于vue的校园志愿者管理系统
计算机毕业设计之java+springboot基于vue的校园志愿者管理系统项目介绍随着信息化时代的到来,管理系统都趋向于智能化.系统化,校园志愿者管理系统也不例外,但目前国内仍都使用人工管理,市 ...
java课件：基于springboot智慧校园后勤管理系统(springboot+vue+mysql+redis) 1017
项目描述基于springboot智慧校园后勤管理系统, 包括管理员端,业务员端. 管理员主要功能:用户管理,角色管理,学生管理:职工管理:案件管理等; 业务员主要功能:学生管理:职工管理:案件管理 ...
ssm毕设项目基于web的教学资源管理系统01jkz（java+VUE+Mybatis+Maven+Mysql+sprnig）
ssm毕设项目基于web的教学资源管理系统01jkz(java+VUE+Mybatis+Maven+Mysql+sprnig) 项目运行环境配置: Jdk1.8 + Tomcat8.5 + Mysq ...
ssm基于web的教学资源管理系统01jkz【独家源码】计算机毕业设计问题的解决方案与方法
本项目包含程序+源码+数据库+LW+调试部署环境,文末可获取一份本项目的java源码和数据库参考. 系统的选题背景和意义选题背景: 教学资源管理系统是针对教育领域的一种信息化管理工具,旨在提供高效. ...
基于java(springboot)校园新闻管理系统源码（java毕业设计）
基于java(springboot)校园新闻管理系统校园新闻管理系统是基于java编程语言,MySQL数据库,和springboot框架,用idea开发工具开发的设计,本设计分为学生用户,管理员两个 ...
基于Vue的电商管理系统 (1)
正好这段时间在做一个电商管理系统的项目,借此总结一下.该项目主要是一个电商的后台管理系统,可实现管理用户账号,即登录.退出.用户管理.权限管理等,商品管理,即商品分类.分类参数.商品信息,订单信息等以 ...
计算机毕业设计springboot基于springboot的校园招聘管理系统xs43e源码+系统+程序+lw文档+部署
计算机毕业设计springboot基于springboot的校园招聘管理系统xs43e源码+系统+程序+lw文档+部署计算机毕业设计springboot基于springboot的校园招聘管理系统xs ...
基于springboot的校园医疗保险管理系统
末尾获取源码开发语言:Java Java开发工具:JDK1.8 后端框架:springboot 前端:HTML.Vue 数据库:MySQL5.7和Navicat管理工具结合服务器:Tomcat8. ...
计算机毕业设计ssm基于web的教学资源管理系统01jkz系统+程序+源码+lw+远程部署
计算机毕业设计ssm基于web的教学资源管理系统01jkz系统+程序+源码+lw+远程部署计算机毕业设计ssm基于web的教学资源管理系统01jkz系统+程序+源码+lw+远程部署本源码技术栈: ...

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

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

项目背景

项目地址

基本架构和功能

性能测试

一些遗漏的点

关于答辩

注意

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

最新文章

热门文章