Thymeleaf模板

最新推荐文章于 2025-05-03 15:57:46 发布

原创最新推荐文章于 2025-05-03 15:57:46 发布 · 486 阅读

0 ·

CC 4.0 BY-SA版权

本文档介绍如何创建一个Spring Boot项目ThymeleafDemo，包括项目初始化、Thymeleaf属性配置、登录控制器LoginController的创建、模板文件login.html的制作，以及项目启动后访问页面的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、创建项目ThymeleafDemo

1、创建Spring Boot项目ThymeleafDemo并且完成项目初始化工作
在这里插入图片描述
2、在全局配置文件里配置Thymeleaf属性

3、创建登录控制器LoginController

package net.hy.lesson09.controller;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;

import javax.servlet.http.HttpServletRequest;
import java.util.Calendar;

/**
 * 功能：登录控制器
 * 作者：黄运
 * 日期：2020年08月14日
 */
@Controller
public class LoginController {
    /**
     * 通过请求“toLoginPage”跳转到templates目录下的
     * login页面，并把当前年份数据保存到模型对象中
     */
    @GetMapping("toLoginPage")
    public String toLoginPage(Model model){
        model.addAttribute("currentYear", Calendar.getInstance().get(Calendar.YEAR));
        return "login"; // 返回逻辑页面视图名称
    }
    @PostMapping("/login")
    public String login(HttpServletRequest request, Model model) {
        // 获取表单提交的用户名与密码
        String username = request.getParameter("username");
        String password = request.getParameter("password");
        // 判断用户是否登录成功（假设合法用户名为howard，密码为903213）
        if (username.equals("howard") && password.equals("903213")) {
            model.addAttribute("loginMsg", "恭喜，用户登录成功~");
            return "success";
        } else {
            model.addAttribute("loginMsg", "遗憾，用户登录失败~");
            return "failure";
        }
    }

}

4、在templates目录下创建模板文件login.html

在这里插入图片描述

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/">
<head>
    <meta charset="UTF-8">
    <title>用户登录</title>
    <link th:href="@{/bootstrap-4.0.0/css/bootstrap.css}" rel="stylesheet">
    <javascript th:src="@{/bootstrap-4.0.0/js/jquery-3.4.1.min.js}"></javascript>
    <javascript th:src="@{/bootstrap-4.0.0/js/bootstrap.bundle.js}"></javascript>
    <javascript th:src="@{/bootstrap-4.0.0/js/bootstrap.js}"></javascript>
</head>
<body>
<div class="col-6 m-auto" style="margin-top:30px!important;">
    <div class="text-center">
        <span th:text="${currentYear}">今年</span> -
        <span th:text="${currentYear} + 1">明年</span>
    </div>
    <div class="border border-info bg-light p-2" style="border-radius: 5px">
        <form action="/login" method="post">
            <h3 class="text-center">用户登录</h3>
            <div class="mt-1">
                <input type="text" id="username" name="username" class="form-control" placeholder="输入用户名" autofocus>
            </div>
            <div class="mt-1">
                <input type="password" id="password" name="password" class="form-control" placeholder="输入密码">
            </div>
            <div class="checkbox text-center">
                <label>
                    <input class="form-check-input text-center" type="checkbox">记住我
                </label>
            </div>
            <div>
                <button class="btn btn-lg btn-primary btn-block" id="login" type="submit">登录</button>
            </div>
        </form>
    </div>
</div>
</body>
</html>

5、启动项目并访问http://localhost:8080/toLoginPage
在这里插入图片描述