此为大三小组课程作业，基于社区疫情的管理信息系统的开发文档，此为记录。
1.系统概述
1.1项目背景
本小组设计的社区疫情管理系统是计算机技术与疫情管理相结合的产物，通过使用社区疫情管理系统，可以实现各个社区对居民们在疫情下生活及相关情况的高效管理。
随着计算机技术的不断提高，计算机已经深入到社会生活的各个角落。而采用人工统计社区疫情相关物资和人员流动的方式，不便于使用，而且容易出错。为了满足疫情管理人员对健康高效的管理，在工作人员的具备一定的计算机操作能力的前提下，本小组特在此疫情下开发了社区疫情管理系统软件，来提高疫情期间社会管理的效率。
1.2开发目标
经过一学期的学习，本小组期望项目达到0.3版本，在实现登录注册功能的基础上，完成7个模块的开发。其中这7个模块包括：登录用户的信息管理模块（包括查看、修改个人信息，退出登录等）、系统管理（包括系统用户、角色和部门的管理）、物资管理（包括物资资料、分类、库存、出入库的管理）、健康管理（包括健康打卡、疫苗接种、病毒相关信息的管理）、出行管理（包括居民外出情况、未归人员、未归人员具体信息、违规外出人员、居民外出图等的管理）、请假管理（包括请假情况、未返人员、请假具体信息、违规请假等的管理）、疫情信息可视化展示模块（包括社区疫情可视图总况、中国疫情实时地图、新冠感染者年龄分布、确诊情况、疫苗接种情况、物资情况、请假外出地区分布情况等的可视化展示），总共达到超过50个界面。主要实现以下大致模块：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RQYLunQU-1681785382007)(img/clip_image006.png)]
1.3系统说明
1.3.1运行环境
(1)软件：Microsoft Windows 8/Windows 10/Windows 11, Mac OS;
(2)硬件：2GB 以上内存、2GB 以上剩余硬盘空间
1.3.2开发环境
(1)操作系统：Windows11、window10；
(2)开发语言：前端：HTML，CSS，JavaScript；后端：Java；
(3)开发环境：IntelliJ IDEA 2017，Tomcat8.5；
(4)数据库：MySQL；
(5)SDK： JDK1.8
1.4技术分析
“社区疫情管理信息系统”前端在jsp（html、css、javascript）的基础上采取了Bootstrap框架修改样式、Layui框架调整布局、Echarts图表实现可视化，后端在Java语言的基础上，采用了servlet-service-mapper的三层架构编写代码，使得代码运行逻辑更清晰，运用MyBatis的框架简化和数据库的连接。整体项目实现的功能是疫情相关数据的增删改查、可视化信息展示等。以下是对我们具体使用的技术逐一地进行详细介绍。
1.4.1前端
（1）JSP
JSP（全称Java Server Pages，Java服务器端页面）是由[Sun Microsystems](https://baike.baidu.com/item/Sun Microsystems?fromModule=lemma_inlink)公司主导创建的一种动态网页技术标准。JSP部署于网络服务器上，可以响应客户端发送的请求，并根据请求内容动态地生成HTML、XML或其他格式文档的Web网页，然后返回给请求者。JSP技术以Java语言作为脚本语言，为用户的HTTP请求提供服务，并能与服务器上的其它Java程序共同处理复杂的业务需求。
JSP将Java代码和特定变动内容嵌入到静态的页面中，实现以静态页面为模板，动态生成其中的部分内容。JSP引入了被称为“JSP动作”的XML标签，用来调用内建功能。另外，可以创建JSP标签库，然后像使用标准HTML或XML标签一样使用它们。标签库能增强功能和服务器性能，而且不受跨平台问题的限制。JSP文件在运行时会被其编译器转换成更原始的Servlet代码。JSP编译器可以把JSP文件编译成用Java代码写的Servlet，然后再由Java编译器来编译成能快速执行的二进制机器码，也可以直接编译成二进制码。
JSP是一种动态的网页技术，主要是HTML+Java代码+JSP自身的东西，是一种特殊的页面，既可以定义HTML、CSS、JS等静态内容，又可以定义Java代码的动态内容。JSP在执行时会被服务器翻译为Servlet编译执行，本质上JSP就是一个Servlet。JSP可以用于简化书写，避免了在Servlet中直接输出HTML 标签。
（2）LayUI
LayUI是一款采用自身模块规范编写的经典模块化前端UI框架，遵循原生[HTML](https://baike.baidu.com/item/ HTML/97049?fromModule=lemma_inlink)/CSS/JS的书写与组织形式，门槛较低，适合应用于网页界面的开发。LayUI提供了大量好看、方便的样式，与Bootstrap有些相似，但该框架有个极大的好处就是定义了很多前后端交互的样式接口，如分页表格，只需在前端配置好接口，后端则按照定义好的接口规则返回数据，即可完成页面的展示，可以极大减少后端人员的开发成本。
LayUI属于轻量级框架，简单美观，基于DOM驱动，适用于开发后端模式，在服务端页面有较好的效果。提供了布局容器、栅格系统等布局，按钮、导航、选项卡、表格、表单等基本元素，弹出层、分页等组件。本项目主要使用了LayUI的后台布局和选项卡。
（3）Bootstrap
Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript开发的前端框架。Bootstrap提供了HTML和CSS规范，它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC（微软全国广播公司）的Breaking News都使用了该项目。国内一些移动开发者较为熟悉的框架，如WeX5前端开源框架等，也是基于Bootstrap源码进行性能优化而来。
Bootstrap框架已经预定义好了一套CSS样式和与样式相对应的JavaScript代码，且对应的样式有对应的特效，对于开发人员来说，只需要写好HTML结构，在页面头部引入Bootstrap核心CSS文件，再添加Bootstrap中固定的class样式，就可以实现特定的样式效果，这样可以帮助我们节省美化页面样式的时间，使得项目开发更加快捷、高效。此外，Bootstrap还支持响应式开发，可以解决前端开发中网站展示的终端兼容问题。本项目主要使用Bootstrap来实现页面样式的美化。
（4）Echarts
ECharts是一款由百度出品的基于JavaScript的开源数据可视化图表库，可以流畅地运行在PC端和移动设备上，兼容当前绝大部分浏览器，底层依赖矢量图形库ZRender，提供多种直观，生动，交互丰富，可个性化定制的常用数据可视化图表。本项目主要使用ECharts来实现疫情数据的可视化。
1.4.2后端
（1）Java
Java是一个面向对象的编程语言，容易理解。而且略去了多重加载、指针等难以理解的概念，大大简化了程序设计。其次Java学习资料较多，网上有很多Java的学习视频，有学习资料参考，组长有Java编程经验，可以指导组员进行。
（2）MyBatis
MyBatis 是一款优秀的持久层框架，它支持定制化 SQL、存储过程以及高级映射。MyBatis 避免了几乎所有的JDBC代码和手动设置参数以及获取结果集。MyBatis 可以使用简单的 XML 或注解来配置和映射原生信息，将接口和 Java 的 pojos映射成数据库中的记录。通过提供DAO层，将业务逻辑和数据访问逻辑分离，使系统的设计更清晰，更易维护，更易单元测试。sql和代码的分离，提高了可维护性。所以本项目选择MyBatis取代JDBC连接java和数据库。
MyBatis 是支持普通 SQL查询，存储过程和高级映射的优秀持久层框架。MyBatis 消除了几乎所有的JDBC代码和参数的手工设置以及结果集的检索。MyBatis 使用简单的 XML或注解用于配置和原始映射，将接口和 Java 的POJOs（Plain Ordinary Java Objects，普通的 Java对象）映射成数据库中的记录
（3）MySQL
MySQL 是一个关系型数据库管理系统。MySQL 是最流行的关系型数据库管理系统之一，在 WEB应用方面，MySQL 是最好的关系数据库管理系统应用软件，且目前许多java项目相关的数据库系统都选用MySQL，可以借鉴学习。因此，选用 MySQL存储数据。
2.数据库设计
2.1需求分析
顺应疫情的大背景，我们决定设计开发一个社区疫情管理信息系统，我们通过对需求的分析调查，得出需求理解如下：
（1）建立一个可以总览社区疫情的可视化板块，从中社区可以轻松的看到各项数据统计，如小区总人数、确诊情况、物资情况、小区人员变化图表、疫苗接种情况、社区人员年龄分布情况、人员请假外出地区情况等等。
（2）基于总览社区疫情可视化板块的设计，我们需要建立系统管理模块，此模块可以添加使用系统的角色，添加组成社区的各个部门板块角色，添加使用系统的用户这三个主要功能。
（3）基于总览社区疫情可视化板块的设计，我们需要建立物资管理模块，此模块可以统计现有的物资资料、物资分类、物资库存以及物资的出入库情况记录。
（4）基于总览社区疫情可视化板块的设计，我们需要建立健康管理模块，此模块可以进行打卡信息汇总、疫苗接种信息汇总以及病患信息汇总。
（5）基于总览社区疫情可视化板块的设计，我们需要建立出行管理模块，此模块可以记录居民外出情况、未归人员及其具体情况、违规外出人员情况等等。
（6）基于总览社区疫情可视化板块的设计，我们需要建立请假管理模块，此模块可以进行请假申请、请假记录、请假的具体信息统计汇总、违规请假的情况汇总。
通过分析以上需求，我们可以得出其他的具体功能是可以对这五个模块的信息进行增删查改四项功能，并将这五个模块的信息连接反映到社区疫情总览的可视化板块中。
2.2数据库设计
2.2.1 逻辑结构设计
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-s9yXnMfq-1681785382011)(img/clip_image008.jpg)]
2.2.2 表结构设计
2.2.2.1系统管理模块
（1）系统部门——sys_dept
主要记录系统的各个部门id、名称、负责人、联系电话、部门状态等等。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-m0EOOYzr-1681785382012)(img/clip_image010.jpg)]
（2）系统用户——sys_user
主要记录了使用系统的用户信息，包括id、用户名、密码、昵称、电话、所属部门名称、状态等等信息。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BQIZpK6x-1681785382014)(img/clip_image012.jpg)]
（3）系统角色——sys_role
主要记录了系统中不同角色的名称、角色代码和角色状态。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-26idiB9w-1681785382015)(img/clip_image014.jpg)]
2.2.2.2物资管理模块
（1）物资资料——good_info
主要记录了物资的名称、物资规模、物资单位、创建人、物资资料的备注、还有自动更新的创建时间。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cuDdaVqM-1681785382017)(img/clip_image016.jpg)]
（2）物资分类——good_classfication
主要记录物资的类型，包括类型名称、创建人、备注和创建、修改的时间。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-r2agiAJe-1681785382018)(img/clip_image018.jpg)]
（3）物资库存——good_stock
主要记录物资名称、物资规模、单位以及现有库存
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ohXd0agv-1681785382019)(img/clip_image020.jpg)]
（4）物资出入库——good_inandout
主要记录物资去向、联系人、操作类型（入库或出库）、物资的基本信息。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-I6ybvd7b-1681785382021)(img/clip_image022.jpg)]
2.2.2.3健康管理模块
（1）打卡信息——health_clock
主要记录用户名称、健康情况、体温、是否在中高风险区，是否确诊，所在位置等。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-s1Jq7COB-1681785382023)(img/clip_image024.jpg)]
（2）疫苗接种信息——vaccination
主要包含姓名、性别、身份证号、联系方式等基本信息，还有疫苗名称、接种编号和日期、接种计次等。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BlQJXj24-1681785382025)(img/clip_image026.jpg)]
（3）病患信息——patient_information
主要记录已经患病的居民，他们的姓名、确诊情况、体温、症状、就医情况、具体住址等等。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yzNYmwNa-1681785382026)(img/clip_image028.jpg)]
2.2.2.4出行管理模块
（1）居民外出情况/未归人员——access_info
主要记录姓名、电话、请假情况等。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oW5RiU28-1681785382028)(img/clip_image030.jpg)]
（2）未归人员具体情况——exception_access
主要未归人员的离开时间、当时值守人员、请假原因等等。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CaXCDd1r-1681785382030)(img/clip_image032.jpg)]
（3）违规外出人员——wrongdoing_access
主要记录违规外出人员的具体情况，还有其轨迹是否有异常。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DmsbDCEx-1681785382031)(img/clip_image034.jpg)]
2.2.2.5请假管理
（1）请假申请/请假记录——leave_info
主要记录请假者的请假申请，除基本信息以外还有请假原因、计划外出地详细地址、计划离开和返回时间。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ivappxsV-1681785382033)(img/clip_image036.jpg)]
（2）请假具体信息——leave_exception
将请假申请的信息全部记录 ，并写明居住地址、审批人员等。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DONbTQtT-1681785382035)(img/clip_image038.jpg)]
（3）违规请假——leave_wrong
记录违规请假人员，或未请假人员的基本信息，能否联系，如果联系到计划何时返回，居住地址是什么。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HMbYoVYC-1681785382037)(img/clip_image040.jpg)]
3.界面设计
3.1登录及注册
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GAtXOZvm-1681785382038)(img/clip_image042.jpg)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UR0Rawmh-1681785382039)(img/clip_image044.jpg)]
3.2信息展示页面
首页
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MAP5HKo9-1681785382042)(img/clip_image046.jpg)]
可视化界面-社区疫情可视化图
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Tfuu52Pb-1681785382043)(img/clip_image048.jpg)]
疫情实时地图
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RmUMkr65-1681785382044)(img/clip_image050.jpg)]
新冠感染者年龄分布
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-R295BG8t-1681785382046)(img/clip_image052.jpg)]
增删查改（以【系统管理】和【健康管理】模块为例）
涉及数据的增加、删除、修改、普通查询、分页显示、多条件查询界面。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VehDD63F-1681785382047)(img/clip_image054.jpg)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AlmE30Hl-1681785382048)(img/clip_image056.jpg)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CVrAVj2j-1681785382049)(img/clip_image058.jpg)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ASeqpOQ8-1681785382051)(img/clip_image060.jpg)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WCFp3SUH-1681785382053)(img/clip_image062.jpg)]
4.分模块功能及代码演示
4.1登录和注册
4.1.1模块功能
该模块实现系统用户的登录和注册。
4.1.2数据库设计
(1)字段设计
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MtK6fybO-1681785382055)(img/clip_image064.jpg)]
(2)外键设计
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3jVaZkHZ-1681785382057)(img/clip_image066.jpg)]
(3)数据展示
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MhDSGW8e-1681785382059)(img/clip_image068.jpg)]
4.1.3代码逻辑（以登录为例）
数据传递的逻辑顺序为**login.jsp->LoginServlet.java->LoginService.java->SysUserMapper.java,**以下将按照数据传递的逻辑顺序，对此过程进行描述。
\1. 在login.jsp页面有一个用户信息表单，当用户输入用户名、密码，点击登录按钮时，会将输入的用户名、密码将会分别作为username、password两个参数的参数值传递到表单提交的地址/coursedemo2/loginServlet（其中/coursedemo2为项目的虚拟路径，/loginServlet为提交参数的servlet的路径）。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5wzw6Tp9-1681785382060)(img/clip_image070.jpg)]
\2. 进入到/loginServlet之后，有doGet()和doPost()两个方法需要重写，这里doPost()的方法体直接调用与doGet()相同的处理逻辑（其实登录表单提交用的是post请求，但因为这里doGet()和doPost()采用了相同处理逻辑，不特意做区分）。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pfBtuIuV-1681785382061)(img/clip_image072.jpg)]
在doGet()的处理逻辑中，涉及到接收请求参数、调用service层的方法进行查询、根据查询结果判定登录成功与否，以及登录成功和登录失败不同的处理方式，具体的实现流程可以参考代码注释。
其中登录成功后，在重定向到主页之前，做了将用户数据保存到cookie和session的两项操作。其中保存到cookie的意义是：实现登录过滤：如果用户已经登录，可以访问别的页面；如果用户未登录，需要跳转登录页面，先登录（这部分功能的具体介绍会在后文的登录过滤），保存到session的意义是：在登录后访问系统的任意页面时可以获取已登录用户的信息，以及完成退出登录的功能。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7L8KhQms-1681785382063)(img/clip_image074.jpg)]
\3. 在/loginServlet中调用service层方法进行查询时，会进入到LoginService.java中的方法selectUserByUsernameAndPassword(String username,String password)查询。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6RFmFwU6-1681785382064)(img/clip_image076.jpg)]
\4. 在LoginService.java的方法selectUserByUsernameAndPassword(String username,String password)中进行查询时，会调用SysUserMapper中的select方法，执行sql语句最终进行查询。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OYJVivc1-1681785382065)(img/clip_image078.jpg)]
\5. 到此为止，便将用户输入的用户名和密码信息与数据库中已有的数据完成了对比，如果对比成功，说明用户信息正确，进入登录成功的路径，跳转到主页访问；否则进入登录失败的路径，给出错误提示。
4.2系统功能模块
4.2.1功能介绍
该模块下包含系统用户、系统角色、系统部门三个小模块，其中系统用户模块实现了系统用户的查询、新增、修改、删除等基本功能，以及多条件查询、分页展示数据的高级功能。系统角色、系统部门模块功能与之类似，不做赘述。
4.2.2数据库设计（以系统用户为例）
（1）字段设计
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QgQzPFS4-1681785382066)(img/clip_image079.jpg)]
（2）外键设计
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DN0YLJ8E-1681785382067)(img/clip_image080.jpg)]
（3）数据展示
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rHICLwdw-1681785382068)(img/clip_image081.jpg)]
4.2.3代码逻辑
\1. 首先，menubar.jsp是我们借助layui框架引入的一个系统展示界面，其主要功能是：（1）实现左侧二级菜单的折叠与展开；（2）点击二级菜单，其链接指向的内容数据会在右侧框中进行展示。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-c4X4jXQK-1681785382072)(img/clip_image083.jpg)]
其中，实现左侧二级菜单的动态代码如下：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oJQ82uGX-1681785382074)(img/clip_image085.jpg)]
其中，【系统管理】模块的链接代码展示如下：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XiNhOA3q-1681785382075)(img/clip_image087.jpg)]
\2. 当点击页面【系统管理】的二级菜单【系统用户】，会跳转/sysUserServlet，即SysUserServlet.java，在这个类中需要重写doGet()和doPost()两个方法，这里doPost()的方法体直接调用与doGet()相同的处理逻辑（此时，点击链接跳转发送的是get请求，但因为这里doGet()和doPost()采用了相同处理逻辑，不特意做区分）。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ehMBU83q-1681785382077)(img/clip_image089.jpg)]
在doGet()方法中，首先获取一个名为“method”的请求参数，此时为null，为其赋值“selectAll”，执行分页查询逻辑，接下来会调用SysUserService.java层的方法进行分页查询，并将查询结果存入request域中，然后转发到展示数据的页面sysUsers.jsp。（其中具体每一步的用途参见代码注释，分页的逻辑将在后续展开，此处不再赘述）
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5sUNjW86-1681785382079)(img/clip_image091.jpg)]
\3. 在上一步中，servlet中的分页查询过程中调用了service层的分页查询方法，接着进入SysUserService.java中的分页查询方法findUserByPage(String _currentPage, String _rows, String username,String city)，在该方法中调用了mapper层的分页查询方法。（其他步骤用途参见代码注释）
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BKONMsxZ-1681785382080)(img/clip_image093.jpg)]
\4. 于是进入SysUserMapper.java中的分页查询方法内部，执行相应的sql语句，从数据库查询到相关的数据，将此数据逐层返回到servlet层（即SysUserServlet.java），然后将查询到的数据存储到request域中，转发到sysUsers.jsp进行动态展示。至此，分页查询功能的基本逻辑已介绍完毕。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EGJNE7db-1681785382081)(img/clip_image095.jpg)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mDw2kvUC-1681785382083)(img/clip_image097.jpg)]
\5. 该页面的增加、删除、修改等功能的大体流程均与分页查询功能类似，故相同部分不再赘述。只对进入不同方法的入口进行简单介绍，以新增功能为例。
（1） 在sysUsers.jsp页面右上角有一【添加用户】按钮，点击该按钮，会携带隐藏参数method=to_add_page提交表单到/sysUserServlet（即SysUserServlet.java）。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nILog1LE-1681785382085)(img/clip_image099.jpg)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AsDnr01J-1681785382087)(img/clip_image101.jpg)]
（2） 当进入SysUserServlet.java时，根据获取到的参数method=to_add_page，页面会重定向到一个【增加用户】页面（即addUser.jsp）。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2pFE96gI-1681785382090)(img/clip_image103.jpg)]
addUser.jsp
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hfxCHxGe-1681785382091)(img/clip_image105.jpg)]
（3） 在该页面填写完相关的信息，点击【提交】,会携带隐含参数method=add进入到/sysUserServlet（即SysUserServlet.java）。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gwTKPwgG-1681785382093)(img/clip_image107.jpg)]
（4） 在进入SysUserServlet.java之后，根据获取到的参数method=add，页面会执行相应新增的逻辑，具体新增的逻辑（从servlet层->service层->mapper层的过程类似上文所述1~5的步骤，故不在赘述）
（5） 删除、修改的逻辑与新增的逻辑类似，故不再赘述。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1DA0SO0H-1681785382094)(img/clip_image109.jpg)]
4.3物资管理
4.3.1模块功能
物资管理模块的主要功能有对数据的增、删、查、改以及分页查询和条件查询。
分页查询功能：当数据库中有很多数据时，我们不可能将所有的数据展示在一页里，这个时候就需要分页展示数据。
条件查询功能：数据库量大的时候，我们就需要精确的查询一些想看到的数据，这个时候就需要通过条件查询。
4.3.2数据库设计
根据之前的功能需求分析 ，创建分别对应物资资料、物资分类、物资库存、物资出入库的四张表，分别是good_info、good_classfication、good_stock、good_inandout。具体建表如下图所示：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qhROnhxa-1681785382096)(img/clip_image111.jpg)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WIogeTtL-1681785382098)(img/clip_image113.jpg)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GlGFJNIn-1681785382099)(img/clip_image115.jpg)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7oJLYOyd-1681785382100)(img/clip_image117.jpg)]
因为四张表的数据没有相互关联，所以四张表并没有逻辑关系，因此ER图如下所示：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-plYzzgpg-1681785382104)(img/clip_image119.jpg)][外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IPvdXdvQ-1681785382105)(img/clip_image121.jpg)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GrnRxP0v-1681785382106)(img/clip_image123.jpg)][外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NTZcCPDn-1681785382107)(img/clip_image125.jpg)]
4.3.3代码逻辑
本次物资管理模块加上每一页的增改页面共十二个jsp页面，一个html页面，截图如下：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kgtuKVTp-1681785382108)(img/clip_image127.jpg)][外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PIqzZWQl-1681785382109)(img/clip_image129.jpg)]
1.查询功能（以物资资料为例，即good_info表）
相似的整体流程如下图所示：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iVJBHdYP-1681785382110)(img/clip_image141.jpg)]
①后端实现
（1）dao方法实现
在com.example.mapper.good.GoodInfoMapper接口中定义抽象方法，并使用 @Select 注解编写 sql 语句.
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2Pu8mnHO-1681785382111)(img/clip_image143.jpg)]
（2）service方法实现
在com.example.service.good包下创建GoodInfoService接口，在该接口中定义查询所有的抽象方法
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eb1FVow4-1681785382112)(img/clip_image145.jpg)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pGpH76eT-1681785382112)(file:///C:/Users/鲸鱼/AppData/Local/Temp/msohtmlclip1/01/clip_image147.jpg)]
（3）servlet实现
在com.example.web.servlet包下定义，名为GoodInfoServlet的查询所有的servlet。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9HEOdwG5-1681785382114)(img/clip_image149.jpg)]
② 前端实现
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pwyYl1rm-1681785382115)(img/clip_image151.jpg)]
最终实现情况：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UaWO22WN-1681785382116)(img/clip_image153.jpg)]
2.添加功能（以物资资料为例，即good_info表）
这是类似的流程图：[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IqkDh2Vr-1681785382117)(img/clip_image158.jpg)]
①后端实现
（1）dao方法实现
在GoodInfoMapper接口中定义addInfo()添加方法，并使用@Insert注解编写sql语句.
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0mG3kmYn-1681785382119)(img/clip_image160.jpg)]
（2） service方法实现
在 GoodInfoService 接口中定义addInfo()添加数据的业务逻辑方法
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8talG7WD-1681785382120)(img/clip_image162.jpg)]
（3） servlet实现
servlet 代码实现如下：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UR4hsaPJ-1681785382121)(img/clip_image164.jpg)]
②前端实现
页面实现代码如下：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tX07owTw-1681785382122)(img/clip_image166.jpg)]
添加资料按钮代码如下：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gvt9kCuI-1681785382124)(img/clip_image168.jpg)]
点击添加资料按钮以后，最终页面实现如下：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-A6t84V0x-1681785382126)(img/clip_image170.jpg)]
3.删除功能（以物资资料为例，即good_info表）
①后端实现
（1）dao方法实现
在GoodInfoMapper接口中定义deleteById()方法，并使用@Delete注解编写sql语句.
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ntoDU6xY-1681785382127)(img/clip_image172.jpg)]
（2）service方法实现
在 GoodInfoService 接口中定义deleteById()删除数据的业务逻辑方法
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-t9aOgeQZ-1681785382128)(img/clip_image174.jpg)]
（3）servlet实现
servlet 代码实现如下：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8EN7Kb4z-1681785382130)(img/clip_image176.jpg)]
②前端实现
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-meGSqK5t-1681785382131)(img/clip_image178.jpg)]
4.修改功能（以物资资料为例，即good_info表）
①后端实现
（1）dao方法
在GoodInfoMapper接口中定义findById()方法以及updateInfo()更新数据，并使用@Select和@Update注解编写sql语句。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-k4na0zpo-1681785382132)(img/clip_image180.jpg)]
（2）Service方法实现
在 GoodInfoService 接口中定义findById()和updateInfo更新数据的业务逻辑方法
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-h1r9zogI-1681785382134)(img/clip_image182.jpg)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kDmYA1SK-1681785382135)(img/clip_image184.jpg)]
（3）servlet实现
servlet 代码实现如下：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XEJtWFZ0-1681785382136)(img/clip_image186.jpg)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yv9BJsKo-1681785382137)(img/clip_image188.jpg)]
②前端实现
页面代码如下图所示：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-q5ym7hms-1681785382139)(img/clip_image190.jpg)]
最终页面呈现如下：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9htuOz1h-1681785382141)(img/clip_image192.jpg)]
5.分页多条件查询功能（以物资资料为例，即good_info表）
①数据、流程分析
分页查询也是从数据库进行查询的，所以我们要分页对应的SQL语句应该怎么写。分页查询使用 LIMIT关键字，格式为：LIMIT 开始索引 每页显示的条数。以后前端页面在发送请求携带参数时，它并不明确开始索引是什么，但是它知道查询第几页。所以 开始索引 需要在后端进行计算，计算的公式是 ：开始索引 = （当前页码 - 1）* 每页显示条数。
根据上一步对分页查询 SQL 语句分析得出，前端需要给后端两个参数：当前页码 ： currentPage；每页显示条数：pageSize。
后端需要响应什么数据给前端呢？主要是当前页需要展示的数据。我们在后端一般会存储到 List 集合中；总共记录数。在上图页面中需要展示总的记录数，所以这部分数据也需要。总的页面 elementUI 的分页组件会自动计算，我们不需要关心。
而这两部分需要封装到 PageBean 对象中，并将该对象转换为 json 格式的数据响应回给浏览器。
通过上面的分析我们需要先在 pojo包下创建 PageBean类，为了做到通过会将其定义成泛型类，代码如下：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ODkX7IQV-1681785382142)(img/clip_image194.jpg)]
②后端实现
（1）dao方法实现
在GoodInfo接口中定义findTotalCount()`方法进行统计记录数，并定义 findByPage()方法进行分页查询，代码如下：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uKQB085O-1681785382143)(img/clip_image196.jpg)]
（2）service方法实现
在 GoodInfo接口中定义 findByPage()分页查询数据的业务逻辑方法：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lyjryeV3-1681785382145)(img/clip_image198.jpg)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rMsioYVo-1681785382146)(img/clip_image200.jpg)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uipZI0Z7-1681785382147)(file:///C:/Users/鲸鱼/AppData/Local/Temp/msohtmlclip1/01/clip_image202.jpg)]
（3）servlet实现
在 GoodInfoServlet类中定义findByPage()方法。该方法的代码如下：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-E3QvuARq-1681785382148)(img/clip_image204.jpg)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VRMb9eEe-1681785382150)(img/clip_image206.jpg)]
③前端实现
前端代码如下所示：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DeSTP5lo-1681785382151)(img/clip_image208.jpg)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vX9AkXOf-1681785382152)(img/clip_image210.jpg)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zo4NAHCc-1681785382153)(img/clip_image212.jpg)]
最终实现效果如下所示：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nwywGxsV-1681785382155)(img/clip_image214.jpg)]
4.3.4遇到的问题及解决措施
（1）中文乱码问题
在网页的添加和修改表单功能时，发现如果在前端页面上修改添加数据，传到数据库后却无法显示中文字符，全部显示为？这个符号。
在网上查找原因，发现在代码里我将字符编码设置成了ISO-8859-1，但是这个编码不支持中文，因此它会直接将中文字符转化为‘3f’，也就是常见的“？”字符。
所以我的解决方法是将所有ISO-8859-1编码更换成UTF-8，这样就解决了问题。
（2）路径问题
很多时候发现在写好了代码之后，测试运行的时候会报错，最后检查发现主要是路劲问题，而路径问题也分好几种：
①MVC / 三层架构的项目结构。比如其中java.com.example.mapper与webapp.com.example.mapper的路径名以及项目名称要完全一致。否则mapper之间无法对应
②tomcat运行时网址的相对路径、绝对路径问题，以下是二者的区别
假设项目名为：JavaWeb01 ， 在该项目下写了一个login.jsp文件作为登录界面，login.jsp文件的action属性指定提交的是文件名为：WelcomeServlet的Servlet文件，该
文件的value属性访问名为：/welcome
相对路径：
若 IDEA中运行服务器Tomcat时默认打开：http://localhost:8080
需要指定login.jsp文件的action为：；
此时，若想在浏览器运行login.jsp文件需要在 http://localhost:8080 + /login.jsp 也就是（http://localhost:8080/login.html）
绝对路径：
若IDEA中运行服务器Tomcat时默认打开：http://localhost:8080/JavaWeb01
需要指定login.jsp文件的action为：；
此时，若想在浏览器运行login.html文件需要在 http://localhost:8080/JavaWeb01 + /login.jsp 也就是（http://localhost:8080//JavaWeb01/login.jsp）
4.4健康管理
4.4.1 模块功能
“健康管理”模块主要由打卡信息、疫苗接种信息和病患信息三个小模块组成，在每个小模块中都以表格的形式呈现了相关信息，并实现了基本的增、删、查、改功能，加入了分页功能和多条件查询功能，整体样式由Bootstrap来实现美化。图1是健康管理模块的具体功能介绍。图2、3、4、5是页面实现。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HY1QxvNU-1681785382157)(img/clip_image216.png)]
图 1 健康管理模块功能介绍图
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uHk6uL5J-1681785382158)(img/clip_image218.png)]
图 2 健康打卡信息页面
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ME3P2yYF-1681785382160)(img/clip_image220.png)]
图 3 健康打卡页面
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5ozl0wEg-1681785382161)(img/clip_image222.png)]
图 4 打卡信息更新页面
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BEvA97bM-1681785382162)(img/clip_image224.png)]
图 5 多条件查询结果
4.4.2 数据库设计
打卡信息模块连接的是数据库db1的health_clock表，表中一共有9个属性，8条数据。
表 1 health_clock表各字段含义
| 字段名 | 属性 | 含义 | 备注 |
|---|---|---|---|
| id | int | 编号 | 主键，自动生成 |
| username | varchar(20) | 用户名 | |
| health_type | varchar(10) | 健康状况 | 0表示健康，1表示有发烧咳嗽，2表示有其他不适症状 |
| temperature | varchar(10) | 体温 | |
| middle_high | varchar(10) | 是否在中高风险地区 | 0表示是，1表示否 |
| diagnosis | varchar(10) | 近14日内有无接触新冠疑似或确证患者 | 0表示是，1表示否 |
| return_info | varchar(10) | 近14日内有无与境外（包括港澳台）回国人员有接触 | 0表示是，1表示否 |
| address | varchar(30) | 打卡位置 | |
| create_time | datetime | 创建时间 | 系统自动生成 |
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0LZmDnzx-1681785382166)(img/clip_image226.png)]
图 6 health_clock表数据库截图
表 2 vaccination表各字段含义
| 字段名 | 属性 | 含义 | 备注 |
|---|---|---|---|
| id | int | 编号 | 主键，自动生成 |
| username | varchar(20) | 用户名 | |
| idNumber | char(18) | 身份证号 | |
| gender | varchar(10) | 性别 | |
| phoneNumber | char(11) | 手机号 | |
| vaccineName | varchar(20) | 疫苗名称 | |
| vaccineNumber | varchar(10) | 疫苗编号 | |
| vaccinationTime | char(10) | 接种剂次 | |
| inoculationTimes | char(10) | 接种时间 |
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-E6ZRs1WV-1681785382167)(img/clip_image228.png)]
图 7 vaccination表数据库截图
表 3 patient_information表各字段含义
| 字段名 | 属性 | 含义 | 备注 |
|---|---|---|---|
| id | int | 编号 | 主键，自动生成 |
| username | varchar(20) | 用户名 | |
| diagnosis | varchar(10) | 是否确诊 | 0表示否，1表示是 |
| filename | varchar(55) | 图片名 | |
| filetype | varchar(55) | 文件类型 | |
| temperature | varchar(20) | 体温 | |
| health_type | varchar(10) | 健康状况 | 0表示重度不适，1表示中度不适，2表示轻度不适 |
| symptom | varchar(200) | 症状 | |
| doctor | varchar(10) | 是否就医 | 0表示否，1表示是 |
| address | varchar(30) | 住址 | |
| create_time | datetime | 创建时间 | 系统自动生成 |
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AbNspbjI-1681785382170)(img/clip_image230.png)]
图 8 patient_information表数据库截图
4.4.3 代码逻辑（以打卡信息为例）
增：用户在增加页面输入对应信息，点击提交，跳转到Servlet，method=add，调用service 对应add方法，将表单数据进行提交，再调用mapper的add方法，通过navicat向MySQL数据库执行增加的SQL语句，将表单数据增加到数据库中。然后返回到mapper层，service层获取mapper对象，再返回到servlet层，增加操作完成。增加完新数据后，客户端页面会直接跳转回主页面，再次调用selectAll方法获取全部数据。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ShyCO9Z6-1681785382172)(img/clip_image232.png)]
图 9 jsp页面表单数据传递代码
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CK3zXmtj-1681785382173)(img/clip_image234.png)]
图 10 servlet的add方法代码
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5pY6EZ9H-1681785382176)(img/clip_image236.png)]
图 11 service的add方法代码
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aBUm2N8c-1681785382177)(img/clip_image238.png)]
图 12 mapper的add方法代码
删：用户点击“删除”按钮，跳转到Servlet，method=delete，并将对应信息条目的id作为参数传递过去，调用service 对应delete方法，再调用mapper的delete方法，通过navicat向MySQL数据库执行删除的SQL语句，根据id将数据库中的对应条目删除。然后返回到mapper层，service层获取mapper对象，再返回到servlet层，删除操作完成。删除完成后，客户端页面会跳转到主页面，再次调用selectAll方法获取全部数据。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0yBZfoTv-1681785382178)(img/clip_image240.png)]
图 13 jsp页面传递参数代码
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VKzcneT1-1681785382179)(img/clip_image242.png)]
图 14 servlet的delete方法代码
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mUWg59fD-1681785382180)(img/clip_image244.png)]
图 15 service的delete方法代码
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pNmCB8Sx-1681785382181)(img/clip_image246.png)]
图 16 mapper的delete方法代码
查（多条件查询）：用户输入想要查询的内容，点击查询，跳转到Servlet，method=null，servlet接收条件查询参数，调用service 对应findUserByPage方法，将表单数据进行提交，再调用mapper的selectAll方法，通过navicat向MySQL数据库执行查询的SQL语句，在数据库中查询内容。获得数据后再返回到mapper层，service层获取mapper对象，再返回到servlet层，查询操作完成。查询完成后，客户端页面会直接跳转回主页面，在主页面显示查询到的信息。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-izXehduU-1681785382182)(img/clip_image248.png)]
图 17 jsp页面数据传递代码
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-enAQFaNW-1681785382183)(img/clip_image250.png)]
图 18 servlet的findUserByPage方法代码
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-u5gEVmsm-1681785382184)(img/clip_image252.png)]
图 19 service的findUserByPage方法代码
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FSIrECUI-1681785382185)(img/clip_image254.png)]
图 20 mapper的findTotalCount方法代码
改：用户点击修改，进入修改页面，此时method=findByID，并将对应信息条目的id作为参数，然后跳转到了Servlet中，调用service 对应findByID方法，再调用mapper的findByID方法，通过navicat向MySQL数据库执行查询的SQL语句，根据id在数据库中查询对应条目。获得数据后返回到mapper层，service层获取mapper对象，再返回到servlet层，将原有信息显示在查询页面中。用户在修改页面修改信息后，点击提交，跳转到Servlet，method=update，调用service 对应update方法，将表单数据进行提交，再调用mapper的update方法，通过navicat向MySQL数据库执行修改的SQL语句，对数据库中对应的信息进行修改。然后再返回到mapper层，service层获取mapper对象，再返回到servlet层，修改操作完成。修改完成后，客户端页面会直接跳转回主页面，再次调用selectAll方法获取全部数据。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ul13q9uo-1681785382186)(img/clip_image255.png)]
图 21 jsp页面传递参数代码
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DvLnqVMu-1681785382187)(img/clip_image257.png)]
图 22 servlet的findByID方法代码
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tl20Hjsk-1681785382188)(img/clip_image259.png)]
图 23 service的findByID方法代码
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uMl627B6-1681785382189)(img/clip_image261.png)]
图 24 mapper的findByID方法代码
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gG0rFcnO-1681785382189)(img/clip_image263.png)]
图 25 jsp页面传递参数代码
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iiMpFVjx-1681785382190)(img/clip_image265.png)]
图 26 servlet的update方法代码
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9Dsb1liQ-1681785382192)(img/clip_image267.png)]
图 27 service的update方法代码
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-peZRJQzx-1681785382193)(img/clip_image269.png)]
图 28 mapper的update方法代码
4.4.4 遇到的问题及解决措施
①中文乱码问题
在页面表单中添加中文数据后，在数据库和主页面的表格中汉字会显示成乱码。在网络上查找原因后发现，是字符编码设置错误，原先的编码不支持中文。在获取数据时使用new String(request.getParameter(“name”). getBytes(“ISO-8859-1”),”utf-8”)后，成功解决了中文乱码问题。
②路径错误问题
在系统运行的时候经常会出现404的报错，这类情况大多是路径问题。报错之后，Tomcat localhost Log通常会显示错误信息，根据其中给出的错误信息对出现错误的地方进行修改，通常路径错误有两种：一是路径名称错误，路径名称的大小写错误就会导致路径错误；二是相对路径错误，Tomcat在运行时会产生项目目录，在写相对路径时就很容易出现文件路径不对的问题。
4.5出行管理
4.5.1模块功能
该模块实现系统中出行管理相关信息的基本功能，包括显示所有未归人员信息、对居民外出信息、违规外出人员、未归人员的信息进行添加、修改、删除，按属性进行多条件查询等信息管理操作，对外出请假和未归人数进行可视化处理。
4.5.2代码逻辑
前端页面->后台数据库的数据获取流程
查询数据：浏览器提交submit请求，post/get 传输key-value，利用Tomcat来对request进行解析。当接收端未收到请求中的method时，servlet调用service进行查询，在service层中用public List selectAll()方法来调用Mapper，在mapper层使用selectALL来使用SQL语句，随后通过navicat向MySQL数据库进行数据查询，获得数据后再返回到mapper层，service层获取Mapper对象返回到servlet层，将数据存到request中，转发到对应的jsp展示。Jsp页面通过<c:foreach>将值从servlet层调用到页面。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-et3IEROJ-1681785382194)(img/clip_image271.jpg)]
增加：在增加页面填入信息后，跳转到AddServlet，接受表单提交的数据，封装Access对象，调用service 完成添加，调用mapper层的add方法。在mapper层使用ADD方法来使用SQL语句，随后通过navicat向MySQL数据库进行数据添加，获得数据后再返回到mapper层，service层获取Mapper对象返回到servlet层，完成添加。在添加后页面未识别到任何请求，重新调用查询功能。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tGry0GTj-1681785382196)(img/clip_image273.jpg)]
修改和删除的过程与添加类似，修改需要先接收id调用service进行查询实现数据回显，过程如下图所示。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UhwnBPCi-1681785382198)(img/clip_image275.jpg)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yYlyXtKG-1681785382200)(img/clip_image277.jpg)]
4.5.3遇到的问题及解决措施
（1）Servlet传id跳转问题
最初设定传递的参数为name=xxx，但由于name是汉字，servlet无法识别不能跳转。于是使用int型的id来进行传参。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wniL62Mx-1681785382204)(img/clip_image279.jpg)]
（2）页面重定向问题
预期实现执行完页面的所有代码，再跳转到目标页面。跳转到目标页面后，浏览器地址栏中的URL会改变。在浏览器端重定向可以跳转到指定的页面。但出现问题，当增加和修改完成后，无法跳回到数据展示页面，调用重定向到对应的servlet解决：response.sendRedirect(“/coursedemo2/accessInfoServlet”)解决
4.6请假管理
4.6.1模块功能
表格 2
| 模块分类 | 功能介绍 |
|---|---|
| 请假人员 | 该模块以表格形式呈现所有请假人员的基本信息，并且可以实现增删查改四个功能。包括：姓名、电话、请假原因、创建者、计划外出地（省市区）、详细地址（具体街道）、计划离开时间和计划返回时间。方便管理员查看并管理所有的请假人员。 |
| 未返人员 | 该模块以表格形式呈现所有的已经请假但是还没有返回人员的基本信息。包括：姓名、电话、请假原因、创建者、计划外出地（省市区）、详细地址（具体街道）、计划离开时间和计划返回时间。方便管理员清楚得知未返回人员的基本信息，使得能够重点关注。 |
| 请假具体信息 | 该模块以表格形式呈现所有请假人员的具体信息，并且可以实现增删查改四个功能。包括：姓名、电话、请假原因、创建者、详细地址（具体街道）、实际离开时间、审批人员、居住地址、备注。方便管理员查看特定的某位请假人员的具体信息。 |
| 违规请假 | 该模块以表格形式呈现所有违规请假人员的基本信息，并且可以实现增删查改四个功能。包括：姓名、电话、创建者、能否联系、计划返回时间、备注。方便管理员对这类人群特殊管理和联系。 |
4.6.2数据库设计
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Blj4qtFm-1681785382206)(img/clip_image281.jpg)]
图表1 leave_info
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jQEAl3wd-1681785382208)(img/clip_image283.jpg)]
图表2 leave_exception
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qmNV91d9-1681785382209)(img/clip_image285.jpg)]
图表3 leave_wrong
4.6.3代码逻辑
前端页面到后台数据库的数据获取流程
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KdgNbgLr-1681785382211)(img/clip_image287.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-W9U7SBfO-1681785382212)(img/clip_image289.jpg)]
图表4 pojo部分代码
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rYGq11ww-1681785382214)(img/clip_image291.jpg)]
图表5 mapper部分代码
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6y4EicA3-1681785382215)(img/clip_image293.jpg)]
图表6 service部分代码
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9TQqzXpW-1681785382216)(img/clip_image295.jpg)]
图表7 utils部分代码
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tE6GBHQZ-1681785382217)(img/clip_image297.jpg)]
图表8 web部分代码
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kMyBnR5k-1681785382219)(img/clip_image299.jpg)]
图表9 jsp部分代码
4.6.4遇到的问题及解决措施
（1）数据库字段设置
问题描述：数据库设置中，有的数据类型为数字，有的数据类型为字符串，有的数据类型为时间，一开始的时候不知道数据库为时间的字段如何设置，只能采用手写的方式，后来经过查询MYSQL不同的数据类型，得到解决方式。
解决依据：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Fe8oxL0X-1681785382220)(img/clip_image301.jpg)]
结果：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MdFBKN3Y-1681785382221)(img/clip_image303.png)]
（2）网页输入中文字段乱码
问题描述：在网页中的add页面中增加数据，输入的数据为中文时，不仅网页上会出现乱码问题，在sql文件中也是以乱码的形式存储，但是sql中的数据在页面上显示则不会出现乱码现象。
解决方式：通过询问同组的同学，最后得知，需要在servlet 中每个要添加中文的字段增加后缀，如图。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UB0q8pqz-1681785382223)(img/clip_image305.png)]
结果：网页中输入的字段无中文乱码现象。
4.6.5页面展示
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-n2z6IiAc-1681785382225)(img/clip_image307.jpg)]
图表10 请假人员页面
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qacp5ryT-1681785382226)(img/clip_image309.jpg)]
图表11 未返人员页面
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KNGnT1kT-1681785382228)(img/clip_image311.jpg)]
图表12 请假具体信息
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kCPSotXg-1681785382231)(img/clip_image313.jpg)]
图表13 违规请假
5.技术难点
5.1分页查询
5.1.1前后端数据交互
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ClNV7kZ9-1681785382235)(img/clip_image315.jpg)]
5.2.2实现步骤
（1）封装PageBean对象
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-w115A8wW-1681785382237)(img/clip_image317.jpg)]
（2）后台代码实现-改造查询方法（以【系统用户】模块为例）
①改造servlet层（SysUserServlet.java）
从前端页面获取获取参数，当前页currentPage、每页显示行数rows(如果首次访问没有这两个参数，为其设置默认值)
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wau3ujIL-1681785382238)(img/clip_image319.jpg)]
②改造service(SysUserService.java)
计算并设置PageBean对象的其他属性，包括当前页currentPage，每页显示行数rows，总记录数totalCount，总页码totalPage
将数据库的查询结果封装到PageBean对象的属性List中；
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jwo4OSea-1681785382240)(img/clip_image321.jpg)]
③改造mapper层（SysUserMapper.java）
增加分页查询参数，开始查询的索引start、每页显示条数rows
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YNijTfre-1681785382241)(img/clip_image323.jpg)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EEyP6e7a-1681785382242)(img/clip_image325.jpg)]
（3）前台代码实现
动态获取后端传回来的PageBean对象的属性并显示
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YmLxHp7f-1681785382244)(img/clip_image327.jpg)]
5.2登录过滤
5.2.1实现效果
未登录用户不能直接访问项目的主页面，如果访问，会直接跳转登录页面；登录用户会记录cookie，下次访问不用重新登录。
5.2.2实现步骤
1.修改原有登录逻辑-增加用户数据保存cookie步骤
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tSfXbhD5-1681785382247)(img/clip_image329.jpg)]
2.增加登录过滤器LoginFilter.java
(1)重写doFilter()方法，理清放行和拦截的逻辑
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PPqBLKHS-1681785382249)(img/clip_image331.jpg)]
其中，判断用户是否登录的逻辑为：当用户试图访问项目的主页面时，先查看cookie中是否保存了用户名和密码，如果没有，则说明用户未登录，跳转登录页面；如果有，则对比cookie中所存的用户名和密码与数据库中的是否一致，若一致，则说明用户已登录，可以直接访问项目的主页面。具体代码参考下图的isLogin()方法。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tyaTYaQ5-1681785382250)(img/clip_image333.jpg)]
(2)在web.xml中对该过滤器进行注册，规定其过滤对象为所有的jsp页面。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nHfJLt92-1681785382252)(img/clip_image335.jpg)]
5.3疫情实时地图
5.3.1实现效果
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6bVzxCeT-1681785382253)(img/clip_image336.jpg)]
5.3.2实现步骤
这里主要是使用了echarts框架，创新点是数据调用了腾讯的实时疫情接口获取，没有从数据库获取数据。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eggQDaMf-1681785382254)(img/clip_image338.jpg)]
\1. 用cdn方式引入jquery.min.js，echarts.min.js，china.js三个js文件
\2. 基于准备好的dom初始化echarts实例
\3. 指定图表的配置项和数据
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uEjTpmsE-1681785382255)(img/clip_image340.jpg)]
\4. 调用腾讯疫情实时接口数据，对数据进行处理，并给option中的data赋值
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-K51hF6Ws-1681785382256)(img/clip_image342.jpg)]
5.4 图片上传
5.4.1 代码实现过程
①要想能通过表单上传图片，需要将表单的enctype属性设置为multipart/form-data，并且表单的method属性必须为post，才能将传递的数据转换成二进制流方式传递到servlet中。在表单中需要上传图片的一栏的input标签type属性设置成file，这样在页面中的这一栏就会出现一个“上传文件”的按钮，就可以选择图片上传了。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-U4Jqt80C-1681785382257)(img/clip_image344.png)]
图 29 图片上传页面代码1
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-82JfJdFy-1681785382259)(img/clip_image346.png)]
图 30 图片上传页面代码2
②创建一个用于上传照片的servlet，取名为UploadImgServlet。第一步，新建一个对象factory用于获得文件上传工厂对象。第二步，新建一个对象upload用于获得文件上传组件对象。第三步，新建一个集合list用于获取并存储前台表单的数据。第四步，用for语句遍历集合中的每一个表单项。如果item是文件表单项，获取服务器的目录，将图片文件上传到服务器对应目录中，并且限制文件类型和大小，通过UUID随机生成文件名的方式来解决文件重名问题。如果item是普通表单项，以utf-8的编码格式获取表单数据。然后执行添加操作，调用service的addPatient方法。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cFvKoyoV-1681785382260)(img/clip_image348.png)]
图 31 图片上传servlet代码1
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8k5XIUnk-1681785382262)(img/clip_image350.png)]
图 32 图片上传servlet代码2
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0bPwuq9J-1681785382263)(img/clip_image352.png)]
图 33 图片上传servlet代码3
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BfyJgXOA-1681785382265)(img/clip_image354.png)]
图 34 图片上传servlet代码4
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uFjLfGcD-1681785382267)(img/clip_image356.png)]
图 35 图片上传servlet代码5
③在service中自动生成创建时间，并调用mapper的addPatient方法。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-g8kUHoAE-1681785382268)(img/clip_image358.png)]
图 36 图片上传service代码
④在原有的数据库中增加filename和filetype两个字段，将文件存入数据库时，是将文件名存入数据库。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Lcl5Ag7j-1681785382269)(img/clip_image359.png)]
图 37 图片上传pojo代码
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-glQlrfs3-1681785382270)(img/clip_image361.png)]
图 38 图片上传mapper代码
⑤在页面调用图片文件时，是根据数据库中的文件名在服务器的对应文件夹中找到图片并显示
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-M4T05O4s-1681785382271)(img/clip_image363.png)]
图 39 图片显示页面代码1
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ioRbXmdg-1681785382274)(img/clip_image365.png)]
图 40 图片显示页面代码2
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dEvJPiYR-1681785382275)(img/clip_image367.png)]
图 41 图片显示页面代码3
5.4.2 页面实现过程
打开“健康管理”模块的病患信息页面，目前页面中只有一条名为admin的记录（如图），点击右上角的病患上报，进入病患上报页面，填写相关信息，并在“健康码图片上传”一栏选择名为“huang.jpg”的黄码图片上传。填写完成后，点击“提交”按钮，系统会自动跳转回病患信息页面，可以看到此时已经新添加了一条带有黄码图片的王五的信息。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HUrONBsn-1681785382278)(img/clip_image369.png)]
图 42 主页面
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ts3vptUW-1681785382280)(img/clip_image371.png)]
图 43 图片上传页面
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uu1r8NL3-1681785382282)(img/clip_image373.png)]
图 44 病患上报页面
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-h7QIqyuo-1681785382287)(img/clip_image375.png)]
图 45 图片添加成功
5.5 Echarts图表引入
引入Echarts图表后，通过请求接口连接数据库，接口中查询数据库并把数据库中的数据返回给浏览器，然后再echarts中设置图表配置的series传入data数据。最开始由于相关代码都是不同框架，无法直接复制，后来通过观察这些代码的原理摸索出可以实现的代码。在数据库创建表后，利用Mapper-Service-Servlet三层框架将数据库中的对象通过select查询后封装成List,在servlet将List转化为json格式，然后在jsp页面调用axis请求获得该数组作为Echarts的数据源。Servlet中接收List并进行json转换如下图所示。其中一个困扰许久的点是json包的选择，最开始选择jsonlib等包会存在包不存在，版本无法导入的问题，后来使用gson直接在pom.Xml中导入依赖，方便快捷。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QjYXLjIq-1681785382288)(img/clip_image377.jpg)]
Echarts表格的数据一般都需要动态获取，所以在JSP页面通过ajax动态获取数据。数据的插入主要由xAxis，series中的data[]内插入，动态获取的时候为空，写法即为：data[],然后，写入$.ajax请求方式，然后获取数据，保证数据已获取出来；for循环遍历所有数据并插入到新建的空数组中；（如果获取的数据即为数组这步应该可以省略，直接插入到data中；我们需要的是数据的一部分需要执行此操作）最后，将空数组引入到所要插入数据的图表option的data[]中，完成。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OernUoAN-1681785382290)(img/clip_image379.jpg)]
5.6登录验证码
5.6.1 展示验证码
5.6.1.1需求分析
主要功能为展示验证码图片，并且在点击看不清之后可以自动切换。
验证码的生成是通过工具类来实现的，参考代码中的CheckCodeUtil.java文件，具体的生成验证码工具类代码和在该工具类中编写main方法进行测试的代码如下图所示：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NmAmFDON-1681785382291)(img/clip_image381.jpg)]
在测试生成完验证码之后，我们就可以知晓，验证码就是使用java代码生成的一张图片。
5.6.1.2实现流程分析
(1)前端发送请求给CheckCodeServlet
(2)CheckCodeServlet接收到请求后，生成验证码图片，将图片用Reponse对象的输出流写回到前端
如何将图片写回到前端浏览器呢?
(1)Java中已经有工具类生成验证码图片，测试类中只是把图片生成到磁盘上
(2)生成磁盘的过程中使用的是OutputStream流，如何把这个图片生成在页面呢?
(3)前面在将Reponse对象的时候，它有一个方法可以获取其字节输出流，getOutputStream()
(4)综上所述，我们可以把写往磁盘的流对象更好成Response的字节流，即可完成图片响应给前端
5.6.1.3具体实现
(1)修改login.jsp页面，将验证码的图片从后台获取
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zyVYrPEb-1681785382293)(img/clip_image383.jpg)]
路径后面添加时间戳的目的是避免浏览器进行缓存静态资源，如果浏览器缓存静态资源的话，就无法通过刷新或点击换一张来更换验证码图片。
（2）编写CheckCodeServlet类，用来接收请求生成验证码
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ooMLQNiH-1681785382296)(img/clip_image385.jpg)]
5.6.2校验验证码
5.6.2.1需求分析
当验证码填写正确时，可以成功登录；当验证码填写不正确，则阻止登录。
验证码图片访问和提交注册表单是两次请求，所以要将程序生成的验证码存入Session中，因为生成验证码和校验验证码是两次请求，此处就需要在一个会话的两次请求之间共享数据，并且验证码属于安全数据类的，所以我们选中Session来存储验证码数据。
5.6.2.2实现流程分析
(1)在CheckCodeServlet中生成验证码的时候，将验证码数据存入Session对象
(2)前端将验证码和注册数据提交到后台，交给LoginServlet类
(3)LoginServlet类接收到请求和数据后，其中就有验证码，和Session中的验证码进行对比
(4)如果一致，则完成注册，如果不一致，则提示错误信息
5.6.2.3具体实现
(1)修改CheckCodeServlet类，将验证码存入Session对象
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gQx8yBf0-1681785382297)(img/clip_image387.jpg)]
(2)在LoginServlet中，获取页面的和session对象中的验证码，进行对比
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RyPfxj0y-1681785382298)(img/clip_image389.jpg)][外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cLhFlaUg-1681785382300)(img/clip_image391.jpg)]
这样，在判断验证码错误后，直接return，就不会执行接下来的代码了，用户就会登录失败，至此，用户登录时的验证码功能就完成了。
5.7正则校验
5.7.1结果演示
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9OJhBTai-1681785382301)(img/clip_image393.jpg)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WbvCx06w-1681785382302)(img/clip_image395.jpg)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XcIRmy8x-1681785382304)(img/clip_image397.jpg)]
5.7.2代码逻辑
第一步：在add页面中加入，并设置class为yc，没有用到的时候为隐藏属性。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WjC49ERY-1681785382305)(img/clip_image399.jpg)]
第二步：在add页面中加入一个，首先定义两个标签’input’和’span’。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bNhSbyEO-1681785382306)(img/clip_image401.jpg)]
第三步：紧接着定义一个函数change_color，设置三个变量：id、color、text。用于简化后续循环。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jPGsLs71-1681785382308)(img/clip_image403.jpg)]
第四步：插入一个for循环，调用刚刚定义的函数change_color，实现功能：姓名栏如果中没有填入任何信息，则显示：“姓名不能为空”，并且字体为红色；如果填入的字符小于2，则显示：“姓名长度太短”，并且字体为红色；如果填入字符大于2，则显示：“正确”，并且字体为绿色。同理，手机号也如此。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9W1rfhCP-1681785382310)(img/clip_image405.jpg)]
5.7.3补充内容：正则表达式
本系统中使用的手机号正则表达式：let reg = /1([3-9])[0-9]{9}$/
| 符号 | 描述 |
|---|---|
| ^ | 匹配输入字符串的开始位置。 |
| [xyz] | 字符集合。匹配所包含的任意一个字符。 |
| (pattern) | 匹配pattern并获取这一匹配。 |
| {n} | n是一个非负整数，匹配确定的n次。 |
| $ | 匹配输入字符串的结束位置。 |
其他手机号正则表达式：
/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
其他姓名正则表达式：
/2{2,4}$/
7.项目总结
7.1典型问题
7.1.1中文乱码问题
（1）IDEA控制台信息显示乱码
解决过程可参考https://segmentfault.com/a/1190000039230781
（2）前端输入中文，在后端存储时乱码(字符串乱码+jdbc连接指定编码+数据库表设置编码)
字符串乱码
String oldStr = “张三”;
String newStr = new String(oldStr.getBytes(), “UTF-8”);
jdbc连接指定编码
url=jdbc:mysql:///db1?characterEncoding=UTF-8
数据库表设置编码
创建表的时候、指定编码：DEFAULT CHARSET=UTF8;
CREATE TABLE sys_user (
id int(10) unsigned NOT NULL auto_increment,
username varchar(50) character set utf8 NOT NULL default ‘’,
PRIMARY KEY (id)
) DEFAULT CHARSET=UTF8;
（3）请求响应乱码
//设置获取请求的编码
request.setCharacterEncoding(“utf-8”)
//设置服务器端的编码
response.setCharacterEncoding(“utf-8”);
//通知浏览器服务器发送的数据格式
response.setContentType(“text/html;charset=utf-8”);
7.2.2通信问题/链接跳转问题
这类问题产生的原因主要在于对数据传递的流程不够清晰。解决方法是清楚地掌握数据传递的流程，通过一系列的自我发问理解逻辑链：前端通过什么方式（get还是post）？传递了什么参数？传递向哪个servlet？这个servlet接收到这个请求之后，对参数进行了什么处理？如何调用的下一层方法？返回了什么类型的结果给前端页面？是通过存放在request域还是session域？返回结果的参数名是什么？问完这些问题之后，通信问题就基本能够解决。
此外涉及一些静态资源路径等的相关问题，可以考虑以下问题：项目路径要不要加？静态资源的类路径在哪里？需不需要加某个文件夹的名称？文件后缀有没有写对……或者直接采用cdn引入的方式，联网加载相关静态资源。
7.2.3改造日期格式
SimpleDateFormat sdf = new SimpleDateFormat(“yyyy-MM-dd HH:mm:ss”);
user.setCreate_time(sdf.format(new Date()));
8.开发感悟
我们的项目前端在jsp（html、css、javascript）的基础上采取了bootstrap框架修改样式、layui框架调整布局、echarts图表实现可视化，后端在java语言的基础上，采用了servlet-service-mapper的三层架构编写代码，使得代码运行逻辑更清晰，运用MyBatis的框架简化和数据库的连接。整体项目实现的功能是疫情相关数据的增删改查、可视化信息展示等。
在这个过程中，我进一步巩固了之前学习Java语言的成果。从0到1搭建项目，让我从通信开始出发，边学边做，直到实现基本的增删改查，再改进到分页和多条件查询，再后来引入bootstrap、layui、echarts的框架都是我的首次尝试，乱打乱撞和不断的试错都让我获得了巨大的收获，提高了自己开发的能力。
其中，我觉得在完成项目的过程中遇到的最大问题是，前期没有对系统将要实现的功能、各功能之间的联系（包括因为功能联系在数据库设计上的联系等）有一个详细完整的规划，整个团队采取了边做边改、想到新内容临时添加的方式来完成，给后期的调整和新规划造成了一定的困扰。
id int(10) unsigned NOT NULL auto_increment,
username varchar(50) character set utf8 NOT NULL default ‘’,
PRIMARY KEY (id)
) DEFAULT CHARSET=UTF8;
（3）请求响应乱码
//设置获取请求的编码
request.setCharacterEncoding(“utf-8”)
//设置服务器端的编码
response.setCharacterEncoding(“utf-8”);
//通知浏览器服务器发送的数据格式
response.setContentType(“text/html;charset=utf-8”);
7.2.2通信问题/链接跳转问题
这类问题产生的原因主要在于对数据传递的流程不够清晰。解决方法是清楚地掌握数据传递的流程，通过一系列的自我发问理解逻辑链：前端通过什么方式（get还是post）？传递了什么参数？传递向哪个servlet？这个servlet接收到这个请求之后，对参数进行了什么处理？如何调用的下一层方法？返回了什么类型的结果给前端页面？是通过存放在request域还是session域？返回结果的参数名是什么？问完这些问题之后，通信问题就基本能够解决。
此外涉及一些静态资源路径等的相关问题，可以考虑以下问题：项目路径要不要加？静态资源的类路径在哪里？需不需要加某个文件夹的名称？文件后缀有没有写对……或者直接采用cdn引入的方式，联网加载相关静态资源。
7.2.3改造日期格式
SimpleDateFormat sdf = new SimpleDateFormat(“yyyy-MM-dd HH:mm:ss”);
user.setCreate_time(sdf.format(new Date()));
8.开发感悟
我们的项目前端在jsp（html、css、javascript）的基础上采取了bootstrap框架修改样式、layui框架调整布局、echarts图表实现可视化，后端在java语言的基础上，采用了servlet-service-mapper的三层架构编写代码，使得代码运行逻辑更清晰，运用MyBatis的框架简化和数据库的连接。整体项目实现的功能是疫情相关数据的增删改查、可视化信息展示等。
在这个过程中，我进一步巩固了之前学习Java语言的成果。从0到1搭建项目，让我从通信开始出发，边学边做，直到实现基本的增删改查，再改进到分页和多条件查询，再后来引入bootstrap、layui、echarts的框架都是我的首次尝试，乱打乱撞和不断的试错都让我获得了巨大的收获，提高了自己开发的能力。
其中，我觉得在完成项目的过程中遇到的最大问题是，前期没有对系统将要实现的功能、各功能之间的联系（包括因为功能联系在数据库设计上的联系等）有一个详细完整的规划，整个团队采取了边做边改、想到新内容临时添加的方式来完成，给后期的调整和新规划造成了一定的困扰。
这给未来做项目的启示是：项目在最初的设计阶段应该有更详细完整的规划，对每个模块需要实现什么功能，模块与模块之间的联系（包括数据表之间的关联关系，一对一、一对多的关系，主外键的设计等），不同模块之间的数据传递等都应该在项目初始阶段有整体上的规划和设计，而不是在项目实现过程中临时“拍脑袋”去增删相关内容。
扫一扫
1235
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
