Thymeleaf 是一款用于渲染 XML/XHTML/HTML5 内容的模板引擎。它与 JSP,Velocity,FreeMaker 等模板引擎类似,也可以轻易地与 Spring MVC 等 Web 框架集成。与其它模板引擎相比,Thymeleaf 最大的特点是,即使不启动 Web 应用,也可以直接在浏览器中打开并正确显示模板页面 。

Thymeleaf介绍

Thymeleaf 是新一代 Java 模板引擎,与 Velocity、FreeMarker 等传统 Java 模板引擎不同,Thymeleaf 支持 HTML 原型,其文件后缀为“.html”,因此它可以直接被浏览器打开,此时浏览器会忽略未定义的 Thymeleaf 标签属性,展示 thymeleaf 模板的静态页面效果;当通过 Web 应用程序访问时,Thymeleaf 会动态地替换掉静态内容,使页面动态显示。


常用th标签都有那些?

关键字

功能介绍

案例

th:id

替换id

<input th:id="'xxx' + ${collect.id}"/>

th:text

文本替换

<p th:text="${collect.description}">description</p>

th:utext

支持html的文本替换

<p th:utext="${htmlcontent}">conten</p>

th:object

替换对象

<div th:object="${session.user}">

th:value

属性赋值

<input th:value="${user.name}" />

th:with

变量赋值运算

<div th:with="isEven=${prodStat.count}%2==0"></div>

th:style

设置样式

th:style="'display:' + @{(${sitrue} ? 'none' : 'inline-block')} + ''"

th:onclick

点击事件

th:onclick="'getCollect()'"

th:each

属性赋值

tr th:each="user,userStat:${users}">

th:if

判断条件

<a th:if="${userId == collect.userId}" >

th:unless

和th:if判断相反

<a th:href="@{/login}" th:unless=${session.user != null}>Login</a>

th:href

链接地址

<a th:href="@{/login}" th:unless=${session.user != null}>Login</a> />

th:switch

多路选择 配合th:case 使用

<div th:switch="${user.role}">

th:case

th:switch的一个分支

<p th:case="'admin'">User is an administrator</p>

th:fragment

布局标签,定义一个代码片段,方便其它地方引用

<div th:fragment="alert">

th:include

布局标签,替换内容到引入的文件

<head th:include="layout :: htmlhead" th:with="title='xx'"></head> />

th:replace

布局标签,替换整个标签到引入的文件

<div th:replace="fragments/header :: title"></div>

th:selected

selected选择框 选中

th:selected="(${xxx.id} == ${configObj.dd})"

th:src

图片类地址引入

<img class="img-responsive" alt="App Logo" th:src="@{/img/logo.png}" />

th:inline

定义js脚本可以使用变量

<script type="text/javascript" th:inline="javascript">

th:action

表单提交的地址

<form action="subscribe.html" th:action="@{/subscribe}">

th:remove

删除某个属性

<tr th:remove="all"> 1.all:删除包含标签和所有的孩子。2.body:不包含标记删除,但删除其所有的孩子。3.tag:包含标记的删除,但不删除它的孩子。4.all-but-first:删除所有包含标签的孩子,除了第一个。5.none:什么也不做。这个值是有用的动态评估。

th:attr

设置标签属性,多个属性可以用逗号分隔

比如 th:attr="src=@{/image/aa.jpg},title=#{logo}",此标签不太优雅,一般用的比较少。

还有非常多的标签,这里只列出最常用的几个,由于一个标签内可以包含多个th:x属性,其生效的优先级顺序为:
include,each,if/unless/switch/case,with,attr/attrprepend/attrappend,value/href,src ,etc,text/utext,fragment,remove

1.创建Spring Boot项目

添加Lombok、Spring Web、Thymeleaf、MYSQL Driver依赖

 2.查看项目新建完成后的pom文件


<?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.6</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>com.p</groupId>
    <artifactId>springboottest</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>springboottest</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-jdbc</artifactId>
        </dependency>
        <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.3.0</version>
        </dependency>

        <dependency>
            <groupId>com.mysql</groupId>
            <artifactId>mysql-connector-j</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>
        </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>


3.修改配置文件src/main/resources

修改配置文件本文不使用application.properties文件而使用更加简洁的application.yml文件

spring druid 使用教程怎么写增删改查_User

在application.yml文件里面加入以下内容:


# tomcat 端口号设置 随意更改
server:
  port: 8888

#配置数据源  datasource
spring:
  datasource:
    driver-class-name: com.mysql.cj.jdbc.Driver
    url: jdbc:mysql://localhost:3306/y2demo?serverTimezone=UTC
    username: root
    password: root
  thymeleaf:
    #模板类型  默认为HTML,模板是html文件
    mode: HTML5
    #缓存 默认为true,但在开发阶段为了修改立即生效,需设置为false
    cache: false
    #模板视图前缀 默认设置为 classpath:/templates/
    prefix: classpath:/templates/
    #模板视图后缀 默认为 .html
    suffix: .html

#引入mybatis
mybatis:
  type-aliases-package: com.p.springboottest.pojo #引入类型别名
  mapper-locations: classpath:/mapper/*.xml  #引入mapper文件
  configuration:
    log-impl: org.apache.ibatis.logging.stdout.StdOutImpl #输出sql语句日志


 4.创建表


-- ----------------------------
-- Table structure for user
-- ----------------------------
DROP TABLE IF EXISTS `user`;
CREATE TABLE `user`  (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `username` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL,
  `password` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL,
  `sex` int(255) NULL DEFAULT NULL,
  `age` int(11) NULL DEFAULT NULL,
  `email` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL,
  PRIMARY KEY (`id`) USING BTREE
) ENGINE = InnoDB AUTO_INCREMENT = 6 CHARACTER SET = utf8 COLLATE = utf8_general_ci ROW_FORMAT = Dynamic;

-- ----------------------------
-- Records of user
-- ----------------------------
INSERT INTO `user` VALUES (1, '澳门', '1231231', 1, 12, '123@qq.com');
INSERT INTO `user` VALUES (4, 'd', '321321', 1, 11, '321@qq.com');
INSERT INTO `user` VALUES (6, '润', '123123', 1, 121, '123@qq.com');


5.该项目的文件结构

spring druid 使用教程怎么写增删改查_spring boot_02

6.开始编码操作

6.1在pojo包中新建User.java,使之与数据库中的字段一一对应

     @Data注解可以省略getset,用这个注解就能实现


@Data
public class User {
    private Integer id;
    private String username;
    private String password;
    private Integer age;
    private Integer sex;
    private String email;
}


6.2 在mapper包中创建UserMappers接口

@Repository的作用为给bean在容器中命名

@Mapper作用:

1.使用@Mapper将UserMappers接口交给Spring进行管理

2.不用写Mapper映射文件(XML)

3.为这个UserMappers接口生成一个实现类,让别的类进行引用


@Repository
@Mapper
public interface UserMappers {
    /**
     * 查询所有的用户信息
     * @return List<User>
     */
    List<User> findAllUser();

    /**
     * 删除用户信息
     * @param id
     * @return
     */
    int deleteUser(Integer id);

    /**
     * 新增用户信息
     * @param user
     * @return
     */
    int addUser(User user);

    /**
     * 根据id信息查询
     */
    User findById(Integer id);

    /**
     * 修改用户信息
     * @param user
     * @return
     */
    int updateUser(User user);
}


6.3在service包中创建UserService.java


public interface UserService {
    /**
     * 查询所有的用户信息
     * @return List<User>
     */
    List<User> findAllUser();

    /**
     * 删除用户信息
     * @param id
     * @return
     */
    int deleteUser(Integer id);

    /**
     * 新增用户信息
     * @param user
     * @return
     */
    int addUser(User user);

    /**
     * 根据id信息查询
     */
    User findById(Integer id);

    /**
     * 修改用户信息
     * @param user
     * @return
     */
    int updateUser(User user);
}


6.4在service包中创建UserServiceImpl.java

@Service
此注注解属于业务逻辑层,service或者manager层
默认按照名称进行装配,如果名称可以通过name属性指定,如果没有name属性,注解写在字段上时,默认去字段名进行查找,如果注解写在setter方法上,默认按照方法属性名称进行装配。当找不到匹配的bean时,才按照类型进行装配,如果name名称一旦指定就会按照名称进行装配

@Autowired

autowired有4种模式,byName、byType、constructor、autodectect

其中@Autowired注解是使用byType方式的

byType方式是根据属性类型在容器中寻找bean类


@Service
public class UserServiceImpl implements UserService{

    @Autowired
    private UserMappers userMappers;

    @Override
    public List<User> findAllUser() {
        return userMappers.findAllUser();
    }

    @Override
    public int deleteUser(Integer id) {
        return userMappers.deleteUser(id);
    }

    @Override
    public int addUser(User user) {
        return userMappers.addUser(user);
    }

    @Override
    public User findById(Integer id) {
        return userMappers.findById(id);
    }

    @Override
    public int updateUser(User user) {
        return userMappers.updateUser(user);
    }
}


6.5在controller包中创建PageController.java以及UserController.java


@Controller
public class PageController {

    /**
     * 统一返回页面代码
     * @param page
     * @return
     */
    @RequestMapping("/{page}.html")
    public String toPage(@PathVariable("page")String page){
        return page;
    }
}


@Controller
public class UserController {

    @Autowired
    private UserServiceImpl userService;

    @RequestMapping("/getAll")
    public String findAllUser(Model model){
        List<User> allUser = userService.findAllUser();
        model.addAttribute("userList",allUser);
        return "index";
    }

    @RequestMapping("/delete/{id}")
    public String delete(@PathVariable("id")Integer id, Model model){
        int i=userService.deleteUser(id);
        if (i>0){
            return "redirect:/getAll";
        }
        return "error";
    }

    @RequestMapping("/addUser")
    public String add(User user){
        int i=userService.addUser(user);
        if (i>0){
            return "redirect:/getAll";
        }
        return "error";
    }

    @RequestMapping("/getById/{id}")
    public String getById(@PathVariable("id")Integer id, Model model){
        User user=userService.findById(id);
        model.addAttribute("user",user);
        return "update";
    }

    @RequestMapping("/updates")
    public String updates(User user){
        int i=userService.updateUser(user);
        if (i>0){
            return "redirect:/getAll";
        }
        return "error";
    }

    @RequestMapping("/index.html")
    public String toIndex(){
        return "index";
    }
}


6.6在src/main/resources/mapper文件夹下新建UserMappers的映射文件UserMappers.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.p.springboottest.mapper.UserMappers">
    <select id="findAllUser" resultType="User">
        select * from user
    </select>

    <insert id="addUser" parameterType="User" useGeneratedKeys="true" keyProperty="id">
        insert into `user` values (#{id},#{username},#{password},#{sex},#{age},#{email});
    </insert>

    <delete id="deleteUser" parameterType="Integer">
        delete from `user` where id=#{id}
    </delete>

    <select id="findById" parameterType="Integer" resultType="User">
        select * from user where id=#{id}
    </select>

    <update id="updateUser" parameterType="User">
        update `user` set username=#{username},password=#{password},sex=#{sex},age=#{age},email=#{email}
        where id=#{id}
    </update>
</mapper>


6.7在src/main/resources/templates文件夹下新建查询页面index.html

1.在html根元素添加命名空间声明:xmlns:th="http://www.thymeleaf.org"

2.在html标签内引用thymeleaf的语法:th:text="${data}",接收key为data的数据,替换所修饰标签内的文本内容。


<!DOCTYPE html>
<!--suppress ALL-->
<html lang="en" xmlns:th="http://www.thymeleaf.org"><!--1.添加命名空间声明-->
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<a href="add.html">新增</a>
<table border="1">
    <thead>
    <tr>
        <th>编号</th>
        <th>名称</th>
        <th>密码</th>
        <th>性别</th>
        <th>年龄</th>
        <th>邮箱</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody th:each="user:${userList}">
    <tr>
        <!--2.引用thymeleaf语法-->
        <th th:text="${user.id}"></th>
        <th th:text="${user.username}"></th>
        <th th:text="${user.password}"></th>
        <th th:text="${user.sex}"></th>
        <th th:text="${user.age}"></th>
        <th th:text="${user.email}"></th>
        <th>
            <a th:href="@{'/delete/'+${user.id}}">删除</a>
            <a th:href="@{'/getById/'+${user.id}}">编辑</a>
        </th>
    </tr>
    </tbody>
</table>
</body>
</html>


6.8在src/main/resources/templates文件夹下新建新增页面add.html


<!DOCTYPE html>
<!--suppress ALL-->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>添加员工信息</title>
</head>
<body>
<h1>
  添加员工信息:
</h1>
<form action="/addUser" method="post">
  <table cellpadding="0" cellspacing="0" border="0">
    <tr>
      <td valign="middle" align="right">
        用户姓名:
      </td>
      <td valign="middle" align="left">
        <input type="text" name="username" />
      </td>
    </tr>
    <tr>
      <td valign="middle" align="right">
        密码:
      </td>
      <td valign="middle" align="left">
        <input type="text" name="password" />
      </td>
    </tr>
    <tr>
      <td valign="middle" align="right">
        年龄:
      </td>
      <td valign="middle" align="left">
        <input type="text" name="age" />
      </td>
    </tr>
    <tr>
      <td valign="middle" align="right">
        性别:
      </td>
      <td valign="middle" align="left">
        <select name="sex">
          <option value="1">男</option>
          <option value="0">女</option>
        </select>
      </td>
    </tr>
    <tr>
      <td valign="middle" align="right">
        邮箱:
      </td>
      <td valign="middle" align="left">
        <input type="text" name="email" />
      </td>
    </tr>
  </table>
  <p>
    <input type="submit" class="button" value="提交" />
  </p>
</form>
</body>
</html>


6.9在src/main/resources/templates文件夹下新建修改页面update.html


<!DOCTYPE html>
<!--suppress ALL-->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<form action="/updates" method="post">
  <table cellpadding="0" cellspacing="0" border="0">
    <input type="hidden" name="id" th:value="${user.id}"/>
    <tr>
      <td valign="middle" align="right">
        用户姓名:
      </td>
      <td valign="middle" align="left">
        <input type="text" name="username" th:value="${user.username}"/>
      </td>
    </tr>
    <tr>
      <td valign="middle" align="right">
        密码:
      </td>
      <td valign="middle" align="left">
        <input type="text" name="password" th:value="${user.password}"/>
      </td>
    </tr>
    <tr>
      <td valign="middle" align="right">
        年龄:
      </td>
      <td valign="middle" align="left">
        <input type="text" name="age" th:value="${user.age}"/>
      </td>
    </tr>
    <tr>
      <td valign="middle" align="right">
        性别:
      </td>
      <td valign="middle" align="left">
        <select name="sex">
          <option th:if="${user.sex} == 1" value="1">男</option>
          <option th:if="${user.sex} == 0" value="0">女</option>
        </select>
      </td>
    </tr>
    <tr>
      <td valign="middle" align="right">
        邮箱:
      </td>
      <td valign="middle" align="left">
        <input type="text" name="email" th:value="${user.email}"/>
      </td>
    </tr>
  </table>
  <p>
    <input type="submit" class="button" value="提交" />
  </p>
</form>
</body>
</html>


7.测试

到这里就完成了增删改查操作,接下来我们对上面的代码在浏览器中进行验证

7.1查询用户信息:

spring druid 使用教程怎么写增删改查_java_03


 7.2根据id删除用户信息:

spring druid 使用教程怎么写增删改查_java_04


7.3新增用户信息:

spring druid 使用教程怎么写增删改查_spring_05


 7.4根据id查询用户信息:

spring druid 使用教程怎么写增删改查_spring_06


  7.5修改用户信息:

spring druid 使用教程怎么写增删改查_java_07

 

spring druid 使用教程怎么写增删改查_User_08