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">

‍

登录的请求原先是发送到 index.html（第 26 行）：

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

‍

我们用 @{} 的语法，改为发送到 login 路径：@{} 会自动拼接我们的项目路径（如有）

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

‍

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

‍

# 表单重复提交的问题

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

‍

原因分析：我们之前是转发，也就是接受 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>