Thymeleaf是一种用于Web和独立环境的现代服务器端的Java模板引擎。
Thymeleaf的主要目标是将优雅的自然模板带到开发工作流程中,并将HTML在浏览器中正确显示,并且可以作为静态原型,让开发团队能更容易地协作。Thymeleaf能够处理HTML,XML,JavaScript,CSS甚至纯文本。
Thymeleaf使用Spring框架的模块,与许多常见的工具集成在一起,并且可以插入自己的功能,是现代HTML5 JVM Web开发的理想选择,尽管Thymeleaf还有更多其它的功能。
Thymeleaf建立在自然模板的概念之上,以不影响模板作为设计原型的方式将其逻辑注入到模板文件中。 这改善了设计沟通,弥合了前端设计和开发人员之间的理解偏差。
新建一个springboot项目,需要勾选五个依赖项
<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>3.0.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>
#端口号
server:
port: 8888
spring:
datasource:
driver-class-name: com.mysql.cj.jdbc.Driver
url: jdbc:mysql://127.0.0.1:3306/cust?serverTimezone=UTC&characterEncoding=utf-8
username: root
password:
thymeleaf:
cache: false
mode: HTML5
suffix: .html
prefix: classpath:/templates/
mybatis:
mapper-locations: classpath:/mapper/*.xml
configuration:
log-impl: org.apache.ibatis.logging.stdout.StdOutImpl
type-aliases-package: com.qiao.springboot_mybatis
1、客户信息类tomer
package com.qiao.springboot02.pojo;
import lombok.Data;
/**
* @Author 江沉晚吟时
* 客户信息类
* @Date 2022/12/21 18:57
*/
@Data
public class tomer {
//客户编号
private Integer id;
//客户姓名
private String name;
//客户备注
private String remark;
//客户电话号码
private String telephone;
//客户所在地址
private String address;
//客户类型id
private String typeId;
private String typeName;
}
2、客户类型类type
package com.qiao.springboot02.pojo;
import lombok.Data;
/**
* @Author 江沉晚吟时
* 客户信息类
* @Date 2022/12/21 18:57
*/
@Data
public class tomer {
//客户编号
private Integer id;
//客户姓名
private String name;
//客户备注
private String remark;
//客户电话号码
private String telephone;
//客户所在地址
private String address;
//客户类型id
private String typeId;
private String typeName;
}
service
package com.qiao.springboot02.service;
import com.qiao.springboot02.pojo.tomer;
import org.apache.ibatis.annotations.Param;
import java.util.List;
public interface tomerService {
/*
* 查询所有客户信息
* */
List<tomer> getAll();
/*
* 根据客户名称模糊查询,查询客户信息
* */
List<tomer> getByName(@Param("name") String name);
/*
* 新增客户信息
* */
int insert(tomer tomer);
/*
* 删除客户信息
* */
int delete(Integer id);
/*
* 根据id查询所有信息
* */
tomer getById(@Param("id") Integer id);
/*
* 修改客户姓名,备注
* */
int update(tomer tomer);
}
serviceImpl
package com.qiao.springboot02.service;
import com.qiao.springboot02.mapper.tomerMapper;
import com.qiao.springboot02.pojo.tomer;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import java.util.List;
/**
* @Author 江沉晚吟时
* @Date 2022/12/21 19:18
*/
@Service
public class tomerServiceImpl implements tomerService{
@Autowired
private tomerMapper tomerMapper;
@Override
public List<tomer> getAll() {
return tomerMapper.getAll();
}
@Override
public List<tomer> getByName(String name) {
return tomerMapper.getByName(name);
}
@Override
public int insert(tomer tomer) {
return tomerMapper.insert(tomer);
}
@Override
public int delete(Integer id) {
return tomerMapper.delete(id);
}
@Override
public tomer getById(Integer id) {
return tomerMapper.getById(id);
}
@Override
public int update(tomer tomer) {
return tomerMapper.update(tomer);
}
}
package com.qiao.springboot02.mapper;
import com.qiao.springboot02.pojo.tomer;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Param;
import java.util.List;
@Mapper
public interface tomerMapper {
/*
* 查询所有客户信息
* */
List<tomer> getAll();
/*
* 根据客户名称模糊查询,查询客户信息
* */
List<tomer> getByName(@Param("name")String name);
/*
* 新增客户信息
* */
int insert(tomer tomer);
/*
* 删除客户信息
* */
int delete(@Param("id") Integer id);
/*
* 根据id查询所有信息
* */
tomer getById(@Param("id") Integer id);
/*
* 修改客户姓名,备注
* */
int update(tomer tomer);
}
<?xml version="1.0" encoding="UTF8" ?>
<!DOCTYPE mapper
PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.qiao.springboot02.mapper.tomerMapper">
<select id="getAll" resultType="com.qiao.springboot02.pojo.tomer">
select t.id,t.name,t.remark,t.telephone,t.address,p.typeName from tomer t,type p
where t.typeId = p.id
order by t.id
</select>
<select id="getByName" resultType="com.qiao.springboot02.pojo.tomer" parameterType="string">
select t.id,t.name,t.remark,t.telephone,t.address,p.typeName from tomer t,type p
<where>
and t.typeId = p.id
<if test="name!=null and name!=''">
and t.name like concat('%',#{name},'%')
</if>
</where>
order by t.id
</select>
<insert id="insert" parameterType="com.qiao.springboot02.pojo.tomer">
insert into tomer values(null,#{name},#{remark},#{telephone},#{address},#{typeId})
</insert>
<delete id="delete" parameterType="integer">
delete from tomer where id = #{id}
</delete>
<select id="getById" parameterType="integer" resultType="com.qiao.springboot02.pojo.tomer">
select * from tomer where id = #{id}
</select>
<update id="update" parameterType="com.qiao.springboot02.pojo.tomer">
update tomer set name = #{name},remark=#{remark} where id = #{id}
</update>
</mapper>
package com.qiao.springboot02.controller;
import com.qiao.springboot02.pojo.tomer;
import com.qiao.springboot02.service.tomerServiceImpl;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import javax.servlet.http.HttpServletRequest;
import java.util.List;
/**
* @Author 江沉晚吟时
* @Date 2022/12/21 19:19
*/
@Controller
public class tomerController {
@Autowired
private tomerServiceImpl tomerService;
/*
* 查询所有客户信息
* */
@RequestMapping("getAll")
public String getAll(Model model){
List<tomer> all = tomerService.getAll();
model.addAttribute("tomerList",all);
return "index";
}
/*
* 根据客户名称模糊查询,查询客户信息
* */
@RequestMapping("/getByName")
public String getByName(Model model,@RequestParam("name")String name){
List<tomer> byName = tomerService.getByName(name);
model.addAttribute("tomerList",byName);
return "index";
}
/*
* 进入insert.html
* */
@RequestMapping("/toadd")
public String toadd(){
return "insert";
}
/*
* 新增客户信息
* */
@RequestMapping("/insert")
public String insert(tomer tomer, HttpServletRequest request){
String name = request.getParameter("name");
String remark = request.getParameter("remark");
String telephone = request.getParameter("telephone");
String address = request.getParameter("address");
Integer typeId = Integer.valueOf(request.getParameter("typeId"));
tomer.setName(name);
tomer.setRemark(remark);
tomer.setTelephone(telephone);
tomer.setAddress(address);
tomer.setTypeId(typeId);
int insert = tomerService.insert(tomer);
if (insert>0){
return "redirect:/getAll";
}
return "error";
}
/*
* 删除客户信息
* */
@RequestMapping("/delete")
public String delete(@RequestParam("id") Integer id){
int delete = tomerService.delete(id);
if (delete>0){
return "redirect:/getAll";
}
return "error";
}
/*
* 根据id查询所哟用户信息
* */
@RequestMapping("/getById")
public String getById(Model model,@RequestParam("id")Integer id){
tomer byId = tomerService.getById(id);
model.addAttribute("idList",byId);
return "update";
}
/*
* 修改客户姓名,备注
* */
@RequestMapping("/update")
public String update(tomer tomer,HttpServletRequest request){
Integer id = Integer.valueOf(request.getParameter("id"));
String name = request.getParameter("name");
String remark = request.getParameter("remark");
tomer.setId(id);
tomer.setName(name);
tomer.setRemark(remark);
int update = tomerService.update(tomer);
if (update>0){
return "redirect:/getAll";
}
return "error";
}
}
所用到的thymeleaf作用:
th:each:遍历循环元素
th:text:设置当前元素的文本内容,相同功能的还有th:utext,两者的区别在于前者不会转义html标签,后者会。
th:value:设置当前元素的value值
index
<form th:action="@{getByName}">
请输入客户姓名:<input type="text" name="name">
<input type="submit" value="查询">
</form>
<table border="1">
<tr>
<td>客户编号</td>
<td>客户姓名</td>
<td>客户备注</td>
<td>客户电话</td>
<td>客户所在地址</td>
<td>客户类型</td>
<td>操作</td>
</tr>
<tr th:each="list :${tomerList}">
<td th:text="${list.id}"></td>
<td th:text="${list.name}"></td>
<td th:text="${list.remark}"></td>
<td th:text="${list.telephone}"></td>
<td th:text="${list.address}"></td>
<td th:text="${list.typeName}"></td>
<td><a th:href="@{toadd}">新增</a>
<a th:href="@{'/delete?id='+${list.id}}">删除</a>
<a th:href="@{'/getById?id='+${list.id}}">编辑</a>
</td>
</tr>
</table>
insert
<form th:action="@{insert}">
客户姓名:<input type="text" name="name"><br>
客户备注:<input type="text" name="remark"><br>
客户电话:<input type="text" name="telephone"><br>
客户所在地址:<input type="text" name="address"><br>
客户类型:<input type="text" name="typeId"><br>
<input type="submit" value="提交"><br>
</form>
update
<form th:action="@{update}">
客户编号:<input type="text" readonly name="id" th:value="${idList.id}"><br>
客户姓名:<input type="text" name="name" th:value="${idList.name}"><br>
客户备注:<input type="text" name="remark" th:value="${idList.remark}"><br>
客户电话:<input type="text" name="telephone" readonly th:value="${idList.telephone}"><br>
客户所在地址:<input type="text" name="address" th:value="${idList.address}"><br>
客户类型:<input type="text" name="typeId" readonly th:value="${idList.typeId}"><br>
<input type="submit" value="提交"><br>
</form>