前面写了一篇文章《使用Thymeleaf进行前后端开发》，这是本头条号写的第一篇真正前后端分离的文章。这篇文章给出的源代码实现，前端只有被动显示功能，没有为后端提供参数，因此前端也没有与后端的交互功能。

1、需求定义1.1 提供HTML页面，供使用者输入要添加的用户名、密码、年龄、性别，并提供添加按钮；1.2 当使用者点击添加按钮后，HTML页面将使用者填入的信息发送给Web服务器；1.3 Web服务器将将收到的信息存入数据库。

下面详细描述这些功能的前后端代码实现。

2、我们在MySQL数据库中执行下面的SQL语句，建立db_user数据库，然后在db_user数据库中建立t_user表：

create database db_user default character set utf8;use db_user;create table t_user(user_id int primary key auto_increment,user_name varchar(64) not null,password varchar(64) not null,is_male int not null,age int not null)engine=InnoDB default charset=utf8;

这是在Linux命令行下执行的情况：

3、使用IDEA建立空的工程prj_user，然后在prj_user中建立SpringBoot模块user，建立模块的过程中，添加Lombok、SpringWeb、Spring Data JPA、MySQL Driver这四个依赖。操作完成后的界面如下图所示：4、新建entity包，然后在entity包中增加UserEntity类，代码如下：

package com.flying.user.entity;import lombok.Data;import javax.persistence.*;@Data@Table(name="t_user")@Entitypublic class UserEntity {@GeneratedValue(strategy= GenerationType.IDENTITY)@Id@Column(name="user_id")private Integer userId;@Column(name="user_name")private String userName;private String password;@Column(name="is_male")private Boolean male;private Integer age;}

5、新建repository包，然后在repository包中增加UserRepository接口，代码如下：

package com.flying.user.repository;import com.flying.user.entity.UserEntity;import org.springframework.data.jpa.repository.JpaRepository;import org.springframework.stereotype.Repository;@Repositorypublic interface UserRepository extends JpaRepository<UserEntity, Integer> {}

6、新建biz包，然后在biz包中增加UserBiz类，用于实现业务操作，代码如下：

package com.flying.user.biz;import com.flying.user.entity.UserEntity;import com.flying.user.repository.UserRepository;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.stereotype.Service;@Servicepublic class UserBiz {@Autowiredprivate UserRepository userRepository;public void addUser(String userName, String password, Boolean male, Integer age){UserEntity userEntity = new UserEntity();userEntity.setUserName(userName);userEntity.setPassword(password);userEntity.setMale(male);userEntity.setAge(age);userRepository.save(userEntity);}}

7、新建controller包，在controller包中增加一个ReturnResult类，用于向浏览器返回值。代码如下：

package com.flying.user.controller;import lombok.Data;@Datapublic class ReturnResult {private Integer code;private String message;private Object data;public static ReturnResult getSuccessResult() {ReturnResult returnResult = new ReturnResult();returnResult.code = 0;returnResult.message = "success";returnResult.data = "success";return returnResult;}}

8、在controller包中增加UserController类，用于接收来自HTML网页的命令，驱动服务器执行实际的操作，代码如下：

package com.flying.user.controller;import com.flying.user.biz.UserBiz;import lombok.extern.slf4j.Slf4j;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.web.bind.annotation.PostMapping;import org.springframework.web.bind.annotation.RequestParam;import org.springframework.web.bind.annotation.RestController;@Slf4j@RestControllerpublic class UserController {@Autowiredprivate UserBiz userBiz;@PostMapping("/addUser")public ReturnResult addUser(@RequestParam("userName") String userName,@RequestParam("password") String password,@RequestParam("is_male") Boolean male,@RequestParam("age") Integer age) {log.info("HTTP interface addUser is called, userName is {}, password is {}.", userName, password);userBiz.addUser(userName, password, male, age);return ReturnResult.getSuccessResult();}}

9、修改pom.xml文件，添加编译打包的信息，修改后的pom.xml文件内容如下：

<?xml version="1.0" encoding="UTF-8"?><project xmlns="; xmlns:xsi=";xsi:schemaLocation=" ;><modelVersion>4.0.0</modelVersion><parent><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-parent</artifactId><version>2.4.0</version><relativePath/> <!-- lookup parent from repository --></parent><groupId>com.flying</groupId><artifactId>user</artifactId><version>1.0.1</version><name>user</name><description>Demo project for Spring Boot</description><properties><java.version>1.8</java.version></properties><dependencies><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-data-jpa</artifactId></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><dependency><groupId>mysql</groupId><artifactId>mysql-connector-java</artifactId><scope>runtime</scope></dependency><dependency><groupId>org.projectlombok</groupId><artifactId>lombok</artifactId><optional>true</optional></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-test</artifactId><scope>test</scope></dependency></dependencies><build><finalName>user</finalName><plugins><!--打包jar--><plugin><groupId>org.apache.maven.plugins</groupId><artifactId>maven-jar-plugin</artifactId><configuration><!--不打包资源文件,exclude的目录不是src下面的，是以编译结果classes为根目录计算--><excludes><exclude>*.properties</exclude><exclude>*.txt</exclude><exclude>*.xml</exclude></excludes><archive><manifest><addClasspath>true</addClasspath><!--MANIFEST.MF 中 Class-Path 加入前缀--><classpathPrefix>user_lib/</classpathPrefix><!--jar包不包含唯一版本标识--><useUniqueVersions>false</useUniqueVersions><!--指定入口类--><mainClass>com.flying.user.UserApplication</mainClass></manifest><manifestEntries><!--MANIFEST.MF 中 Class-Path 加入资源文件目录--><Class-Path>./resources/</Class-Path></manifestEntries></archive><outputDirectory>${project.build.directory}</outputDirectory></configuration></plugin><!--拷贝依赖 copy-dependencies--><plugin><groupId>org.apache.maven.plugins</groupId><artifactId>maven-dependency-plugin</artifactId><executions><execution><id>copy-dependencies</id><phase>package</phase><goals><goal>copy-dependencies</goal></goals><configuration><outputDirectory>${project.build.directory}/user_lib/</outputDirectory></configuration></execution></executions></plugin><!--拷贝资源文件 copy-resources--><plugin><artifactId>maven-resources-plugin</artifactId><executions><execution><id>copy-resources</id><phase>package</phase><goals><goal>copy-resources</goal></goals><configuration><resources><resource><directory>src/main/resources</directory></resource></resources><outputDirectory>${project.build.directory}/resources</outputDirectory></configuration></execution></executions></plugin></plugins></build></project>

10、修改application.properties文件，增加MySQL数据库的配置信息，以及HTTP监听端口设置为8030：

server.port=8030spring.datasource.url=jdbc:mysql://127.0.0.1/db_user?useUnicode=true&characterEncoding=utf-8&allowMultiQueries=truespring.datasource.username=rootspring.datasource.password=qufei123456spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driverspring.datasource.max-idle=10spring.datasource.max-wait=10000spring.datasource.min-idle=5spring.datasource.initial-size=5

11、在IDEA的Terminal窗口执行mvn clean package -DskipTests命令，执行编译和打包：12、编译后将会在target目录中生成user_lib子目录、resources子目录和user.jar文件，如下图所示：13、将上面的user_lib子目录、resources子目录和user.jar文件拷贝Linux环境：14、在Linux环境下运行java -jar user.jar，运行情况如下：15、编写一个addUser.html文件，内容如下：

<html><head><title>添加用户测试</title><meta charset="utf-8" /></head><body><form method="post" action=";>名字：<input type="text" name="userName" /><br/>密码：<input type="password" name="password" /><br/>性别：男<input type="radio" name="is_male" value="true" /> 女<input type="radio" name="is_male" value="false" /><br/>年龄：<input type="text" name="age" /><br/><input type="submit" value="添加用户"/></form></body></html>

说明：文件中的IP地址，表示服务器的IP地址。

16、打开addUser.html文件，展示如下：17、填入姓名jackson，密码jackson，性别男，年龄26，然后点击“添加用户”按钮：18、此时浏览器上显示服务器返回的信息：19、在Linux命令行下，查询MySQL数据库，结果如下：

通过查询MySQL数据库，发现已经插入了HTML页面填入的用户信息，程序开发成功！