1.创建SpringBoot项目,引入依赖
pom.xml
<?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.5.4</version>
<relativePath/> <!-- lookup parent from repository -->
</parent>
<groupId>com.example</groupId>
<artifactId>ems-thymeleaf</artifactId>
<version>0.0.1-SNAPSHOT</version>
<name>ems-thymeleaf</name>
<description>ems-thymeleaf</description>
<properties>
<java.version>1.8</java.version>
</properties>
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
<version>2.5.1</version>
</dependency>
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<version>8.0.26</version>
</dependency>
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>druid</artifactId>
<version>1.2.6</version>
</dependency>
<dependency>
<groupId>org.mybatis.spring.boot</groupId>
<artifactId>mybatis-spring-boot-starter</artifactId>
<version>2.2.0</version>
</dependency>
<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>
</plugin>
</plugins>
</build>
</project>
2.修改配置文件application.yml
server:
port: 8989
servlet:
context-path: /ems
spring:
thymeleaf:
cache: false
suffix: .html
prefix: classpath:/templates/
datasource:
driver-class-name: com.mysql.cj.jdbc.Driver
type: com.alibaba.druid.pool.DruidDataSource
url: jdbc:mysql://localhost:3306/mydata?useUnicode=true&characterEncoding=UTF-8
username: root
password: 835081
web:
#暴露哪些资源可以通过项目名访问
resources:
static-locations: classpath:/static/,file:${img.file.dir}
logging:
level:
root: info
com.example.emsthymeleaf: debug
mybatis:
mapper-locations: classpath:/mapper/*.xml
type-aliases-package: com.example.emsthymeleaf.entity
configuration:
log-impl: org.apache.ibatis.logging.stdout.StdOutImpl
# 上传文件路径
img:
file:
dir: D:\develop\javademo\baizhidemo\ems-thymeleaf\file
3.创建Config文件,将对html文件的访问对应到Controller
这样做的目的是为了简化访问thymeleaf的html文件,不必为每个html文件单独创建controller请求
package com.example.emsthymeleaf.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) {
//viewController:请求路径,viewName:跳转视图
registry.addViewController("login").setViewName("login");
registry.addViewController("regist").setViewName("regist");
}
}
4.设置随机图形验证码
- 引入验证码生成工具VerifyCodeUtils
- 在controller中创建生成验证码实例
package com.example.emsthymeleaf.controller;
import com.example.emsthymeleaf.utils.VerifyCodeUtils;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import javax.servlet.ServletOutputStream;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import java.io.IOException;
@Controller
@RequestMapping("/user")
public class UserController {
@GetMapping("/generateImageCode")
public void generateImageCode(HttpServletResponse response, HttpSession session) throws IOException {
//生成随机数
String code = VerifyCodeUtils.generateVerifyCode(4);
//存入session
session.setAttribute("code",code);
//根据随机数生成随即图片
response.setContentType("image/png");
ServletOutputStream outputStream = response.getOutputStream();
VerifyCodeUtils.outputImage(220,60,outputStream,code);
}
}
- 在thymeleaf的html文件中设置访问随机验证码
<td valign="middle" align="right">
验证码:
<img id="num" th:src="@{/user/generateImageCode}" />
<a href="javascript:;" onclick="changeImageCode()">换一张</a>
<script>
function changeImageCode(){
document.getElementById("num").src='[[@{/user/generateImageCode}]]?' + (new Date()).getTime()
}
</script>
</td>
5.用户注册
- 引入lombok
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<version>1.18.20</version>
</dependency>
- 创建实体类User
package com.example.emsthymeleaf.entity;
import lombok.Data;
@Data
public class User {
private Integer id;
private String username;
private String realname;
private String password;
private boolean gender;
}
- controller
@PostMapping("/regist")
public String regist(User user, String code,HttpSession session) throws UnsupportedEncodingException {
log.debug("用户信息:" + user);
log.debug("验证码:" + code);
try {
userSerivce.regist(user,code,session);
}catch (Exception ex){
return "redirect:/regist?err=" + URLEncoder.encode(ex.getMessage(),"UTF-8");
}
return "redirect:/login";
}
- service
package com.example.emsthymeleaf.service;
import com.example.emsthymeleaf.entity.User;
import javax.servlet.http.HttpSession;
public interface UserSerivce {
void regist(User user, String code, HttpSession session);
}
- serviceImpl
package com.example.emsthymeleaf.service;
import com.example.emsthymeleaf.dao.UserDao;
import com.example.emsthymeleaf.entity.User;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;
import org.springframework.util.DigestUtils;
import javax.servlet.http.HttpSession;
import java.nio.charset.StandardCharsets;
@Service
@Transactional
public class UserServiceImpl implements UserSerivce {
private static final Logger log = LoggerFactory.getLogger(UserServiceImpl.class);
private UserDao userDao;
@Autowired
public UserServiceImpl(UserDao userDao) {
this.userDao = userDao;
}
@Override
public void regist(User user, String code, HttpSession session) {
//判断用户输入的验证码和session中存储的验证码是否相同
log.debug("session code: {}",session.getAttribute("code"));
if (!code.equalsIgnoreCase(session.getAttribute("code").toString())) {
throw new RuntimeException("验证码错误!");
}
//判断用户名是否已注册过
if (userDao.getUserByUserName(user.getUsername()) != null) {
throw new RuntimeException("用户名已注册过了!");
}
//给密码加密
user.setPassword(DigestUtils.md5DigestAsHex(user.getPassword().getBytes(StandardCharsets.UTF_8)));
//将输入插入到数据表
userDao.save(user);
}
}
- dao
package com.example.emsthymeleaf.dao;
import com.example.emsthymeleaf.entity.User;
public interface UserDao {
void save(User user);
User getUserByUserName(String username);
}
- 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.example.emsthymeleaf.dao.UserDao">
<insert id="save" parameterType="User" useGeneratedKeys="true" keyProperty="id">
insert into user values(#{id},#{username},#{realname},#{password},#{gender})
</insert>
<select id="getUserByUserName" parameterType="String" resultType="User">
select id,username,realname,password,gender from user where username=#{username}
</select>
</mapper>
- 注册页面.html
<div id="content">
<p id="whereami">
</p>
<h1>
注册<span style="color: darkred;" th:text="${#request.getParameter('err')}"></span>
</h1>
<form th:action="@{/user/regist}" method="post">
<table cellpadding="0" cellspacing="0" border="0"
class="form_table">
<tr>
<td valign="middle" align="right">
用户名:
</td>
<td valign="middle" align="left">
<input type="text" class="inputgri" name="username" />
</td>
</tr>
<tr>
<td valign="middle" align="right">
真实姓名:
</td>
<td valign="middle" align="left">
<input type="text" class="inputgri" name="realname" />
</td>
</tr>
<tr>
<td valign="middle" align="right">
密码:
</td>
<td valign="middle" align="left">
<input type="password" class="inputgri" name="password" />
</td>
</tr>
<tr>
<td valign="middle" align="right">
性别:
</td>
<td valign="middle" align="left">
男
<input type="radio" class="inputgri" name="gender" value="0" checked="checked"/>
女
<input type="radio" class="inputgri" name="gender" value="1"/>
</td>
</tr>
<tr>
<td valign="middle" align="right">
验证码:
<img id="num" th:src="@{/user/generateImageCode}" />
<a href="javascript:;" onclick="changeImageCode()">换一张</a>
<script>
function changeImageCode(){
document.getElementById("num").src='[[@{/user/generateImageCode}]]?' + (new Date()).getTime()
}
</script>
</td>
<td valign="middle" align="left">
<input type="text" class="inputgri" name="code" />
</td>
</tr>
</table>
<p>
<input type="submit" class="button" value="立即注册 »" />
<a th:href="@{/user/generateImageCode}">已有账号,返回登录</a>
</p>
</form>
</div>
6. 用户登录和退出
6.1 用户登录
controller
@RequestMapping("/login")
public String login(String username, String password, HttpSession session) throws UnsupportedEncodingException {
try {
User user = userSerivce.login(username, password);
session.setAttribute("user", user);
} catch (Exception e) {
e.printStackTrace();
return "redirect:/login?err=" + URLEncoder.encode(e.getMessage(), "UTF-8");
}
return "redirect:/employee/list";
}
service
@Override
public User login(String username, String password) {
User user = userDao.getUserByUserName(username);
if (ObjectUtils.isEmpty(user)) throw new RuntimeException("用户不存在");
String newPassword = DigestUtils.md5DigestAsHex(password.getBytes(StandardCharsets.UTF_8));
if (!user.getPassword().equals(newPassword)) throw new RuntimeException(("密码输入错误"));
return user;
}
html
<div id="content">
<p id="whereami">
</p>
<h1>
欢迎进入,请登录!
</h1>
<p style="color:red;" th:if="${#request.getParameter('err')}" th:text=" '错误:' + ${#request.getParameter('err')}"></p>
<form th:action="@{/user/login}" method="post">
<table cellpadding="0" cellspacing="0" border="0"
class="form_table">
<tr>
<td valign="middle" align="right">
用户名:
</td>
<td valign="middle" align="left">
<input type="text" class="inputgri" name="username" />
</td>
</tr>
<tr>
<td valign="middle" align="right">
密码:
</td>
<td valign="middle" align="left">
<input type="password" class="inputgri" name="password" />
</td>
</tr>
</table>
<p>
<input type="submit" class="button" value="点我登录 »" />
<a th:href="@{/regist}">还没有账号,立即注册</a>
</p>
</form>
</div>
6.2 用户退出
controller
//用户退出
@RequestMapping("/logout")
public String logout( HttpSession session){
session.invalidate();
return "redirect:/login";
}
html
<a th:href="@{/user/logout}">安全退出</a>
7. 员工管理
7.1 添加员工
- 修改config文件,通过浏览器能够访问到addEmp.html页面
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) {
//viewController:请求路径,viewName:跳转视图
registry.addViewController("login").setViewName("login");
registry.addViewController("regist").setViewName("regist");
registry.addViewController("addEmp").setViewName("addEmp");
}
}
- 添加员工的controller
package com.example.emsthymeleaf.controller;
import com.example.emsthymeleaf.entity.Employee;
import com.example.emsthymeleaf.service.EmployeeService;
import org.apache.commons.io.FilenameUtils;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.multipart.MultipartFile;
import java.io.File;
import java.io.IOException;
import java.text.SimpleDateFormat;
import java.util.Date;
@Controller
@RequestMapping("/employee")
public class EmployeeController {
@Autowired
private EmployeeService employeeService;
private static final Logger log = LoggerFactory.getLogger(EmployeeController.class);
@Value("${img.file.dir}")
private String realPath;
@RequestMapping("/save")
public String save(Employee employee, MultipartFile img) throws IOException {
log.debug("employee: {}",employee);
log.debug("file name: {}", img.getOriginalFilename());
//创建新文件名
String newImgName = setNewImgName(img);
//将头像文件存储到文件夹
img.transferTo(new File(realPath,newImgName));
//存储新的文件名
employee.setPhoto(newImgName);
//存储员工信息
employeeService.save(employee);
return "redirect:/employee/list";
}
//生成新的文件名
private String setNewImgName(MultipartFile img) {
//前缀
String fileNamePrefix = new SimpleDateFormat("yyyyMMddHHmmssSSS").format(new Date());
//后缀
String fileNameSuffix = FilenameUtils.getExtension(img.getOriginalFilename());
//新文件名
String newImgName = fileNamePrefix + "." + fileNameSuffix;
return newImgName;
}
}
如何确定文件的上传路径
在application.yml中确定文件的上传路径
# 上传文件路径
img:
file:
dir: D:\develop\javademo\baizhidemo\ems-thymeleaf\file
在java文件中引用它
@Value("${img.file.dir}")
private String realPath;
serviceImpl
@Override
public void save(Employee employee) {
employeeDao.save(employee);
}
dao
void save(Employee employee);
dao.xml
<insert id="save" parameterType="Employee" useGeneratedKeys="true" keyProperty="id">
insert into employee values (#{id},#{name},#{photo},#{salary},#{birthday})
</insert>
html
<form th:action="@{/employee/save}" method="post" enctype="multipart/form-data">
<table cellpadding="0" cellspacing="0" border="0"
class="form_table">
<tr>
<td valign="middle" align="right">
姓名:
</td>
<td valign="middle" align="left">
<input type="text" class="inputgri" name="name" />
</td>
</tr>
<tr>
<td valign="middle" align="right">
头像:
</td>
<td valign="middle" align="left">
<input type="file" width="" name="img" />
</td>
</tr>
<tr>
<td valign="middle" align="right">
工资:
</td>
<td valign="middle" align="left">
<input type="text" class="inputgri" name="salary" />
</td>
</tr>
<tr>
<td valign="middle" align="right">
生日:
</td>
<td valign="middle" align="left">
<input type="text" class="inputgri" name="birthday" />
</td>
</tr>
</table>
<p>
<input type="submit" class="button" value="确认添加" />
<input type="submit" class="button" value="返回列表" />
</p>
</form>
7.2 员工列表
controller
@RequestMapping("list")
public String list(Model model) {
model.addAttribute("list", employeeService.list());
return "emplist";
}
serviceImpl
@Override
public List<Employee> list() {
return employeeDao.list();
}
dao
List<Employee> list();
dao.xml
<select id="list" resultType="Employee">
select id, name, photo, salary, birthday from `employee`
</select>
html
<div id="content">
<p id="whereami">
</p>
<h1>
欢迎 小陈!
</h1>
<table class="table">
<tr class="table_header">
<td>
编号
</td>
<td>
姓名
</td>
<td>
头像
</td>
<td>
工资
</td>
<td>
生日
</td>
<td>
操作
</td>
</tr>
<tr class="row1" th:each="emp:${list}">
<td>
<span th:text="${emp.id}"></span>
</td>
<td>
<span th:text="${emp.name}"></span>
</td>
<td>
<img th:src="@{/}+${emp.photo}" width="60">
</td>
<td>
<span th:text="${emp.salary}"></span>
</td>
<td>
<span th:text="${#dates.format(emp.birthday,'yyyy/MM/dd')}"></span>
</td>
<td>
<a href="javascript:;" th:onclick="'deleteEmployee(' + ${emp.id} + ')'">删除</a>
<a th:href="@{/employee/details(id=${emp.id})}">更新</a>
</td>
</tr>
<script>
function deleteEmployee(id){
if(window.confirm("是否删除这条记录?")){
location.href='[[@{/employee/delete?id=}]]' + id
}
}
</script>
</table>
<p>
<input type="button" class="button" value="添加" onclick="addEmp()"/>
<script type="text/javascript">
function addEmp() {
window.location ='[[@{/addEmp}]]'
}
</script>
</p>
</div>
thymeleaf需要注意的点
- 在<img>标签中获取当前路径的静态文件:
<img th:src="@{/}+${emp.photo}" width="60">
,将路径和文件名连接起来 需要修改application.yml文件,暴露哪些资源可以通过项目名访问
resources: static-locations: classpath:/static/,file:${img.file.dir}
<a>
标签链接到带参数的地址:<a href="localhost:8989/ems/employee/details?id=[从th参数中获取的id值]">更新</a>
,在th中应该写为:<a th:href="@{/employee/details(id=${emp.id})}">更新</a>
- 将标签中的链接改为响应click事件的html语句:
<a href="javascript:;" th:onclick="'deleteEmployee(' + ${emp.id} + ')'">删除</a>
<script>
function deleteEmployee(id){
if(window.confirm("是否删除这条记录?")){
location.href='[[@{/employee/delete?id=}]]' + id
}
}
</script>
7.3 编辑员工信息
7.3.1 根据id获取员工信息
controller
//根据id获取员工信息
@RequestMapping("details")
public String details(Integer id, Model model) {
log.debug("id:{}", id);
Employee employee = employeeService.findById(id);
model.addAttribute("employee", employee);
return "updateEmp";
}
service&serviceImpl
Employee findById(Integer id);
@Override
public Employee findById(Integer id) {
return employeeDao.findById(id);
}
dao
Employee findById(Integer id);
<select id="findById" parameterType="Integer" resultType="Employee">
select id, name, photo, salary, birthday from employee where id = #{id}
</select>
html显示编辑员工信息页面
<form th:action="@{/employee/update}" method="post" enctype="multipart/form-data">
<table cellpadding="0" cellspacing="0" border="0"
class="form_table">
<tr>
<td valign="middle" align="right">
编号:
</td>
<td valign="middle" align="left">
<span th:text="${employee.id}"></span>
<input type="hidden" th:value="${employee.id}" name="id">
</td>
</tr>
<tr>
<td valign="middle" align="right">
姓名:
</td>
<td valign="middle" align="left">
<input type="text" class="inputgri" name="name" th:value="${employee.name}"/>
</td>
</tr>
<tr>
<td valign="middle" align="right">
当前头像:
</td>
<td valign="middle" align="left">
<img th:src="@{/} + ${employee.photo}" width="60">
<input type="hidden" name="photo" th:value="${employee.photo}">
</td>
</tr>
<tr>
<td valign="middle" align="right">
选择新头像:
</td>
<td valign="middle" align="left">
<input type="file" name="img" />
</td>
</tr>
<tr>
<td valign="middle" align="right">
工资:
</td>
<td valign="middle" align="left">
<input type="text" class="inputgri" name="salary" th:value="${employee.salary}"/>
</td>
</tr>
<tr>
<td valign="middle" align="right">
生日:
</td>
<td valign="middle" align="left">
<input type="text" class="inputgri" name="birthday" th:value="${#dates.format(employee.birthday,'yyyy/MM/dd')}"/>
</td>
</tr>
</table>
<p>
<input type="submit" class="button" value="更新" />
<input type="button" class="button" value="返回列表" />
</p>
</form>
注意两个隐藏类型的input,因为<span>和<img>标签的信息无法通过请求传递,所以这两个标签下面需要设置隐藏类型的input,用于传递属性值
7.3.2 更新员工信息
controller
//更新员工信息
@RequestMapping("update")
public String update(Employee employee, MultipartFile img){
log.debug("员工信息:{}",employee);
//判断是否更新了头像信息
if (!img.isEmpty()){
//更新头像信息
try {
String newImgName = uploadImg(img);
employee.setPhoto(newImgName);
} catch (IOException e) {
e.printStackTrace();
}
}
employeeService.update(employee);
return "redirect:/employee/list";
}
/**
* 存储上传的文件并生成新的文件名
* @param img
* @return 返回新的文件名
* @throws IOException
*/
private String uploadImg(MultipartFile img) throws IOException {
//前缀
String fileNamePrefix = new SimpleDateFormat("yyyyMMddHHmmssSSS").format(new Date());
//后缀
String fileNameSuffix = FilenameUtils.getExtension(img.getOriginalFilename());
//新文件名
String newImgName = fileNamePrefix + "." + fileNameSuffix;
//将头像文件存储到文件夹
img.transferTo(new File(realPath, newImgName));
return newImgName;
}
service&serviceImpl
void update(Employee employee);
@Override
public void update(Employee employee) {
employeeDao.update(employee);
}
dao
void update(Employee employee);
<update id="update" parameterType="Employee">
update employee set name=#{name},photo=#{photo},salary=#{salary},birthday=#{birthday} where id = #{id}
</update>
7.3.3 删除员工信息
controller
//删除员工信息
@RequestMapping("/delete")
public String delete(Integer id){
log.debug("id={}",id);
employeeService.delete(id);
return "redirect:/employee/list";
}
service&serviceImpl
void delete(Integer id);
@Override
public void delete(Integer id) {
employeeDao.delete(id);
}
dao
void delete(Integer id);
<delete id="delete" parameterType="Integer">
delete from employee where id=#{id}
</delete>
8. 拦截器,拦截未登录用户
定义拦截器
package com.example.emsthymeleaf.interceptors;
import org.springframework.web.servlet.HandlerInterceptor;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
public class MyInterceptor implements HandlerInterceptor {
@Override
public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
HttpSession session = request.getSession();
if (session.getAttribute("user") == null){
response.sendRedirect(request.getContextPath() + "/login");
return false;
}
return true;
}
}
配置拦截器
package com.example.emsthymeleaf.config;
import com.example.emsthymeleaf.interceptors.MyInterceptor;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.InterceptorRegistry;
import org.springframework.web.servlet.config.annotation.ViewControllerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
@Configuration
public class MvcConfig implements WebMvcConfigurer {
//配置拦截器
@Override
public void addInterceptors(InterceptorRegistry registry) {
registry.addInterceptor(new MyInterceptor())
.addPathPatterns("/**")
.excludePathPatterns("/user/**","/login","regist");
}
//不用再为每一个thymeleaf模板单独开发一个controller请求了
@Override
public void addViewControllers(ViewControllerRegistry registry) {
//viewController:请求路径,viewName:跳转视图
registry.addViewController("login").setViewName("login");
registry.addViewController("regist").setViewName("regist");
registry.addViewController("addEmp").setViewName("addEmp");
}
}
9. 其他一些细节
在html中获取session中的用户名
欢迎 <span th:text="${#session.getAttribute('user').realname}"></span>!
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。