Springboot+Thymeleaf环境搭建与简单应用

1，环境搭建

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.3.4.RELEASE</version> <relativePath/> <!-- lookup parent from repository --> </parent> <groupId>com.lin</groupId> <artifactId>xinguanthymeleaf</artifactId> <version>0.0.1-SNAPSHOT</version> <name>xinguanthymeleaf</name> <description>Demo project for Spring Boot</description> <properties> <java.version>1.8</java.version> </properties> <dependencies> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency> <dependency> <groupId>org.mybatis.spring.boot</groupId> <artifactId>mybatis-spring-boot-starter</artifactId> <version>2.1.3</version> </dependency> <dependency> <groupId>mysql</groupId> <artifactId>mysql-connector-java</artifactId> <scope>runtime</scope> </dependency> <dependency> <groupId>org.projectlombok</groupId> <artifactId>lombok</artifactId> <optional>true</optional> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-test</artifactId> <scope>test</scope> <exclusions> <exclusion> <groupId>org.junit.vintage</groupId> <artifactId>junit-vintage-engine</artifactId> </exclusion> </exclusions> </dependency> </dependencies> <build> <plugins> <plugin> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-maven-plugin</artifactId> </plugin> </plugins> </build> </project>

application.properties

#thymelea模板配置 spring.thymeleaf.prefix=classpath:/templates/ spring.thymeleaf.suffix=.html spring.thymeleaf.mode=HTML spring.thymeleaf.encoding=UTF-8 spring.thymeleaf.servlet.content-type=text/html spring.thymeleaf.cache=false spring.resources.chain.strategy.content.enabled=true spring.resources.chain.strategy.content.paths=/**

application.yml

spring: profiles: active: dev

application-dev.yml

server: port: 8081 spring: datasource: username: root password: root url: jdbc:mysql://localhost:3306/mybatis_plus?useUnicode=true&characterEncoding=utf-8&useSSL=true&serverTimezone=UTC driver-class-name: com.mysql.cj.jdbc.Driver mybatis: mapper-locations: classpath:mapping/*Mapper.xml type-aliases-package: com.lin.entity #showSql logging: level: com: example: mapper : debug

启动文件

package com.lin; import org.mybatis.spring.annotation.MapperScan; import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.SpringBootApplication; @MapperScan("com.lin.mapper") @SpringBootApplication public class XinguanthymeleafApplication { public static void main(String[] args) { SpringApplication.run(XinguanthymeleafApplication.class, args); } }

controller

package com.lin.comtroller; import com.lin.entity.User; import com.lin.service.UserService; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Controller; import org.springframework.ui.Model; import org.springframework.web.bind.annotation.ModelAttribute; import org.springframework.web.bind.annotation.RequestMapping; import java.util.List; @Controller public class testController2 { @Autowired private UserService userService; /** * http://localhost:8080/user/toHome * @param model * @return */ @RequestMapping(value="/testThymeleaf1") public String toHome(Model model) { //向页面返回的数据 model.addAttribute("code", 200); model.addAttribute("msg", "管理员向你表示祝贺！"); //自动跳转到默认的 classpath:/templates/home.html 页面 return "home"; } @RequestMapping("/testThymeleaf2") public String selectAll(Model model){ List<User> allUser = userService.getAll(); System.out.println(allUser); model.addAttribute("allUser",allUser); return "selectAll"; } @RequestMapping("/insert") public String test3(User user){ userService.saveUser(user); return "redirect:/testThymeleaf2"; } @RequestMapping("/testBootstrap") public String test4(){ return "testBootstrap"; } }

Service

package com.lin.service; import com.lin.entity.User; import java.util.List; public interface UserService { User getUserById(int id); List<User> getAll(); Integer saveUser(User user); } package com.lin.service.impl; import com.lin.entity.User; import com.lin.mapper.UserMapper; import com.lin.service.UserService; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Service; import java.util.List; @Service public class UserServiceImpl implements UserService { @Autowired(required = false) private UserMapper userMapper; @Override public User getUserById(int id) { return userMapper.getUserById(id); } @Override public List<User> getAll() { return userMapper.getAll(); } @Override public Integer saveUser(User user) { return userMapper.saveUser(user); } }

Mapper

package com.lin.mapper; import com.lin.entity.User; import org.apache.ibatis.annotations.Mapper; import java.util.List; @Mapper public interface UserMapper { User getUserById(int id); List<User> getAll(); Integer saveUser(User user); }

entity

package com.lin.entity; import lombok.AllArgsConstructor; import lombok.Data; import lombok.NoArgsConstructor; @Data @AllArgsConstructor @NoArgsConstructor public class User { private Long id; private String name; private int age; private String email; }

mapper.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.lin.mapper.UserMapper"> <select id="getUserById" resultType="User"> SELECT * FROM mybatis_plus.user WHERE id = #{id}; </select> <select id="getAll" resultType="User"> SELECT * FROM mybatis_plus.user; </select> <insert id="saveUser" parameterType="User"> INSERT INTO mybatis_plus.user(id,name,age,email)VALUES (#{id},#{name},#{age},#{email}) </insert> </mapper>

前端页面

<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head> <title>Bootstrap 实例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <div class="row"> <div class="col-sm-3" style="background-color:lavenderblush;"> &nbsp;</div> <div class="col-sm-3" style="background-color:lavenderblush;">&nbsp; </div> <div class="col-sm-3" style="background-color:lavenderblush;">&nbsp; </div> <div class="col-sm-3" style="background-color:lavenderblush;"> &nbsp;</div> <div class="col-sm-3" style="background-color:lavenderblush;"> &nbsp;</div> <div class="col-sm-3" style="background-color:lavenderblush;">&nbsp;</div> <div class="col-sm-3" style="background-color:lavenderblush;">&nbsp;</div> <div class="col-sm-3" style="background-color:lavenderblush;">&nbsp;</div> <div class="col-sm-12" style="background-color:lavenderblush;">&nbsp;</div> <div class="col-sm-12" style="background-color:lavenderblush;">&nbsp;</div> <div class="col-sm-12" style="background-color:lavenderblush;">&nbsp;</div> <div class="col-sm-12" style="background-color:lavenderblush;">&nbsp;</div> <div class="col-sm-12" style="background-color:lavenderblush;">&nbsp;</div> <div class="col-sm-12" style="background-color:lavenderblush;">&nbsp;</div> <div class="col-sm-12" style="background-color:lavenderblush;">&nbsp;</div> <div class="col-sm-4" style="background-color:lavenderblush;">&nbsp;</div> <div class="col-sm-4" style="background-color:lavenderblush;"> <form action="/insert" method="post"> <!--<input type="hidden" th:field="*{id}">--> <div class="form-group"> <label for="pwd">Name:</label> <!--<input type="text" class="form-control" id="pwd" th:field="*{name}">--> <input type="text" class="form-control" id="pwd" th:value="${name}" name="name"> </div> <div class="form-group"> <label for="age">Age:</label> <!--<input type="text" class="form-control" id="email" th:field="*{email}">--> <input type="text" class="form-control" id="age" th:value="${age}" name="age"> </div> <div class="form-group"> <label for="email">Email address:</label> <!--<input type="text" class="form-control" id="email" th:field="*{email}">--> <input type="text" class="form-control" id="email" th:value="${email}" name="email"> </div> <div class="form-check"> <label class="form-check-label"> <input class="form-check-input" type="checkbox"> Remember me </label> </div> <button class="btn btn-primary">Submit</button> </form> </div> <div class="col-sm-4" style="background-color:lavenderblush;">&nbsp;</div> <div class="col-sm-12" style="background-color:lavenderblush;">&nbsp;</div> <div class="col-sm-12" style="background-color:lavenderblush;">&nbsp;</div> <div class="col-sm-12" style="background-color:lavenderblush;">&nbsp;</div> <div class="col-sm-12" style="background-color:lavenderblush;">&nbsp;</div> <div class="col-sm-12" style="background-color:lavenderblush;">&nbsp;</div> <div class="col-sm-12" style="background-color:lavenderblush;">&nbsp;</div> <div class="col-sm-12" style="background-color:lavenderblush;">&nbsp;</div> <div class="col-sm-12" style="background-color:lavenderblush;">&nbsp;</div> <div class="col-sm-12" style="background-color:lavenderblush;">&nbsp;</div> <div class="col-sm-12" style="background-color:lavenderblush;">&nbsp;</div> <div class="col-sm-12" style="background-color:lavenderblush;">&nbsp;</div> </div> </body> </html> <!DOCTYPE html> <html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Bootstrap 实例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <table class="table"> <thead> <tr> <th>姓名</th> <th>邮箱</th> </tr> </thead> <tbody> <tr th:each="allUser : ${allUser}"> <td th:text="${allUser.name}"></td> <td th:text="${allUser.email}"></td> </tr> </tbody> </table> </body> </html>