《5K入门级项目实战：好来屋在线影院》之第 4 战 —— 实现后台登录功能、thymeleaf 模板引擎

最新推荐文章于 2022-04-11 20:45:44 发布

流放深圳

最新推荐文章于 2022-04-11 20:45:44 发布

阅读量693

点赞数 1

分类专栏：新手入门级项目文章标签： thymeleaf 模板引擎

本文链接：https://blog.csdn.net/biandanloveyou/article/details/102981923

版权

新手入门级项目专栏收录该内容

13 篇文章 1 订阅

订阅专栏

一个好的系统都需要有后台管理功能，以便对系统的内容进行维护。

thymeleaf 模板引擎

可以先去我的博客学习一下 SpringBoot 提供的常用模板引擎：https://blog.csdn.net/BiandanLoveyou/article/details/83056547

我们在 pom.xml 配置文件里添加 thymeleaf 的依赖：

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>

在项目的 resources 目录下创建 templates 目录，用于存放项目用到的模板。

接着在模板目录下，创建一个登录页面的 login.html 文件

完整的 login.html 内容（纯手敲代码，页面属于最低档，但功能齐全了）：

<!DOCTYPE html>
<!-- 需要引入 thymeleaf -->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>好来屋在线影院后台登录</title>
</head>
<script type="text/javascript">
    //提交表单时的请求方法
    function submitForm() {
        var userName = document.getElementById("userName").value;
        var password = document.getElementById("password").value;
        if("" == userName){
            alert("请输入用户名！");
            return;
        }
        if("" == password){
            alert("请输入密码！");
            return;
        }
        // 找到 id=loginForm 的表单进行提交
        document.getElementById("loginForm").submit();
    }
</script>
<!-- 最简单的布局：居中 -->
<body>
    <!-- 定义一个 form 表单，id=loginForm，请求的 URL 地址用 @{…} 代替-->
    <form id="loginForm" th:action="@{/admin}" method="post" style="text-align: center">
        <div>
            <label style="color: red;font-size: 20px;">欢迎使用“好来屋在线影院”管理系统</label>
        </div>
        <br>
        <div>
            <input type="text" id="userName" name="userName" value="" placeholder="请输入用户名">
        </div>
        <br>
        <div>
            <input type="password" id="password" name="password" value="" placeholder="请输入密码">
        </div>
        <br>
        <div>
            <button type="button" onclick="submitForm()">登 录</button>
        </div>
    </form>
 
</body>
</html>

注意：

1、提交表单的 URL 地址是：admin，thymeleaf 模板支持 th:action="@{/admin}" 这种写法，还需要有一个接口 admin 来处理后台登录请求（稍后说）。

2、表单的字段必须有 name 属性（比如 name=“userName”）对应后台的实体属性，否则无法获取到值。

web 浏览器不能直接访问到模板文件，需通过调用接口并返回视图控制器的形式。接下来我们创建一个 LoginController

LoginController 完整代码如下：

package com.movie.controller;

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

/**
 * @author biandan
 * @signature 让天下没有难写的代码
 * @create 2019-11-10 上午 11:18
 */
@Controller //不可以使用 @RestController
public class LoginController {

    @RequestMapping(value = "/login")
    public String userLogin(){
        return "login";//返回的是 html 的文件名前缀
    }

}

说明：

1、LoginController 注解不可以使用 @RestController 这里使用的是 SpringMVC 做视图控制器，返回的是视图的名称。

2、@RequestMapping(value = "/login") 对应的是前端 html 的 action 值。

OK，这时候，我们启动服务，浏览器输入地址：http://localhost:8080/login 就可以访问到模板页面了。

这时候点击登录是没有任何业务逻辑的，我们需要做一下逻辑处理。判断这个用户名和密码是不是跟数据库的匹配，匹配成功，允许登录。登录成功后，进入到管理后台的页面。

首先我们创建一个后台管理的主页面：main.html，代码先很简单的放一句话来提示登录成功。main.html 文件我们创建一个 admin 目录来存放，如下图：

main.html 的代码如下（超级简单）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>好来屋在线影院管理页面</title>
</head>
<body>
    <label style="color: red;font-size: 20px;">当你看到这个页面时，说明已经登录成功了！</label>
</body>
</html>

OK，我们现在来创建处理登录请求的接口：admin。在 LoginController 类里添加此接口，完整代码如下：

package com.movie.controller;

import com.movie.entity.UserAccountEntity;
import com.movie.manage.UserAccountManage;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpSession;

/**
 * @author biandan
 * @signature 让天下没有难写的代码
 * @create 2019-11-10 上午 11:18
 */
@Controller //不可以使用 @RestController
public class LoginController {

    @Autowired
    private UserAccountManage userAccountManage;

    //后台登录请求
    @RequestMapping(value = "/login")
    public String userLogin() {
        return "login";//返回的是 html 的文件名前缀
    }

    //进入后台管理的请求
    @RequestMapping(value = "/admin", method = RequestMethod.POST)
    public String adminLogin(UserAccountEntity reqEntity, HttpServletRequest request) {
        //根据请求的实体信息，查询数据库是否有记录
        UserAccountEntity dbEntity = userAccountManage.findByEntity(reqEntity);
        if (null == dbEntity) {//数据库无记录，登录失败。返回错误信息
            request.setAttribute("errorMsg", "用户名或密码错误！");
            return "redirect:/login";//重定向到 login 接口，跳转到登录界面
        } else {//登录成功
            HttpSession session = request.getSession();//将本次会话存入 session 中
            session.setAttribute("currentUser", dbEntity.getUserName());
            return "admin/main";//返回 resources/templates/admin/main.html 页面
        }
    }

}

说明：需要注意登录方法里 return 的值：有重定向和返回页面的。

将 currentUser 作为 key 保存到本次登录的会话 session 中，前端可以获取得到里面的值，即登录名。

admin 接口需要查询数据库验证用户信息，所以需要在以下几个文件里增加判断方法。

① UserAccountManage 接口里添加代码：

//根据请求的实体信息，查询数据库是否有记录
    UserAccountEntity findByEntity(UserAccountEntity entity);

② UserAccountManageImpl 实现类里增加代码：

    //根据请求的实体信息，查询数据库是否有记录
    @Override
    public UserAccountEntity findByEntity(UserAccountEntity entity){
        UserAccountEntity dbEntity = null;
        try{
            dbEntity = userAccountService.findByEntity(entity);
        }catch (Exception e){
            e.printStackTrace();
        }
        return dbEntity;
    }

③ UserAccountService 接口里增加代码：

    //根据请求的实体信息，查询数据库是否有记录
    @Transactional(readOnly = true)//只读的权限
    public UserAccountEntity findByEntity(UserAccountEntity entity){
        return userAccountDao.findByEntity(entity);
    }

④ UserAccountDao 接口里增加代码：

    //根据请求的实体信息，查询数据库是否有记录
    @Transactional(readOnly = true)//只读的权限
    UserAccountEntity findByEntity(UserAccountEntity entity);

⑤ UserAccountEntityMapper.xml 映射文件里增加代码：

  <!-- 根据请求的实体信息，查询数据库是否有记录 -->
  <select id="findByEntity" resultMap="BaseResultMap">
    select id, user_name, password
    from user_account
    where user_name = #{userName,jdbcType=VARCHAR} and password = #{password,jdbcType=VARCHAR}
  </select>

写完代码后，重启服务。浏览器地址输入：http://localhost:8080/login 在登陆页面输入数据库的用户信息

这是数据库的：

这是浏览器输入的：

点击登录，看到结果：

入门级项目数据库的密码没有进行加密，且从客户端传递到后台也是明文，这主要是为了入门。正式的项目中，不允许从前端传递到后台的是明文，也不允许存入数据库的密码是明文。记住这点。

流放深圳

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
《5K入门级项目实战：好来屋在线影院》之第 4 战 —— 实现后台登录功能、thymeleaf 模板引擎

一个好的系统都需要有后台管理功能，以便对系统的内容进行维护。thymeleaf 模板引擎可以先去我的博客学习一下 SpringBoot 提供的常用模板引擎：https://blog.csdn.net/BiandanLoveyou/article/details/83056547我们在 pom.xml 配置文件里添加thymeleaf 的依赖： <dep...
复制链接

扫一扫