(V) springboot integrates the thmeleaf template to realize simple login
1. Modify the user table in the note in the previous section, add a password field, and require the username to be UNIQUE to realize login verification. The table structure is as follows.
CREATE TABLE `user` ( `id` int(11) unsigned NOT NULL AUTO_INCREMENT, `name` varchar(128) NOT NULL COMMENT 'Name', `phone` varchar(16) DEFAULT NULL COMMENT 'User mobile number', `create_time` datetime DEFAULT NULL COMMENT 'Creation time', `age` int(4) DEFAULT NULL COMMENT 'Age', `password` varchar(45) NOT NULL COMMENT 'Password', PRIMARY KEY (`id`), UNIQUE KEY `name_UNIQUE` (`name`) ) ENGINE=InnoDB AUTO_INCREMENT=26 DEFAULT CHARSET=utf8
2. Add a new method to query user by name. The specific code will not be written
3. Add thmeleaf dependency in pom file
<dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId> </dependency>
4. The index.html page is placed in the templates folder. In order to beautify the page, I used a template. The css file and image file are placed in the new folder under the static directory, and the code will not be uploaded.
<!DOCTYPE html> <html> <head> <title>Login</title> <meta charset="utf-8"> <link href="/css/style.css" rel='stylesheet' type='text/css' /> <meta name="viewport" content="width=device-width, initial-scale=1"> <script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script> </head> <body> <div class="main"> <div class="login-form"> <h1>User login</h1> <div class="head"> <img src="/images/user.png" alt=""/> </div> <form enctype="multipart/form-data" method="post" action="/user/login"> <input type="text" class="text" name="username" value="User name" > <input type="password" name="password" value="password" > <div class="submit"> <input type="submit" value="Land"> </div> <p><a href="#">Forget password ?</a></p> </form> </div> </div> </body> </html>
5. To ensure static file loading, you need to configure in application.properties
#Load static files, otherwise there may be problems in loading css, image and other files
spring.mvc.static-path-pattern=/**
#It is recommended to turn off cache during development for debugging
spring.thymeleaf.cache=false
6. Write a Controller to realize login and user verification
/** * */ package com.zc.mybatis.controller; import java.util.Date; import javax.servlet.http.HttpServletRequest; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.ResponseBody; import com.zc.mybatis.domain.User; import com.zc.mybatis.service.UserService; /** * @author zhangchao * */ @Controller public class LoginController { //Landing page @RequestMapping(value = "/") public Object hello() { return "index"; } @Autowired private UserService userService; //Add test users @RequestMapping(value="/user/add") @ResponseBody public Object addUsers() { User user = new User(); for(int i = 1;i<6;i++) { user.setName("user"+i); user.setPassword("123456"); user.setPhone("124514144411"); user.setAge(19); user.setCreateTime(new Date()); userService.add(user); } return "New test user"; } //User calibration @RequestMapping(value = "/user/login") @ResponseBody public Object login(HttpServletRequest request) { String username = request.getParameter("username"); String password = request.getParameter("password"); password = password.trim(); User user = userService.getUserByName(username); if (null != user && password.equals(user.getPassword())) { return "Landing successfully"; } else { return "Landing failed"; } } }
7. Run localhost:8080/user/add to add a new test user, and then access the login page through localhost:8080. Enter the user name: user 1, password: 123456, and the page returns to login successfully.