SpringBoot整合完成Themeleaf完成登录功能

概述

用SpringBoot整合完成Themeleaf完成简单的登录功能，有错误提示和判空处理

具体实现

表格：

<form method="post" th:action="@{testLogin}" th:object="${user}">
    <label>
        <input type="text" th:field="*{name}" placeholder="账号">
    </label>
    <label>
        <input type="password" th:field="*{password}" placeholder="密码">
    </label>
    <input type="submit" value="登录">
</form>

其中th:action 表示提交之后是别的controller
th:field 表示对象的属性，这里和vue的v-model差不多
需要注意的是，
这里的的对象是之前传递过来的上下文里面的，所以需要绑定，否则会报错。

//进入登陆页面
@GetMapping("login")
public String index(Model model){
    //添加一个对象到上下文
    model.addAttribute("user",new AdminUser());
    return "index";
}

之后就是对传递过来的值进行判断并跳转

 @PostMapping("testLogin")
    public String testLogin(@ModelAttribute AdminUser user,Model model){
        System.out.println(user);
        //没有输入
        if(user.getPassword().equals("") || user.getName().equals("")){
            model.addAttribute("msg1","账号或者密码不能为空");
            model.addAttribute("msgCode","401");
            model.addAttribute("user",new AdminUser());
            return "index";
        }
        //登录成功跳转到指定页面
        if (userService.judgeLogin(user)) {
            model.addAttribute("user",user);
            model.addAttribute("msg","登录成功");
            System.out.println("登录成功");
            return "mytest";
        }
        //登录失败进行提示
        else {
            model.addAttribute("msg2","账号或者密码错误");
            model.addAttribute("msgCode","402");
            model.addAttribute("user",new AdminUser());
            System.out.println("登录失败");
            return "index";
        }
    }

我这里是放到数据库进行判断的。提前写好了就不赘述了。
为了界面友好，将返回值信息进行提示。

<script th:inline = "javascript">
    if([[${msgCode}]] === "402"){
        alert([[${msg2}]])
    }
    if([[${msgCode}]] === "401"){
        alert([[${msg1}]])
    }
</script>

在登录成功的页面进行信息的展示

<h1 th:text="欢迎登录+${user.name}"></h1>

效果展示

正常输入账号密码之后

会跳转到其他页面并显示用户信息

如果输入账号密码错误会有提示

如果不输入也会有提示

出现的问题

1. 获取静态资源获取不到的时候加上

spring:
  mvc:
    static-path-pattern: /static/**

2. mybatis使用#和$

    <select id="getByName" resultType="adminUser">
        select * from admin_user
        where name =${name}
    </select>

用$的时候，会直接替换，sql如下

SQL: select * from admin_user         where name =mango

而用#则是先变成占位符 ? 再进行传递，所以为了防止sql注入，尽量使用#
sql注入：简单来说就是一些外在因素导致sql语句失效或者与原意不同。

参考

部分内容参考
登录页面css

总结