springboot 學習筆記（五）

時間 2020-06-08

原文原文鏈接

（五）springboot整合thymeleaf模板，實現簡單的登錄

　　　　一、修改上一節筆記中的user表，新增一個password字段，同時要求username爲UNIQUE，以實現登錄校驗，表結構以下。javascript

CREATE TABLE `user` ( `id` int(11) unsigned NOT NULL AUTO_INCREMENT, `name` varchar(128) NOT NULL COMMENT '名稱', `phone` varchar(16) DEFAULT NULL COMMENT '用戶手機號', `create_time` datetime DEFAULT NULL COMMENT '建立時間', `age` int(4) DEFAULT NULL COMMENT '年齡', `password` varchar(45) NOT NULL COMMENT '密碼', PRIMARY KEY (`id`), UNIQUE KEY `name_UNIQUE` (`name`) ) ENGINE=InnoDB AUTO_INCREMENT=26 DEFAULT CHARSET=utf8

　　　　二、新增一個經過name查詢user的方法，具體代碼就不寫了css

　　　　三、pom文件中增長thymeleaf依賴html

 <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>

　　　　 四、index.html頁面放在templates文件夾下，爲了頁面美化，我使用了一個模板，css文件和image文件放在了static目錄下的新建文件夾中，代碼就不上傳了。java

<!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>用戶登錄</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="用戶名"  >
                        <input type="password" name="password" value="password" >
                        <div class="submit">
                            <input type="submit" value="登錄">
                         </div>    
                    <p><a href="#">忘記密碼 ?</a></p>
                </form>
            </div>
        </div>
                
</body>
</html>

　　　　 五、爲了保證靜態文件加載，須要在application.properties進行配置web

#加載靜態文件，不然css、image等文件加載可能出現問題 spring.mvc.static-path-pattern=/** #開發過程當中建議關閉cache，方便調試 spring.thymeleaf.cache=false

　　　　　六、寫一個Controller來實現登錄及用戶校驗spring

/** * */
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 { //登錄頁面
    @RequestMapping(value = "/") public Object hello() { return "index"; } @Autowired private UserService userService; //增長測試用戶
    @RequestMapping(value="/user/add") @ResponseBody public Object addUsers() { User user = new User(); for(int i = 1;i<6;i++) { user.setName("用戶"+i); user.setPassword("123456"); user.setPhone("124514144411"); user.setAge(19); user.setCreateTime(new Date()); userService.add(user); } return "新增測試用戶"; } //用戶校驗
    @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 "登錄成功"; } else { return "登錄失敗"; } } }