springboot+thymeleaf+mybatis 员工管理系统(保姆式教程)

springboot+thymeleaf+mybatis 员工管理系统

结果展示

我就先把完成的效果放出来,具体实现在后面
springboot+thymeleaf+mybatis 员工管理系统(保姆式教程)
注册页面能动态实现验证码的切换验证,并且密码进行md5加密,
springboot+thymeleaf+mybatis 员工管理系统(保姆式教程)

springboot+thymeleaf+mybatis 员工管理系统(保姆式教程)
springboot+thymeleaf+mybatis 员工管理系统(保姆式教程)
springboot+thymeleaf+mybatis 员工管理系统(保姆式教程)
可以上传员工头像
springboot+thymeleaf+mybatis 员工管理系统(保姆式教程)
springboot+thymeleaf+mybatis 员工管理系统(保姆式教程)
更改员工信息可以选择是否重新上传头像
springboot+thymeleaf+mybatis 员工管理系统(保姆式教程)
springboot+thymeleaf+mybatis 员工管理系统(保姆式教程)
还可以删除和退出退出登录,并进行判断避免误删
springboot+thymeleaf+mybatis 员工管理系统(保姆式教程)

需求分析

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

用户模块

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

员工模块

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

库表设计(概要设计)

  1. 分析系统有那些表
  2. 分析表与表关系
  3. 确定表中字段(显性字段,隐性字段(业务字段))

用户表 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项目

springboot+thymeleaf+mybatis 员工管理系统(保姆式教程)

选择一些基本的依赖

这里我选了热部署,lombok,web,和thymeleaf
springboot+thymeleaf+mybatis 员工管理系统(保姆式教程)

编写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>

springboot+thymeleaf+mybatis 员工管理系统(保姆式教程)

整合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";//注册成功回到登录页面
    }

登录

登录service

public interface UserService {

    public void register(User user);

    User login(String username, String password);
}

登录serviceImpl

//用户登录
    @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";//更新成功跳转到查询所有员工列表
    }

测试

上线部署

上一篇:thymeleaf 中select下拉回显


下一篇:SpringBoot的WEB流程