【JavaWeb】基于前后端分离的JavaWeb小项目---新生报道案例的详细实现过程（上）
前言
致想要与本文一起实现案例的小伙伴：
本文包含实现的全部过程，有想要一起实现案例的小伙伴可以跟着一步一步实现。
由于本案例的重点是JavaWeb，且实现了前后端分离，所以在文章中不会有前端代码的实现过程。
不过前端的部分我已经写好啦，并且已经打包编译了，所以小伙伴们可以直接下载打包好的前端文件到自己的电脑上去（大概2M左右），然后用浏览器打开就可以直接运行啦~~~~
前端文件下载地址：https://github.com/BEIJIU601/NewStuReport
前端文件详细说明和使用：https://blog.csdn.net/weixin_43760020/article/details/105281230
博客的下篇在这里：https://blog.csdn.net/weixin_43760020/article/details/105292962
注意：假设我们在做一个前后端分离、需要通过接口文档对接的项目。要仔细查看前端所需的api接口和参数字段，不然与后端的交互有可能会失败！
一、案例分析和设计
上篇主要有案例分析和案例设计。
1、案例介绍
这是一个前后端分离的小项目，主要用来检验自己这段时间学习JavaWeb的成果。
该案例包含的JavaWeb知识点如下：
| 基于MVC的三层架构的实现（项目搭建） |
| 数据库连接（通过JDBC） |
| JavaWeb程序通过AJAX与前端交互的过程（Servlet+AJAX+JSON） |
| 模拟前后端通过接口文档对接（简化版） |
| 跨域问题的解决（Filter） |
（1）、案例背景
在平时，新生来校报道前，一般都需要告知学校自己的行程信息和基本信息，同时学校也会为每位新生分配一名负责接待的学长或学姐，因此，我们编写出一个迎新小系统，用于向新生收集行程信息和告知新生自己的接待人。
（2）、实现功能
该迎新案例共有两个页面，使用流程如下：
实现的功能如下：
- 验证新生的学号和姓名是否正确
- 查看自己的基本信息和接待人的信息
- 将新生填写的个人信息存入数据库
效果图展示如下：：
MySQL数据如下：
2、案例设计
（1）、数据库的设计
由于本次项目的重点是JavaWeb，故数据库的设计比较随意。主要涉及两个表:
新生登录表和新生报道表
两张表所含字段如下：
| 新生登录表 | 新生报道表 |
|---|---|
| 姓名 | 姓名 |
| 学号 | 学号 |
| 性别 | |
| 专业 | |
| 班级 | |
| 省份 | |
| 电话 | |
| 到校日期 | |
| 到校时间 | |
| 交通方式 | |
| 车次/航班 | |
| 行程备注 | |
| 是否贷款 | |
| 贷款金额 | |
| 贷款缴纳 | |
| 缴纳方式 | |
| 贷款备注 | |
| 是否有贷款回执照片 | |
| 接待人 | |
| 接待人电话 |
其中，新生登录表的数据是在创建表的时候即插入的，作用就是在登录页面输入姓名和学号时，会去此表中验证是否一致，一致即视为登录成功。
而新生报道表的所有字段又分为四个部分：
- 基本信息：姓名、学号、性别、专业、班级、省份 （该部分字段数据在建表时即插入）
- 行程信息：到校日期、到校时间、交通方式、车次/航班、备注
- 学费信息：是否贷款、贷款金额、贷款缴纳、缴纳方式、贷款备注、是否有贷款回执照片
- 接待信息：接待人、接待人电话 （该部分字段数据在建表时即插入）
建表SQL语句如下：
新生登录表
#创建新生登录表
CREATE TABLE stunew (
newstuid BIGINT(20) UNSIGNED NOT NULL, #新生学号
newstuname VARCHAR(20) NOT NULL, #新生姓名
PRIMARY KEY (newstuid), #学号为主键
UNIQUE KEY newstuname (newstuname) #姓名唯一
)
#插入新生的学号和姓名
INSERT INTO stunew
VALUES(201909601260,'张伟'),(202009601260,'李市'),
(202109601260,'博格巴'),(202209601260,'林加德');
新生报道表
#创建新生报道表
CREATE TABLE stureport(
#基本信息
r_id BIGINT UNIQUE, #学号
newstuname VARCHAR(20) NOT NULL, #姓名
sex CHAR(2) NOT NULL, #性别，男/女
major VARCHAR(200) NOT NULL, #专业
classes VARCHAR(200) NOT NULL, #班级
province VARCHAR(200) NOT NULL, #省份
telephone VARCHAR(11), #电话
#行程信息
to_date DATE DEFAULT NULL, #到校日期
to_time TIME DEFAULT NULL, #到校时间
transport VARCHAR(200) DEFAULT NULL, #交通方式
transport_num VARCHAR(200) DEFAULT NULL, #车次/航班
trsp_remark VARCHAR(200) DEFAULT NULL, #行程备注
#学费信息
is_loan TINYINT(1), #是否贷款
loan_amount DECIMAL(9,2)DEFAULT NULL, #贷款金额
loan_pay DECIMAL(9,2)DEFAULT NULL, #贷款缴纳
pay_way VARCHAR(200) DEFAULT NULL, #缴费方式
pay_remark VARCHAR(200) DEFAULT NULL, #贷款备注
is_photo TINYINT(1), #是否有贷款回执照片
#接待信息
rec_people VARCHAR(200), #接待人
rec_phone VARCHAR(11) NOT NULL, #接待人电话
CHECK (sex = '男' OR sex = '女' ), #性别的约束条件
PRIMARY KEY(r_id) #主键
)
#插入基本信息和接待信息的新生数据
INSERT INTO stureport(r_id,newstuname,sex,major,classes,province,rec_people,rec_phone)
VALUES(201909601260,'张伟','男','智能科学与技术','智科Q182班','北京','坤坤','18978145893')
,(202009601260,'李市','女','数据与大数据','数据Q181班','上海','林加德','13778145093')
,(202109601260,'博格巴','男','人工智能','智能Q181','曼彻斯特','索尔斯克亚','15278145893')
,(202209601260,'林加德','男','软件工程','软件Q188班','柴郡沃灵顿','林皇','18278145094');
（2）、后端设计—基于MVC的软件三层架构的实现
MVC:
MVC就是Model(模型)、View(视图)、Controller(控制器)的缩写，它将软件系统分为三个部分。
- Model（模型）：用于实现业务逻辑，主要接受视图层传递的数据,进行数据处理，并访问数据库。其实，通俗来讲就是连接数据库和实现功能的一个模块。比如，在本案例中，验证新生登录和收集新生报道数据的功能就是由Model来实现。Model主要由JavaBean来实现。
JavaBean即一个Java类，有以下特点的即可称为JavaBean： ①public修饰的类，提供public 无参构造方法② 所有属性都是private③ 提供getter和setter方法。JavaBean往往对应于数据库中的一张表，如本案例中数据库中有两个表，stunew表 和 stureport表，则项目中就有会stunew类和stureport类，这两个类中的属性即为数据库表中的字段，我们可将这两个类称为实体类。 - View（视图）：主要负责的就是，①显示页面（将数据等展示给用户），②与用户进行交互（用户点击按钮、填写各种数据等） ③收集数据，向Model层传递用户填写的数据。在本案例中，实现了前后端分离，故视图层均由前端文件实现，后端只负责接收前端传递的数据，以及向前端发送数据而已。
- Controller（控制器）：负责将View与Model一一对应起来，即View（前端）发送了一个请求时，这个请求会被Controller接收，然后Controller会将接收到的数据转到Model中对应的部分，Model处理完毕后，会将结果返回到Controller，之后再由Controller返回给View。这也意味着，View和Model的交互，都需要经过Controller。在JavaWeb中，Controller一般由servlet实现。
MVC示意图如下：
软件的三层架构
通常意义上的三层架构就是将整个业务应用划分为：表现层（UI）、业务逻辑层（BLL）、数据访问层（DAL）再加上一个用于封装数据的实体类库（JavaBean）。该实体类库不属于以上三层的任何一层，它是用于三层之间的通信的，是用来更好的服务于这三层的。
三层架构是一种自上而下的依赖方式，上层与下层无关，上层不需要考虑下层的操作，对下层的改变也不会影响上层。
- UI（表现层）
通俗来讲就是展现给用户使用的界面，用于显示数据和接收用户输入的数据。
一般来说，前端页面，以及后端的Servlet就属于表现层，因为两者的功能符合表现层的定义。 - BLL（业务逻辑层）
主要负责的就是处理涉及业务逻辑相关的问题，比如在调用访问数据库之前，先处理数据、判断数据。 - DAL（数据访问层）
该层主要负责就是直接访问数据库，并对数据库进行一系列操作，比如增删改查等。
三层结构示意图如下：
MVC和软件三层架构的关系
首先明确的一点是：MVC和软件三层架构毫无关系。
我们可以自由灵活的选择项目的搭建方式，即可以选择只用MVC模式来构建项目，也可以选择只用软件三层架构来搭建项目。当然还可以选择两者一起来搭建，比如本案例就选择了基于MVC的软件三层架构的搭建方式。
MVC和软件三层的对应
虽然MVC和软件三层架构毫无关系，但是其实还是可以看出，这两者有些共同点的。毕竟两者都是为了：分层，解耦，这一个目的。
简单的对应关系如下：
（3）基于MVC和三层架构项目搭建
既然是基于MVC和三层架构的，那么本案例既要符合MVC的规范，又要分为典型的三层架构。
首先，我们要设计出五个java包，如下：
每个包的作用如下：
- beans：存放的是JavaBean。即实体类包，负责封装数据。
- controller：存放的是servlet，即负责控制器的内容。
- service：存放的是与业务逻辑相关的类，负责业务处理，实现核心需求
- dao：存放与数据库连接相关的类，负责连接数据库
- utils：存放的是连接数据库的工具类，是用来连接数据库的工具
还有的部分：
在这里并没有前端的部分，前端部分已经打包好了，只负责通过AJAX与后端进行JSON数据的交互。以下称该部分为前端。
由上面的几个包，我们可以得到以下的层次关系：
①前端通过AJAX发送请求
②controller包（以下称为控制器）负责接收请求，然后调用service包（以下称为service层）
③service层进行处理后，调用dao包（以下称为dao层）
④dao层使用工具类utils进行数据库的访问
⑤调用数据库完成后，dao层不做任何处理，直接返回数据给service层，service层进行业务处理后，返回给controller控制器，最后由控制器返回结果给前端。
⑥在这一个过程中，beans里的JavaBean就承担着封装数据，以使各层能够正常使用的角色。
基本的调用关系如下：
前段 ------->controller------>service------>dao----->数据库
每一层访问下一层都是通过接口来进行的，上一层与下一层无关，而下层的改变也不影响上层的使用。同时，不允许跨层调用。
示意图如下：
从MVC模式的角度看：
本案例中的前端部分即属于View（视图部分），controller则属于Controller（控制器部分），而service层和dao层以及JavaBean则属于Model（模型部分）。
在一般的MVC模式下，Model层也会分为业务层（service）和数据访问层（dao），而不是直接把业务和数据访问写在同一个包或者同一个类下。
从软件三层架构的角度看：
本案例的前端部分和controller即为UI（表现层），而service层则为BLL（业务逻辑层），dao层则为DAL（数据访问层）。beans和utils虽然不属于三层，但是其是为了更好的实现三层而存在的，故是符合三层规范的。
以上可以得到其实MVC设计模式和三层架构是可以一起使用的。
3、案例上篇结束。
下篇主要是后端JAVA的详细实现。
博客的下篇点这里
前端文件的下载地址如下： https://github.com/BEIJIU601/NewStuReport
前端文件使用说明如下：https://blog.csdn.net/weixin_43760020/article/details/105281230
