学习内容
- 使用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>
启动项目
代码地址：https://github.com/923226145/SpringBoot-learning/tree/master/springboot-chapter2
