前言

致想要与本文一起实现案例的小伙伴:
本文包含实现的全部过程,有想要一起实现案例的小伙伴可以跟着一步一步实现。
由于本案例的重点是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)、实现功能
该迎新案例共有两个页面,使用流程如下:

实现的功能如下:

  1. 验证新生的学号和姓名是否正确
  2. 查看自己的基本信息和接待人的信息
  3. 将新生填写的个人信息存入数据库

效果图展示如下:
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