一、模板引擎的使用

引用，定义模板、渲染数据、调用template函数、渲染html结构如下：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>引擎模板的使用</title><!-- 第一步引入template模板 --><script src="js/template-web.js"></script><script src="js/jQuery.js"></script>
</head><body><div id="container"></div>  <!-- 需要一个h1和div的内容还有一个ul --><!-- 第二步定义模板 模板的html结构必须定义到script当中 --><script type="text/html" id="tpl-user"><!-- //普通的script标签如果没加type属性，默认的则是type="text/javascript" 意思是标签内所有的代码都按照javascript代码来执行 所以这个type值要写text/html --><h1>{{name}}这里可以有字符{{age}}</h1><!--//双大括号是template中提供的数据占位符，表示之后这里要用来存放数据的 -->{{@test}}<!-- @是表示把内容中的标签结构当html结构写入html中，不会出现在用户视角中，但是在结构中  --></script><script>// <!-- 第三步 定义需要渲染的数据 -->var data = {name: 'zs',age: 12,test: '<h3>测试原文输出</h3>',flag: 1,hobby: ['吃饭', '睡觉', '写代码'],regTime: new Date()};// <!-- 第四步  调用template函数 -->var hts = template('tpl-user', data); //这里的id不要加#号，因为这不是jQuery，是模板引擎提供的  这个函数有个返回值，值是数据在html中的结构console.log(hts);// 第五步  渲染html结构$('#container').html(hts);</script></body></html>

1.2模板引擎的条件输出

<script type='text/html'><div><!-- 模板引擎的条件输出   进入条件出条件 -->{{if flag === 0}} flag的值是0{{else if flag === 1}}flag的值是1 {{/if}}</div><ul><!-- 标准语法循环输出   进入循环{{each}} 索引{{$index}}{{$value}}值{{/each}}出循环 -->{{each hobby}}<li>索引号是：{{$index}},循环项是：{{$value}}</li>{{/each}}</ul>value是自带的取值属性 jQuery模式下
</script>

1.3过滤器的使用

以上文的data为基础，我们制作一个时间过滤器，要在jQuery的前提下，template.defaults.imports.过滤器名字 = 过滤器函数如下。

ps：这是写在js文件当中的。

  template.defaults.imports.dateFormat = function(date) {console.log(date);var y = date.getFullYear();var m = date.getMonth() + 1; //因为月份是从零开始的var d = date.getDate();return y + '-' + m + '-' + d;}

制作完之后我们就在模板中使用过滤器。格式：{{需要过滤的data属性名 | 过滤器函数名}}

<h3>{{regTime | dateFormat}}<!-- 因为我们没有，我们需要定义一个过滤器 --></h3>

二、简易的temple制作替换html中的template占位符

html的框架结构

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>制作简易模板</title><script src="js/简易字符模板.js"></script>
</head><body><div id="user-box"></div>
</body>
<script type="text/html" id="tpl-user"><div>姓名:{{name}}</div><div>年龄:{{ age }}</div><div>性别:{{ gender}}</div><div>住址:{{address }}</div>
</script>
<script>// 定于数据var data = {name: 'zs',age: 28,gender: '男',address: '北京顺义马坡'}// 调用模板引擎var htmlStr = template('tpl-user', data); //自己定义自己的引擎模板// 渲染HTML结构document.getElementById('user-box').innerHTML = htmlStr;
</script></html>

自己的template函数的制作

function template(id, data) {var str = document.getElementById(id).innerHTML;var pattern = /{{\s*([a-zA-A]+)\s*}}/;var paterResult = null;while (paterResult = pattern.exec(str)) {str = str.replace(paterResult[0], data[paterResult[1]]);}return str;
}

前后端交互—模板引擎的使用过滤器的制作及使用简易的template制作相关推荐

MVT模型＜-＞前后端不分离前后端分离模板引擎
一.前后端不分离与前后端分离的比较前后端不分离特点: 后端需控制数据的展示前后端不分家,耦合严重返回的是HTML页面,适应性.拓展性差只能用于浏览器,其它终端不匹配前后端分离的特点: 当前主 ...
echarts前后端交互数据_SpringBoot2.0实战（26）整合SpringSecurity前后端分离JSON交互...
在前端的文章中,我们实现了使用 SpringSecurity 实现登录鉴权,并使用数据库存储用户信息,实现登录鉴权 SpringBoot2.0实战(24)整合SpringSecurity之最简登录方法 ...
[原创]前后端交互的方式整理
前言本来我只是想整理下前后端如何传输数据这种交互过程,大概流程如下: 前台使用ajax通过get/post等方式提交数据到后端后端如何获取参数经过业务处理后,返回前端对应的响应数据前端接受到响 ...
ajax学习----json，前后端交互，ajax
json <script>var obj = {"name": "xiaopo","age": 18,"gender& ...
前后端交互中，返回前端的自定义响应数据结构
在前后端交互分离的体系下,我们后端一般会将返回给前端的信息数据进行格式的统一,然后返回前端json串:,一下我提供了一个模板,在实际开发中可进行参考 package com.project.util; ...
WEB前后端交互原型通用元件库、常用组件、信息输出、信息输入、信息反馈、综合系列、页面交互、首页、分类页、内容详情、用户中心、注册登录、找回密码、元件库、web元件库、rplib、axure
WEB前后端交互原型通用元件库.常用组件.信息输出.信息输入.信息反馈.综合系列.页面交互.首页.分类页.内容详情.用户中心.注册登录.找回密码.元件库.web元件库.rplib.axure原型 we ...
JAVA中的前后端交互
JDBC 什么是JDBC java数据库连接(Java Database Connectivity) 有什么用利用 Java 代码, 可以操作数据库. 怎么用注册驱动获取数据库连接创建 Sta ...
VUE进行前后端交互
目录一. 跨域 1. 什么是跨域? 2. 什么是本域? 3. 浏览器请求的三种报错二.SpringBoot解决跨域问题+其他前后端跨域请求解决方案 1. SpringBoot上直接添加@Cross ...
前后端交互(小白教学)
在我们的印象中什么是前后端交互呢? 我们一个后端程序员为什么要去学习前端知识? 前后端交互到底是靠什么而进行关联的呢? 接下来我们带着这三个问题来阅读这边文章!!! 1.前后端交互所谓前后端交互,即 ...

前后端交互—模板引擎的使用过滤器的制作及使用简易的template制作

一、模板引擎的使用

1.2模板引擎的条件输出

1.3过滤器的使用

二、简易的temple制作替换html中的template占位符

前后端交互—模板引擎的使用过滤器的制作及使用简易的template制作相关推荐

最新文章

热门文章

前后端交互—模板引擎的使用 过滤器的制作及使用 简易的template制作

一、模板引擎的使用

1.2模板引擎的条件输出

1.3过滤器的使用

二、简易的temple制作 替换html中的template占位符

前后端交互—模板引擎的使用 过滤器的制作及使用 简易的template制作相关推荐

最新文章

热门文章

前后端交互—模板引擎的使用过滤器的制作及使用简易的template制作

二、简易的temple制作替换html中的template占位符

前后端交互—模板引擎的使用过滤器的制作及使用简易的template制作相关推荐