模板引擎 订阅
模板引擎(这里特指用于Web开发的模板引擎)是为了使用户界面与业务数据(内容)分离而产生的,它可以生成特定格式的文档,用于网站的模板引擎就会生成一个标准的HTML文档。 展开全文
模板引擎(这里特指用于Web开发的模板引擎)是为了使用户界面与业务数据(内容)分离而产生的,它可以生成特定格式的文档,用于网站的模板引擎就会生成一个标准的HTML文档。
信息
包    含
JavaScript、WinForm开发
特指用于
Web开发的模板引擎
中文名
模板引擎
目    的
生成一个标准的HTML文档
模板引擎概念
模板引擎不属于特定技术领域,它是跨领域跨平台的概念。在Asp下有模板引擎,在PHP下也有模板引擎,在C#下也有,甚至JavaScript、WinForm开发都会用到模板引擎技术。
收起全文
精华内容
下载资源
问答
  • 模板引擎

    2020-03-06 20:04:37
    模板引擎 安装 哪个?如何? 633

    模板引擎

    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    安装
    在这里插入图片描述
    在这里插入图片描述在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    哪个?如何?

    模板引擎语法

    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    可以计算
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    默认情况下不解析

    原文输出

    在这里插入图片描述
    在这里插入图片描述

    条件判断

    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

    循环

    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

    子模板

    在这里插入图片描述
    在这里插入图片描述

    在这里插入图片描述

    模板继承

    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

    模板配置

    在这里插入图片描述
    处理时间
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    默认两端是引号
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

    案例 640-645

    在这里插入图片描述

    展开全文
  • Thymeleaf 模板引擎简介 与 Spring Boot 整合入门

    万次阅读 多人点赞 2018-07-15 16:48:13
    Thymeleaf 模板引擎 官方文档下载 Hello World 新建应用 后台控制器 前端页面 浏览器访问测试 Thymeleaf 模板引擎 1、Thymeleaf 是 Web 和独立环境的现代服务器端 Java 模板引擎,能够处理HTML,XML,...

    目录

    Thymeleaf 模板引擎

    官方文档下载

    Hello World 快速启动


    Thymeleaf 模板引擎

    1、Thymeleaf 是 Web 和独立环境的现代服务器端 Java 模板引擎,能够处理HTML,XML,JavaScript,CSS 甚至纯文本。

    2、Thymeleaf 的主要目标是提供一种优雅和高度可维护的创建模板的方式。为了实现这一点,它建立在自然模板的概念上,将其逻辑注入到模板文件中,不会影响模板被用作设计原型。这改善了设计的沟通,弥补了设计和开发团队之间的差距。

    3、Thymeleaf 也从一开始就设计了Web标准 - 特别是 HTML5 - 允许您创建完全验证的模板,Spring Boot 官方推荐使用  thymeleaf 而不是 JSP。

    4、Thymeleaf 官网:https://www.thymeleaf.org/

    5、Thymeleaf 在 Github 的主页:https://github.com/thymeleaf/thymeleaf

    6、Spring Boot 中使用 Thymeleaf  模板引擎时非常简单,因为 Spring Boot 已经提供了默认的配置,比如解析的文件前缀,文件后缀,文件编码,缓存等等,程序员需要的只是写 html 中的内容即可,可以参考《Spring Boot 引入 Thymeleaf 及入门》

    模板引擎

    1)市面上主流的 Java 模板引擎有:JSP、Velocity、Freemarker、Thymeleaf

    2)JSP本质也是模板引擎,Spring Boot 官方支持:Thymeleaf Templates、FreeMarker Templates、Groovy Templates 等模板引擎。

    3)模板引擎原理图如下,模板引擎的作用都是将模板(页面)和数据进行整合然后输出显示,区别在于不同的模板使用不同的语法,如 JSP 的 JSTL 表达式,以及 JSP 自己的表达式和语法,同理 Thymeleaf 也有自己的语法

    官方文档下载

    https://www.thymeleaf.org/documentation.html

    Hello World 快速启动

    1、新建 Spring Boot 项目,导入 thymeleaf 依赖:

    <!-- 导入Spring Boot的thymeleaf依赖-->
    <!-- https://mvnrepository.com/artifact/org.springframework.boot/spring-boot-starter-thymeleaf -->
    <!-- <version>2.2.7.RELEASE</version> -->
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-thymeleaf</artifactId>
    </dependency>
    

    2、提供一个后台控制器如下,用于向前台传递参数(注:后台往前台传参和平时一样即可,Thymeleaf 没有严格要求):

    import org.springframework.stereotype.Controller;
    import org.springframework.web.bind.annotation.RequestMapping;
    import java.util.Map;
    /**
     * Created by Administrator on 2018/7/17 0017.
     * 用户控制器
     */
    @Controller
    public class UserController {
        /**
         * 全部基于 Spring Boot给 Thymeleaf的默认配置
         * 所以下面会跳转到 classpath:/templates/home.html 页面
         *
         * @param paramMap
         * @return
         */
        @RequestMapping("home")
        public String goHome(Map<String, Object> paramMap) {
            /** 默认Map的内容会放大请求域中,页面可以直接使用Thymeleaf取值*/
            paramMap.put("name", "张三");
            paramMap.put("age", 35);
            return "home";
        }
    
    }
    

    3、前端页面使用 Thymeleaf 处理参数:

    前端 .html 页面中的 <html> 标签可以加上 xmlns:th="http://www.thymeleaf.org" 属性,IDEA 编辑器就会有 Thymeleaf 语法提示,不写也不影响运行。

    <!DOCTYPE html>
    <html xmlns:th="http://www.thymeleaf.org">
    <head lang="en">
        <meta charset="UTF-8">
        <title>主页</title>
    </head>
    <body>
    <h3>欢迎来到主页</h3>
        <!--Thymeleaf 语法取值-->
        姓名:<span th:text="${name}">未知</span>
        年龄:<span th:text="${age}">未知</span>
    </body>
    </html>

    4、浏览器访问测试

    1、对于Spring Boot关于 Thymeleaf 的渲染规则不清楚的,可以参考《Spring Boot 引入 Thymeleaf 及入门》

    2、关于 Thmeleaf 的更多使用语法,以及深入内容可以参考《Thymeleaf》

     

    展开全文
  • 【SpringBoot】三、SpringBoot中整合Thymeleaf模板引擎

    万次阅读 多人点赞 2020-04-16 21:41:09
    Thymeleaf是一个流行的模板引擎,该模板引擎采用Java语言开发,模板引擎是一个技术名词,是跨领域跨平台的概念,在Java语言体系下有模板引擎,在C#、PHP语言体系下也有模板引擎。除了thymeleaf之外还有Velocity、Fr....

    SpringBoot 为我们提供了 Thymeleaf 自动化配置解决方案,所以我们在 SpringBoot 中使用 Thymeleaf 非常方便

    一、简介

    Thymeleaf是一个流行的模板引擎,该模板引擎采用Java语言开发,模板引擎是一个技术名词,是跨领域跨平台的概念,在Java语言体系下有模板引擎,在C#、PHP语言体系下也有模板引擎。除了thymeleaf之外还有Velocity、FreeMarker等模板引擎,功能类似。
    Thymeleaf的主要目标在于提供一种可被浏览器正确显示的、格式良好的模板创建方式,因此也可以用作静态建模。你可以使用它创建经过验证的XML与HTML模板。使用thymeleaf创建的html模板可以在浏览器里面直接打开(展示静态数据),这有利于前后端分离。需要注意的是thymeleaf不是spring旗下的。

    二、整合

    • 1、引入 thymeleaf,在 pom.xml 文件中加入:
    <!-- thymeleaf 模板引擎 -->
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-thymeleaf</artifactId>
    </dependency>
    <!-- web 开发 -->
    <dependency>
    	<groupId>org.springframework.boot</groupId>
    	<artifactId>spring-boot-starter-web</artifactId>
    </dependency>
    

    由于 SpringBoot 为 thymeleaf 提供了一整套的自动化配置方案,使得我们几乎不需要做任何更改就可以直接使用了

    • 2、SpringBoot 中 thymeleaf 默认配置
    @ConfigurationProperties(prefix = "spring.thymeleaf")
    public class ThymeleafProperties {
    	private static final Charset DEFAULT_ENCODING = StandardCharsets.UTF_8;
    	public static final String DEFAULT_PREFIX = "classpath:/templates/";
    	public static final String DEFAULT_SUFFIX = ".html";
    	/**
    	 * Whether to check that the template exists before rendering it.
    	 */
    	private boolean checkTemplate = true;
    	/**
    	 * Whether to check that the templates location exists.
    	 */
    	private boolean checkTemplateLocation = true;
    	/**
    	 * Prefix that gets prepended to view names when building a URL.
    	 */
    	private String prefix = DEFAULT_PREFIX;
    	/**
    	 * Suffix that gets appended to view names when building a URL.
    	 */
    	private String suffix = DEFAULT_SUFFIX;
    	/**
    	 * Template mode to be applied to templates. See also Thymeleaf's TemplateMode enum.
    	 */
    	private String mode = "HTML";
    	...
    }
    

    通过 org.springframework.boot.autoconfigure.thymeleaf.ThymeleafProperties 找到 SpringBoot 中 thymeleaf 的默认配置,我们不难看出

    默认编码格式:UTF-8
    默认路径:classpath:/templates/,都放在根目录下的 templates 目录下
    默认后缀:.html,thymeleaf 都是 html 文件
    检查模板:默认开启
    检查模板位置:默认开启

    从上述源码可以看出,我们的 thymeleaf 模板文件默认放在 resources/templates 目录下,默认的后缀是 .html
    当然,我们不想使用默认配置,我们也可以在 application.tml 文件中以 spring.thymeleaf 开始个性配置

    例如:

    spring:
    	# thymeleaf模板引擎配置
      	thymeleaf:
    	    # 缓存
    	    cache: false
    	    # 编码格式
    	    encoding: UTF-8
    

    我们在开发中,可能被缓存坑过很多次,我们可以将 thymeleaf 中的缓存给关闭,保持实时更新

    三、开发

    • 1、创建控制层 IndexController.java
    @Controller
    public class IndexController {
    
        /**
         * 请求 index 页面
         * @return
         */
         @GetMapping("index")
        public ModelAndView index() {
            ModelAndView mav = new ModelAndView("index");
            mav.addObject("title", "首页");
            List<UserInfo> list = new ArrayList<>();
            UserInfo user = null;
            for (int i = 0; i < 10; i++) {
                user = new UserInfo();
                user.setId(i + 1);
                user.setNickName("user" + i);
                user.setSignature("SpringBoot真香,+" + (i + 1));
                list.add(user);
            }
            mav.addObject("users", list);
            return mav;
        }
    }
    

    我们创建了 IndexController,请求 index 返回 index.html 页面,

    • 2、创建 thymeleaf 模板 index.html

    下面我们在 resources/templates 目录下创建 index.html

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="UTF-8">
        <title th:text="${title}"></title>
    </head>
    <body>
    <table border="1">
        <tr>
            <td>用户编号</td>
            <td>用户昵称</td>
            <td>个性签名</td>
        </tr>
        <tr th:each="item : ${list}">
            <td th:text="${item.id}"></td>
            <td th:text="${item.nickName}"></td>
            <td th:text="${item.signature}"></td>
        </tr>
    </table>
    </body>
    </html>
    

    注意:

    xmlns=“http://www.w3.org/1999/xhtml” xmlns:th=“http://www.thymeleaf.org”,是必须要在 html 标签中写入的
    xmlns 是xml namespace的缩写,也就是 XML 命名空间
    xmlns 属性可以在文档中定义一个或多个可供选择的命名空间
    该属性可以放置在文档内任何元素的开始标签中
    该属性的值类似于URL,它定义了一个命名空间,浏览器会将此命名空间用于该属性所在元素内的所有内容

    我们在 ModelAndView 中传入了 title 参数,使用 th:text="${title}" 给 title 标签赋值,与 JSTL 使用方式类似,效果如图:
    title效果展示
    我们还通过 th:each=“item : ${list}” 渲染了一个用户表格,如图:
    用户表格

    • 3、拼接 URL
    <a th:href="@{/user/info(id=${user.id})}">参数拼接</a>
    <a th:href="@{/user/info(id=${user.id},phone=${user.phone})}">多参数拼接</a>
    <a th:href="@{/user/info/{uid}(uid=${user.id})}">RESTful风格</a>
    <a th:href="@{/user/info/{uid}/abc(uid=${user.id})}">RESTful风格</a>
    

    四、使用技巧

    thymeleaf 在 JavaScript 中的使用技巧

    • 1、开发前戏
    <script type="text/javascript" th:inline="javascript">
    ...
    </script>
    

    我们需要在 script 标签中写入 th:inline=“javascript”,注明使用 thymeleaf 的内联方法

    • 2、Ajax 路径问题
    url: /*[[@{/user/saveUser}]]*/,
    data: {
    	'user': user
    }
    type: 'post',
    dataType: 'json',
    

    我们使用 /[[@{/**}]]/ 来获取项目的上下文路径,访问项目

    • 3、获取 model 中的数据
    <script type="text/javascript" th:inline="javascript">
    	var userName = [[${user.name}]];
    </script>
    
    • 4、使用前端框架的 iframe 弹窗,例如 layui
    function showUserInfo() {
        layer.open({
            type: 2,
            title: '用户信息',
            shade: 0.2,
            area: ['600px', '450px'],
            offset: '100px',
            shadeClose: false,
            content: /*[[@{/user/getUserInfo}]]*/
        });
    }
    

    需要传参:

    layer.open({
        type: 2,
        title: '用户信息',
        shade: 0.2,
        area: ['600px', '450px'],
        offset: '100px',
        shadeClose: false,
        content: [[@{/user/getUserInfo}]]+'?id='+id
    });
    

    我们在路径中传入了用户的 id

    • 5、时间格式化
    <span th:text="${#dates.format(data.createTime, 'yyyy年MM月dd日')}"></span>
    
    <span th:text="${#dates.format(data.createTime, 'yyyy-MM-dd HH:mm:ss')}"></span>
    
    • 6、解析 HTML 内容
    <div th:utext="${data.content}"></div>
    
    • 7、动态设置背景图片
    <body th:style="'background: url('+@{/pages/login/backgroud.jpg}+') no-repeat center'"></body>
    

    五、手动渲染

    我们在发送邮件的时候,会需要使用到邮件模板,我们选择手动渲染即可

    • 1、新建一个邮件模板 email.html
    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="UTF-8">
        <title>欢迎加入我们</title>
    </head>
    <body>
    <h1 style="text-align: center">入职欢迎</h1>
    <p><span th:text="${user.name}"></span>:你好!!!欢迎加我们XXX公司,你的入职信息如下:</p>
    <p>岗位:<span th:text="${user.job}"></span></p>
    <p>月薪:<span th:text="${user.wages}"></span></p>
    </body>
    </html>
    
    • 2、发送邮件测试
    @Autowired
    TemplateEngine templateEngine;
    
    @Test
    public void test1() throws MessagingException {
        Context context = new Context();
        context.setVariable("name", "张三");
        context.setVariable("job", "Java开发工程师");
        context.setVariable("wages", 7800);
        String mail = templateEngine.process("email", context);
        emailUtils.sendHtmlMail("xxxxxxxxx@qq.com", "入职通知", mail);
    }
    

    SpringBoot 中发送邮件的教程请看:SpringBoot中发送邮件

    • 3、效果展示

    最终,我们收到如下邮件:
    效果图

    总结

    Spring Boot 针对 Thymeleaf 提供了一整套的自动化配置方案,这对我们在 SpringBoot 中使用 Thymeleaf 更加方便,SpringBoot 为我们提供了默认配置,我们也可以对其进行个性化配置

    以上就是我们在学习 SpringBoot 整合 Thymeleaf 时的一些知识点,更多内容请访问:Thymeleaf 官方文档

    Thymeleaf 的官方文档:https://www.thymeleaf.org
    

    如您在阅读中发现不足,欢迎留言!!!

    展开全文
  • 比如一个简单的轮播图的数据: 传统的方法是拼接字符串方式,如下: ...由于这种结构简单还好,拼接的时候要注意引号问题,一旦需求发生...2、说一下轻量化的template.js模板引擎使用,简单举一个小例子如下: ...

    1、根据后端返回的json数据,然后来生成html,再渲染页面。

    比如一个简单的轮播图的数据:

    传统的方法是拼接字符串方式,如下:

    由于这种结构简单还好,拼接的时候要注意引号问题,一旦需求发生变化,这里修改起来也是很麻烦

    结构复杂的就需要模板引擎来改善这种情况。

    2、轻量化的template.js模板引擎使用,简单举一个小例子如下:

    引用template — —  ajax请求数据后  赋值给data — — 然后绑定数据

    绑定数据格式  <%= title %>
    
    循环获取数据  
    1、<%for(var i in items){%>    <%}%>
    2、<%items.forEach(function(item){%>   <%})%>
    
    

    完整代码在这里: 

     

    展开全文
  • 模板引擎(这里特指用于Web开发的模板引擎)是为了使用户界面与业务数据(内容)分离而产生的,它可以生成特定格式的文档,用于网站的模板引擎就会生成一个标准的HTML文档。 模板引擎不属于特定技术领域,它是跨领域...
  • 什么是模板引擎:https://blog.csdn.net/weixin_43924228/article/details/86724134 thymeleaf相当于过去的jsp,当然比jsp先进不少,是后端渲染,后端直接推送的是整个html文档 在前后端不分离的情况下,...
  • 如果我们使用jade模板引擎,里面的页面应该是这样的: 后缀名都是jade 如果想使用ejs 模板引擎要怎么做呢? (1)安装 ejs npm install ejs --save (2)在项目的app.js 文件内新增 var ejs = require('...
  • 2.模板引擎 3.pug模板引擎使用 3.1安装pug 3.2pug常用语法 3.3练习工具 hade 4.nunjucks模板引擎在koa中的应用 4.1安装koa-nunjucks-2 4.2使用nunjucks 4.3nunjucks的语法使用——变量 4.4nunjucks的语法...
  • 模板引擎概念

    2019-01-16 11:25:58
    模板引擎(这里特指用于Web开发的模板引擎)是为了使用户界面与业务数据(内容)分离而产生的,它可以生成特定格式的文档,用于网站的模板引擎就会生成一个标准的HTML文档。 概念 模板引擎不属于特定技术领域,它是...
  • 模板引擎是什么 模板引擎是将静态部分糅合的一种实现机制或者技术。 目前使用较广的模板引擎有以下几种:Jade / Pug、EJS、Handlebars。 本文详述Jade / Pug模板引擎在项目开发中的使用 注意: Jade现在已经...
  • 超快javascript模板引擎,useTpl模板引擎

    千次阅读 2018-04-27 22:57:44
    近日本人做交互性频繁的页面开发,前端人员技术不是很好,所以我一手开发后台,一手开发前端交互,用过很多模板引擎,感觉效果不佳,无奈自写了一个,献丑献丑,下面是测试时间,第一次测试可能不准,多测试几次项目...
  • MyTpl高性能模板引擎

    万次阅读 2020-09-29 14:05:03
    很多模板引擎应用了缓存,我也看过有时候看着很搞笑,缓存并没有写入到 localStorage等可以离线缓存地方,而是定义变量保存起来,这样的模板引擎基本就是忽悠人呢,来骗过模板引擎压力测试,页面刷新那些所谓的缓存...
  • 前端模板引擎

    千次阅读 2018-07-06 19:26:07
    为什么要使用模板引擎关于为什么要使用模板引擎, 就我现在的项目而言,我还停留在进行发送Ajax请求到后台后,利用模板引擎拼接接受到的JSON字符串,展现到页面的地步. 按照我老师的一句话表达:不用重复制造轮子. 对于...
  • 模板引擎 Smarty

    2016-07-03 15:36:58
    模板引擎(这里特指用于Web开发的模板引擎)是为了使用户界面与业务数据(内容)分离而产生的,它可以生成特定格式的文档,用于网站的模板引擎就会生成一个标准的HTML文档。 模板引擎不属于特定技术领域,它是跨...
  • 1 什么是模板引擎 概念 :模板引擎是为了使用户界面与业务数据(内容)分离而产生的,它可以生成特定格式的文档,用于网站的模板引擎就会生成一个标准的文档 就是将模板文件和数据通过模板引擎生成一个HTML代码 ...
  • 受到群里兄弟们的竭力邀请,老陈终于决定来分享一下.NET下的模板引擎开发技术。本系列文章将会带您由浅入深的全面认识模板引擎的概念、设计、分析和实战应用,一步一步的带您开发出完全属于自己的模板引擎。关于模板...
  • Jade模板引擎

    2016-10-16 22:52:36
    Jade 模板引擎
  • 最近做了JS模板引擎测试,拿各个JS模板引擎在不同浏览器上去运行同一程序,下面是模板引擎测试数据;通过测试artTemplate、juicer与doT引擎模板整体性能要有绝对优势;
  • 认识pug模板引擎

    2020-04-07 00:56:24
    我们知道ES6后,javascript提供了一个模板字符串,可以实现模板引擎的功能,很方便好用,但是它需要写在js文件中,然而对一下大型而又复杂的项目而言,再这样写就不太好了,此时我们就需要借助外界的引擎模板来实现...
  • Groovy模板引擎

    万次阅读 2017-03-07 21:06:35
    模板引擎介绍Groovy语言包含了一个模板引擎功能,可以生成各种类型的格式化文件,非常方便。模板引擎有下面几个,它们都实现了Template接口。 SimpleTemplateEngine - 基本的模板 StreamingTemplateEngine - 功能和 ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 36,918
精华内容 14,767
关键字:

模板引擎