springboot thymeleaf教程,springboot+thymeleaf

1.项目简绍

本项目使用跳羚开发，jdbc5.1.48 Mybatis源码可下载

　　其中涉及功能有：Mybatis的使用百里香叶的使用，用户密码加密，验证码的设计，图片的文件上传(本文件上传到本地，没有传到数据库)登录过滤等

　　用户数据库

　　员工数据库设计

　　基本的增删改查都有

2.设计流程

#入门###参考文档如需进一步参考，请考虑以下章节阿帕奇Maven官方文档](https://Maven。阿帕奇。组织/指南/索引。html)*[Spring Boot马文插件参考指南](https://个文档。春天。io/Spring-boot/docs/2。6 .4/Maven-Plugin/Reference/html/)*[创建奥瑟亚映像](https://个文档。春天。io/Spring-boot/docs/2)项目说明本项目使用跳羚开发，jdbc5.1.48### 1 .数据库信息创建两个表，管理员表用户和员工表员工### 2。项目流程1 .跳羚集成百里香叶1)。引入依赖!-使用依赖百里香的组名

　　gt;org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId></dependency>2).配置thymeleaf模板配置spring: thymeleaf: cache: false # 关闭缓存 prefix: classpath:/templates/ #指定模板位置 suffix: .html #指定后缀3).开发controller跳转到thymeleaf模板@Controller@RequestMapping("hello")public class HelloController { @RequestMapping("hello") public String hello(){ System.out.println("hello ok"); return "index"; // templates/index.html }}=================================================================2.thymeleaf 语法使用1).html使用thymeleaf语法必须导入thymeleaf的头才能使用相关语法namespace: 命名空间 <html lang="en" xmlns:th="http://www.thymeleaf.org">2).在html中通过thymeleaf语法获取数据================================================================###3.案例开发流程需求分析: 分析这个项目含有哪些功能模块用户模块:注册登录验证码安全退出真是用户员工模块:添加员工+上传头像展示员工列表+展示员工头像删除员工信息+删除员工头像更新员工信息+更新员工头像库表设计(概要设计): 1.分析系统有哪些表 2.分析表与表关系 3.确定表中字段(显性字段隐性字段(业务字段))2张表 1.用户表 userid username realname password gender2.员工表 employeeid name salary birthday photo创建一个库: ems-thymeleaf详细设计:省略编码(环境搭建+业务代码开发)1.创建一个springboot项目项目名字: ems-thymeleaf2.修改配置文件为 application.yml pom.xml 2.5.03.修改端口项目名: ems-thymeleaf4.springboot整合thymeleaf使用a.引入依赖b.配置文件中指定thymeleaf相关配置c.编写控制器测试5.springboot整合mybatismysql、druid、mybatis-springboot-staterb.配置文件中 6.导入项目页面static 存放静态资源templates 目录存放模板文件测试上线部署维护发版======================================================================

3.项目展示

4.主要代码

1.验证码的生成

package com.xuda.springboot.utils;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.util.Arrays;import java.util.Random;/** * @author ：程序员徐大大 * @description：TODO * @date ：2022-03-20 19:42 */public class VerifyCodeUtils { //使用到Algerian字体，系统里没有的话需要安装字体，字体只显示大写，去掉了1,0,i,o几个容易混淆的字符 public static final String VERIFY_CODES = "23456789ABCDEFGHJKLMNPQRSTUVWXYZ"; private static Random random = new Random(); /** * 使用系统默认字符源生成验证码 * @param verifySize 验证码长度 * @return */ public static String generateVerifyCode(int verifySize){ return generateVerifyCode(verifySize, VERIFY_CODES); } * 使用指定源生成验证码 * @param sources 验证码字符源 public static String generateVerifyCode(int verifySize, String sources){ if(sources == null sources.length() == 0){ sources = VERIFY_CODES; } int codesLen = sources.length(); Random rand = new Random(System.currentTimeMillis()); 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 * @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 os public static String outputVerifyImage(int w, int h, OutputStream os, int verifySize) throws IOException{ outputImage(w, h, os, verifyCode); * 生成指定验证码图像文件 * @param code 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(); try{ outputFile.createNewFile(); FileOutputStream fos = new FileOutputStream(outputFile); outputImage(w, h, fos, code); fos.close(); } catch(IOException e){ throw e; * 输出指定验证码图片流 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); Random rand = new Random(); 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); //绘制干扰线 Random random = new Random(); 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(); 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) { 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); boolean borderGap = true; 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); if (borderGap) { 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; // 50; int frames = 20; int phase = 7; for (int i = 0; i < w1; i++) { g.copyArea(i, 0, 1, h1, 0, (int) d); g.drawLine(i, (int) d, i, 0); g.drawLine(i, (int) d + h1, i, h1);}

2.userController的控制层设计

package com.xuda.springboot.controller;import com.xuda.springboot.pojo.User;import com.xuda.springboot.service.UserService;import com.xuda.springboot.utils.VerifyCodeUtils;import org.slf4j.Logger;import org.slf4j.LoggerFactory;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.stereotype.Controller;import org.springframework.ui.Model;import org.springframework.util.StringUtils;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;/** * @author ：程序员徐大大 * @description：TODO * @date ：2022-03-20 20:06 */@Controller@RequestMapping(value = "user")public class UserController { //日志 private static final Logger log = LoggerFactory.getLogger(UserController.class); private UserService userService; @Autowired public UserController(UserService userService) { this.userService = userService; } @RequestMapping(value = "/generateImageCode") public void generateImageCode(HttpSession session,HttpServletResponse response) throws IOException { //随机生成四位随机数 String code = VerifyCodeUtils.generateVerifyCode(4); //保存到session域中 session.setAttribute("code",code); //根据随机数生成图片，reqponse响应图片 response.setContentType("image/png"); ServletOutputStream os = response.getOutputStream(); VerifyCodeUtils.outputImage(130,60,os,code); /* 用户注册 */ @RequestMapping(value = "/register") public String register(User user, String code, HttpSession session, Model model){ log.debug("用户名：{}，真实姓名：{},密码：{},性别：{},",user.getUsername(),user.getRealname(),user.getPassword(),user.getGender()); log.debug("用户输入的验证码：{}",code); try{ //判断用户输入验证码和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"; //注册成功跳转到登录页面 /** * 用户登录 @RequestMapping(value = "login") public String login(String username,String password,HttpSession session){ log.info("本次登录用户名：{}",username); log.info("本次登录密码：{}",password); try { //调用业务层进行登录 User user = userService.login(username, password); //保存Session信息 session.setAttribute("user",user); } catch (Exception e) { return "redirect:/login";//登录失败回到登录页面 return "redirect:/employee/lists";//登录成功跳转到查询页面 //退出 @RequestMapping(value = "/logout") public String logout(HttpSession session) { session.invalidate();//session失效 return "redirect:/login";//跳转到登录页面}

3.employeeController控制层的代码

package com.xuda.springboot.controller;import com.xuda.springboot.pojo.Employee;import com.xuda.springboot.service.EmployeeService;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.stereotype.Service;import org.springframework.ui.Model;import org.springframework.web.bind.annotation.RequestBody;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.ResponseBody;import org.springframework.web.multipart.MultipartFile;import java.io.File;import java.io.IOException;import java.text.SimpleDateFormat;import java.util.Date;import java.util.List;/** * @author ：程序员徐大大 * @description：TODO * @date ：2022-03-21 13:44 */@Controller@RequestMapping(value = "employee")public class EmployeeController { //打印日志 private static final Logger log = LoggerFactory.getLogger(EmployeeController.class); @Value("${photo.file.dir}") private String realpath; private EmployeeService employeeService; @Autowired public EmployeeController(EmployeeService employeeService) { this.employeeService = employeeService; } //查询信息 @RequestMapping(value = "/lists") public String lists(Model model){ log.info("查询所有员工信息"); List<Employee> employeeList = employeeService.lists(); model.addAttribute("employeeList",employeeList); return "emplist"; /** * 根据id查询员工详细信息 * * @param id * @param model * @return */ @RequestMapping(value = "/detail") public String detail(Integer id, Model model) { log.debug("当前查询员工id: {}", id); //1.根据id查询一个 Employee employee = employeeService.findById(id); model.addAttribute("employee", employee); return "updateEmp";//跳转到更新页面 //上传头像方法 private String uploadPhoto(MultipartFile img, String originalFilename) throws IOException { String fileNamePrefix = new SimpleDateFormat("yyyyMMddHHmmssSSS").format(new Date()); String fileNameSuffix = originalFilename.substring(originalFilename.lastIndexOf(".")); String newFileName = fileNamePrefix + fileNameSuffix; img.transferTo(new File(realpath, newFileName)); return newFileName; * 保存员工信息 * 文件上传: 1.表单提交方式必须是post 2.表单enctype属性必须为 multipart/form-data @RequestMapping(value = "/save") public String save(Employee employee, MultipartFile img) throws IOException { log.debug("姓名:{}, 薪资:{}, 生日:{} ", employee.getNames(), employee.getSalary(), employee.getBirthday()); String originalFilename = img.getOriginalFilename(); log.debug("头像名称: {}", originalFilename); log.debug("头像大小: {}", img.getSize()); log.debug("上传的路径: {}", realpath); log.debug("第一次--》员工信息:{}",employee.getNames()); //1.处理头像的上传&修改文件名称 String newFileName = uploadPhoto(img, originalFilename); //2.保存员工信息 employee.setPhoto(newFileName);//保存头像名字 employeeService.save(employee); return "redirect:/employee/lists";//保存成功跳转到列表页面 * 更新员工信息 * @param employee * @param img @RequestMapping(value = "/update") public String update(Employee employee, MultipartFile img) throws IOException { log.debug("更新之后员工信息: id:{},姓名:{},工资:{},生日:{},", employee.getId(), employee.getNames(), employee.getSalary(), employee.getBirthday()); //1.判断是否更新头像 boolean notEmpty = !img.isEmpty(); log.debug("是否更新头像: {}", notEmpty); if (notEmpty) { //1.删除老的头像 根据id查询原始头像 String oldPhoto = employeeService.findById(employee.getId()).getPhoto(); File file = new File(realpath, oldPhoto); if (file.exists()) file.delete();//删除文件 //2.处理新的头像上传 String originalFilename = img.getOriginalFilename(); String newFileName = uploadPhoto(img, originalFilename); //3.修改员工新的头像名称 employee.setPhoto(newFileName); } //2.没有更新头像直接更新基本信息 employeeService.update(employee); return "redirect:/employee/lists";//更新成功,跳转到员工列表 * 删除员工信息 @RequestMapping(value = "/delete") public String delete(Integer id){ log.debug("删除的员工id: {}",id); String photo = employeeService.findById(id).getPhoto(); employeeService.delete(id); //2.删除头像 File file = new File(realpath, photo); if (file.exists()) file.delete(); return "redirect:/employee/lists";//跳转到员工列表}

4.前端控制配置类

package com.xuda.springboot.config;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;/** * @author ：程序员徐大大 * @description：TODO * @date ：2022-03-20 20:49 */@Configurationpublic class MvcConfig implements WebMvcConfigurer { @Override public void addViewControllers(ViewControllerRegistry registry) { registry.addViewController("/").setViewName("redirect:/login"); registry.addViewController("login").setViewName("login"); registry.addViewController("login.html").setViewName("login"); registry.addViewController("register").setViewName("regist"); registry.addViewController("addEmp").setViewName("addEmp"); } public void addInterceptors(InterceptorRegistry registry) { registry.addInterceptor(new LoginHandlerInterceptor()).addPathPatterns("/**") .excludePathPatterns("/register","/user/login","/css/**","/js/**","/img/**","/user/register","/login","/login.html");}

5.过滤器

package com.xuda.springboot.config;import com.xuda.springboot.controller.UserController;import org.slf4j.Logger;import org.slf4j.LoggerFactory;import org.springframework.context.annotation.Configuration;import org.springframework.web.servlet.HandlerInterceptor;import org.springframework.web.servlet.ModelAndView;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;/** * @author ：程序员徐大大 * @description：TODO * @date ：2022-03-21 20:17 */@Configurationpublic class LoginHandlerInterceptor implements HandlerInterceptor { private static final Logger log = LoggerFactory.getLogger(LoginHandlerInterceptor.class); @Override public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception { log.info("session+=》{}",request.getSession().getAttribute("user")); //登录成功后，应该有用户得session Object loginuser = request.getSession().getAttribute("user"); if (loginuser == null) { request.setAttribute("loginmsg", "没有权限请先登录"); request.getRequestDispatcher("/login.html").forward(request, response); return false; } else { return true; } }}

6.yml配置

#关闭thymeleaf模板缓存spring: thymeleaf: cache: false prefix: classpath:/templates/ #指定模板位置 suffix: .html #指定后缀名 datasource: type: com.alibaba.druid.pool.DruidDataSource driver-class-name: com.mysql.jdbc.Driver url: jdbc:mysql://localhost:3306/ssmbuild?characterEncoding=UTF-8 username: root password: web: resources: static-locations: classpath:/static/,file:${photo.file.dir} #暴露哪些资源可以通过项目名访问mybatis: mapper-locations: classpath:mapper/*.xml type-aliases-package: com.xuda.springboot.pojo#Mybatis配置#日志配置logging: level: root: info com.xuda: debug#指定文件上传的位置photo: file: dir: E:IDEA_ProjectSpringBoot_Demo_PlusIDEA-SpringBoot-projectes10-springboot-ems-thymeleafphoto

7.文章添加页面展示

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML&nb

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。

目录