Create a Spring initialization project
Click File->New->Project, select Spring Initalizr, select the JDK version, click Next
Enter custom information in this window and click Next
Select Web->Spring Web, click Next
Enter the project name, click Finish to complete the creation
After the creation is complete, the following content will pop up in the lower right corner, select Enable Auto-Import, so IDEA can automatically help us import the content we need
Import dependency
In this project, just add another thymeleaf dependency in pom.xml
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
The complete pom.xml code is as follows
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>2.2.4.RELEASE</version>
<relativePath/> <!-- lookup parent from repository -->
</parent>
<groupId>com.form</groupId>
<artifactId>demo</artifactId>
<version>0.0.1-SNAPSHOT</version>
<name>demo</name>
<description>FormDemo project for Spring Boot</description>
<properties>
<java.version>1.8</java.version>
</properties>
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
<exclusions>
<exclusion>
<groupId>org.junit.vintage</groupId>
<artifactId>junit-vintage-engine</artifactId>
</exclusion>
</exclusions>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
</dependencies>
<build>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
</plugin>
</plugins>
</build>
</project>
Write input page
Create the input.html file in src->main->resources->templates (searching for static pages in the following configuration will automatically find them under this file)
Note that thymeleaf needs to be loaded in the header file here
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
The complete code is as follows
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>个人信息填写</title>
</head>
<body>
<form th:action="@{/out}" method="post">
//此处的@{/out}会自动进入后面创建的PersonController.java文件中用@RequestMapping("out")注解的方法
姓名:<input type="text" name="name"><br><br>
性别:<input type="radio" name="sex" value="女">女
<input type="radio" name="sex" value="男">男<br><br>
年龄:<input type="text" name="age"><br><br>
学历:<select name="education">
<option value="小学">小学</option>
<option value="初中">初中</option>
<option value="高中">高中</option>
<option value="本科">本科</option>
<option value="研究生">研究生</option>
<option value="博士">博士</option>
</select><br><br>
个人简介:<textarea name="information" rows="10" cols="20"></textarea><br><br>
<input type="submit" value="提交">
</form>
</body>
</html>
Writing entity classes
Create Person.java under src->main->java->com->bean, add attributes, construction methods, etc. The complete code is as follows
package com.bean;
public class Person {
private String name;
private String sex;
private int age;
private String education;
private String information;
public Person(String name, String sex, int age, String education, String information) {
this.name = name;
this.sex = sex;
this.age = age;
this.education = education;
this.information = information;
}
@Override
public String toString() {
return "Person{" +
"name='" + name + '\'' +
", sex='" + sex + '\'' +
", age=" + age +
", education='" + education + '\'' +
", information='" + information + '\'' +
'}';
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getSex() {
return sex;
}
public void setSex(String sex) {
this.sex = sex;
}
public int getAge() {
return age;
}
public void setAge(int age) {
this.age = age;
}
public String getEducation() {
return education;
}
public void setEducation(String education) {
this.education = education;
}
public String getInformation() {
return information;
}
public void setInformation(String infromation) {
this.information = information;
}
}
Write control class
Create PersonController.java in src->main->java->com->config to complete the transfer function of form data. The complete code is as follows
package com.config;
import com.bean.Person;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
@Controller
public class PersonController {
@RequestMapping("out")
//此处与前面input.html中th:action="@{/out}"对应
public String outputmessage(@RequestParam("name") String name,
@RequestParam("sex") String sex,
@RequestParam("age") int age,
@RequestParam("education") String education,
@RequestParam("information") String information,
//此注解用于接收表单传递的内容
Model model){
Person person = new Person(name,sex,age,education,information);
model.addAttribute("myperson",person);
//将自定义的person实体添加到model模型中，方便后面获取
return "output";
//转入output.html页面
}
}
Write a class to control the URL path
Add hello.java in src->main->java->com->config. The function of this file is to automatically transfer to the static page of input.html under templates when the input url is localhost:8080/input
. The complete code is as follows
package com.config;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
@Controller
public class hello {
@RequestMapping("input")
//input可随意更改
public String input(){
return "input";
//转入input.html页面
}
}
Write output page
To create the output.html file in src->main->resources->templates, you also need to introduce the complete code of thymeleaf as follows
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>个人信息</title>
</head>
<body>
<h2>姓名:</h2><h3 th:text="${myperson.name}"></h3>
<h2>性别:</h2><h3 th:text="${myperson.sex}"></h3>
<h2>年龄:</h2><h3 th:text="${myperson.age}"></h3>
<h2>学历:</h2><h3 th:text="${myperson.education}"></h3>
<h2>个人简介:</h2><h3 th:text="${myperson.information}"></h3>
//通过我们之前保存在model中的myperson实体获取表单中的内容
</body>
</html>
Let's verify the result
Enter localhost:8080/input in the browser, enter the data, and the results are as follows
After submission, the entered information is displayed correctly
