springboot 学习笔记(五)

2019-01-15 07:04:19来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

(五)springboot整合thymeleaf模板,实现简单的登陆

    1、修改上一节笔记中的user表,新增一个password字段,同时要求username为UNIQUE,以实现登陆校验,表结构如下。

 

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

 

    2、新增一个通过name查询user的方法,具体代码就不写了

    3、pom文件中增加thymeleaf依赖

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

        4、index.html页面放在templates文件夹下,为了页面美化,我使用了一个模板,css文件和image文件放在了static目录下的新建文件夹中,代码就不上传了。

<!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>

        5、为了保证静态文件加载,需要在application.properties进行配置

 

#加载静态文件,否则css、image等文件加载可能出现问题
spring.mvc.static-path-pattern=/**
#开发过程中建议关闭cache,方便调试
spring.thymeleaf.cache=false 

 

     6、写一个Controller来实现登陆及用户校验

 

/**
 * 
 */
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 "登陆失败";
        }
    }
}

 

 

      7、先运行localhost:8080/user/add来新增测试用户,然后通过localhost:8080访问登陆页面,输入用户名:用户1,密码:123456,页面返回 登陆成功。

 

 

 

 


原文链接:https://www.cnblogs.com/codingstudy/p/10271831.html
如有疑问请与原作者联系

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:Eclipse中Tomcat的配置

下一篇:maven的安装和环境配置