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 © 2014.Company name All rights reserved.<a target="_blank" href="http://sc.chinaz.com/moban/">网页模板</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>
-
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/