项目运行
环境配置:
Node.js最新版+ Vscode + Mysql5.7 + HBuilderX+Navicat11+Vue。
项目技术:
Express框架 + Node.js+ Vue 等等组成,B/S模式 +Vscode管理+前后端分离等等。
环境需要
1.运行环境:最好是Nodejs最新版,我们在这个版本上开发的。其他版本理论上也可以。
2.开发环境:Vscode或HbuilderX都可以。推荐HbuilderX;
3.mysql环境:建议是用5.7版本均可
4.硬件环境:windows 7/8/10 1G内存以上;或者 Mac OS;
6.Navcat11:这个版本不限10/11/14/15都可以。;
Node.js毕设帮助,指导,本源码(见文末),调试部署
5.1.1 学生登录
本系统和大部分系统一样都需要登录才能进入系统进行后续操作,用户输入账号和密码点击进行登录,进入到APP首页,具体的实现效果如图5.1所示:
图5.1 登录界面
5.1.2 APP首页
学生登录到和悦少年文明礼仪监管APP后,可以查看首页、文章信息、活动信息、我的等内容,并进行相应操作。具体的实现效果如图5.2所示:
图5.2 首页界面
5.1.3文章信息
点击文章信息,用户可以看到文章封面、文章标题、学号、学生姓名、发布时间、点击次数、文章简介、文章内容、审核回复等内容,并进行收藏、赞、踩、评论等操作,具体的实现效果如图5.3所示:
图5.3 文章信息界面
5.1.4公告信息
在公告信息页面,用户可以查看标题、封面、简介、内容,公告信息效果如图5.4所示:
图5.4公告信息界面
5.1.5我的
在我的页面,用户可以对用户信息、文章信息、积分申请、活动参与、我的收藏管理、留言板等内容进行相应的操作,具体的实现效果如图5.5所示:
图5.5我的界面
5.1.6用户信息
在用户信息页面,学生可以对学号、密码、学生姓名、性别、邮箱、手机号码、积分、相片等进行修改,也能点击退出登录退出APP。具体的实现效果如图5.6所示:
图5.6用户信息界面
5.1.7活动信息
在活动信息页面,学生可以查看活动图片、活动名称、活动地点、活动日期、发布日期、注意事项、活动内容等信息,并进行收藏、评论或参与等操作,具体的实现效果如图5.7所示:
图5.7 活动信息界面
5.1.8活动参与
在活动信息页面,点击参与的按钮,通过输入活动名称、活动封面、活动地点、活动日期、学号、学生姓名、申请日期、申请备注等信息进行活动参与的申请,具体的实现效果如图5.8所示:
图5.8活动参与界面
5.1.8留言板
在留言板页面,学生可以查看其他用户的留言内容;点击留言的按钮,通过输入内容和图片进行留言,具体的实现效果如图5.9所示:
图5.9留言板界面
5.2 Web端后台——管理员功能模块
Web后台端是管理员进行登录,能够在这里看到学生的信息,对活动信息、请假信息、文章信息、考勤信息、轮播图、留言板、公告信息等进行相关的操作。
5.2.1管理员登录
管理员输入用户名、密码,选择登录角色后可以今天后台系统,进行相应操作,如图5.10所示
图5.10管理员登录
5.2.2管理员功能
管理员登录到文明礼仪监管系统后台后,可以对个人中心、学生管理、文章信息管理、积分申请管理、活动信息管理、活动参与管理、通知信息管理、留言板管理、系统管理等进行操作,效果如图5.11所示。
图5.11管理员功能界面
5.2.3学生管理
在学生管理页面,可以对学号、学生姓名、性别、邮箱、手机号码、积分、相片等进行详情、通知。修改、删除或新增等操作;点击通知的按钮,通过输入通知标题、学号、学生姓名、发生日期、通知内容等进行通知,具体的实现效果如图5.12所示。
图5.12学生管理及信息通知界面
5.2.4文章信息管理
在文章信息管理页面,可以对文章标题、文章封面、学号、学生姓名、发布日期、审核回复、审核状态、审核等进行审核、详情、查看评论、修改、删除或审核等操作,具体的实现效果如图5.13所示。
图5.13 文章信息管理界面
5.2.5积分申请管理
在积分申请管理页面,可以对文章标题、文章封面、申请分数、申请日期、学号、学生姓名、审核回复、审核状态、审核等进行详情、删除、审核等操作,具体的实现效果如图5.14所示。
图5.14 积分申请管理界面
5.2.6活动信息管理
在活动信息管理页面,可以对活动名称、活动封面、活动地点、活动日期、发布日期等进行详情、修改、查看评论、删除或新增等操作,具体的实现效果如图5.15所示。
图5.15活动信息管理界面
5.2.7活动参与管理
在活动参与管理页面,管理员可以对活动名称、活动封面、活动地点、活动日期、学号、学生姓名、申请日期、审核回复、审核状态、等进行审核、详情、删除等操作,具体的实现效果如图5.16所示。
图5.16活动参与管理界面
5.2.8系统管理
在系统管理页面,管理员可以对轮播图和公告信息进行相应操作,效果如图5.17所示。
图5.17系统管理界面