目录
1、结果展示
2、需求分析
3、库表设计(概要设计)
4、详细设计
5、编码
6、用户模块
7、员工模块
8、测试
9、上线
一、结果展示
我就先把完成的效果放出来,具体实现在后面
![v2-992e7cc1a02bab03a79388cb135a099a_b.jpg](https://i-blog.csdnimg.cn/blog_migrate/4cb53f9a17a364985bccc7820ad1e669.jpeg)
注册页面能动态实现验证码的切换验证,并且密码进行md5加密,
![v2-6dc6cd47aa9e56d1a963f107a15fac5a_b.jpg](https://i-blog.csdnimg.cn/blog_migrate/6ae8060613a4702d058afcd89948a789.jpeg)
![v2-f75695ea58260d8fd3e679f66e9406ed_b.jpg](https://i-blog.csdnimg.cn/blog_migrate/57eca979ec667aaf4264828670ffa032.jpeg)
![v2-1b0f7f52b13d7987a29e3879aab408e9_b.jpg](https://i-blog.csdnimg.cn/blog_migrate/bb54978d1fdc8e2918428e6c7808ca93.png)
可以上传员工头像
![v2-56a354a2e3b61c5a7e8779676a7b881e_b.jpg](https://i-blog.csdnimg.cn/blog_migrate/90de3c60af9ef70cd319ef3947a5e80c.png)
![v2-66712965770572ba629a4c25bcdd97a6_b.jpg](https://i-blog.csdnimg.cn/blog_migrate/7d48f9b84f60f9133e048796e1082358.png)
更改员工信息可以选择是否重新上传头像
![v2-13cf80a0894f656a79da45ddf48957e4_b.jpg](https://i-blog.csdnimg.cn/blog_migrate/a8526142b43cbd4cc19c1ba83af87152.png)
![v2-4f73d82e5eb2a00b60d1698e9f36eb85_b.jpg](https://i-blog.csdnimg.cn/blog_migrate/77b2e23b72ad5ddddbfaf5d51a614519.png)
还可以删除和退出退出登录,并进行判断避免误删
![v2-5870e223eeb0fba20b38ce02908d9271_b.jpg](https://i-blog.csdnimg.cn/blog_migrate/3c793787db01df86328d941f01847920.jpeg)
需求分析
分析这个项目含有那些功能模块
用户模块
- 注册
- 登录
- 验证码
- 安全退出
- 展示用户
员工模块 - 添加员工
- 展示员工
- 删除员工
- 更新员工
- 文件上传
库表设计(概要设计)
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项目
![v2-95118c1bac1f7bac7596086fb2552af5_b.jpg](https://i-blog.csdnimg.cn/blog_migrate/4cf66e79f93feb2afbbe3563dff92577.jpeg)
选择一些基本的依赖
这里我选了热部署,lombok,web,和thymeleaf
![v2-a6e9ea43468e97b0766d48cbc9dd5dfc_b.jpg](https://i-blog.csdnimg.cn/blog_migrate/4af045f4fa9c40d649b5bab4bdf3ace6.jpeg)
编写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>
![v2-32cf9109bc3e651db10d75a9a1efb222_b.jpg](https://i-blog.csdnimg.cn/blog_migrate/41e6653ab293cc5c8daf162474a3109c.png)
整合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: