集成送水管理系统项目：SpringBoot+Thymeleaf+mybatisPlus+bootstrap（五）

1用户登录

前端页面使用Thymeleaf模板(跟JSP页面类似)，但是它的功能比JSP强大并且用法简洁

在登录页面输入用户名和密码，然后点击“登录”按钮，跳转到“后台管理系统”的主页

1.1 修改父工程的POM文件

在父工程的POM文件中新添加前端框架的依赖  

<webjars.bootstrap.version>3.3.7</webjars.bootstrap.version>
        <webjars.jquery.version>3.3.1</webjars.jquery.version>
​
            <!--前端bootstrap框架依赖jar包-->
            <dependency>
                <groupId>org.webjars</groupId>
                <artifactId>bootstrap</artifactId>
                <version>${webjars.bootstrap.version}</version>
            </dependency>
            <!--前端jquery框架jar包-->
            <dependency>
                <groupId>org.webjars</groupId>
                <artifactId>jquery</artifactId>
                <version>${webjars.jquery.version}</version>
            </dependency>

1.2 创建子模块(Module)

1.3 定义子模块的POM文件​    

<dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
            <!--排除SpringBoot默认依赖的所有日志包-->
            <exclusions>
                <exclusion>
                    <groupId>ch.qos.logback</groupId>
                    <artifactId>*</artifactId>
                </exclusion>
                <exclusion>
                    <groupId>org.apache.logging.log4j</groupId>
                    <artifactId>*</artifactId>
                </exclusion>
            </exclusions>
        </dependency>
​
        <!-- 监控系统健康情况的工具-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-actuator</artifactId>
        </dependency>
​
        <!--热部署-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-devtools</artifactId>
            <scope>runtime</scope>
            <optional>true</optional>
        </dependency>
        <!--Springboot日志启动器-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-log4j</artifactId>
            <version>1.3.8.RELEASE</version>
        </dependency>
​
        <!--SpringBoot单元测试启动器-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
            <!--排除JUnit 4引擎测试-->
            <exclusions>
                <exclusion>
                    <groupId>org.junit.vintage</groupId>
                    <artifactId>junit-vintage-engine</artifactId>
                </exclusion>
            </exclusions>
        </dependency>
​
        <!--MySQL数据库驱动-->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
        </dependency>
​
        <!--MyBatis-plus启动器  baomidou 包米豆-->
        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-boot-starter</artifactId>
        </dependency>
​
        <!--
        Druid数据库连接池启动器
        阿里巴巴开发的数据库连接池，也是目前最好的连接池。特征：可以对SQL语句进行监控
        -->
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>druid-spring-boot-starter</artifactId>
        </dependency>
        <!--
        提供很多实用注解的工具插件，
        -->
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
        </dependency>
        <!--swagger：前后端分离的接口文档-->
        <dependency>
            <groupId>io.springfox</groupId>
            <artifactId>springfox-swagger2</artifactId>
        </dependency>
        <dependency>
            <groupId>io.springfox</groupId>
            <artifactId>springfox-swagger-ui</artifactId>
        </dependency>
​
        <!-- 胡图工具类 -->
        <dependency>
            <groupId>cn.hutool</groupId>
            <artifactId>hutool-all</artifactId>
        </dependency>
        <!--日志配置依赖jar-->
        <dependency>
            <groupId>log4j</groupId>
            <artifactId>log4j</artifactId>
        </dependency>
​
        <dependency>
            <groupId>org.slf4j</groupId>
            <artifactId>jcl-over-slf4j</artifactId>
        </dependency>
        <!--单元测试依赖jar-->
        <dependency>
            <groupId>org.junit.platform</groupId>
            <artifactId>junit-platform-launcher</artifactId>
        </dependency>
        <dependency>
            <groupId>org.junit.platform</groupId>
            <artifactId>junit-platform-commons</artifactId>
        </dependency>
​
        <!--Thymeleaf模板依赖-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
        <!--前端bootstrap框架使用的jar包-->
        <dependency>
            <groupId>org.webjars</groupId>
            <artifactId>bootstrap</artifactId>
        </dependency>
        <!--前端jquery框架使用的jar包-->
        <dependency>
            <groupId>org.webjars</groupId>
            <artifactId>jquery</artifactId>
        </dependency>
    </dependencies>

1.4 定义子模块YML配置文件

在resource目录下定义application.yml文件。如图所示：

 

# 配置服务器端口号
server:
  port: 8081
# 数据库连接和Druid连接池配置
spring:
  datasource:
    url: jdbc:mysql://localhost:3306/minzu?useUnicode=true&characterEncoding=UTF8&useSSL=false
    driver-class-name: com.mysql.jdbc.Driver
    username: root
    password: root
    type: com.alibaba.druid.pool.DruidDataSource
    druid:
      min-idle: 5
      max-active: 10
      max-wait: 3000
 # 配置Thymeleaf模板，该模板的后缀为.html,后缀为Classpath下面的/templates/water/
  thymeleaf:
    suffix: .html
    prefix: classpath:/templates/water/
    # 禁用Thymeleaf缓存
    cache: false
# MyBatis-Plus配置 
mybatis-plus:
  configuration:
    # 实体类属性支持驼峰映射
    map-underscore-to-camel-case: true
    log-impl: org.apache.ibatis.logging.stdout.StdOutImpl
    # 主键自动增长
  global-config:
    db-config:
      id-type: auto

1.5 定义日志配置文件

在resource目录下定义log4j.properties文件。如图所示：

# 将日志级别为DEBUG的日志信息输出到file(文件)和console(控制台)这两个目的地 log4j.rootLogger=INFO, file, console # 文件输出的相关设置 log4j.appender.file=org.apache.log4j.RollingFileAppender log4j.appender.file.File=./log/caojie.log     log4j.appender.file.MaxFileSize=10MB log4j.appender.file.MaxBackupIndex=10 log4j.appender.file.layout=org.apache.log4j.PatternLayout log4j.appender.file.layout.ConversionPattern=%d{yyyy-MM-dd HH:mm:ss} %5p %c{1}:%L - %m%n​#控制台输出的相关设置 log4j.appender.console=org.apache.log4j.ConsoleAppender log4j.appender.console.Target=System.out log4j.appender.console.layout=org.apache.log4j.PatternLayout log4j.appender.console.layout.ConversionPattern=%d{yyyy-MM-dd HH:mm:ss SSS} %5p %c{1}:%L - %m%n​#日志输出级别 log4j.logger.org.mybatis=DEBUG log4j.logger.java.sql=DEBUG log4j.logger.java.sql.Statement=DEBUG log4j.logger.java.sql.ResultSet=DEBUG log4j.logger.java.sql.PreparedStatement=DEBUG

1.6 定义相关的package

entities包下面放置实体类

mapper包下面放置Mapper接口，主要用来在实体类的属性和数据库表字段之间做映射，封装了数据库的增删改查操作

service包定义了业务逻辑

controller包定义了控制器，专门用于处理浏览器发起的请求

如图所示：

1.7 定义SpringBoot主启动类

package com.minzu;
​
import org.mybatis.spring.annotation.MapperScan;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
​
/**
 * TODO
 *
 * @author caojie
 * @version 1.0
 */
@SpringBootApplication
@MapperScan("com.shouyi.mapper")
public class ShouyiSpringBootApplication {
    public static void main(String[] args) {
        SpringApplication.run(ShouyiSpringBootApplication.class,args);
    }
}

1.8 定义Account实体类

package com.minzu.entities;
​
import com.baomidou.mybatisplus.annotation.TableName;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
​
/**
 * TODO
 * @author caojie
 * @version 1.0
 */
@Data
@NoArgsConstructor
@AllArgsConstructor
@TableName("tb_account")
public class Account {
​
    private Integer aid;
​
    private String userName;
​
    private String userPwd;
​
    private String userEmail;
​
    private String userMobile;
}

1.9 定义Mapper接口

package com.minzu.mapper;
​
import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.shouyi.entities.Account;
import org.springframework.stereotype.Repository;
​
/**
 * TODO
 * AccountMapper是一个映射器接口，它在数据库表的字段和Java实体类属性之间做映射
 * @author caojie
 * @version 1.0
 */
@Repository
public interface AccountMapper extends BaseMapper<Account> {
}

1.10 编写登录业务逻辑接口

package com.minzu.service;
​
import com.minzu.entities.Account;
​
/**
 * TODO: 用户登录业务逻辑接口
 *
 * @author caojie
 * @version 1.0
 */
public interface AccountService {
​
    /**
     * 用户登录
     * 步骤：
     * 1 根据用户名查询对应的账户信息
     * 2 判断账户是否为空，如果为空登录失败，返回false
     * 3 如果账户非空，对用户输入的密码进行MD5加密
     * 4 比较数据库的密码和加密的密码是否相等
     * 5 如果相等，登录成功返回true，否则，登录失败返回false
     * @param userName 用户名
     * @param userPwd 密码
     * @return true登录成功，false登录失败
     */
    boolean login(String userName,String userPwd);
}

1.11 编写登录业务逻辑实现类

package com.minzu.service.impl;

import cn.hutool.crypto.digest.DigestUtil;
import cn.hutool.crypto.digest.MD5;
import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.minzu.entities.Account;
import com.minzu.mapper.AccountMapper;
import com.minzu.service.AccountService;
import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.Objects;

/**
 * TODO:登录业务逻辑实现类
 * 被@Service注解修饰的类，是业务逻辑接口的实现类
 * @author caojie
 * @version 1.0
 */
@Service
@Slf4j
public class AccountServiceImpl implements AccountService {
	/**
	自动装配AccountMapper对象
	*/
    @Autowired
    private AccountMapper accountMapper;

    /**
     * 用户登录
     * 步骤：
     * 1 根据用户名查询对应的账户信息
     * 2 判断账户是否为空，如果为空登录失败，返回false
     * 3 如果账户非空，对用户输入的密码进行MD5加密
     * 4 比较数据库的密码和加密的密码是否相等
     * 5 如果相等，登录成功返回true，否则，登录失败返回false
     *
     * @param
     * @return true登录成功，false登录失败
     */
    @Override
    public boolean login(String userName,String userPwd) {
        log.info("userName = "+userName+" userPwd = "+userPwd);
        QueryWrapper<Account> qw = new QueryWrapper<>();
        qw.eq("user_name",userName);
        // 根据用户名查询对应的账号信息
        Account account = accountMapper.selectOne(qw);
        if (null == account) {
            return false;
        }
		// 对表单输入的密码进行MD5加密
        String encodePwd = DigestUtil.md5Hex(userPwd);
		// 比较数据库密码和加密的密码是否相等，条件成立：登录成功，否则登录失败
        if (Objects.equals(encodePwd,encodePwd)) {
            return true;
        } else {
            return false;
        }
    }
}

1.12 编写Controller控制器

package com.minzu.controller;

import com.minzu.service.AccountService;
import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;

/**
 * TODO: 用户登录对应的控制器，用来处理用户登录的业务逻辑 
 * @author caojie
 * @version 1.0
 * @date 2021/10/21 11:15
 */
@Controller
@Slf4j
public class AccountController {

    @Autowired
    private AccountService accountService;

    /**
     * 处理浏览器用户登录的请求
     * 步骤：
     * 1 调用业务逻辑层对象AccountService的login方法判断用户名密码是否正确
     * 2 如果用户明密码正确，表示登录成功，跳转到送水公司后台管理系统主页
     * 3 否则，给出提示，不进行跳转
     * @param userName 表单采集的用户名
     * @param userPwd 表单采集的密码
     * @return 登录成功，跳转到送水公司后台管理系统主页，登录失败给出提示，重新回到登录页面
     */
    @RequestMapping(value="/login",method = RequestMethod.POST)
    public String loginAccount(String userName, String userPwd, Model model) {
        boolean result = accountService.login(userName, userPwd);
        if (result) {
            return "waterMainMenu";
        } else {
            model.addAttribute("loginFail","用户名密码错误");
            return "index";
        }
    }
}

1.13 导入静态资源文件

项目所有静态资源都放在resource目录下，css存放层叠样式表，fonts存放页面字体信息，images存放项目用到的图片。

 

1.14 导入静态页面

项目所有静态页面都放在resource目录下

1 index.html 登录页面

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
	<title>Login</title>
		<meta charset="utf-8">
		<link th:href="@{/css/style2.css}" rel='stylesheet' type='text/css' />
</head>
<body>
	 <!-----start-main---->

	 <div class="main">
		<div class="login-form">

			<h1>用户登录</h1>
				<div class="head">
					<img src="../../images/user.png" alt=""/>
				</div>
				<form th:action="@{/login}" th:method="post">
					<input type="text" class="text" name="userName" required >
					<input type="password" name="userPwd" required>
					<div class="submit">
						<input type="submit" name="submit" value="登录" >
					</div>	
					<p><a href="#">Forgot Password ?</a></p>
					<p style="color:red" th:if="${not #strings.isEmpty(loginFail)}" th:text="${loginFail}"></p>
				</form>
		</div>
		 	<div class="copy-right">
				<p>Copyright &copy; 2014.Company name All rights reserved.<a target="_blank" href="http://sc.chinaz.com/moban/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a></p>
			</div>
		</div>

<div style="display:none"><script src='http://v7.cnzz.com/stat.php?id=155540&web_id=155540' language='JavaScript' charset='gb2312'></script></div>
</body>
</html>

1. waterMainMenu.html

   <!DOCTYPE html>
   <html xmlns:th="http://www.thymeleaf.org">
   <head>
   <meta charset="UTF-8">
   <title> 湖北民族大学送水公司后台管理系统</title>
   
   <!--Bootstrap固定框架-->
   <link rel='stylesheet' th:href="@{/webjars/bootstrap/3.3.7/css/bootstrap.css}">
   <link rel='stylesheet' th:href="@{/webjars/bootstrap/3.3.7/css/bootstrap-theme.css}">
   <!--图标库-->
   <link rel='stylesheet' th:href='@{/css/material-design-iconic-font.min.css}'>
   <!--核心样式-->
   <link rel="stylesheet" th:href="@{/css/style.css}">
   
   </head>
   <body>
   
   <div id="viewport">
   
     <!-- Sidebar -->
     <div id="sidebar">
       <header>
         <a href="#">公司后台管理</a>
       </header>
       <ul class="nav">
         <li>
           <a>
             <i class="zmdi zmdi-view-dashboard"></i> 客户管理
           </a>
         </li>
         <li>
           <a>
             <i class="zmdi zmdi-link"></i> 送水工管理
           </a>
         </li>
         <li>
           <a>
             <i class="zmdi zmdi-widgets"></i> 送水历史管理
           </a>
         </li>
         <li>
           <a>
             <i class="zmdi zmdi-widgets"></i> 计算工资
           </a>
         </li>
         <li>
           <a>
             <i class="zmdi zmdi-widgets"></i> 统计送水数量
           </a>
         </li>
         <li>
           <a>
             <i class="zmdi zmdi-widgets"></i> 修改密码
           </a>
         </li>
       </ul>
     </div>
     
     <!-- Content -->
     <div id="content">
       <nav class="navbar navbar-default">
         <div class="container-fluid" >
           <ul class="nav navbar-nav navbar-right">
             <li>
               <a href="#"><i class="zmdi zmdi-notifications text-danger"></i>
               </a>
             </li>
             <li><a href="#">测试用户123</a></li>
           </ul>
         </div>
       </nav>
       <div class="container-fluid">
   
       </div>
     </div>
   
   </div>
   
   </body>
   </html>

   1.15启动应用程序

   http://localhost:8081/