SpringBoot2.x（十）表单交互实战一

2020-05-14 本文已影响0人学者的小跟班

尊敬的读者朋友，大家好，本文是《springboot2.x独门秘籍》系列的第十篇。本专题的文章将会以SpringBoot项目实战为切入点，带着你应用Spring、SpringBoot的相关知识，并手把手教你整合持久层框架、安全框架、web框架等，让SpringBoot成为你面试和工作中的加分项。往期精选文章!

01 学习环境（参考）

windows10操作系统
jdk1.8.0 + maven3.6.0
myeclipse编辑器

02 本文主题

前面几篇文章中，我们对SpringBoot基础概念、项目结构、控制器以及视图等知识点做了详细的介绍，但是始终没有触及前后端交互的知识点。

你是否想过，当你进行登录、注册、查询等操作时，网站是如何将信息传递到后端进行处理，又是如何将结果返回到前端呢？

从本文开始，将会有两篇实战文章来讲解前后端交互中的经典场景：表单交互，涉及的知识点如图10-1所示：

本文主要目的是重温SpringBoot基础，用SpringBoot+Layui框架+Thymeleaf模板引擎的技术栈构建一个漂亮的表单页，也为下一篇文章：表单交互实战二打下基础，起到承上启下的作用。

03准备工作

在开始演示表单交互和校验之前，需要做如下准备

新建一个普通的SpringBoot工程，pom.xml中包含web、devtools和thymeleaf三个依赖
下载前端框架layui，
如果对devtools、thymeleaf或者layui等知识点不了解，可以参考我之前的文章
SpringBoot2.x（九）深度揭秘Devtools
SpringBoot2.x（四）thymeleaf整合
UI框架Layui入门介绍

04 新建SpringBoot项目以及表单页。

新建SpringBoot项目的方式有很多，此处我们选择最简单也是Spring官方推荐的方式：Spring initializer，这是Spring官方的web项目，直接访问https://start.spring.io/就可以轻松构建项目。

在项目中需要包含基础的web依赖，以及用于热部署的devtools依赖和前后端分离的thymeleaf依赖。如果在项目构建之初，勾选了这三项依赖，在项目的pom文件可以看到如下:

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-devtools</artifactId>
    <scope>runtime</scope>
    <optional>true</optional>
</dependency>

此处，穿插一点表单基础知识，表单主要用于网页数据采集，比如采集登录信息、注册信息等。主要包括三个部分：

表单标签，也就是html中的<form></form>
表单域，上图中的输入框、单选框、密码框、文本框都属于表单域
表单按钮，比如提交按钮、取消按钮等

构建表单页的步骤如下：

引入所需的静态资源，如本文中用到了Layui，就需要引入layui.css和layui.js两个静态资源
构建表单域，在<form>标签内加入表单布局，比如文本框、单选框、复选框等

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>表单交互演示</title>
   <!-- 使用thymeleaf语法获取静态资源 -->
   <link rel="stylesheet" th:href="@{/plugin/layui/css/layui.css}"  media="all">
</head>
<body>
   <div class="content">
       <form action="">
           <!-- 表单布局 -->
       </form>
   </div>
</body>
<!-- 使用thymeleaf语法获取静态资源 -->
<script th:src="@{/plugin/layui/layui.js}" charset="utf-8"></script>
</html>

上述代码中，需要注意两点th:href="@{}"和th:src="@{}"使用的是thymeleaf模板引擎的语法获取静态资源，layui.css和layui.js是使用layui这个前端框架需要的静态文件。
由于篇幅关系，表单布局的代码省略，如果需要，文末有完整的项目压缩包，可自行下载。
到此，准备工作完毕，在SpringBoot项目controller层中新建一个控制器，用于处理浏览器请求，返回页面即可，代码如下：

/**
* @描述：控制器
* @日期：2020年5月14日
*/
@Controller
@RequestMapping("/index")
public class IndexController {
   
   /**
    * @描述：处理GET请求，返回templates下的index.html页面
    * @return:String
    */
   @GetMapping("/")
   public String index() {
       return "index";
   }
}

启动项目，在浏览器中访问http://localhost:8080/index/，即可看到效果图：

这就是一个完整的表单页，在项目实战中，用到表单的地方非常多，比如登录、注册、搜索框等都是以用表单采集信息，提交到服务端处理。

所以构建表单、服务器端接收表单、校验表单等操作是Java Web入门基础的必备技能。

05 资料大放送

《阿里巴巴Java开发手册》提取码：13n9
项目源码提取码：qjn4