从 01 开始 从 01 开始
首页
  • 📚 计算机基础

    • 计算机简史
    • 数字电路
    • 计算机组成原理
    • 操作系统
    • Linux
    • 计算机网络
    • 数据库
    • 编程工具
    • 装机
  • 🎨 前端

    • Node
  • JavaSE
  • Java 高级
  • JavaEE

    • 构建、依赖管理
    • Ant
    • Maven
    • 日志框架
    • Junit
    • JDBC
    • XML-JSON
  • JavaWeb

    • 服务器软件
    • 环境管理和配置管理-科普篇
    • Servlet
  • Spring

    • Spring基础
  • 主流框架

    • Redis
    • Mybatis
    • Lucene
    • Elasticsearch
    • RabbitMQ
    • MyCat
    • Lombok
  • SpringMVC

    • SpringMVC 基础
  • SpringBoot

    • SpringBoot 基础
  • Windows 使用技巧
  • 手机
  • 最全面的输入法教程
  • 最全面的浏览器教程
  • Office
  • 图片类工具
  • 效率类工具
  • RSS
  • 码字工具
  • 各大平台
  • 校招
  • 五险一金等
  • 职场规划
  • 关于离职
  • 杂谈
  • 📖 读书

    • 读书工具
    • 读书笔记
  • 🌍 英语

    • 从零开始学英语
    • 英语兔的相关视频
    • Larry 想做技术大佬的相关视频
  • 🏛️ 政治

    • 反腐
    • GFW
    • 404 内容
    • 审查与自我审查
    • 互联网
    • 战争
  • 💰 经济

    • 关于税
    • 理财
  • 💪 健身

    • 睡眠
    • 皮肤
    • 口腔健康
    • 学会呼吸
    • 健身日志
  • 🏠 其他

    • 驾驶技能
    • 租房与买房
    • 厨艺
  • 电影

    • 电影推荐
  • 电视剧
  • 漫画

    • 漫画软件
    • 漫画推荐
  • 游戏

    • Steam
    • 三国杀
    • 求生之路
  • 小说
  • 关于本站
  • 关于博主
  • 打赏
  • 网站动态
  • 友人帐
  • 从零开始搭建博客
  • 搭建邮件服务器
  • 本站分享
  • 🌈 生活

    • 2022
    • 2023
    • 2024
    • 2025
  • 📇 文章索引

    • 文章分类
    • 文章归档

晓林

程序猿,自由职业者,博主,英语爱好者,健身达人
首页
  • 📚 计算机基础

    • 计算机简史
    • 数字电路
    • 计算机组成原理
    • 操作系统
    • Linux
    • 计算机网络
    • 数据库
    • 编程工具
    • 装机
  • 🎨 前端

    • Node
  • JavaSE
  • Java 高级
  • JavaEE

    • 构建、依赖管理
    • Ant
    • Maven
    • 日志框架
    • Junit
    • JDBC
    • XML-JSON
  • JavaWeb

    • 服务器软件
    • 环境管理和配置管理-科普篇
    • Servlet
  • Spring

    • Spring基础
  • 主流框架

    • Redis
    • Mybatis
    • Lucene
    • Elasticsearch
    • RabbitMQ
    • MyCat
    • Lombok
  • SpringMVC

    • SpringMVC 基础
  • SpringBoot

    • SpringBoot 基础
  • Windows 使用技巧
  • 手机
  • 最全面的输入法教程
  • 最全面的浏览器教程
  • Office
  • 图片类工具
  • 效率类工具
  • RSS
  • 码字工具
  • 各大平台
  • 校招
  • 五险一金等
  • 职场规划
  • 关于离职
  • 杂谈
  • 📖 读书

    • 读书工具
    • 读书笔记
  • 🌍 英语

    • 从零开始学英语
    • 英语兔的相关视频
    • Larry 想做技术大佬的相关视频
  • 🏛️ 政治

    • 反腐
    • GFW
    • 404 内容
    • 审查与自我审查
    • 互联网
    • 战争
  • 💰 经济

    • 关于税
    • 理财
  • 💪 健身

    • 睡眠
    • 皮肤
    • 口腔健康
    • 学会呼吸
    • 健身日志
  • 🏠 其他

    • 驾驶技能
    • 租房与买房
    • 厨艺
  • 电影

    • 电影推荐
  • 电视剧
  • 漫画

    • 漫画软件
    • 漫画推荐
  • 游戏

    • Steam
    • 三国杀
    • 求生之路
  • 小说
  • 关于本站
  • 关于博主
  • 打赏
  • 网站动态
  • 友人帐
  • 从零开始搭建博客
  • 搭建邮件服务器
  • 本站分享
  • 🌈 生活

    • 2022
    • 2023
    • 2024
    • 2025
  • 📇 文章索引

    • 文章分类
    • 文章归档
  • JavaSE

  • JavaSenior

  • JavaEE

  • JavaWeb

  • Spring

  • 主流框架

  • SpringMVC

  • SpringBoot

    • SpringBoot教程-尚硅谷

      • SpringBoot 课程介绍
      • Spring 和 SpringBoot
      • HelloWorld
      • 了解自动配置原理
      • 底层注解-@Configuration 详解
      • 底层注解-@Import 导入组件
      • 底层注解-@Conditional 条件装配
      • 原生配置文件引入-@ImportResource
      • 底层注解-配置绑定 @ConfigurationProperties
      • 自动配置原理
      • 自动配置流程
      • Lombok 简化开发
      • DevTools
      • Spring-Initailizr
      • 配置文件-Yaml 用法
      • Web 开发简介
      • web 开发-静态资源规则于定制化
      • 静态资源配置原理
      • Rest 映射及源码解析
      • 请求映射原理
      • 常用参数注解使用
      • MatrixVariable:矩阵变量
      • 各种类型参数解析原理
      • Servlet-API 参数解析原理
      • Model、Map 参数解析原理
      • 自定义对象参数绑定原理
      • 自定义 Converter 原理
      • 数据响应原理
      • 内容协商原理
      • 基于请求参数的内容原理
      • 自定义 MessageConverter 原理
      • Thymeleaf 初体验
      • web 实验-后台管理系统
        • 新建项目
        • 新增配置文件 application.yml
        • 静态资源准备
        • 新增 controller
        • 新增登录请求
        • 表单重复提交的问题
        • 校验是否登录
        • 修改首页的登录名
        • 源码
      • web 实验-抽取公共页面
      • web 实验-遍历数据
      • 源码分析-视图解析器与视图
      • 拦截器-登录检查与静态资源放行
      • 拦截器的执行时机和原理
      • 单文件和多文件上传的使用
      • 文件上传原理
      • 错误处理机制
      • 错误处理-底层组件源码分析
      • 异常处理流程
      • 几种异常处理原理
      • Web 原生对象注入
      • 嵌入式 Servlet 容器
      • 定制化原理
      • 数据库场景的自动配置分析和整合测试
      • 自定义方式整合 Druid
      • 通过 starter 整合 Druid
      • 整合 Mybatis
      • 使用注解整合 Mybatis
      • 整合 MybatisPlus 操作数据库
      • MybatisPlus-列表分页展示
      • 整合 Redis
      • 单元测试-Junit5
      • 单元测试-断言机制
      • 单元测试-前置条件
      • 单元测试-嵌套测试
      • 单元测试-参数化测试
      • 指标监控-基本概念
      • 指标监控-配置 EndPoint
      • 指标监控-可视化
      • 原理解析-Profile 功能
      • 配置文件深入
      • 自定义 Starter
      • SpringApplication 初始化过程
      • SpringBoot 完整启动过程
  • Java
  • SpringBoot
  • SpringBoot教程-尚硅谷
2023-08-22
目录

web 实验-后台管理系统

# 330.web 实验-后台管理系统

接下来我们整合 Thymeleaf 来整合一个新的项目 ‍

# 新建项目

为了方便,我们使用 Spring Initializr

‍

为了方便,先新建项目,然后再修改 SpringBoot 的版本;这里先选择 2.7.14,并添加 Web 开发相关的依赖,以及 Thymeleaf 的:

‍

然后我们的项目就创建好了 ‍

# 新增配置文件 application.yml

默认情况下是会生成 properties 的配置文件,我习惯用 yml 了,因此新建了一个,并将端口改为 9999

server:
  port: 9999
1
2

‍

# 静态资源准备

由于本系列教程的重点是 SpringBoot,因此这里不从头开始编写静态资源文件,而是直接提供。读者可以去 Gitee (opens new window) 或 GitHub (opens new window) 上下载目录:前端资源文件 demo

下载完后,将里面的 css、fonts、images 和 js 目录,copy 到自己项目中的 src/main/resources/static 目录中:

# 新增 controller

我们先将前端资源文件 demo 文件夹中的 login.html,copy 到 src/main/resources/templates 中。

然后新增一个 controller,用来跳转到登录页:

package com.peterjxl.learnspringbootwebadmin.controller;


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

@Controller
public class IndexController {


    /**
     * 登录页面
     * @return
     */
    @GetMapping(value = {"/", "/login"})
    public String loginPage(){
        return "login";
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

‍ 访问测试:

‍

# 新增登录请求

先将前端资源文件 demo 文件夹中的 index.html,copy 到 src/main/resources/templates 中,并改名为 main.html。

接下来新增一个方法,用来校验 login 页面提交的数据,成功后跳转到首页

@PostMapping("/login")
public String main(String username, String password){
    return "main";
}
1
2
3
4

打开 login.html 中,添加 th 的命名空间

<html lang="en" xmlns:th="http://www.thymeleaf.org">
1

‍ 登录的请求原先是发送到 index.html(第 26 行):

<form class="form-signin" action="index.html">
1

‍ 我们用 @{} 的语法,改为发送到 login 路径:@{} 会自动拼接我们的项目路径(如有)

 <form class="form-signin" action="index.html" method="post" th:action="@{/login}">
1

然后重启,我们随便输入用户名和密码,点击登录,可以正常登录:

‍

# 表单重复提交的问题

登录后,如果我们刷新,浏览器会让我们确认重新提交表单:

‍

原因分析:我们之前是转发,也就是接受 login 请求,然后提交表单,并返回 main.html。我们点击刷新,也是

解决方法:重定向到 main 页面。

@PostMapping("/login")
public String main(String username, String password){
    return "redirect:/main.html";
}
1
2
3
4

‍ 然后新增一个 main 页面的请求:

@GetMapping("/main.html")
public String mainPage(){
    return "main";
}
1
2
3
4

重启,然后测试,可以看到能正常登录,并且登录后刷新,也没问题

‍

注意:我们是不能直接访问 templates 里的文件的,必须经过模板引擎渲染,才能访问;能直接访问的是 static 目录下的文件 ‍

# 校验是否登录

此时有一个新的问题:一般来说,是登录成功后才跳转到 main 页面,但现在没有登录,也能直接访问 http://localhost: 9999/main.html,因此我们得先判断是否登录。为了方便模拟,我们新增一个 Bean:

package com.peterjxl.learnspringbootwebadmin.bean;
import lombok.Data;

@Data
public class User {
    private String userName;
    private String password;
}
1
2
3
4
5
6
7
8

‍ 在 login.html 中,给表单添加 name 属性,并且添加一个 label 标签,用来显示错误信息:

<label style="color:red" th:text="${msg}" ></label>
<input type="text" name="userName" class="form-control" placeholder="User ID" autofocus>
<input type="password" name="password" class="form-control" placeholder="Password">
1
2
3

‍ 登录的方法中,存储用户信息:

@PostMapping("/login")
public String main(User user, HttpSession session, Model model){
    if(StringUtils.hasLength(user.getUserName()) &&  StringUtils.hasLength(user.getPassword())){
        session.setAttribute("msg", "用户名或密码不能为空");
        return "redirect:/main.html";
    }else {
        model.addAttribute("msg", "用户名或密码错误");
        return "login";
    }
}
1
2
3
4
5
6
7
8
9
10

‍ 在首页的方法中,则加上判断是否登录的逻辑:

@GetMapping("/main.html")
public String mainPage(HttpSession session, Model model){
    Object loginUser = session.getAttribute("loginUser");
    if(loginUser != null) {
        return "main";
    }else {
        model.addAttribute("msg", "请重新登录");
        return "/login";
    }
}
1
2
3
4
5
6
7
8
9
10

不可能为每个方法都写校验,一般是用拦截器、过滤器等,这里只是简单处理

测试:现在我们来测试,首先不输入账户密码,不能登录:

如果直接访问 http://localhost: 9999/main.html,则会跳转回 login 页面:

# 修改首页的登录名

登录后,默认右上角会显示登录名:

‍

我们修改其为 User 用户的登录名;这里修改 main 页面的 370 行,改为 Thymeleaf 语法:

<a href="#" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
    <img src="images/photos/user-avatar.png" alt="" />
    [[${session.loginUser.userName}]]
    <span class="caret"></span>
</a>
1
2
3
4
5

‍ ps:[[]] 是 Thymeleaf 的行内写法 ‍ 重新登录,能正常显示:

‍

# 源码

已将本文源码上传到 Gitee (opens new window) 或 GitHub (opens new window) 的分支 demo1,读者可以通过切换分支来查看本文的示例代码 ‍

上次更新: 2025/5/17 12:26:09
Thymeleaf 初体验
web 实验-抽取公共页面

← Thymeleaf 初体验 web 实验-抽取公共页面→

最近更新
01
吐槽一下《僵尸校园》
05-15
02
2025 年 4 月记
04-30
03
山西大同 “订婚强奸案” 将会给整个社会带来的影响有多严重? - 知乎 转载
04-26
更多文章>
Theme by Vdoing | Copyright © 2022-2025 | 粤 ICP 备 2022067627 号 -1 | 粤公网安备 44011302003646 号 | 点击查看十年之约
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式