注意:使用模板引擎需导入动态资源模板引擎驱动
1、下载资源
百度搜索bootstrap模板,即可找到免费资源下载
2、导入资源
-
资源目录
-
导入目录
3、处理请求
- 3.1 访问请求登录页
//访问http://localhost:8005 或者http://localhost:8005/login进入登录页
@GetMapping(value = {"/","login"})
public String toLogin(){
return "login";
}
http://localhost:8005
- 3.2 登录进入首页
@GetMapping(value = {"/","login"})
public String toLogin(){
return "login";
}
@PostMapping("/index")
public String toIndex(String username,String password){
return "index";
}
login.html
引入模板引擎
<!-->1、引入模板引擎<-->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
form处理
采用引擎方式确定请求方式与请求路径
<!-->2、form处理<-->
<form action="index.html" method="post" th:action="@{/index}">
- 3.3 刷新页面问题
每次进行页面刷新相当于重新登录,需要重定向解决
@Controller
public class UserController {
@GetMapping(value = {"/","login"})
public String toLogin(){
return "login";
}
// @PostMapping("/index")
// public String toIndex(String username,String password){
// return "index";
// }
//每次刷新页面都是重新登录,需要进行请求转发处理
@PostMapping("/index")
public String toIndex(String username,String password){
return "redirect:/indexPage";
}
@GetMapping("/indexPage")
public String indexPage(){
return "index";
}
}
- 3.4 限制访问
只能登录用户才能访问首页
1、新增实体类
@Data
@NoArgsConstructor
@AllArgsConstructor
public class User {
public String userName;
public String password;
}
2、login.html修改
给对象赋值,注意大小写保持一致
增加提示信息
<label style="color: red" th:text="${msg}"></label>
3、接口修改增加判断
- 增加账号密码校验,是否成功登录
- 增加用户信息校验是否为登录访问
- 增加Model消息提示
package com.springbootweb.Controller;
import com.springbootweb.Entiy.User;
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.RequestMapping;
import org.thymeleaf.util.StringUtils;
import javax.servlet.http.HttpSession;
@Controller
public class UserController {
@GetMapping(value = {"/","login"})
public String toLogin(){
return "login";
}
// @PostMapping("/index")
// public String toIndex(String username,String password){
// return "index";
// }
//每次刷新页面都是重新登录,需要进行请求转发处理
@PostMapping("/index")
public String toIndex(User user, HttpSession session, Model model){
if(!StringUtils.isEmpty(user.getUserName()) && user.getPassword().equals("123456")){
session.setAttribute("userInfo",user);
return "redirect:/indexPage";
} else {
model.addAttribute("msg","账号或密码错误");
return "login";
}
}
@GetMapping("/indexPage")
public String indexPage(HttpSession session,Model model){
Object user = session.getAttribute("userInfo");
if(user != null){
return "index";
} else {
model.addAttribute("msg","请先登录");
return "login";
}
}
}
4、优化
所有的html需要引入模板引擎
4.1 抽取公共内容在同一个js内,只需一次引入