拍卖网页表单,表单验证

此次共享将介绍如何在Spring Boot中管理网页表单。
网页表单是网页开荒中的主要内容,它在HTML中的标签为<form></form>,在网页中着重负担数据搜罗功效。大家在浏览网址时,常常会遇上注册账号、账号登入等,那正是表单的优秀应用。
大家将创立Spring
Boot项目webform来展现如什么地方理表单,其起步信赖为web和Thymeleaf,具体的创始方法可参看:
Spring Boot入门Hello World。那也是Spring Boot官方介绍网址中的多少个例证。

在前两篇博客: Spring Boot入门使用MySQL数据库和Spring
Boot入门管理网页表单中,大家已经调控了怎么在Spring
Boot中操作MySQL数据库以及网页中的表单。本次分享讲结合以上两篇博客,完毕的效应该为:在网页中提交表单,並且将表单中的数据存入MySQL中。
网页表单的开始和结果如下图:

在博客:Spring
Boot入门提交表单并存入MySQL数据库中,大家选用提交表单往MySQL中插入记录,那确实是很有益的。可是,大家从未对网页中的表单进行认证,而表单验证是网页表单必不可缺的部分。有以下二种办法对Spring
Boot项目中的方法进行求证:

致写作:纵然写就好,时间自然会给你答案

一切程序的总体项目组织如下图:

亚州城ca88手机版 1表单的剧情

  • 行使JavaScript恐怕其余JavaScript库,如jQuery举行表单验证
  • 利用Spring Boot原生方法开展表单验证

以这件事例用于演示在Spring Boot应用中怎么着注解Web
应用的输入,大家将会创建贰个差没多少的Spring
MVC应用,来读取顾客输入并采用validation评释来检查,况兼当顾客输入错误时,应用要求再显示屏上显得错误音信提醒客商重新输入。

亚州城ca88手机版 2全体的项目布局

交给表单数据后,后台会将数据插入到MySQL中的表格,并且能够经过页面来展现插入的具备记录。整个管理流程和代码不会很复杂,所以,下一步,大家就径直走入项目!

前面三个要求采取JavaScript方面包车型地铁知识,对于明白JS的读者来讲,这并非困苦的政工,不过表单验证管理起来相比较劳碌,也轻易遗漏掉必要验证的口径。采取Spring
Boot原生方法开展表单验证比较便于,可是急需熟练Spring Boot方面包车型客车学识。

先是营造Maven项目,该类型的pom文件内容如下:

作者们将会挨个介绍需求配备的文件。首先是build.gradle,其代码如下:

拍卖网页表单,表单验证。新建formIntoMySQL项目,配置其起步信任为Web, Thymeleaf, JPA, MySQL,
该项目标切实可行组织如下图所示:

本次分享将应用Spring Boot原生方法进行表单验证,我们在博客:Spring
Boot入门提交表单并存入MySQL数据库中的Spring Boot项目上投入表单验证。

<?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 http://maven.apache.org/xsd/maven-4.0.0.xsd"> <modelVersion>4.0.0</modelVersion> <groupId>org.example</groupId> <artifactId>validating-form-input</artifactId> <version>1.0-SNAPSHOT</version> <parent> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-parent</artifactId> <version>1.5.1.RELEASE</version> </parent> <properties> <java.version>1.8</java.version> </properties> <build> <plugins> <plugin> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-maven-plugin</artifactId> </plugin> </plugins> </build> <dependencies> <!-- thymeleaf模板,用于前段渲染 --> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId> </dependency> <!-- 用于输入验证 --> <dependency> <groupId>org.hibernate</groupId> <artifactId>hibernate-validator</artifactId> </dependency> <!-- 用于支持嵌入式tomcat --> <dependency> <groupId>org.apache.tomcat.embed</groupId> <artifactId>tomcat-embed-el</artifactId> </dependency> <!-- 用于spring boot应用的测试 --> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-test</artifactId> <scope>test</scope> </dependency> </dependencies></project>
buildscript { ext { springBootVersion = '2.0.1.RELEASE' } repositories { mavenCentral() } dependencies { classpath("org.springframework.boot:spring-boot-gradle-plugin:${springBootVersion}") }}apply plugin: 'java'apply plugin: 'eclipse'apply plugin: 'org.springframework.boot'apply plugin: 'io.spring.dependency-management'group = 'com.example'version = '0.0.1-SNAPSHOT'sourceCompatibility = 1.8repositories { mavenCentral()}dependencies { // https://mvnrepository.com/artifact/org.springframework.boot/spring-boot-starter-web compile group: 'org.springframework.boot', name: 'spring-boot-starter-web', version: '2.0.0.RELEASE' // https://mvnrepository.com/artifact/org.springframework.boot/spring-boot-starter-thymeleaf compile group: 'org.springframework.boot', name: 'spring-boot-starter-thymeleaf', version: '2.0.1.RELEASE' testCompile('org.springframework.boot:spring-boot-starter-test')}

亚州城ca88手机版 3formIntoMySQL项目总体目录

作者们在本来的Spring Boot项目上进展改造,该Spring Boot项目正是博客:Spring
Boot入门提交表单并存入MySQL数据库中的Spring
Boot项目,也能够参照其Github地址:
。该类型的欧洲经济共同体结构如下图:

Spring Boot Maven插件提供了过多便于的特色:

hello包下的三个java文件,Greeting.java代码如下:

内部划红线的片段为索要修改大概新建的文书。 builg.gradle代码如下:

亚州城ca88手机版 4项指标欧洲经济共同体结构

  1. 它将该类型中需求的依次Jar包搜罗起来,并打包成可平昔运营的Jar包,以更利于得计划和传导;
  2. 它会招来富含“public static void
    main()”方法的类,该类正是可运营Jar包的开发银行类;
  3. 它提供了内在的支撑,去相配Spring Boot的版本号。
package com.example.webform.hello;public class Greeting { private long id; private String content; public long getId() { return id; } public void setId { this.id = id; } public String getContent() { return content; } public void setContent(String content) { this.content = content; }}
buildscript { ext { springBootVersion = '2.0.1.RELEASE' } repositories { mavenCentral() } dependencies { classpath("org.springframework.boot:spring-boot-gradle-plugin:${springBootVersion}") }}apply plugin: 'java'apply plugin: 'eclipse'apply plugin: 'org.springframework.boot'apply plugin: 'io.spring.dependency-management'group = 'com.form'version = '0.0.1-SNAPSHOT'sourceCompatibility = 1.8repositories { mavenCentral()}dependencies { // https://mvnrepository.com/artifact/org.springframework.boot/spring-boot-starter-web compile group: 'org.springframework.boot', name: 'spring-boot-starter-web', version: '2.0.0.RELEASE' // https://mvnrepository.com/artifact/org.springframework.boot/spring-boot-starter-thymeleaf compile group: 'org.springframework.boot', name: 'spring-boot-starter-thymeleaf', version: '2.0.1.RELEASE' // JPA Data (We are going to use Repositories, Entities, Hibernate, etc...) compile 'org.springframework.boot:spring-boot-starter-data-jpa' // Use MySQL Connector-J compile 'mysql:mysql-connector-java' // https://mvnrepository.com/artifact/junit/junit testCompile group: 'junit', name: 'junit', version: '4.12'}

参与表单验证须要修改上述八个红线框内的文书。
首先是User.java,在代码中步入表单验证的限制条件,其代码如下:

创建三个Form对象,用于对应HTML页面中输入的对象——PersonForm,

GreetingController.java文件的代码如下:

请留心Web和Thymeleaf的本子,那与后边网页展现和操作的兑现成关。
在com.form.formIntoMySQL下新建package
entity,个中的User.java为表单中的条目款项标现实落到实处的Entity实体类,其代码如下:

import javax.persistence.Entity;import javax.persistence.GeneratedValue;import javax.persistence.GenerationType;import javax.persistence.Id;import javax.validation.constraints.*;@Entity // This tells Hibernate to make a table out of this classpublic class User { @Id @GeneratedValue(strategy=GenerationType.AUTO) private Integer id; @NotEmpty @Size(min=2, max=30) private String name; @NotNull @Min @Max private Integer age; @Pattern(regexp = "[MFmf]") private String gender; @NotEmpty @Email private String email; @NotEmpty private String city; public Integer getId() { return id; } public void setId(Integer id) { this.id = id; } public String getName() { return name; } public void setName(String name) { this.name = name; } public Integer getAge() { return age; } public void setAge(Integer age) { this.age = age; } public String getGender() { return gender; } public void setGender(String gender) { this.gender = gender; } public String getEmail() { return email; } public void setEmail(String email) { this.email = email; } public String getCity() { return city; } public void setCity(String city) { this.city = city; }}
package hello;import javax.validation.constraints.Min;import javax.validation.constraints.NotNull;import javax.validation.constraints.Size;/** * Created by IntelliJ IDEA. * User: duqi * Date: 2017/2/28 * Time: 21:53 */public class PersonForm { @NotNull @Size(min = 2, max = 30) private String name; @NotNull @Min private Integer age; public String getName() { return name; } public Integer getAge() { return age; } public void setName(String name) { this.name = name; } public void setAge(Integer age) { this.age = age; } public String toString() { return "Person(Name: " + this.name + ", Age: " + this.age + ")"; }}
package com.example.webform.hello;import org.springframework.stereotype.Controller;import org.springframework.ui.Model;import org.springframework.web.bind.annotation.GetMapping;import org.springframework.web.bind.annotation.ModelAttribute;import org.springframework.web.bind.annotation.PostMapping;@Controllerpublic class GreetingController { @GetMapping("/greeting") public String greetingForm(Model model) { model.addAttribute("greeting", new Greeting; return "greeting"; } @PostMapping("/greeting") public String greetingSubmit(@ModelAttribute Greeting greeting) { return "result"; }}
package com.form.formIntoMySQL.entity;import javax.persistence.Entity;import javax.persistence.GeneratedValue;import javax.persistence.GenerationType;import javax.persistence.Id;@Entity // This tells Hibernate to make a table out of this classpublic class User { @Id @GeneratedValue(strategy=GenerationType.AUTO) private Integer id; private String name; private Integer age; private String gender; private String email; private String city; public Integer getId() { return id; } public void setId(Integer id) { this.id = id; } public String getName() { return name; } public void setName(String name) { this.name = name; } public Integer getAge() { return age; } public void setAge(Integer age) { this.age = age; } public String getGender() { return gender; } public void setGender(String gender) { this.gender = gender; } public String getEmail() { return email; } public void setEmail(String email) { this.email = email; } public String getCity() { return city; } public void setCity(String city) { this.city = city; }}

在上述代码中,@NotEmpty限制字符串无法为空,@Size(min=2,
max=30)限制字符串的长短为2到30,@NotNull限制输入不能够为null,@Min,
@Max限制输入的数字不能够小于1恐怕当先200,@Pattern(regexp =
“[MFmf]拍卖网页表单,表单验证。”)限制输入的字符串必得相符正则表达式[MFmf],@Email限制输入的email地址必须是理当如此的email地址。
接着我们须求对调控器UserController.java进行修改,因为表单验证的提醒音信供给出示。其实际代码如下:

在此地,@NotNull注消痈示该属性不能够为空、@Size(min=2,
max=30)表示name属性的长短在[2,30]以内,@Min代表age属性最小值为18。

那是Spring MVC模型中的调控器。
它用GET央浼来拍卖/greeting的数据,重返一个视图的名字,也便是“greeting”;用POST央浼来管理/greeting的数额,重返一个视图的名字,也正是“result”。三个视图正是一个HTML文件。当中模型的性质用到了Greeting类,也正是在Greeting.java中定义的类。
在templates中用Thymeleaf定义了四个HTML文件,用来网页呈现。greeting.html的代码如下:

在com.form.formIntoMySQL下新建package
Controller,那是贮存在调节器代码的地点,大家的调整器为UserController.java,其代码如下:

package com.form.formIntoMySQL.Controller;import com.form.formIntoMySQL.entity.User;import com.form.formIntoMySQL.UserRepository;import org.springframework.stereotype.Controller;import org.springframework.ui.Model;import org.springframework.web.bind.annotation.*;import org.springframework.validation.BindingResult;import org.springframework.web.servlet.config.annotation.ViewControllerRegistry;import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;import org.springframework.beans.factory.annotation.Autowired;import javax.validation.Valid;@Controllerpublic class UserController implements WebMvcConfigurer{ @Autowired // This means to get the bean called userRepository // Which is auto-generated by Spring, we will use it to handle the data private UserRepository userRepository; @Override public void addViewControllers(ViewControllerRegistry registry) { registry.addViewController("/result").setViewName; } @GetMapping("/greeting") public String greetingForm(Model model) { model.addAttribute("user", new User; return "greeting"; } @PostMapping("/greeting") public String greetingSubmit(@Valid @ModelAttribute User user, BindingResult bindingResult) { if (bindingResult.hasErrors { return "greeting"; } else { User newUser = new User(); newUser.setName(user.getName; newUser.setAge(user.getAge; newUser.setGender(user.getGender; newUser.setEmail(user.getEmail; newUser.setCity(user.getCity; userRepository.save; return "result"; } } @GetMapping public String getMessage(Model model) { Iterable<User> users = userRepository.findAll(); model.addAttribute("users", users); return "all"; }}

编辑二个web调控器,援引为:src/main/java/hello/WebController.java,代码如下:

<!DOCTYPE HTML><html xmlns:th="http://www.thymeleaf.org"><head> <title>Getting Started: Handling Form Submission</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /></head><body><h1>Form</h1><form action="#" th:action="@{/greeting}" th:object="${greeting}" method="post"> <p>Id: <input type="text" th:field="*{id}" /></p> <p>Message: <input type="text" th:field="*{content}" /></p> <p><input type="submit" value="Submit" /> <input type="reset" value="Reset" /></p></form></body></html>
package com.form.formIntoMySQL.Controller;import com.form.formIntoMySQL.entity.User;import com.form.formIntoMySQL.UserRepository;import org.springframework.stereotype.Controller;import org.springframework.ui.Model;import org.springframework.web.bind.annotation.*;import org.springframework.beans.factory.annotation.Autowired;@Controllerpublic class UserController { @Autowired // This means to get the bean called userRepository // Which is auto-generated by Spring, we will use it to handle the data private UserRepository userRepository; @GetMapping("/greeting") public String greetingForm(Model model) { model.addAttribute("user", new User; return "greeting"; } @PostMapping("/greeting") public String greetingSubmit(@ModelAttribute User user) { User newUser = new User(); newUser.setName(user.getName; newUser.setAge(user.getAge; newUser.setGender(user.getGender; newUser.setEmail(user.getEmail; newUser.setCity(user.getCity; userRepository.save; return "result"; } @GetMapping public String getMessage(Model model) { Iterable<User> users = userRepository.findAll(); model.addAttribute("users", users); return "all"; }}

在greetingSubmit()方法中大家投入了表单验证@Valid,借使出现表单验证错误,则赶回greeting.html页面,并出示错误音讯,若是表单验证成功,则赶回result.html页面。
最终索要对呈现验证表单错误新闻的网页greeting.html进行退换,其代码如下:

package hello;import org.springframework.stereotype.Controller;import org.springframework.validation.BindingResult;import org.springframework.web.bind.annotation.GetMapping;import org.springframework.web.bind.annotation.PostMapping;import org.springframework.web.servlet.config.annotation.ViewControllerRegistry;import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;import javax.validation.Valid;/** * Created by IntelliJ IDEA. * User: duqi * Date: 2017/3/2 * Time: 14:07 */@Controllerpublic class WebController extends WebMvcConfigurerAdapter { @Override public void addViewControllers(ViewControllerRegistry registry) { registry.addViewController("/results").setViewName("results"); } @GetMapping public String showForm(PersonForm personForm) { return "form"; } @PostMapping public String checkPersonInfo(@Valid PersonForm personForm, BindingResult bindingResult) { if (bindingResult.hasErrors { return "form"; } return "redirect:/results"; }}

result.html文件的代码如下:

随之在com.form.formIntoMySQL下新建UserReposittory.java,来完毕CrudRepositoty接口,其代码如下:

<!DOCTYPE HTML><html xmlns:th="http://www.thymeleaf.org"><head> <title>Form Submission</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"></head><body> <center> <br><br> <h2 style="color:green">Form</h2> <br><br> <form role="form" action="#" th:action="@{/greeting}" th:object="${user}" method="post"> <div style="width:300px"> <label for="name" >Name</label> <div > <input type="text" th:field="*{name}" placeholder="Enter name"> </div> <label style="color:red" th:if="${#fields.hasErrors}" th:errors="*{name}">Name Error</label> </div> <div style="width:300px"> <label for="age" >Age</label> <div > <input type="text" th:field="*{age}" placeholder="Enter age"> </div> <label style="color:red" th:if="${#fields.hasErrors}" th:errors="*{age}">Age Error</label> </div> <div style="width:300px"> <label for="gender" >Gender</label> <div > <input type="text" th:field="*{gender}" placeholder="Enter gender"> </div> <label style="color:red" th:if="${#fields.hasErrors}" th:errors="*{gender}">Gender Error</label> </div> <div style="width:300px"> <label for="email" >Email</label> <div > <input type="text" th:field="*{email}" placeholder="Enter email"> </div> <label style="color:red" th:if="${#fields.hasErrors}" th:errors="*{email}">Email Error</label> </div> <div style="width:300px"> <label for="city" >City</label> <div > <input type="text" th:field="*{city}" placeholder="Enter city"> </div> <label style="color:red" th:if="${#fields.hasErrors}" th:errors="*{city}">City Error</label> </div> <div > <div> <button type="submit" >Submit</button> <input type="reset" value="Reset" /> </div> </div> </form> </center></body></html>

在这一个控制器中,GET方法和POST方法都映射到“/”url下,showForm方法会重返“form”字符串,表示模板的名号,视图调控器依照那个字符串查找模板文件form.html,在showForm的法门签字中定义了PersonForm参数,以便模板将品质绑定到PersonForm对象的天性中,checkPersonFormInfo方法定义了四个入参:person对象,在那些参数前用@Valid修饰,用于检查从form页面提交过来的属性值;bindingResult对象,用于存放@Valid评释检查的结果。

<!DOCTYPE HTML><html xmlns:th="http://www.thymeleaf.org"><head> <title>Getting Started: Handling Form Submission</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /></head><body><h1>Result</h1><p th:text="'id: ' + ${greeting.id}" /><p th:text="'content: ' + ${greeting.content}" /><a href="/greeting">Submit another message</a></body></html>
package com.form.formIntoMySQL;import org.springframework.data.repository.CrudRepository;import com.form.formIntoMySQL.entity.User;// This will be AUTO IMPLEMENTED by Spring into a Bean called userRepository// CRUD refers Create, Read, Update, Deletepublic interface UserRepository extends CrudRepository<User, Long> {}

从那之后,程序以修改实现。

能够从PersonForm表格中领到属性值,并存入PersonForm对象。@Valid申明会检讨那些属性的卓有效率,借使有错也会把错误音讯渲染到模板中并突显到页面上。

末了我们须求定义一个开行引导类,也正是前后相继的输入,即德姆oApplication.java,它的代码如下:

FormIntoMySQLApplication.java代码保持不改变,如下所示:

大家须求对上述顺序举办测量试验,入眼在于表单验证成效。在浏览器中输入:
,什么都不输入,直接点击Submit按键,呈现如下:

例如持有的属性都通过校验,该方法会将浏览珍视定向到results页面。

package com.example.webform;import org.springframework.boot.SpringApplication;import org.springframework.boot.autoconfigure.SpringBootApplication;@SpringBootApplicationpublic class DemoApplication { public static void main(String[] args) { SpringApplication.run(DemoApplication.class, args); }}
package com.form.formIntoMySQL;import org.springframework.boot.SpringApplication;import org.springframework.boot.autoconfigure.SpringBootApplication;@SpringBootApplicationpublic class FormIntoMySqlApplication { public static void main(String[] args) { SpringApplication.run(FormIntoMySqlApplication.class, args); }}

亚州城ca88手机版 5直白点击Submit按键

spring
boot暗许从src/main/resources/templates目录下找出html页面,form.html和results.html都位居此处。

像这种类型大家就定义完整了这么些类其他具备编写职业。

接着须要配置静态资源,即有关的网页,大家项目中的网页采取Thymeleaf视图来完毕,当中greeting.html为发端进去的网页,其代码如下:

再分别证实其余表单限制条件,如下图所示:

<!DOCTYPE html><html xmlns:th="http://www.thymeleaf.org"><head> <title>Spring Boot Thymeleaf Hello World Example</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /></head><body> <form action="#" th:action="@{/}" th:object="${personForm}" method="post"> <table> <tr> <td>Name:</td> <td><input type="text" th:field="*{name}" /></td> <td th:if="${#fields.hasErrors}" th:errors="*{name}">Name Error</td> </tr> <tr> <td>Age:</td> <td><input type="text" th:field="*{age}" /></td> <td th:if="${#fields.hasErrors}" th:errors="*{age}">Age Error</td> </tr> <tr> <td><button type="submit">Submit</button></td> </tr> </table> </form></body></html>

运行上述顺序,运转成功后在浏览器中输入:
,如下图所示:

<!DOCTYPE HTML><html xmlns:th="http://www.thymeleaf.org"><head> <title>Form Submission</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"></head><body> <center> <br><br> <h2 style="color:green">Form</h2> <br><br> <form role="form" action="#" th:action="@{/greeting}" th:object="${user}" method="post"> <div style="width:300px"> <label for="name" >Name</label> <div > <input type="text" th:field="*{name}" placeholder="Enter name"> </div> </div> <div style="width:300px"> <label for="age" >Age</label> <div > <input type="text" th:field="*{age}" placeholder="Enter age"> </div> </div> <div style="width:300px"> <label for="gender" >Gender</label> <div > <input type="text" th:field="*{gender}" placeholder="Enter gender"> </div> </div> <div style="width:300px"> <label for="email" >Email</label> <div > <input type="text" th:field="*{email}" placeholder="Enter email"> </div> </div> <div style="width:300px"> <label for="city" >City</label> <div > <input type="text" th:field="*{city}" placeholder="Enter city"> </div> </div> <div > <div> <button type="submit" >Submit</button> <input type="reset" value="Reset" /> </div> </div> </form> </center></body></html>

亚州城ca88手机版 6表单验证

form.html页面包含叁个轻巧的form表格,那一个表格和post方法绑定。th:object代表该表格和后端的person对象绑定,那正是bean-backed
form
,在PersonForm对象中,能够见见th:field="*{name}"th:field=*{age}。在form表格中,紧挨着name和age标签,有三个用于显示错误音信的竹签。页面包车型大巴终极有个Submit按键,假诺客商输入的name和age违法,页面会突显错误提醒音信,假诺客户输入的name和age违规,页面会被路由到下八个页面。

亚州城ca88手机版 7greeting.html

result.html为付出表单后跳转后的页面,其代码如下:

当表单验证通过后,大家就会举办result.html结果展现页面,如下图:

results.html内容如下:

点击Submit后,调到result.html页面,其剧情如下:

<!DOCTYPE HTML><html xmlns:th="http://www.thymeleaf.org"><head> <title>Handling Form Submission</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"></head><body><center> <br><br> <h2 style="color:green">Result</h2> <br><br> <ul style="width:300px"> <li th:text="'Name: ' + ${user.name}"></li> <li th:text="'Age: ' + ${user.age}"></li> <li th:text="'Gender: ' + ${user.gender}"></li> <li th:text="'Email: ' + ${user.email}"></li> <li th:text="'City: ' + ${user.city}"></li> </ul> <h4>  Insert into MySQL successfully! </h4> <a href="/greeting"><button type="button" >Return to home</button></a> <a href="/all"><button type="button" >See Records</button></a></body></html>

亚州城ca88手机版 8表单验证通过

<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8" /> <title>Title</title></head><body> Congratulations! You are old enough to sign up for this site.</body></html>

亚州城ca88手机版 9result.html

all.html为显示MySQL数据库表格user中的全数记录的网页,其具体代码如下:

此番共享首要在上篇博客的基本功上,参预了表单验证成效,首要的主见是易如反掌的,对于项目结构不纯熟的读者,能够参照博客:Spring
Boot入门提交表单并存入MySQL数据库大概该类型的Github地址:
. 此番分享首要仿效了Spring
Boot官方网址给出的表单验证的例证:
.
此番程序的Github地址为: .
这次分享到此截止,迎接我们调换~~

创立贰个Application类,用于运维Spring Boot应用,

点击”Submit another
message”就能够调到greeting.html网页。那就认证我们用Spring
Boot来管理网页表单成功啦! 此次分享到此结束,接下去还恐怕会持续革新Spring
Boot方面包车型客车剧情,接待我们沟通~~

<!DOCTYPE html><html xmlns:th="http://www.thymeleaf.org"><head> <title>User list</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.css" rel="stylesheet"></head><body><center> <br><br><h2 style="color:green">All Records in Table user</h2> <br><br><table style="width:800px"> <tr style="color:red"> <th>NAME</th> <th>Age</th> <th>Gender</th> <th>Email</th> <th>City</th> </tr> <tr th:each="user : ${users}"> <td th:text="${user.name}">Jack</td> <td th:text="${user.age}">24</td> <td th:text="${user.gender}">M</td> <td th:text="${user.email}">jack@gmail.com</td> <td th:text="${user.city}">New York</td> </tr></table><p> <a href="/greeting"><button type="button" >Return to home</button></a></p></center></body></html>

注意:自己现已开展七个微信大伙儿号:
用Python做数学(微频限信号为:python_math)以及轻巧学会Python爬虫(微时限信号为:easy_web_scrape),
应接大家关心哦~~

package hello;import org.springframework.boot.SpringApplication;import org.springframework.boot.autoconfigure.SpringBootApplication;/** * Created by IntelliJ IDEA. * User: duqi * Date: 2017/3/2 * Time: 15:50 */@SpringBootApplicationpublic class Application { public static void main(String[] args) { SpringApplication.run(Application.class, args); }}

静态能源也配备好了,最终一步正是布局文件application.properties,其代码如下:

@SpringBootApplication注明也为Thymeleaf提供了默许配置:暗中认可情形下会从resources/templates目录下寻觅模板文件,并将*.html文件中的后缀忽略掉后余下的文件名称剖析为视图。能够由此在application.properties里安装相关属性来修改Thymeleaf的布局,这里大家不再细说。

spring.jpa.hibernate.ddl-auto=createspring.datasource.url=jdbc:mysql://localhost:33061/testspring.datasource.username=rootspring.datasource.password=147369server.port=8000

亲自过问的代码:

在那边,大家的数据库表格为新建,因为事先空中楼阁user表格,存在后您能够将create操作改为update,那样做力所能及确认保障user表格的多寡不会被隐瞒,而是扩充。网页运转端口为九千,MySQL运维端口为33061,那是作者本身安装过的。

到底写完了前后相继,下一步当然是美滋滋地运营以及测验。
在浏览器端输入
,那是我们前后相继的输入,提交如下表单:

亚州城ca88手机版 10交付表单

点击Submit开关,将会跳转到结果展现页面,如下图:

亚州城ca88手机版 11结果展现页面

再次以上操作,将以下5条数据用表单提交:

Name: Alex, Age: 24, Gender: F, Email: alex@baidu.com City:BeijingName: Cook, Age: 45, Gender: M, Email: cook@apple.com City:New YorkName: Fork, Age: 31, Gender: F, Email: fork@linux.com City:LondonName: Dan, Age: 17, Gender: M, Email: dan@aliyun.com City:ParisName: Hello, Age: 56, Gender: F, Email: hello@happy.com City:Istanbul

在浏览器中输入localhost:7000/all或在greeting页面中点击“See
Records”按键就能够看出刚才我们插入到MySQL数据库test中表格user的六条数据,如下图:

亚州城ca88手机版 12表格user的兼具数据

提起底我们去MySQL数据库中查看,里面就有大家刚刚提交的表单数据,如下图:

亚州城ca88手机版 13亚州城ca88手机版,MySQL数据库

对于最初触及Spring
Boot的读者来说,以上程序显得有个别复杂、难懂,不过,耳闻则诵,只要多加练习,一定会逐步熟习Spring
Boot的付出流程的。当然,这也是笔者告诉要好的,因为,笔者也是二个新手!
此番项目的Github地址为
款待大家访问~~ 此次分享终于终止了,接下去还有恐怕会继续立异Spring
Boot方面包车型大巴剧情,款待大家交换~~

Post Author: admin

发表评论

电子邮件地址不会被公开。 必填项已用*标注