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>