Spring Boot基础学习09 - Thymeleaf模板引擎_thymeleaf传参controller中怎么设置默认值-CSDN博客

本文详细介绍了如何在Spring Boot项目中整合Thymeleaf模板引擎和Bootstrap，包括创建Thymeleaf项目、配置Thymeleaf、创建登录控制器和模板文件、集成Bootstrap、编写登录验证、访问模型数据以及JavaScript与模型数据交互。通过实例演示了用户登录、个人信息展示和商品列表的页面实现。

文章目录

一、Spring Boot整合Thymeleaf
二、Spring Boot集成Bootstrap
三、Thymeleaf访问模型里的数据
四、课后作业
- 任务：利用MyBatis、JPA或Redis技术，从数据库读取用户信息进行验证用户是否登录成功

一、Spring Boot整合Thymeleaf

（一）创建Spring Boot项目ThymeleafDemo

在这里插入图片描述

（二）在全局配置文件里配置Thymeleaf属性

在这里插入图片描述

#缓存配置，默认即是true，开发阶段设置为false
spring.thymeleaf.cache = false
#设置模板使用的编码为utf-8
spring.thymeleaf.encoding = UTF-8
#指定为模板使用的模式为html5，默认html
spring.thymeleaf.mode = HTML5
#指定前缀，默认位置为/templates/，可以修改成其它位置
spring.thymeleaf.prefix = classpath:/templates/
#指定模板文件后缀，默认值为.html，可以修改成其它值
spring.thymeleaf.suffix = .html

（三）创建登录控制器LoginController

在net.lbj.lesson09包里创建controller子包并在包中创建LoginController控制器
在这里插入图片描述

package net.lbj.lesson09.controller;

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

import java.util.Calendar;

/**
 * 登录控制器
 * 20210519
 */
@Controller
public class LoginController {
   
   
    /**
     *通过请求“toLoginPage”跳转到templates目录下
     * login页面，并把当前年份数据保存到模型对象里
     */
    @GetMapping("/toLoginPage")
    public String toLoginPage(Model model) {
   
   
        model.addAttribute("currentYear", Calendar.getInstance().get(Calendar.YEAR));
        return "login";
    }
}

（四）创建模板文件，获取控制器传来的动态数据

在resources/templates目录下创建模板文件login.html
在这里插入图片描述

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/">
<head>
    <meta charset="UTF-8">
    <title>用户登录</title>
</head>
<body>
    <span th:text="${currentYear}">当年</span>
    <span th:text="${currentYear}" + 1>明年</span>
</body>
</html>

在这里插入图片描述

（五）启动项目，访问http://localhost:8080/toLoginPage

在这里插入图片描述

课堂作业

创建用户实体类 - user

package net.lbj.lesson09.bean;

import java.util.Date;

/**
 * 用户实体类
 * 20210519
 */
public class User {
   
   
    private int id;
    private String username;
    private String password;
    private String telephone;
    private Date registerTime;
    private int popedom;

    public int getId() {
   
   
        return id;
    }

    public void setId(int id) {
   
   
        this.id = id;
    }

    public String getUsername() {
   
   
        return username;
    }

    public void setUsername(String username) {
   
   
        this.username = username;
    }

    public String getPassword() {
   
   
        return password;
    }

    public void setPassword(String password) {
   
   
        this.password = password;
    }

    public String getTelephone() {
   
   
        return telephone;
    }

    public void setTelephone(String telephone) {
   
   
        this.telephone = telephone;
    }

    public Date getRegisterTime() {
   
   
        return registerTime;
    }

    public void setRegisterTime(Date registerTime) {
   
   
        this.registerTime = registerTime;
    }

    public int getPopedom() {
   
   
        return popedom;
    }

    public void setPopedom(int popedom) {
   
   
        this.popedom = popedom;
    }

    @Override
    public String toString() {
   
   
        return "User{" +
                "id=" + id +
                ", username='" + username + '\'' +
                ", password='" + password + '\'' +
                ", telephone='" + telephone + '\'' +
                ", registerTime=" + registerTime +
                ", popedom=" + popedom +
                '}';
    }
}

在登录控制器的toLoginPage()方法里，创建用户对象，放入模型对象
登录页面 -login.html
在登录页面显示用户信息，运行效果
第一种:

用户信息

![在这里插入图片描述](https://img-blog.csdnimg.cn/20210519154103564.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xiajUwNjM=,size_16,color_FFFFFF,t_70)

第二种：
编号：1

用户名：张晓红

密码：111111
电话：12312656845

注册时间：2019-1-1

权限：1

在这里插入图片描述

二、Spring Boot集成Bootstrap

Bootstrap4教程：https://www.runoob.com/bootstrap4/bootstrap4-tutorial.html

（一）集成Bootstrap

1.引用在线文档的方式

在这里插入图片描述

<!-- 新 Bootstrap4 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单，包含了 popper.min.js -->
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
<!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>

2.下载Bootstrap并引用的方式

保存位置
在这里插入图片描述

将bootstrap-4.0.0目录拷贝项目的static目录

（二）编写登录页面login.html

1.集成Bootstrap

在这里插入图片描述

2.编写登录页面 - login.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/">
<head>
    <meta charset="UTF-8">
    <title>用户登录</title>
    <link th:href</