一、参照第八天任务中的栏目表,使用thymeleaf做为前端展现,完成CRUD及分页操作
二、使用springboot+mybatis-plus+redis完成用户登录系统,
数据库表 users
字段名称 |
中文 |
类型 |
长度 |
主键 |
外键 |
自增 |
约束 |
uid |
用户id |
Int |
|
Y |
|
Y |
|
User_name |
用户名 |
varchar |
255 |
|
|
|
|
password |
用户密码 |
varchar |
255 |
|
|
|
|
如果3分钟内,失败三次,则要求30分钟后才可以再次登录
新建一个Spring Initializr项目
选择如下依赖,比此前的项目多选了Thymeleaf依赖和非关系型数据库redis驱动:
配置pom.xml,主要是新增mybatis-plus依赖和德鲁伊数据源
<?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd"> <modelVersion>4.0.0</modelVersion> <parent> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-parent</artifactId> <version>2.7.4</version> <relativePath/> <!-- lookup parent from repository --> </parent> <groupId>com.xzit</groupId> <artifactId>day9_job</artifactId> <version>0.0.1-SNAPSHOT</version> <name>day9_job</name> <description>day9_job</description> <properties> <java.version>11</java.version> </properties> <dependencies> <!--redis驱动--> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-data-redis</artifactId> </dependency> <!--thymleaf模板--> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId> </dependency> <!--spring web--> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency> <!--mybatis-plus依赖--> <dependency> <groupId>com.baomidou</groupId> <artifactId>mybatis-plus-boot-starter</artifactId> <version>3.5.1</version> </dependency> <!--德鲁伊数据源--> <dependency> <groupId>com.alibaba</groupId> <artifactId>druid-spring-boot-starter</artifactId> <version>1.2.8</version> </dependency> <!--热部署工具--> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-devtools</artifactId> <scope>runtime</scope> <optional>true</optional> </dependency> <!--mysql驱动--> <dependency> <groupId>mysql</groupId> <artifactId>mysql-connector-java</artifactId> <scope>runtime</scope> </dependency> <!--lombok驱动--> <dependency> <groupId>org.projectlombok</groupId> <artifactId>lombok</artifactId> <optional>true</optional> </dependency> <!--SpringbootTest--> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-test</artifactId> <scope>test</scope> </dependency> </dependencies> <build> <plugins> <plugin> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-maven-plugin</artifactId> <configuration> <excludes> <exclude> <groupId>org.projectlombok</groupId> <artifactId>lombok</artifactId> </exclude> </excludes> </configuration> </plugin> </plugins> </build> </project>
配置application.yml,注意不能用tab缩进,只能用空格键,如果报expected <block end>, but found '<block mapping start>'错误,可能是因为yml文件没缩进好,用ctrl+shift+F自动整理下格式
#配置druid数据源 spring: datasource: druid: url: jdbc:mysql://localhost:3306/mybatis?serverTimezone=GMT%2B8 username: root password: zengyu1234 #并发环境下,关闭缓存,生产环境下,打开缓存 thymeleaf: cache: false #静态资源路径 web: resources: static-locations: classpath:/static #排除自动重启资源 devtools: restart: exclude: static/**,public/**,templates/** #配置文件上传大小 servlet: multipart: max-file-size: 104857600 #配置mybatis-plus #打印输出日志 mybatis-plus: configuration: log-impl: org.apache.ibatis.logging.stdout.StdOutImpl #配置数据库删除字段 global-config: db-config: logic-delete-field: deleted #配置文件上传路径 savePath: c:/uploadtest
配置一个thymeleaf的html模板,因为想要前端的样式好看一些,就在头文件里直接引入bootstrap
<!DOCTYPE html> <html lang="zh" xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" type="text/css" th:href="@{/bootstrap.min.css}"> </head> <body> </body> </html>
想要bootstrap生效,需要上官网下载bootstrap.min.css文件放入templates里,放入static也行,后面在html文件中要声明路径
bootstrap下载地址
https://v3.bootcss.com/getting-started/#download
对以前创建的Employee表使用MybatisX进行逆向自动生成
新建一个MybatisPlusConfig文件,配置分页插件
package com.xzit.config; import com.baomidou.mybatisplus.annotation.DbType; import com.baomidou.mybatisplus.extension.plugins.MybatisPlusInterceptor; import com.baomidou.mybatisplus.extension.plugins.inner.PaginationInnerInterceptor; import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.Configuration; @Configuration public class MybatisPlusConfig { /** * 新的分页插件,一缓和二缓遵循mybatis的规则,需要设置 MybatisConfiguration#useDeprecatedExecutor = false 避免缓存出现问题(该属性会在旧插件移除后一同移除) */ @Bean public MybatisPlusInterceptor mybatisPlusInterceptor() { MybatisPlusInterceptor interceptor = new MybatisPlusInterceptor(); interceptor.addInnerInterceptor(new PaginationInnerInterceptor(DbType.MYSQL)); return interceptor; } }
记得在主类里加上MapperScan注解
package com.xzit; import org.mybatis.spring.annotation.MapperScan; import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.SpringBootApplication; @SpringBootApplication @MapperScan("com.xzit.mapper") public class Day9JobApplication { public static void main(String[] args) { SpringApplication.run(Day9JobApplication.class, args); } }
新增一个EmployeeController,使用分页插件封装一个page对象传输给前端html页面
package com.xzit.controller; import com.baomidou.mybatisplus.extension.plugins.pagination.Page; import com.xzit.entity.Employee; import com.xzit.service.EmployeeService; import org.springframework.stereotype.Controller; import org.springframework.ui.Model; import org.springframework.web.bind.annotation.GetMapping; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestParam; import javax.annotation.Resource; @Controller @RequestMapping("/employee") public class EmployeeController { @Resource private EmployeeService service; @GetMapping("/list") public String list(@RequestParam(required = false,defaultValue = "1", value = "current") Integer current, Model model){ Page<Employee> page = new Page<>(current,5); service.page(page); model.addAttribute("path","/employee/list?current="); model.addAttribute("page",page); return "/list"; } }
新增一个list.html页面,前端页面循环接收page对象并展示值
<!DOCTYPE html> <html lang="zh" xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" type="text/css" th:href="@{/bootstrap.min.css}"> </head> <body> <div class="container" style="margin-top: 30px"> <div>员工管理</div> <table class="table table-bordered table-hover table-striped"> <tr> <td> 序号 </td> <td> 员工姓名 </td> <td> 登录名称 </td> <td> 登录密码 </td> <td> 年龄 </td> <td> 性别 </td> <td> 地址 </td> <td> 部门名称 </td> <td> 是否在职 </td> </tr> <!--<tr th:each="临时变量名,循环状态变量:${集合数据}">--> <tr th:each="employee,status:${page.records}"> <td th:text="${status.count}"></td> <td th:text="${employee.empName}"></td> <td th:text="${employee.loginName}"></td> <td th:text="${employee.loginPassword}"></td> <td th:text="${employee.age}"></td> <td th:text="${employee.gender}"></td> <td th:text="${employee.addr}"></td> <td th:text="${employee.deptName}"></td> <td th:text="${employee.status}"></td> </tr> </table> </div> </body> </html>
运行效果如图,其中密码字段在实体类里加了注解,查询不返回值
/*声明该密码字段查询不返回值*/
@TableField(select = false)
private String loginPassword;
新建一个page.html,这个页面是分页控件页面,通过insert到list.html的一个div里插入到主页
<!DOCTYPE html> <!--suppress ALL--> <html lang="zh" xmlns:th="http://www.thymeleaf.org"> <div th:fragment="page"><!--定义用于被显示列表页包含--> <style> </style> <div th:if="${page.pages>0}"> <div style="float: left"> 当前第<span th:text="${page.current}"></span>页, 共<span th:text="${page.pages}"></span>页, 总记录数<span th:text="${page.total}"></span> </div> <div style="float: right"> <!--此处的path是后台EmployController封装的路径--> <!--model.addAttribute("path","/employee/list?current=");--> <a th:text="首页" th:if="${page.current>1}" th:href="@{${path}}"></a> <a th:text="上一页" th:if="${page.current>1}" th:href="@{${path}+${page.current-1}}"></a> <a th:href="@{${path}+${i}}" th:each="i:${#numbers.sequence(1,page.pages)}" th:text="${i}" th:class="${page.current==i}?'page active':'page'"></a> <a th:text="下一页" th:if="${page.current<page.pages}" th:href="@{${path}+${page.current+1}}"></a> <a th:text="尾页" th:if="${page.current<page.pages}" th:href="@{${path}+${page.pages}}"></a> </div> </div> </div> </html>
主页下方插入
<!DOCTYPE html> <html lang="zh" xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" type="text/css" th:href="@{/bootstrap.min.css}"> </head> <body> <div class="container" style="margin-top: 30px"> <div>员工管理</div> <table class="table table-bordered table-hover table-striped"> <tr> <td> 序号 </td> <td> 员工姓名 </td> <td> 登录名称 </td> <td> 登录密码 </td> <td> 年龄 </td> <td> 性别 </td> <td> 地址 </td> <td> 部门名称 </td> <td> 是否在职 </td> </tr> <!--<tr th:each="临时变量名,循环状态变量:${集合数据}">--> <tr th:each="employee,status:${page.records}"> <td th:text="${status.count}"></td> <td th:text="${employee.empName}"></td> <td th:text="${employee.loginName}"></td> <td th:text="${employee.loginPassword}"></td> <td th:text="${employee.age}"></td> <td th:text="${employee.gender}"></td> <td th:text="${employee.addr}"></td> <td th:text="${employee.deptName}"></td> <td th:text="${employee.status}"></td> </tr> </table> <div th:insert="page :: page"></div> </div> </body> </html>
显示效果:
至此查询功能完成
新增保存功能
在EmployeeController里写好对应的方法
package com.xzit.controller; import com.baomidou.mybatisplus.extension.plugins.pagination.Page; import com.xzit.entity.Employee; import com.xzit.service.EmployeeService; import org.springframework.stereotype.Controller; import org.springframework.ui.Model; import org.springframework.web.bind.annotation.GetMapping; import org.springframework.web.bind.annotation.PostMapping; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestParam; import javax.annotation.Resource; @Controller @RequestMapping("/employee") public class EmployeeController { @Resource private EmployeeService service; /* 进入到保存页 */ @GetMapping("/save") public String save(){ return "/save"; } /* 保存后跳转回主页 */ @PostMapping("/save_commit") public String save_commit(Employee employee){ service.save(employee); return "redirect:/employee/list";//返回列表页的处理 } /* 主页列表展示 */ @GetMapping("/list") public String list(@RequestParam(required = false,defaultValue = "1", value = "current") Integer current, Model model){ Page<Employee> page = new Page<>(current,5); service.page(page); model.addAttribute("path","/employee/list?current="); model.addAttribute("page",page); return "/list"; } }
新建一个save.html页面用来做保存页
<!DOCTYPE html> <html lang="zh" xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" type="text/css" th:href="@{/bootstrap.min.css}"> </head> <body> <div class="container" style="margin-top: 30px"> <div>会员管理</div> <form method="post" action="/employee/save_commit"> <div class="form-group"> <label for="empName">员工姓名</label> <input type="text" name="empName" class="form-control" id="empName" placeholder="请输入员工姓名"> </div> <div class="form-group"> <label for="loginName">登录名称</label> <input type="text" name="loginName" class="form-control" id="loginName" placeholder="请输入登录名称"> </div> <div class="form-group"> <label for="loginPassword">登录密码</label> <input type="text" name="loginPassword" class="form-control" id="loginPassword" placeholder="请输入登录密码"> </div> <div class="form-group"> <label for="age">年龄</label> <input type="text" name="age" class="form-control" id="age" placeholder="请输入年龄"> </div> <div class="radio">性别:<br/> <label for="gender"> <input type="radio" name="gender" id="gender" value="男" checked>男 </label> </div> <div class="radio"> <label for="gender"> <input type="radio" name="gender" id="gender2" value="女" >女 </label> </div> <div class="form-group"> <label for="addr">地址</label> <input type="text" name="addr" class="form-control" id="addr" placeholder="请输入地址"> </div> <div class="form-group"> <label for="deptName">部门名称</label> <input type="text" name="deptName" class="form-control" id="deptName" placeholder="请输入部门名称"> </div> <div class="radio">工作状态:<br/> <label> <input type="radio" name="status" value="0" checked>在职 </label> </div> <div class="radio"> <label> <input type="radio" name="status" value="1" >休息 </label> </div> <div class="radio"> <label> <input type="radio" name="status" value="2" >离职 </label> </div> <button type="submit" class="btn btn-primary">提交</button> </form> </div> </body> </html>
运行效果:
至此增加功能完成
新增删除功能
先在EmployeeController里写好删除方法,删除完后跳转回主页
package com.xzit.controller; import com.baomidou.mybatisplus.extension.plugins.pagination.Page; import com.xzit.entity.Employee; import com.xzit.service.EmployeeService; import org.springframework.stereotype.Controller; import org.springframework.ui.Model; import org.springframework.web.bind.annotation.*; import javax.annotation.Resource; @Controller @RequestMapping("/employee") public class EmployeeController { @Resource private EmployeeService service; /* 进入到保存页 */ @GetMapping("/save") public String save(){ return "/save"; } /* 保存后跳转回主页 */ @PostMapping("/save_commit") public String save_commit(Employee employee){ service.save(employee); return "redirect:/employee/list";//返回列表页的处理 } /* 主页列表展示 */ @GetMapping("/list") public String list(@RequestParam(required = false,defaultValue = "1", value = "current") Integer current, Model model){ Page<Employee> page = new Page<>(current,5); service.page(page); model.addAttribute("path","/employee/list?current="); model.addAttribute("page",page); return "/list"; } /*执行删除后跳转回列表页*/ @GetMapping("/delete/{id}") public String delete(@PathVariable int id){ service.removeById(id); return "redirect:/employee/list"; } }
在主页新增操作列和删除按钮,绑定一个js方法传输员工id并跳转到controller执行删除操作
<!DOCTYPE html> <html lang="zh" xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" type="text/css" th:href="@{/bootstrap.min.css}"> </head> <body> <div class="container" style="margin-top: 30px"> <div>员工管理</div> <div> <a th:href="@{/employee/save}" th:text="新增"></a> </div> <table class="table table-bordered table-hover table-striped"> <tr> <td> 序号 </td> <td> 员工姓名 </td> <td> 登录名称 </td> <td> 登录密码 </td> <td> 年龄 </td> <td> 性别 </td> <td> 地址 </td> <td> 部门名称 </td> <td> 是否在职 </td> <td> 操作 </td> </tr> <!--<tr th:each="临时变量名,循环状态变量:${集合数据}">--> <tr th:each="employee,status:${page.records}"> <td th:text="${status.count}"></td> <td th:text="${employee.empName}"></td> <td th:text="${employee.loginName}"></td> <td th:text="${employee.loginPassword}"></td> <td th:text="${employee.age}"></td> <td th:text="${employee.gender}"></td> <td th:text="${employee.addr}"></td> <td th:text="${employee.deptName}"></td> <td th:text="${employee.status}"></td> <td> <a href="javascript:;" th:text="删除" th:onclick="doDel([[${employee.id}]])"></a> </td> </tr> </table> <div th:insert="page :: page"></div> </div> <script> function doDel(id){ if (confirm("确认删除吗?")) location.href="/employee/delete/"+id } </script> </body> </html>
执行效果
删除功能至此完成
新增修改的功能
先在EmpController里写好修改的方法和跳转到修改页面的方法
package com.xzit.controller; import com.baomidou.mybatisplus.extension.plugins.pagination.Page; import com.xzit.entity.Employee; import com.xzit.service.EmployeeService; import org.springframework.stereotype.Controller; import org.springframework.ui.Model; import org.springframework.web.bind.annotation.*; import javax.annotation.Resource; @Controller @RequestMapping("/employee") public class EmployeeController { @Resource private EmployeeService service; /* 进入到保存页 */ @GetMapping("/save") public String save(){ return "/save"; } /* 保存后跳转回主页 */ @PostMapping("/save_commit") public String save_commit(Employee employee){ service.save(employee); return "redirect:/employee/list";//返回列表页的处理 } /* 进入到修改页 */ @GetMapping("/update/{id}") public String update(@PathVariable int id,Model model){ Employee employee=service.getById(id); model.addAttribute("employee",employee); return "/update"; } /* 修改完成后跳回主页 */ @PostMapping("/update_commit") public String update_commit(Employee employee){ service.updateById(employee); return "redirect:/employee/list"; } /* 主页列表展示 */ @GetMapping("/list") public String list(@RequestParam(required = false,defaultValue = "1", value = "current") Integer current, Model model){ Page<Employee> page = new Page<>(current,5); service.page(page); model.addAttribute("path","/employee/list?current="); model.addAttribute("page",page); return "/list"; } /*执行删除后跳转回列表页*/ @GetMapping("/delete/{id}") public String delete(@PathVariable int id){ service.removeById(id); return "redirect:/employee/list"; } }
新增一个修改页面update.html
<!DOCTYPE html> <html lang="zh" xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" type="text/css" th:href="@{/bootstrap.min.css}"> </head> <body> <div class="container" style="margin-top: 30px"> <div>会员管理</div> <form method="post" action="/employee/update_commit"> <div class="form-group"> <label for="empName">员工姓名</label> <input type="text" name="empName" th:value="${employee.empName}" class="form-control" id="empName" placeholder="请输入员工姓名"> </div> <div class="form-group"> <label for="loginName">登录名称</label> <input type="text" name="loginName" th:value="${employee.loginName}" class="form-control" id="loginName" placeholder="请输入登录名称"> </div> <div class="form-group"> <label for="loginPassword">登录密码</label> <input type="text" name="loginPassword" th:value="${employee.loginPassword}" class="form-control" id="loginPassword" placeholder="请输入登录密码"> </div> <div class="form-group"> <label for="age">年龄</label> <input type="text" name="age" th:value="${employee.age}" class="form-control" id="age" placeholder="请输入年龄"> </div> <div class="form-group"> <label for="gender">性别</label> <input type="text" name="gender" th:value="${employee.gender}" class="form-control" id="gender" placeholder="请输入性别"> </div><br/> <div class="form-group"> <label for="addr">地址</label> <input type="text" name="addr" th:value="${employee.addr}" class="form-control" id="addr" placeholder="请输入地址"> </div> <div class="form-group"> <label for="deptName">部门名称</label> <input type="text" name="deptName" th:value="${employee.deptName}" class="form-control" id="deptName" placeholder="请输入部门名称"> </div> <div class="form-group"> <label for="status">工作状态:</label> <input type="text" name="status" th:value="${employee.status}" class="form-control" id="status" placeholder="请输入工作状态"> </div><br/> <input type="hidden" name="id" th:value="${employee.id}"> <button type="submit" class="btn btn-primary">提交</button> </form> </div> </body> </html>
运行效果:
增删改查功能至此完成
文件上传功能
此前已在application.yml配置了文件上传路径
#配置文件上传路径
savePath: c:/uploadtest
先新增一个UploadControllar写好文件上传方法
package com.xzit.controller; import org.springframework.beans.factory.annotation.Value; import org.springframework.stereotype.Controller; import org.springframework.util.FileCopyUtils; import org.springframework.web.bind.annotation.GetMapping; import org.springframework.web.bind.annotation.PostMapping; import org.springframework.web.bind.annotation.ResponseBody; import org.springframework.web.multipart.MultipartFile; import java.io.File; import java.io.FileOutputStream; import java.io.IOException; @Controller public class UploadControllar { @Value("${savePath}") private String savePath; @GetMapping("up") public String goUpload(){ return "upload"; } @PostMapping("upload") @ResponseBody public Object upload(String name, MultipartFile file) throws IOException { String srcName = file.getOriginalFilename();//获取文件原始名 String extName = srcName.substring(srcName.lastIndexOf("."));//获取文件的后缀名,如.jpg String fileName = System.currentTimeMillis() +extName;//将新文件名字命名为1970年以来的毫秒时间加后缀名 File dir = new File(savePath); dir.mkdirs();//创建保存路径 FileCopyUtils.copy(file.getInputStream(),new FileOutputStream(new File(dir,fileName)));//复制文件到新路径 System.out.println(name); return "ok"; } }
新增一个上传文件的页面
<!DOCTYPE html> <html lang="zh" xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" type="text/css" th:href="@{/bootstrap.min.css}"> </head> <body> <form method="post" action="/upload" enctype="multipart/form-data"> <div>姓名:<input type="text" name="name"></div> <div>头像:<input type="file" name="file"></div> <div> <button type="submit">上传</button> </div> </form> </body> </html>
执行效果:
这个文件上传功能缺少一个读取的功能,以后再研究下
标签:springboot,bootstrap,改查,springframework,org,employee,import,com,public From: https://www.cnblogs.com/zengyu1234/p/16735708.html