前面写了一篇文章《Java编程第45讲——使用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 {}
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 { @Autowired private 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 { @Autowired private 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"?>4.0.0org.springframework.boot spring-boot-starter-parent 2.4.0com.flying user 1.0.1userDemo project for Spring Boot1.8org.springframework.boot spring-boot-starter-data-jpa org.springframework.boot spring-boot-starter-web mysql mysql-connector-java runtimeorg.projectlombok lombok trueorg.springframework.boot spring-boot-starter-test testuserorg.apache.maven.plugins maven-jar-plugin *.properties*.txt*.xml true user_lib/falsecom.flying.user.UserApplication./resources/${project.build.directory}org.apache.maven.plugins maven-dependency-plugin copy-dependenciespackagecopy-dependencies ${project.build.directory}/user_lib/ maven-resources-plugin copy-resourcespackagecopy-resourcessrc/main/resources${project.build.directory}/resources
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文件,内容如下:
添加用户测试 名字:
密码:
性别:男 女
年龄:
16、打开addUser.html文件,展示如下:
17、填入姓名jackson,密码jackson,性别男,年龄26,然后点击“添加用户”按钮:
18、此时浏览器上显示服务器返回的信息:
19、在Linux命令行下,查询MySQL数据库,结果如下:
通过查询MySQL数据库,发现已经插入了HTML页面填入的用户信息,程序开发成功!