vue+socke+redis(可选用)前后端分离:学校疫情上报系统

18 篇文章 0 订阅
3 篇文章 0 订阅


一、项目技术栈介绍

在这里插入图片描述

1. 前端

  1. 前端采用vue框架。
  2. 为了美化也采用了elementUI组件
  3. 页面跳转使用vue路由
  4. 与后端通信采用axios通信

2.后端

  1. 服务器与数据库交互的中间件使用redis(不使用除了访问速度变慢无其他影响)
  2. redis采用集群模式但同时支持一个redis服务器
  3. 与前端通信采用socket封装的http请求进行通信
  4. 使用到了spring来进行对象管理
  5. 通过spring的线程池管理,支持并发
  6. 使用了spring定时器来对redis缓存经行主动的定时更新(1分钟)

二、项目演示及其功能介绍

登录

登录页面可选择登录方式有三种:学生,教师,管理员
当点击登陆后,后端服务器若没有正常启动,会弹框“服务器已下线”
登录页面勾选自动登录会保存当前登录密码,方便下次登录
在这里插入图片描述

注册

注册学生时,会多选一个班级。
注册教师不需要选择班级。
当后端服务器没有正常启动,会弹框“服务器已下线”
在这里插入图片描述

登录成功

登录成功后都有统一的页头,最右边显示当前的登录用户在这里插入图片描述点击账号旁边的按钮,可以选择注销和其他弹框在这里插入图片描述

管理员页面

登录成功后,默认显示疫情上报统计。
该页面显示全校上报统计,教师上报统计,各个班级上报统计。
在这里插入图片描述
点击进入学生疫情上报详情
点击查询按钮可以根据选择的查询条件查询当日学生的上报情况
在这里插入图片描述
点击进入教师疫情上报详情
点击查询按钮可以根据选择的查询条件查询当日教师的上报情况
在这里插入图片描述点击进入教师班级分配管理可以查看教师管理的对应班级情况
点击删除可以取消教师分配的班级。当前教师没有分配班级时,只显示教师工号。点击新建可以给教师分配班级。点击保存提交成功。
在这里插入图片描述
在这里插入图片描述

教师页面

教师登录成功后,默认显示当前的管理的班级的当日上报统计情况
在这里插入图片描述
点击查看上报历史,可以查看教师本人的上报历史,点击删除可以进行删除。可以进行过去日期的补报,一天只能上报一次。
在这里插入图片描述
选择疫情上报,可以选择对应信息进行疫情上报,点击立即上报,经行提交。
在这里插入图片描述
点击完善个人信息,填写完成后提交即可。
在这里插入图片描述
点击班级疫情上报查询内的查询按钮,可以根据查询条件,选择查询。
在这里插入图片描述

学生页面

学生页面是教师页面的阉割版,这里只进行简单选项卡展示
在这里插入图片描述

控制台页面

当后端服务器成功启动,显示
在这里插入图片描述
当redis服务器没有启动,但是后端服务器任然正常启动显示,这是正常现象。当redis服务器启动失败后,服务器会直接访问数据库。
在这里插入图片描述

三、测试说明

如果要测试,请阅读以下内容

项目名称:学校疫情上报系统

测试环境要求:
	系统:
		1.windows10
		2.mysql数据库(具体版本可以更具系统环境修改maven依赖)
	前端:
		1.安装nodejs  
	后端:
		1.jdk1.8
		2.redis
			也可以不启用 
			安装目录已经打包在项目 \学生疫情申报系统后端\resdis\Redis-x64-3.2.100目录下)

	
		
		
项目启动前需要的准备工作:
	前端:使用vue安装必要的插件后run npm dev
	后端:
		1.还原mysql数据库(sql文件命名为httprequest)
			这里推荐使用navcat连接mysql数据库经行还原
		
		2.修改jar包的数据库配置文件
			使用360解压工具,右键点击HttpReceive-1.0-SNAPSHOT.jar文件
			点击360压缩\使用360压缩打开,找到spring-dao.xml文件打开修改一下配置
			以下就是正常的数据库源的配置,不再赘述
			
			<bean id="mysqlDataSource"
				  class="org.springframework.jdbc.datasource.DriverManagerDataSource">
				<property name="driverClassName">
					<value>com.mysql.jdbc.Driver</value>
				</property>
				<property name="url">
					<value>jdbc:mysql://localhost:3306/httprequest</value>
				</property>
				<property name="username">
					<value>root</value>
				</property>
				<property name="password">
					<value>这里替换为密码</value>
				</property>
			</bean>
			
			
		3.启动redis服务器。
			redis解压文件在 学生疫情申报系统后端\resdis\Redis-x64-3.2.100目录下,
			双击启动redis-server.exe即可(默认端口6379)
		4.启动后端服务器方式
			(1)生产环境启动方式
				双击 学生疫情申报系统后端目录下的startup.bat即可。
				若没有启动reids服务器,会报错,但是可以正常运行,运行速度可能会很慢。
				正常启动后端服务器后会显示,初次使用会有2s左右的延迟卡顿,属于正常现象
					
					SLF4J: Failed to load class "org.slf4j.impl.StaticLoggerBinder".
					SLF4J: Defaulting to no-operation (NOP) logger implementation
					SLF4J: See http://www.slf4j.org/codes.html#StaticLoggerBinder for further details.
					信息|2021-09-21 11:00:55=:shardedJedis初始化参数读取成功
					信息|2021-09-21 11:00:55=:127.0.0.1 : 6379    redis服务器读取并且初始化
					信息|2021-09-21 11:00:57=:8888端口服务启动成功

四、开发说明

项目名称:学校疫情上报系统
		
开发环境要求:
	系统:
		1.windows10
		2.mysql数据库(具体版本可以更具系统环境修改maven依赖)
	前端:
		1.安装nodejs  最好是安装vue3.0版本及以上,可以使用vue可视化
	后端:
		1.jdk1.8   
		2.maven
		3.IDEA
		4.mysql数据库(具体版本可以更具系统环境修改maven依赖)
				
		
开发项目启动方式:
	前端:使用vue安装必要的插件后run npm dev
	后端:
		1.还原mysql数据库(sql文件命名为httprequest)
			这里推荐使用navcat连接mysql数据库经行还原
			
			
			
		2.使用idea打开目录 学生疫情申报系统后端源码\HttpRequest    
			(推荐使用idea是为了方便加载maven依赖,使用其他编译器可能更麻烦)
		
		3.修改resource目录下的spring-dao.xml的数据库配置文件
		
			以下就是正常的数据库源的配置,不再赘述
			
			<bean id="mysqlDataSource"
				  class="org.springframework.jdbc.datasource.DriverManagerDataSource">
				<property name="driverClassName">
					<value>com.mysql.jdbc.Driver</value>
				</property>
				<property name="url">
					<value>jdbc:mysql://localhost:3306/httprequest</value>
				</property>
				<property name="username">
					<value>root</value>
				</property>
				<property name="password">
					<value>这里替换为密码</value>
				</property>
			</bean>
			
			
		4.启动redis服务器。
			redis解压文件在 学生疫情申报系统后端\resdis\Redis-x64-3.2.100目录下,
			双击启动redis-server.exe即可(默认端口6379)
		5.启动后端服务器方式
			(1)生产环境启动方式
				双击 学生疫情申报系统后端目录下的startup.bat即可。
				若没有启动reids服务器,会报错,但是可以正常运行,运行速度可能会很慢。
				正常启动后端服务器后会显示,初次使用会有2s左右的延迟卡顿,属于正常现象
					
					SLF4J: Failed to load class "org.slf4j.impl.StaticLoggerBinder".
					SLF4J: Defaulting to no-operation (NOP) logger implementation
					SLF4J: See http://www.slf4j.org/codes.html#StaticLoggerBinder for further details.
					信息|2021-09-21 11:00:55=:shardedJedis初始化参数读取成功
					信息|2021-09-21 11:00:55=:127.0.0.1 : 6379    redis服务器读取并且初始化
					信息|2021-09-21 11:00:57=:8888端口服务启动成功后端:
		

五、项目下载

完整项目目录
在这里插入图片描述
注意:
管理员账户:admin 密码:1
其他账户注册即可

项目下载地址
链接:https://pan.baidu.com/s/19cL7A8_XEA5TG_sIQDmYmQ
提取码:mabo

六、如何修改相关配置

后端目录
在这里插入图片描述

有关服务器的配置文件
config.properties
在这里插入图片描述

#服务器的基本配置文件

# http服务的启动端口
serverPort=8888

### redis服务器地址&多个
#jedisIp=127.0.0.1&127.0.0.1&127.0.0.1
## redis服务器端口
#jedisPort=6379&8090&8091

#是否启用redis服务器
useRedis=true
jedisIp=127.0.0.1
# redis服务器端口
jedisPort=6379
# redis最大连接数
jedisMaxTotal=200

七、总结

该项目的优点

  1. 整体采用前后端分离的设计,能以微服务的方式将前端和后端分别部署到不同的服务器上面。
    能够有效的减轻后端服务器的负担。
  2. redis采用集群的部署底层设计,能有支持高并发。
  3. 若redis中间件没有正常启动的时候,后端服务器任然可以正常启动,只是服务器的响应速度下降。
  4. 后端项目在读取redis配置,服务器初始化等方面,抛弃了每次执行前检测的机制,而是在启动服务器前进行初始化,使服务器对高并发的支持性更好。能够大幅度提高服务器响应速度,提高用户体验。
  5. 几乎所有的服务器相关配置、读取数据库的sql语句都写在了配置文件中。
  6. 几乎所有的jdbc查询语句都采用preparestatement语句操作,防止sql注入
  7. 增加了日志记录,相关的日志文件都会记录在启动文件同级目录下的log文件夹内。
  8. 除了spring的相关类和jdk的相关类库,额外引入了alibaba的JSON类库,没有使用其他不常见的类库。
  9. 采用MD5加密算法对密码敏感信息进行了加密。
    10.在底层中增加了系统中各个方法运行的时间计算,并且可以在控制台看到。对今后的系统优化可以提供很好的帮助。

该项目的缺点

  1. 因为该项目后端与前端通信使用的使socket通信,当前端传入非法字符,后端接受到的使非法字符。可能会导致读取数据错误。导致的后果就是当前请求的数据异常。

  2. 为了使用定时器,采用了spring的定时器来定时删除redis的缓存,造成了代码的臃肿。
    可以使用redis原生的具有实现的缓存操作来代替这个过程,并且不会出现遗漏。

  3. 代码方面,项目初期缺少对项目的规划,造成了项目的部分方法位置混乱,但是不影响项目的正常运行。

  4. 前后端通信的时,采用的使明文通信,有一定的安全问题。

  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值