thymeleaf从创建项目到登录成功快速入门（保姆级登录案例教程）

最新推荐文章于 2023-08-16 00:48:19 发布

阿韩想静静

最新推荐文章于 2023-08-16 00:48:19 发布

阅读量954

点赞数 2

分类专栏： Java 文章标签： spring boot java

本文链接：https://blog.csdn.net/weixin_45952509/article/details/120328907

版权

Java 专栏收录该内容

15 篇文章 2 订阅

订阅专栏

从创建项目到开发、打包运行详细截图合集。最近有需求做个简单的工具，这种事情当然是随手就来，本来考虑使用JavaGUI的，但之前毕设和一个软著项目都是GUI写的，于是报着熟悉一下thymeleaf的想法动手试了试，总结使用流程记录一下，希望可以帮到更多想要学习thymeleaf的同学快速入门。

一、项目创建

1.使用IDEA的模板创建，File→New→Project→Spring Initializr→Next

创建项目
下一步

2.填写必要信息

Group（会显示在pom文件的groupId标签中），Artifact（pom文件name标签），选择Java版本，其他会自动填写，Next
组，name，java版本

3.选择模板

勾选Developer Tools 的 Lombok 和 Web 的 spring-boot-starter-web 和 Template Engines 的 Thymeleaf然后Next（Lombok可以不用，自己加get,set方法）
在这里插入图片描述

填写项目名，存放路径，Finish完成
项目名编辑

4.创建完成

可以看到如下包结构
在这里插入图片描述

二、pom依赖及后端接口

1.pom文件加校验注解的依赖

        <!-- 校验注解 -->
        <dependency>
            <groupId>org.hibernate.validator</groupId>
            <artifactId>hibernate-validator</artifactId>
            <version>6.1.7.Final</version>
        </dependency>
        <dependency>
            <groupId>javax.validation</groupId>
            <artifactId>validation-api</artifactId>
            <version>1.1.0.Final</version>
        </dependency>

2.controller代码

package com.han_qingsong.thymeleaflogin.web;

import com.han_qingsong.thymeleaflogin.web.vo.RequestParam;
import org.springframework.validation.BindingResult;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.servlet.ModelAndView;

import javax.validation.Valid;

@RestController
public class ThymeleafController {

    // 访问根目录转到login页面
    @GetMapping("/")
    public ModelAndView indexAll(ModelAndView modelAndView){
        modelAndView.setViewName("login");
        return modelAndView;
    }

    // login页面内的login路径from表单提交接口
    @PostMapping("/login")
    public ModelAndView index(ModelAndView modelAndView, @Valid RequestParam param, BindingResult bindingResult) {
        if(bindingResult.hasErrors()){
            modelAndView.addObject("error",bindingResult.getFieldError().getDefaultMessage());
            modelAndView.setViewName(modelAndView.getViewName());
            return modelAndView;
        }

        String userName = param.getName();
        String passWard = param.getPassward();

        // 验证账号密码后跳转到主页或者提示错误
        if ("admin".equals(userName) && "123456".equals(passWard)){
            modelAndView.setViewName("home");
            return modelAndView;
        }else {
            modelAndView.addObject("error","账号或密码错误！");
            modelAndView.setViewName("login");
            return modelAndView;
        }
    }
}

3.请求参数对象

package com.han_qingsong.thymeleaflogin.web.vo;

import lombok.Data;

import javax.validation.constraints.NotEmpty;
import javax.validation.constraints.Size;

@Data
public class RequestParam {

    @NotEmpty(message = "账号不能为空")
    private String userName;

    @Size(min=6,max=10,message = "密码长度必须6到10位")
    private String passward;
}

三、html页面及配置启动

1.配置

写完controller代码后你会发现代码的跳转路径下有波浪线，提示没有找到对应页面，所以接下来就要在resource包下创建对应的html页面，顺手把配置文件改成yml格式
在这里插入图片描述

2.页面内容

i.login.html

注意顶部html标签中引入thymeleaf，且from标签中的method不加th

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>login</title>
</head>
<body>
<form th:action="@{login}" method="post">
    <div>
        <span id="basic-addon0">账号:</span>
        <input id="userName" th:name="userName" placeholder="账号" aria-describedby="basic-addon0"/>
    </div>
    <div>
        <span id="basic-addon1">密码:</span>
        <input id="password" th:name="passward" type="password" placeholder="密码" aria-describedby="basic-addon1"/>
    </div>
    <br/>
    <button type="submit" style="width:220px;"> 登录 </button>
</form>
</body>
</html>

ii.home.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>success page</title>
</head>
<body>
    <h1>登录成功</h1>
</body>
</html>

iii.yml

server:
  port: 80

四、效果查看

在这里插入图片描述
登录页面

输入账号不输密码

输入错误密码

输入正确密码

整个流程就到这里啦，从thymeleaf项目创建，包结构，pom依赖导入到前端页面简单实现，有问题的都可以私信或者评论
最后的这个账号密码回填是后面改的，前面截图里可能没有，需要的同学可以评论或者私信，或者自己试着挑战一下