springboot+thymeleaf+mybatis 员工管理系统（保姆式教程）

2024-03-12 23:50:56

springboot+thymeleaf+mybatis 员工管理系统

结果展示
需求分析
- 用户模块
- 员工模块
库表设计(概要设计)
详细设计
编码
测试
上线部署

结果展示

我就先把完成的效果放出来，具体实现在后面

注册页面能动态实现验证码的切换验证,并且密码进行md5加密，

可以上传员工头像

更改员工信息可以选择是否重新上传头像

还可以删除和退出退出登录，并进行判断避免误删

需求分析

分析这个项目含有那些功能模块

用户模块

注册
登录
验证码
安全退出
展示用户

员工模块

添加员工
展示员工
删除员工
更新员工
文件上传

库表设计(概要设计)

分析系统有那些表
分析表与表关系
确定表中字段（显性字段，隐性字段（业务字段））

用户表 user

字段：

id
username
realname
password
gender

员工表 employee

id
name
salary
birthday
photo

sql代码


CREATE DATABASE springboot-thymeleaf

USE `springboot-thymeleaf`;



DROP TABLE IF EXISTS `employee`;

CREATE TABLE `employee` (
  `id` int unsigned NOT NULL AUTO_INCREMENT,
  `name` varchar(60) DEFAULT NULL COMMENT '员工姓名',
  `salary` double DEFAULT NULL COMMENT '员工工资',
  `birthday` datetime DEFAULT NULL COMMENT '员工生日',
  `photo` varchar(200) DEFAULT NULL COMMENT '头像路径',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;



DROP TABLE IF EXISTS `user`;

CREATE TABLE `user` (
  `id` int unsigned NOT NULL AUTO_INCREMENT,
  `username` varchar(40) DEFAULT NULL COMMENT '用户名',
  `realname` varchar(60) DEFAULT NULL COMMENT '真实姓名',
  `password` varchar(40) DEFAULT NULL COMMENT '密码',
  `gender` tinyint DEFAULT NULL COMMENT '性别',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

详细设计

因为功能简单几乎没有什么难得就简略过了

编码

环境搭建

创建一个springboot项目

选择一些基本的依赖

这里我选了热部署，lombok，web，和thymeleaf

编写controller和thymeleaf做简单测试

@Controller
public class TestController {
    @RequestMapping("/index")
    public String index(Model model){
        model.addAttribute("msg","thymeleaf测试");
        return "index";
    }
}

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h2 th:text="${msg}"></h2>
</body>
</html>

整合mybatis

导入依赖

引入了mysql，mybatis，druid的依赖

<dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>8.0.20</version>
</dependency>

<dependency>
        
			<groupId>com.alibaba</groupId>
            <artifactId>druid-spring-boot-starter</artifactId>
            <version>1.2.3</version>
</dependency>

<dependency>
            <groupId>org.mybatis.spring.boot</groupId>
            <artifactId>mybatis-spring-boot-starter</artifactId>
            <version>2.2.0</version>
</dependency>

yml配置

server:
  port: 8080
  servlet:
    context-path: /

#连接数据库的信息
spring:
  datasource:
    driver-class-name: com.mysql.cj.jdbc.Driver
    url: jdbc:mysql://localhost:3306/springboot-thymeleaf?serverTimezone=UTC&useUnicode=true&characterEncoding=UTF-8
    username: root
    password: 123456
    type: com.alibaba.druid.pool.DruidDataSource

    #Spring Boot 默认是不注入这些属性值的，需要自己绑定
    #druid 数据源专有配置
    initialSize: 5
    minIdle: 5
    maxActive: 20
    maxWait: 60000
    timeBetweenEvictionRunsMillis: 60000
    minEvictableIdleTimeMillis: 300000
    validationQuery: SELECT 1 FROM DUAL
    testWhileIdle: true
    testOnBorrow: false
    testOnReturn: false
    poolPreparedStatements: true

    #配置监控统计拦截的filters，stat:监控统计、log4j：日志记录、wall：防御sql注入
    #如果允许时报错  java.lang.ClassNotFoundException: org.apache.log4j.Priority
    #则导入 log4j 依赖即可，Maven 地址：https://mvnrepository.com/artifact/log4j/log4j
    filters: stat,wall,log4j
    maxPoolPreparedStatementPerConnectionSize: 20
    useGlobalDataSourceStat: true
    connectionProperties: druid.stat.mergeSql=true;druid.stat.slowSqlMillis=500

  thymeleaf:
    cache: false
  servlet:
    multipart: #修改文件上传的大小限制
      max-request-size: 10MB #允许请求传递文件大小最大为10M
      max-file-size: 10MB  #允许服务器可以处理的最大文件大小  

mybatis:
  #  扫描映射文件
  mapper-locations: classpath:mapper/*.xml
  #  配置别名扫描的包
  type-aliases-package: com.blb.entity
  configuration:
    #   开启驼峰映射配置
    map-underscore-to-camel-case: true

logging:
  level:
    root: info
    com.blb: debug

启动文件扫描mapper

package com.blb;

import org.mybatis.spring.annotation.MapperScan;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
@MapperScan("com.blb.mapper")
public class EmployeeApplication {

    public static void main(String[] args) {
        SpringApplication.run(EmployeeApplication.class, args);
    }

}

静态页面

页面因为时间原因和确实也不擅长写页面所有有点丑，包涵包涵（菜鸡落泪）

注册页面

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
  <meta charset="UTF-8">
  <title>注册</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    html {
      height: 100%;
      width: 100%;
      overflow: hidden;
      margin: 0;
      padding: 0;
      background: url(img/bg.png) no-repeat 0px 0px;
      background-repeat: no-repeat;
      background-size: 100% 100%;
      -moz-background-size: 100% 100%;
    }

    body {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%;
    }

    #loginDiv {
      width: 37%;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 650px;
      background-color: rgba(75, 81, 95, 0.3);
      box-shadow: 7px 7px 17px rgba(52, 56, 66, 0.5);
      border-radius: 5px;
    }

    #name_trip {
      margin-left: 50px;
      color: red;
    }

    p,
    .sexDiv {
      margin-top: 10px;
      margin-left: 20px;
      color: azure;
    }

    .sexDiv>input,
    .hobby>input {
      width: 30px;
      height: 17px;
    }

    input,
    select {
      margin-left: 15px;
      border-radius: 5px;
      border-style: hidden;
      height: 30px;
      width: 140px;
      background-color: rgba(216, 191, 216, 0.5);
      outline: none;
      color: #f0edf3;
      padding-left: 10px;
    }

    .button {
      border-color: cornsilk;
      background-color: rgba(100, 149, 237, .7);
      color: aliceblue;
      border-style: hidden;
      border-radius: 5px;
      width: 100px;
      height: 31px;
      font-size: 16px;
    }

    .introduce {
      margin-left: 110px;
    }

    .introduce>textarea {
      background-color: rgba(216, 191, 216, 0.5);
      border-style: hidden;
      outline: none;
      border-radius: 5px;
    }

    h1 {
      text-align: center;
      margin-bottom: 20px;
      margin-top: 20px;
      color: #f0edf3;
    }

    b {
      margin-left: 50px;
      color: #FFEB3B;
      font-size: 10px;
      font-weight: initial;
    }
  </style>
</head>

<body>
<div id="loginDiv">
  <form th:action="@{/user/register}">
    <h1>用户注册</h1>
      <div style="text-align: center;margin-top:5px" >
          <a th:href="@{/login}">已注册?登录</a>
      </div>
    <p>用户名 :<input id="usernname" type="text" name="username" autofocus required>

    <p>密    &nbsp;&nbsp;码:<input id="password" type="password" name="password" required>

    <p>真实姓名:<input id="realname" type="text" name="realname" required>


                <div class="sexDiv">
                    用户性别:
                    <input class="userSex" name="gender" value="1" type="radio">男
                    <input class="userSex" name="gender" value="0" type="radio">女

                </div>

                <p>
                    出生日期:
                    <input id="birthday" type="date">

                </p>
       <p><img th:src="@{/user/generateImageCode}" id="imgcode">
       <a href="javascript:;" onclick="changeImageCode()">换一张</a>
           <script>
               function changeImageCode(){
                   document.querySelector('#imgcode').src='[[@{/user/generateImageCode}]]?'+(new Date()).getTime()
               }
           </script>
       </p>

      <p> 验证码：
        <input type="text" name="code"/>
      </p>
    <p style="text-align: center;">
      <input type="submit" class="button" value="提交">
      <input type="reset" class="button" value="重置">
    </p>
  </form>

</div>

</body>

</html>

登录页面

<!DOCTYPE html>
<!-- saved from url=(0047)file:///D:/web%E8%84%9A%E6%9C%AC/WEB/login.html -->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

  <title>登陆</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    html {
      height: 100%;
      width: 100%;
      overflow: hidden;
      margin: 0;
      padding: 0;
      background: url(img/bg.png) no-repeat 0px 0px;
      background-repeat: no-repeat;
      background-size: 100% 100%;
      -moz-background-size: 100% 100%;
    }

    body {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%;
    }a

     #loginDiv {
       width: 37%;
       display: flex;
       justify-content: center;
       align-items: center;
       height: 300px;
       background-color: rgba(75, 81, 95, 0.1);
       box-shadow: 7px 7px 17px rgba(52, 56, 66, 0.8);
       border-radius: 5px;
     }

    #name_trip {
      margin-left: 50px;
      color: red;
    }

    p {
      margin-top: 30px;
      margin-left: 20px;
      color: azure;
    }

    input {
      margin-left: 15px;
      border-radius: 5px;
      border-style: hidden;
      height: 30px;
      width: 140px;
      background-color: rgba(216, 191, 216, 0.8);
      outline: none;
      color: #f0edf3;
      padding-left: 10px;
    }
    a{
      text-decoration: none;
      margin-left: 15px;
      border-radius: 5px;
      border-style: hidden;
      height: 30px;
      width: 140px;
      background-color: rgba(216, 191, 216, 0.8);
      outline: none;
      color: #f0edf3;

    }
    .button {
      border-color: cornsilk;
      background-color: rgba(100, 149, 237, 0.8);
      color: aliceblue;
      border-style: hidden;
      border-radius: 5px;
      width: 100px;
      height: 31px;
      font-size: 16px;
    }
  </style>
</head>

<body>
<div id="loginDiv">
  <form th:action="@{/user/login}" id="form" method="post">
    <h1 style="text-align: center;color: aliceblue;">用户登陆</h1>
    <div style="text-align: right;margin-top:5px" >
      <a th:href="@{/register}">注册</a>
    </div>
    <p>用户名:<input id="userNname" type="text" name="username"></p>

    <p>密码:  <input id="password" type="password" name="password"></p>

    <div style="text-align: center;margin-top: 30px;">
      <input type="submit" class="button"  value="登陆">
      <input type="reset" class="button" value="重置">
    </div>
  </form>

</div>


</body></html>

员工列表页面

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">


<html>
<head>
  <title>员工列表</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- 引入 Bootstrap -->
  <link
          href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

</head>
<body>
<div class="container">
  <div class="row clearfix">
    <div class="col-md-12 column">
      <div class="page-header">
        <h1>
          欢迎<span th:if="${session.user!=null}" th:text="${session.user.username}"></span>

        </h1>
        <div><a th:if="${session.user!=null}"th:href="@{/user/logout}">退出登录</a></div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-4 column">
      <a class="btn btn-primary" th:href="@{/addEmp}" >添加员工</a>
      <a class="btn btn-primary" th:href="@{/employee/queryAllEmployees}">显示全部员工</a>
    </div>
    <div class="col-md-4 column"></div>
    <div class="col-md-4 column">

      <form class="form-inline" action="" method="post"
            style="float: right">
            <span style="color:red;font-weight: bold">
            </span>
        <input type="text" name="queryBookName" class="form-control"
               placeholder="输入查询信息" required>
        <input type="submit" value="查询" class="btn btn-primary">
      </form>
    </div>

  </div>

  <div class="row clearfix">
    <div class="col-md-12 column">
      <table class="table table-hover table-striped">
        <thead>
        <tr>
          <th>员工编号</th>
          <th>员工名字</th>
          <th>员工头像</th>
          <th>员工工资</th>
          <th>出生日期</th>

          <th>操作</th>
        </tr>
        </thead>
        <tbody>

          <tr th:each="emp,state:${list}">
            <td ><span th:text="${emp.id}"></span></td>
            <td ><span th:text="${emp.name}"></span></td>
            <td><img th:src="@{/photo/}+${emp.photo}" width="50px"></td>
            <td ><span th:text="${emp.salary}"></span></td>

            <td><span th:text="${#dates.format(emp.birthday,'yyyy-MM-dd')}"></span></td>

            <td>


              <a th:href="@{/employee/detail/}+${emp.id}">更改</a> |
              <a href="javascript:;" th:onclick="'confirmDelete('+${emp.id}+')'"> 删除</a>

            </td>
          </tr>
        </c:forEach>
          <script>
            function  confirmDelete(id){
              if(window.confirm("确定要删除该员工条信息吗?")){
                location.href="[[@{/employee/delete/}]]"+id;
              }
            }
          </script>
        </tbody>
      </table>
    </div>
  </div>
</div>
</body>
</html>

添加员工页面

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<html>
<head>
    <title>新增员工</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入 Bootstrap -->
    <link
            href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"
            rel="stylesheet">
</head>
<body>
<div class="container">
    <div class="row clearfix">
        <div class="col-md-12 column">
            <div class="page-header">
                <h1>
                    <small>新增员工</small>
                </h1>
            </div>
        </div>
    </div>
    <form th:action="@{/employee/addEmployee}"
          method="post" enctype="multipart/form-data">
        姓名：<input type="text" name="name" ><br>
        头像：<input type="file" name="img" ><br>
        工资：<input type="text" name="salary" ><br>
        生日 <input type="date" name="birthday"><br>
        <input type="submit" value="确认添加">
    </form>
    <div style="text-align: center;margin-top:5px" >
        <a th:href="@{/employee/queryAllEmployees}">返回员工列表</a>
    </div>
</div>

修改员工页面

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<html>
<head>
    <title>新增员工</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入 Bootstrap -->
    <link
            href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"
            rel="stylesheet">
</head>
<body>
<div class="container">
    <div class="row clearfix">
        <div class="col-md-12 column">
            <div class="page-header">
                <h1>
                    <small>修改员工</small>
                </h1>
            </div>
        </div>
    </div>
    <form th:action="@{/employee/updateEmployee}"
          method="post" enctype="multipart/form-data">
        id <input type="text" th:value="${emp.id}" readonly="readonly" name="id"> <br><br>
        姓名：<input type="text" name="name" th:value="${emp.name}"><br><br>
        当前头像:<img th:src="@{/photo/}+${emp.photo}" width="50px">
          <input type="hidden" th:value="${emp.photo}" name="photo">
        <br><br>
        选择新头像：<input type="file" name="img" ><br><br>
        工资：<input type="text" name="salary" th:value="${emp.salary}" ><br><br>
        生日 <input type="date" name="birthday" th:value="${#dates.format(emp.birthday,'yyyy-MM-dd')}"><br><br><br>
        <input type="submit" value="确认修改"><br>
    </form>
    <div style="text-align: center;margin-top:5px" >
        <a th:href="@{/employee/queryAllEmployees}">返回员工列表</a>
    </div>
</div>

配置MvcConfig

通过这里配置：不需要再为每一个访问thymeleaf模板页面单独开发一个controller请求了跳转页面了

package com.blb.config;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.ViewControllerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
@Configuration
public class MvcConfig implements WebMvcConfigurer {
    //通过这里配置：不需要再为每一个访问thymeleaf模板页面单独开发一个controller请求了

    @Override
    public void addViewControllers(ViewControllerRegistry registry) {
        registry.addViewController("login").setViewName("login");
        registry.addViewController("register").setViewName("register");
        registry.addViewController("addEmp").setViewName("addEmp");
    }
}

用户模块

实体类

User实体类

package com.blb.entity;


import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
import lombok.ToString;
import lombok.experimental.Accessors;

@Data
@NoArgsConstructor
@AllArgsConstructor
@ToString
@Accessors(chain = true)

public class User {

    private Integer id;

    private String username;

    private String realname;

    private String password;

    private Boolean gender;
}

注册

验证码实现

核心步骤：

生成随机字符串
放入session
生成图片并响应

验证码工具类

package com.blb.utils;


import org.apache.log4j.Logger;

import javax.imageio.ImageIO;
import java.awt.*;
import java.awt.geom.AffineTransform;
import java.awt.image.BufferedImage;
import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.OutputStream;
import java.security.SecureRandom;
import java.util.Arrays;


public class VerifyCodeUtils {

    private static final Logger logger = Logger.getLogger(VerifyCodeUtils.class);

    private VerifyCodeUtils() {

    }

    public static final String VERIFY_CODES = "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
    private static SecureRandom random = new SecureRandom();


    /**
     * 使用系统默认字符源生成验证码
     * @param verifySize    验证码长度
     * @return
     */
    public static String generateVerifyCode(int verifySize){
        return generateVerifyCode(verifySize, VERIFY_CODES);
    }
    /**
     * 使用指定源生成验证码
     * @param verifySize    验证码长度
     * @param sources   验证码字符源
     * @return
     */
    public static String generateVerifyCode(int verifySize, String sources){
        String _sources = sources;
        if(_sources == null || _sources.length() == 0){
            _sources = VERIFY_CODES;
        }
        int codesLen = _sources.length();
        SecureRandom rand = new SecureRandom();
        StringBuilder verifyCode = new StringBuilder(verifySize);
        for(int i = 0; i < verifySize; i++){
            verifyCode.append(_sources.charAt(rand.nextInt(codesLen-1)));
        }
        return verifyCode.toString();
    }

    /**
     * 生成随机验证码文件,并返回验证码值
     * @param w
     * @param h
     * @param outputFile
     * @param verifySize
     * @return
     * @throws IOException
     */
    public static String outputVerifyImage(int w, int h, File outputFile, int verifySize) throws IOException {
        String verifyCode = generateVerifyCode(verifySize);
        outputImage(w, h, outputFile, verifyCode);
        return verifyCode;
    }

    /**
     * 输出随机验证码图片流,并返回验证码值
     * @param w
     * @param h
     * @param os
     * @param verifySize
     * @return
     * @throws IOException
     */
    public static String outputVerifyImage(int w, int h, OutputStream os, int verifySize) throws IOException{
        String verifyCode = generateVerifyCode(verifySize);
        outputImage(w, h, os, verifyCode);
        return verifyCode;
    }

    /**
     * 生成指定验证码图像文件
     * @param w
     * @param h
     * @param outputFile
     * @param code
     * @throws IOException
     */
    public static void outputImage(int w, int h, File outputFile, String code) throws IOException{
        if(outputFile == null){
            return;
        }
        File dir = outputFile.getParentFile();
        if(!dir.exists()){
            dir.mkdirs();
        }
        FileOutputStream fos = null;
        try{
            outputFile.createNewFile();
            fos = new FileOutputStream(outputFile);
            outputImage(w, h, fos, code);
        } catch(IOException e){
            logger.error("生成指定验证码图像文件", e);
        } finally {
            try {
                fos.close();
            } catch (IOException e) {
                logger.error("生成指定验证码图像文件", e);
            }
        }
    }

    /**
     * 输出指定验证码图片流
     * @param w
     * @param h
     * @param os
     * @param code
     * @throws IOException
     */
    public static void outputImage(int w, int h, OutputStream os, String code) throws IOException{
        int verifySize = code.length();
        BufferedImage image = new BufferedImage(w, h, BufferedImage.TYPE_INT_RGB);
        SecureRandom rand = new SecureRandom();
        Graphics2D g2 = image.createGraphics();
        g2.setRenderingHint(RenderingHints.KEY_ANTIALIASING,RenderingHints.VALUE_ANTIALIAS_ON);
        Color[] colors = new Color[5];
        Color[] colorSpaces = new Color[] { Color.WHITE, Color.CYAN,
                Color.GRAY, Color.LIGHT_GRAY, Color.MAGENTA, Color.ORANGE,
                Color.PINK, Color.YELLOW };
        float[] fractions = new float[colors.length];
        for(int i = 0; i < colors.length; i++){
            colors[i] = colorSpaces[rand.nextInt(colorSpaces.length)];
            fractions[i] = rand.nextFloat();
        }
        Arrays.sort(fractions);

        g2.setColor(Color.GRAY);// 设置边框色
        g2.fillRect(0, 0, w, h);

        Color c = getRandColor(200, 250);
        g2.setColor(c);// 设置背景色
        g2.fillRect(0, 2, w, h-4);

        //绘制干扰线
        SecureRandom random = new SecureRandom();
        g2.setColor(getRandColor(160, 200));// 设置线条的颜色
        for (int i = 0; i < 20; i++) {
            int x = random.nextInt(w - 1);
            int y = random.nextInt(h - 1);
            int xl = random.nextInt(6) + 1;
            int yl = random.nextInt(12) + 1;
            g2.drawLine(x, y, x + xl + 40, y + yl + 20);
        }

        // 添加噪点
        float yawpRate = 0.05f;// 噪声率
        int area = (int) (yawpRate * w * h);
        for (int i = 0; i < area; i++) {
            int x = random.nextInt(w);
            int y = random.nextInt(h);
            int rgb = getRandomIntColor();
            image.setRGB(x, y, rgb);
        }

        shear(g2, w, h, c);// 使图片扭曲

        g2.setColor(getRandColor(100, 160));
        int fontSize = h-4;
        Font font = new Font("Algerian", Font.ITALIC, fontSize);
        g2.setFont(font);
        char[] chars = code.toCharArray();
        for(int i = 0; i < verifySize; i++){
            AffineTransform affine = new AffineTransform();
            affine.setToRotation(Math.PI / 4 * rand.nextDouble() * (rand.nextBoolean() ? 1 : -1), (w / verifySize) * i + fontSize/2, h/2);
            g2.setTransform(affine);
            g2.drawChars(chars, i, 1, ((w-10) / verifySize) * i + 5, h/2 + fontSize/2 - 10);
        }

        g2.dispose();
        ImageIO.write(image, "jpg", os);
    }

    private static Color getRandColor(int fc, int bc) {
        int _fc = fc;
        int _bc = bc;
        if (_fc > 255)
        {
            _fc = 255;
        }

        if (_bc > 255)
        {
            _bc = 255;
        }

        int r = _fc + random.nextInt(_bc - _fc);
        int g = _fc + random.nextInt(_bc - _fc);
        int b = _fc + random.nextInt(_bc - _fc);
        return new Color(r, g, b);
    }

    private static int getRandomIntColor() {
        int[] rgb = getRandomRgb();
        int color = 0;
        for (int c : rgb) {
            color = color << 8;
            color = color | c;
        }
        return color;
    }

    private static int[] getRandomRgb() {
        int[] rgb = new int[3];
        for (int i = 0; i < 3; i++) {
            rgb[i] = random.nextInt(255);
        }
        return rgb;
    }

    private static void shear(Graphics g, int w1, int h1, Color color) {
        shearX(g, w1, h1, color);
        shearY(g, w1, h1, color);
    }

    private static void shearX(Graphics g, int w1, int h1, Color color) {
        int period = random.nextInt(2);
        int frames = 1;
        int phase = random.nextInt(2);
        for (int i = 0; i < h1; i++) {
            double d = (double) (period >> 1)
                    * Math.sin((double) i / (double) period
                    + (6.2831853071795862D * (double) phase)
                    / (double) frames);
            g.copyArea(0, i, w1, 1, (int) d, 0);
            g.setColor(color);
            g.drawLine((int) d, i, 0, i);
            g.drawLine((int) d + w1, i, w1, i);
        }

    }

    private static void shearY(Graphics g, int w1, int h1, Color color) {
        int period = random.nextInt(40) + 10;
        int frames = 20;
        int phase = 7;
        for (int i = 0; i < w1; i++) {
            double d = (double) (period >> 1)
                    * Math.sin((double) i / (double) period
                    + (6.2831853071795862D * (double) phase)
                    / (double) frames);
            g.copyArea(i, 0, 1, h1, 0, (int) d);
            g.setColor(color);
            g.drawLine(i, (int) d, i, 0);
            g.drawLine(i, (int) d + h1, i, h1);

        }

    }

}

验证码生成controller

借助工具类生成图片用流的方式响应给网页，因为只能有一个响应流所有这个返回值只能是void不能进行跳转

存到session作用域的原因是后面，不仅要响应给前端页面，注册时还要判断验证码是否输入正确

/**
     * 生成验证码
     *
     */
    @RequestMapping("/generateImageCode")
    public void generateImageCode(HttpSession session, HttpServletResponse response) throws IOException {
        
        //1.生成4位随机字符串
        String code= VerifyCodeUtils.generateVerifyCode(4);
        //2.保存随机字符串到session中
        session.setAttribute("code",code);
        //3.将随机字符串生成图片
        //4.response响应图片
        response.setContentType("image/png");//指定响应类型
        ServletOutputStream outputStream = response.getOutputStream();
        //参数 宽，高，输出流，生成验证码
        VerifyCodeUtils.outputImage(100,60,outputStream,code);

    }

注册UserMapper

@Repository
public interface UserMapper {
    //根据用户名查询用户
    User findByUserName(String username);

    //注册用户
    void save(User user);
}

注册UserMapper.xml

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
        PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">

<!--namespace=绑定一个对应的Dao/Mapper接口-->
<!--namespace = 所需实现的接口全限定名-->
<mapper namespace="com.blb.mapper.UserMapper">
    <insert id="save" parameterType="User"  useGeneratedKeys="true" keyProperty="id">
        insert into user values (#{id},#{username},#{realname},#{password},#{gender})
    </insert>

    <!--    id = 所需要重写的接口抽象方法名，resultType = 查询所需返回的对象类型-->

    <select id="findByUserName" resultType="User">
        select * from user where username=#{username}
    </select>
</mapper>

注册service

 public void register(User user) {
        //根据用户名查询数据库是否存在该用户名
        User userDB = userMapper.findByUserName(user.getUsername());
        //判断用户是否存在
        if(!ObjectUtils.isEmpty(userDB)){//如果userDB不为空
            throw new RuntimeException("用户名已存在");
        }
//        进行注册之前给明文加密
        String passwordSecret = DigestUtils.md5DigestAsHex(user.getPassword().getBytes(StandardCharsets.UTF_8));
        user.setPassword(passwordSecret);
        userMapper.save(user);
    }

注册controller

根据用户输入验证码比较session中验证码一致
如果一致完成注册，如果不一致直接返回错误
完成注册向数据库中保存用户信息
保存信息前判断当前用户名是否存在，如果存在直接返回错误
如果当前用户名不存在，加密并保存用户信息

/**
     * 用户注册
     */

    @RequestMapping(value = "/register")
    public String register(User user, String code, HttpSession session){
        log.debug("接收到的验证码:{}",code);
        log.debug("用户名:{},真实姓名:{},密码:{},性别:{}",user.getUsername(),user.getRealname(),user.getPassword(),user.getGender());
        try {
            //1.比较用户输入的验证码和session中的验证码是否一致
            String sessionCode=session.getAttribute("code").toString();
            //忽略大小写比较
            if(!sessionCode.equalsIgnoreCase(code)){
                throw new RuntimeException("验证码输入错误");
            }
            //注册用户
            userService.register(user);
        }
        catch (RuntimeException e){
            e.printStackTrace();

            return "redirect:/register";//注册失败回到注册页面
        }
        return "redirect:/login";//注册成功回到登录页面
    }

//用户登录
    @Override
    public User login(String username, String password) {
        //根据用户输入的用户名查询数据是否存在
        User userDB = userMapper.findByUserName(username);
        //判断对象是否存在
        if(ObjectUtils.isEmpty(userDB)){
            throw new RuntimeException("用户名输入错误");
        }
        if(!userDB.getPassword().equals(DigestUtils.md5DigestAsHex(password.getBytes(StandardCharsets.UTF_8))) )
        {
            throw  new RuntimeException("密码输入错误");
        }
        return userDB;
    }

登录controller

/**
     * 用户登录
     *
     */

    @RequestMapping(value = "/login")
    public String login(String username,String password,HttpSession session){
        log.debug("接收到的用户名：{},密码:{}",username,password);
        try {
            //执行登录业务逻辑
            User user = userService.login(username, password);
            //登录成功，保存用户登录记录
            session.setAttribute("user",user);

        }catch (RuntimeException e){
            e.printStackTrace();
            session.setAttribute("loginmsg",e.getMessage());
            return "redirect:/login";//登录失败回到登录页面
        }
        return "redirect:/employee//queryAllEmployees";//登录成功，跳转到查询员工信息控制器
    }

用户退出

清除session作用域里的user即可

/**
     * 用户退出
     * @param session
     * @return
     */

    @RequestMapping("/logout")
    public String logout(HttpSession session){
        session.invalidate();
        return "redirect:/login";
    }

员工模块

员工实体类

Employee

@Data
@NoArgsConstructor
@AllArgsConstructor
@ToString
@Accessors(chain = true)
public class Employee {

    private Integer id;

    private String name;

    @DateTimeFormat(fallbackPatterns = "yyyy-MM-dd")
    private Date birthday;

    private  double salary;


    private String photo;
}

查询所有员工信息

EmployeeMapper

@Repository
public interface EmployeeMapper {
    //查询员工信息列表
    List<Employee> queryAllEmp();
}

EmployeeMapper.xml

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
        PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.blb.mapper.EmployeeMapper">

    <select id="queryAllEmp" resultType="Employee">
        select * from employee
    </select>
</mapper>

EmployeeService


public interface EmployeeService {
    //查询员工信息列表
    List<Employee> queryAllEmp();
}

EmployeeServiceImpl

@Service
@Repository
public class EmployeeServiceImpl implements EmployeeService{
    @Autowired
    private EmployeeMapper employeeMapper;
    @Override
    public List<Employee> queryAllEmp() {
        return employeeMapper.queryAllEmp();
    }
}

controller

@Controller
@RequestMapping("/employee")
public class EmployeeController {
    private static final Logger log = LoggerFactory.getLogger(EmployeeController.class);
    @Autowired
        private EmployeeService employeeService;

        @RequestMapping("/queryAllEmployees")
    public String queryAllEmployees(Model model){
            List<Employee> employees = employeeService.queryAllEmp();
            model.addAttribute("list",employees);
            return "emplist";
        }


}

添加员工信息

EmployeeMapper

@Repository
public interface EmployeeMapper {
    //查询员工信息列表
    List<Employee> queryAllEmp();

    void save(Employee employee);
}

EmployeeMapper.xml

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
        PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.blb.mapper.EmployeeMapper">
    <insert id="save" parameterType="employee" useGeneratedKeys="true" keyProperty="id">
        insert into employee values(#{id},#{name},#{salary},#{birthday},#{photo})
    </insert>

    <select id="queryAllEmp" resultType="Employee">
        select * from employee
    </select>
</mapper>

EmployeeService

public interface EmployeeService {
    //查询员工信息列表
    List<Employee> queryAllEmp();
    //添加员工信息
    void addEmployee(Employee employee);
}

EmployeeServiceImpl

@Service
@Repository
public class EmployeeServiceImpl implements EmployeeService{
    @Autowired
    private EmployeeMapper employeeMapper;
    @Override
    public List<Employee> queryAllEmp() {
        return employeeMapper.queryAllEmp();
    }

    @Override
    public void addEmployee(Employee employee) {
        employeeMapper.save(employee);
    }
}

controller

/**
     * 添加员工信息
     * 文件上传：表单方式提交必须是post，表单enctype属性必须为 multipart/form-data
     * @return
     */
    @RequestMapping("/addEmployee")
    public String addEmployee(Employee employee, MultipartFile img){
        log.debug("员工名称:{},员工工资{},员工生日{}",employee.getName(),employee.getSalary(),employee.getBirthday());
        log.debug("头像名称:{}",img.getOriginalFilename());
        log.debug("头像大小:{}",img.getSize());
        //处理头像的上传
        String fileName=img.getOriginalFilename();//获取文件名以及后缀
        fileName= UUID.randomUUID()+"_"+fileName;//重新生成文件夹名
        //指定上传文件的路径存储,这里是静态资源static的upload
        String path=System.getProperty("user.dir");
        String dirPath=path+"/src/main/resources/static/photo";
        File filePath=new File(dirPath);
        if(!filePath.exists()){
            filePath.mkdirs();
        }
        try {
            //2.上传文件 参数：将文件写入到那个目录
            img.transferTo(new File(dirPath,fileName));
        } catch (IOException e) {
            e.printStackTrace();
        }

        //保存员工信息
        employee.setPhoto(fileName);//保存头像文件名
        employeeService.addEmployee(employee);
        return "redirect:/employee/queryAllEmployees";
    }

修改员工

EmployeeMapper

@Repository
public interface EmployeeMapper {
    //查询员工信息列表
    List<Employee> queryAllEmp();
   //保存员工信息
    void save(Employee employee);
    //根据id查询一个员工信息
    Employee queryById(Integer id);
    //更新员工信息
    void updateEmployee(Employee employee);
}

EmployeeMapper.xml

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
        PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.blb.mapper.EmployeeMapper">
    <insert id="save" parameterType="employee" useGeneratedKeys="true" keyProperty="id">
        insert into employee values(#{id},#{name},#{salary},#{birthday},#{photo})
    </insert>
    <update id="updateEmployee">
        update employee set name=#{name},birthday=#{birthday},salary=#{salary},photo=#{photo} where id=#{id}
    </update>

    <select id="queryAllEmp" resultType="Employee">
        select * from employee
    </select>
    <select id="queryById" resultType="Employee">
        select * from employee where id=#{id}
    </select>
</mapper>

EmployeeService

public interface EmployeeService {
    //查询员工信息列表
    List<Employee> queryAllEmp();
    //添加员工信息
    void addEmployee(Employee employee);
    //根据id查询一个员工信息
    Employee queryById(Integer id);
    //更新员工信息
    void updateEmployee(Employee employee);
}

EmployeeServiceImpl

@Service
@Repository
public class EmployeeServiceImpl implements EmployeeService{
    @Autowired
    private EmployeeMapper employeeMapper;
    @Override
    public List<Employee> queryAllEmp() {
        return employeeMapper.queryAllEmp();
    }

    @Override
    public void addEmployee(Employee employee) {
        employeeMapper.save(employee);
    }

    @Override
    public Employee queryById(Integer id) {
        return employeeMapper.queryById(id);
    }

    @Override
    public void updateEmployee(Employee employee) {
      employeeMapper.updateEmployee(employee);
    }
}

controller

 /**
     * 更新员工信息
     * @param employee
     * @param img
     * @return
     */
    @RequestMapping("/updateEmployee")
    public String updateEmployee(Employee employee,MultipartFile img){
        log.debug("员工名称:{},员工工资{},员工生日{}",employee.getName(),employee.getSalary(),employee.getBirthday());
         //判断是否更新头像即判断传过来的文件是否为空
         boolean empty= img.isEmpty();
        log.debug("是否更新头像: {}",!empty);
        //指定上传文件的路径存储,这里是静态资源static的photo
        String path=System.getProperty("user.dir");
        String dirPath=path+"/src/main/resources/static/photo";
        File filePath=new File(dirPath);

        if(!empty){
            //处理头像上传，删除老的头像
            //删除老的头像
            String oldPhoto = employeeService.queryById(employee.getId()).getPhoto();
            File file=new File(dirPath,oldPhoto);
            if(file.exists()){
                file.delete();//如果存在则删除
            }
            //处理新上传的头像
            //处理头像的上传
            String fileName=img.getOriginalFilename();//获取文件名以及后缀
            fileName= UUID.randomUUID()+"_"+fileName;//重新生成文件夹名

            if(!filePath.exists()){
                filePath.mkdirs();
            }
            try {
                //2.上传文件 参数：将文件写入到那个目录
                img.transferTo(new File(dirPath,fileName));
            } catch (IOException e) {
                e.printStackTrace();
            }
            //修改员工的头像名称
            employee.setPhoto(fileName);//保存头像文件名
        }
        //没有更新头像直接更新员工信息
        employeeService.updateEmployee(employee);
        //跳转员工列表
        return "redirect:/employee/queryAllEmployees";//更新成功跳转到查询所有员工列表
    }

码农公寓