SpringBoot-03-templates模板引擎

小成说java

已于 2024-05-28 11:27:25 修改

阅读量1k

点赞数 32

分类专栏： springboot 文章标签： spring boot java 后端

于 2024-05-25 15:59:03 首次发布

本文链接：https://blog.csdn.net/m0_74353020/article/details/139179287

版权

springboot 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

本章内容使用templates模板引擎,以及使用springboot整合mybatis完成查询所有的操作

1、创建项目

一、准备表

SET FOREIGN_KEY_CHECKS=0;

-- ----------------------------
-- Table structure for `student`
-- ----------------------------
DROP TABLE IF EXISTS `student`;
CREATE TABLE `student` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `stuname` varchar(255) COLLATE utf8_unicode_ci DEFAULT NULL,
  `sex` varchar(255) COLLATE utf8_unicode_ci DEFAULT NULL,
  `birthday` date DEFAULT NULL,
  `idcard` varchar(255) COLLATE utf8_unicode_ci DEFAULT NULL,
  `state` int(11) DEFAULT '0',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=12 DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

-- ----------------------------
-- Records of student
-- ----------------------------
INSERT INTO `student` VALUES ('1', 'aaa', '男', '2003-01-02', '410725200301021316', '1');
INSERT INTO `student` VALUES ('2', 'niu', '女', '2005-07-02', '410725200507021325', '1');
INSERT INTO `student` VALUES ('3', 'bbb', '女', '2004-11-12', '410725200411121324', '0');
INSERT INTO `student` VALUES ('4', 'xuecheng', '男', '2005-10-02', '410725200510021313', '0');
INSERT INTO `student` VALUES ('7', 'aaa', '男', '2000-07-02', '410725200007021312', '1');
INSERT INTO `student` VALUES ('11', 'ccc', '女', '2008-06-02', '410725200806021321', '0');

二、项目结构

2、什么是templates模板引擎

前端交给我们的页面，是html页面。如果是我们以前开发，我们需要把他们转成jsp页面，jsp好处就是当我们查出一些数据转发到JSP页面以后，我们可以用jsp轻松实现数据的显示，及交互等。

jsp支持非常强大的功能，包括能写Java代码，但是呢，我们现在的这种情况，SpringBoot这个项目首先是以jar的方式，不是war，像第二，我们用的还是嵌入式的Tomcat，所以呢，他现在默认是不支持jsp的

那不支持jsp，如果我们直接用纯静态页面的方式，那给我们开发会带来非常大的麻烦，那怎么办呢？

模板引擎，我们其实大家听到很多，其实jsp就是一个模板引擎，但是springboot推荐我们使用templates,模板引擎的作用就是我们来写一个页面模板，比如有些值呢，是动态的，我们写一些表达式。而这些值，从哪来呢，就是我们在后台封装一些数据。然后把这个模板和这个数据交给我们模板引擎，模板引擎按照我们这个数据帮你把这表达式解析、填充到我们指定的位置，然后把这个数据最终生成一个我们想要的内容给我们写出去，这就是我们这个模板引擎，不管是jsp还是其他模板引擎，都是这个思想。

只不过呢，就是说不同模板引擎之间，他们可能这个语法有点不一样。其他的我就不介绍了，我主要来介绍一下SpringBoot给我们推荐的Thymeleaf模板引擎，这模板引擎呢，是一个高级语言的模板引擎，他的这个语法更简单。而且呢，功能更强大。

一、导入templates

怎么引入templates呢，对于springboot来说，什么事情不都是一个start的事情嘛，我们去在项目中引入一下

    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-thymeleaf</artifactId>
    </dependency>

有一个问题,上个作品我们扒过源码,知道这个静态资源是没有templates这个包的,那这个包是用来干嘛呢?

其实我们导入的thymeleaf模板引擎帮我们默认配置了些东西,默认的配置是在哪个文件？答:在XXXProperties,那thymeleaf模板引擎的默认配置类就是ThymeleafProperties,双击shift全局查询

我们可以看见他默认是在templates下的,classpath是指resources下,如果我们要定义自己的文件夹,不想用templates下,我们可以使用springboot的核心配置文件,使用spring.thymeleaf来覆盖，一般是不需要该的，我们只需要把我们的html页面放在类路径下的templates下，thymeleaf就可以帮我们自动渲染了

@Controller
public class TestController {
    @GetMapping("/test")
    public String test(Model model){
        //存入数据
        model.addAttribute("msg","Hello,Thymeleaf");
        //classpath:/templates/test.html
        return "test";
    }
}

二、测试

编写controller

@Controller
public class TestController {
    @GetMapping("/test")
    public String test(Model model){
        //存入数据
        model.addAttribute("msg","Hello,Thymeleaf");
        //classpath:/templates/test.html
        return "test";
    }
}

我们的页面是存放在templates下的并且是以.html为后缀的

<!DOCTYPE html> 
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>测试页面</h1>
<!--th:text就是将div中的内容设置为它指定的值，和Vue一样-->
<div th:text="${msg}"></div>
</body>
</html>

当前的xmlns:th="http://www.thymeleaf.org" 我们要使用thymeleaf，需要在html文件中导入命名空间的约束，方便提示。 如果想多了解可以去这个路径https://docs.jinkan.org/docs/jinja2/templates.html

注意:如果启动报错是因为我们引入了mysql连接的依赖,它需要指定数据库路径,我们可以先注释掉

简单的我们使用一下语法

   @RequestMapping("/t2")
    public String test2(Map<String,Object> map){
        //存入数据
        map.put("msg","<h1>Hello</h1>");
        map.put("users", Arrays.asList("aaa","bbb"));
        //classpath:/templates/test.html
        return "test";
    }

html

<!--th:text就是将div中的内容设置为它指定的值，和Vue一样-->
<div th:text="${msg}"></div>
<!--不转义-->
<div th:utext="${msg}"></div>

<!--遍历数据-->
<!--th:each每次遍历都会生成当前这个标签：官网#9-->
<h4 th:each="user :${users}" th:text="${user}"></h4>

<h4>
    <!--行内写法：官网#12-->
    <span th:each="user:${users}">[[${user}]]</span>
</h4>

3、查询所有

一、准备实体类

这里主要是用来接收查询到的参数,封装到这个实体类内,也可以作为接收前端接收过来的数据,封装到这个实体类

@Data
@AllArgsConstructor
@NoArgsConstructor
public class Student {
    private Integer id;
    private String stuname; // 年龄
    private String sex; // 性别
    private String idcard; //身份证号
    //DateTimeFormat 接收前端传入的这种格式的字符串会被转化成日期
    @DateTimeFormat(pattern = "yyyy-MM-dd")
    private Date birthday; //生日 
    private Integer state; //状态 0未删除,1删除
}

工具类

用来响应的结果统一,这不是一个约束,是一种习惯,因为很多开源项目,基本都会有一个工具类,专门,存放状态码,信息，以及数据

@AllArgsConstructor
@Data
@NoArgsConstructor
public class Result<T> {
    private  Integer code;//状态码
    private  String message;//错误信息
    private  T t; //数据
    public  Result<T> success(String msg,T t){
        return new Result<T>(200,msg,t);
    }
    public Result<T> fail(String msg){

        return new Result<T>(500,msg,null);

    }
}

二、使用模板引擎编写项目

首先我们先需要启动之后进入templates下面的main页面,我们默认第一个页面是 /的所以这里我写的,/或者/main都可以进入main页面

这里我们先把该搭建的类先搭建上去,谁调用谁先自动装配一下

1、查询所有

mapper

service

这里调用的mapper的查询方法,最后返回成一个List集合,如果查询到并且他的个数是大于0的我们就把这个数据放入我们的工具类中,否则就返回查询失败，

注意:这里我调用了两个success方法,最后一个返回应该是fail方法,但是影响不大,只是多传了一个数据

controller

因为我们使用的是模板引擎,我们只将数据放入Model里面,跳转到main页面的时候就带着这个数据了,我们只需要遍历就行了

返回前台的数据格式是

页面搭建

这里我们使用的是模板引擎的循环,遍历出所有我们当时查询到的数据,

<table>
<tr>
    <th>编号</th>
    <th>姓名</th>
    <th>性别</th>
    <th>生日</th>
    <th>身份证号</th>
    <th>操作</th>
</tr>
 <tbody>
   <tr th:each="student:${students.t}">
       <td th:text="${student.id}"></td>
       <td th:text="${student.stuname}"></td>
        ……
</tr>   
</tbody>
</table>