学习内容

使用Thymeleaf编写一个HTML页面
访问静态资源
如何传递参数给HTML页面
模拟登录验证过程

构建项目

上一节已经说过如何构建一个SpringBoot项目，SpringBoot（一）Hello World 。由于本文采用了Thymeleaf模板引擎，因此需要添加Thymeleaf依赖，pom.xml如下所示

    <dependencies>
        <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-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
    </dependencies>

编写HTML页面

新建LoginController，代码如下

package com.example.springbootchapter2;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;

/**
 * Created by lzc
 * 2019/4/6 21:27
 */

@Controller
public class LoginController {
    /**
     * 登录页面
     * @return
     */
    @GetMapping("/login")
    public String login() {
        // 这里返回的login指的是src/main/resources/templates目录下的login.html
        // 因此，我们需要在src/main/resources/templates目录下新建一个login.html
        // 当我们通过浏览器访问localhost:8080/login时即可访问到我们编写的login.html
        return "login";
    }
}

src/main/resources/templates/login.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录页面</title>
</head>
<body>
    <h2>登录页面</h2>
    <form>
        账号: <input type="text" name="username"><br>
        密码: <input type="password" name="password"><br>
        <input type="submit" value="登录">
    </form>
</body>
</html>

启动项目，效果如下

访问静态资源

编写网站的时候我们经常会用到css、js、图片这些静态资源。SpringBoot访问静态资源的默认路径为src/main/resources/static，如果你的src/main/resources/目录下没有static文件夹可以自己新建一个。
以图片为例，我在src/main/resources/static下存放了一张图片，文件名为 lzc.jpg，在浏览器输入localhost:8080/lzc.jpg 即可访问到这张图片。HTML代码访问图片的方式如下

<img src="/lzc.jpg">

传递参数给HTML页面

上面我们已经学会了如何编写一个HTML页面，下面将介绍如何传递参数给HTML页面以及如何在HTML页面中接收参数。以上面的登录页面为例，传递两个参数到登录页面，LoginController代码修改如下：

package com.example.springbootchapter2;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;

/**
 * Created by lzc
 * 2019/4/6 21:27
 */

@Controller
public class LoginController {
    /**
     * 登录页面
     * @return
     */
    @GetMapping("/login")
    public String login(Model model) {
        model.addAttribute("data1","传递给登录页面的第一个参数");
        model.addAttribute("data2","传递给登录页面的第二个参数");
        // 这里返回的login指的是src/main/resources/templates目录下的login.html
        // 因此，我们需要在src/main/resources/templates目录下新建一个login.html
        // 当我们通过浏览器访问localhost:8080/login时即可访问到我们编写的login.html
        return "login";
    }
}

我们可以看到login方法参数多了Model这个对象，使用Model对象传递了两个参数到登录页面。下面贴出登录页面是如何接收参数的

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>登录页面</title>
</head>
<body>
    <h2>登录页面</h2>
    <form>
        账号: <input type="text" name="username"><br>
        密码: <input type="password" name="password"><br>
        <input type="submit" value="登录">
    </form>
    <h3 th:text="${data1}"></h3>
    <h3 th:text="${data2}"></h3>
</body>
</html>

这里需要注意的是，由于使用了Thymeleaf标签，因此需要引用命名空间 <html xmlns:th="http://www.thymeleaf.org"> ，在html中引入此命名空间，可避免编辑器出现html验证错误，虽然加不加命名空间对Thymeleaf的功能没有任何影响。T这里只是展示了如何接收字符串的使用，其他用法请自行上网查找。

启动项目，效果如下

模拟登录验证过程

在LoginController中新增一个验证登录的方法，代码如下

package com.example.springbootchapter2;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestParam;

/**
 * Created by lzc
 * 2019/4/6 21:27
 */

@Controller
public class LoginController {
    /**
     * 登录页面
     * @return
     */
    @GetMapping("/login")
    public String login(Model model) {
        model.addAttribute("data1","传递给登录页面的第一个参数");
        model.addAttribute("data2","传递给登录页面的第二个参数");
        // 这里返回的login指的是src/main/resources/templates目录下的login.html
        // 因此，我们需要在src/main/resources/templates目录下新建一个login.html
        // 当我们通过浏览器访问localhost:8080/login时即可访问到我们编写的login.html
        return "login";
    }

    /**
     * 登录验证，注意该方法的请求方式为POST
     * @return
     */
    @PostMapping("/dologin")
    public String dologin(@RequestParam(name = "username")String username,@RequestParam(name="password")String password,Model model) {
        // 假设用户名为admin，密码为admin
        if (username.equals("admin") && password.equals("admin")) {
            // 登录成功，返回到home.html
            model.addAttribute("message","登录成功");
            return "home";
        } else {
            // 登录失败，error.html
            model.addAttribute("message","账号或密码输入错误！");
            return "error";
        }
    }
}

修改登录页面的代码，在form中添加method="post"和action="/dologin"

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>登录页面</title>
</head>
<body>
    <h2>登录页面</h2>
    <form method="post" action="/dologin">
        账号: <input type="text" name="username"><br>
        密码: <input type="password" name="password"><br>
        <input type="submit" value="登录">
    </form>

    <h3 th:text="${data1}"></h3>
    <h3 th:text="${data2}"></h3>

</body>
</html>

home.html代码

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h2 th:text="${message}"></h2>
</body>
</html>

error.html代码

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h2 th:text="${message}"></h2>
</body>
</html>

启动项目

输入正确的用户名和密码