第115天:Ajax 中artTemplate模板引擎(一)
一、不分离与分离的比较
1、前后端不分离,以freemarker模板引擎为例,看一下不分离的前后端请求的流程是什么样的?
从上图可以看出,前后端开发人员的工作耦合主要在(3)Template的使用。
后端程序员和前端程序员会出现同时修改template的情况,这样就造成了前后端的耦合,不利于快速开发和静态展示。
2、前后端分离,以artTemplate为例
一旦前后端分离了(如上图),前端只需要关注rest接口以及返回的json数据即可。所以前端程序员可以通过自定义json实现简单的预览与展示,这样就解决了前后端的耦合,前后端只通过接口进行交互。
二、artTemplate的介绍与安装
artTemplate是比较轻量级的前端引擎技术,相比较于vue等框架,这个技术就是轻量级的;但是却具备了开发web前端的所有渲染技术,性能也很出色,最重要的是很容易掌握。官方文档 https://aui.github.io/art-template/docs/
Windows平台安装与使用artTemplate实现前后端分离
1、安装NodeJs并安装
可以从官网下载,也可以从这里下载,双击安装即可!
2、安装artTemplate(Tmod)
通过CMD进入NodeJs的安装目录,执行如下命令
npm install -g tmodjs
执行完成后,即可使用 tmod 进行HTML编译了;编译后的文件是template.js,通过在HTML中引用template.js,即可实现前端引擎解析json数据,从而实现前后端分离;我们来看个例子:
3、下载源码以及代码说明
可以直接下载源码进行阅读;代码中有注释和详解(当然也可以参考 “4、demo代码详解”)。双击index.html即可运行。
下载链接:http://pan.baidu.com/s/1pLr4dbt 密码:2nst
template下的所有 .html 文件都会编译到 template.js文件中(每次编辑.html文件,都会自动编译):
如果已经明白了源码,“4、demo代码详细” 可以忽略
4、demo代码详细
一个简单的网站首页:index0.html,正常的网页代码应该是这样的:
- <body>
- <!-- 头部菜单-start -->
- <div>
- <ul>
- <!-- 如果需要从后台获取数据,这里需要freemarker引擎进行数据解析
- 比如${var}这种方式,但是前端程序员可能不了解freemarker语法,
- 从而需要后端程序员也要编辑此页面(前后端产生了耦合);
- 如果var可以通过json进行渲染,就可以解决耦合的问题;
- -->
- <li>我的菜单1</li>
- <li>我的菜单2</li>
- <li>我的菜单3</li>
- </ul>
- </div>
- <!-- 头部菜单-end -->
- </body>
如何用artTemplate解决前后端耦合的问题:
1)在template文件夹中(模板文件一般都放在其中),新建header.html文件,内容如下:
- <ul>
- <!--通过artTemplate引擎{{}}语法解析,更多语法后续文章介绍-->
- <li>{{menu1}}</li>
- <li>{{menu2}}</li>
- <li>{{menu3}}</li>
- </ul>
2)通过CMD进入template文件夹,执行tmod . 即可编译成template.js:
tmod .
3)在index.html中引入 template.js 即可使用模板引擎解析json数据了,代码如下:
- <!DOCTYPE html>
- <html lang="utf-8">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <script type="text/javascript" src="./res/js/jquery-1.11.3.min.js"></script>
- <!-- header.html 编译后的 template.js -->
- <script type="text/javascript" src="./template/build/template.js"></script>
- <!-- 使用jsonp可以解决跨域访问,后面文章介绍 -->
- <script type="text/javascript" src="./res/js/jquery.jsonp.js"></script>
- <script type="text/javascript">
- //Jquery在页面加载完成后执行;
- jQuery(document).ready(function($){
- /**
- *1)一般data 是通过 ajax 请求后台rest接口的数据;
- *2)也可以通过ajax请求 json文件 实现;
- *3)我们这里暂时写死;(前2种后面文章做介绍)
- **/
- var data = {menu1:'我的菜单1',menu2:'我的菜单2',menu2:'我的菜单3'};
- //渲染数据,template返回值是HTML
- var headerHTML = template('header',data);
- $('#headerDIV').html(headerHTML);//内容插入到 headerDIV标签中
- });
- </script>
- </head>
- <body>
- <!-- 头部-start -->
- <div id="headerDIV"></div>
- <!-- 头部-end -->
- </body>
- </html>
第115天:Ajax 中artTemplate模板引擎(一)的更多相关文章
- ajax配合art-template模板引擎的使用
最近才接触js的模板引擎听说相比以前使用的js foreach加载后台返回的json数据简便很多而且效率方面也很不错.今天自己玩了一下 后台使用的是.net mvc,数据库脚本就不提供了,返回的Jso ...
- Express 中配置使用 art-template模板引擎
art-template 官网 https://aui.github.io/art-template/ 安装: npm install --save art-template npm install ...
- artTemplate模板引擎学习实战
在我的一篇关于智能搜索框异步加载数据的文章中,有博友给我留言,认为我手写字符串拼接效率过低,容易出错.在经过一段时间的摸索和学习之后,发现现在拼接字符串的方法都不在是自己去书写了,而是使用Javasc ...
- koa art-template模板引擎的使用
art-template 模板引擎介绍 art-template 是一个简约.超快的模板引擎. 它采用作用域预声明的技术来优化模板渲染速度,从而获得接近 JavaScript 极限的运行 性能,并且同 ...
- Node学习之(第三章:art-template模板引擎的使用)
前言 大家之前都有使用过浏览器中js模板引擎,其实在Node.js中也可以使用模板引擎,最早使用模板引擎的概念是在服务端新起的. art-template art-template是一款高性能的Jav ...
- artTemplate模板引擎
artTemplate模板引擎 <li>索引 {{i + 1}} :{{value}}</li> {{/each}} </ul> </ ...
- Express ( MiddleWare/中间件 路由 在 Express 中使用模板引擎 常用API
A fast, un-opinionated, minimalist web framework for Node.js applications. In general, prefer simply ...
- artTemplate模板引擎的源码拜读
最初接触的模板引擎还是基于node的ejs,当时觉得很神奇原来还可以这么玩,后来随着学习的深入,使用过jade,doT等,当然还有一些比较火的诸如juicer.underscore还没有深入接触,直到 ...
- Art-Template模板引擎(原生写法与简洁写法)
模板引擎:把js数据转换成html需要的页面,这就是模板引擎需要做的事 • native原生语法 1. 准备数据 2. 把数据转化成html格式的字符串 使用模板引擎 artT ...
随机推荐
- 20155218 《Java程序设计》实验三(Java面向对象程序设计)实验报告
20155218 <Java程序设计>实验三(Java面向对象程序设计)实验报告 一.实验内容及步骤 (一)编码标准 在IDEA中使用工具(Code->Reformate Code) ...
- 20155334 实验四:Android程序设计
20155334实验四:Android程序设计 实验内容 基于Android Studio开发简单的Android应用并部署测试; 了解Android组件.布局管理器的使用: 掌握Android中事件 ...
- sougoupinyin for linux 安装步骤(精简版)
download deb double-click to install select fcitx reboot click it in the bar and choose the"tex ...
- wpf- DataGrid 常用属性和事件
组件所在命名空间: System.Windows.Controls 组件常用方法: BeginEdit:使DataGrid进入编辑状态. CancelEdit:取消DataGrid的编辑状态. Col ...
- struts常用知识
一,struts2是什么? struts2是一个控制框架,相当于连接底层和显示层,控制页面和数据展示 二,为什么用struts2? jsp+javabean模式:jsp里的小脚本java代码太多,页面 ...
- [agc006D]Median Pyramid Hard-[二分+乱搞]
Description 题目大意:给你一个长度为n*2-1的排列,将除了该序列头尾的两个数外的其他数(设为i)变为原序列i-1,i,i+1下标数的中位数.求最后的数是什么.例子如下: Solution ...
- 【LG2257】YY的GCD
[LG2257]YY的GCD 题面 洛谷 题解 题目大意: 给定\(n,m\)求\(\sum_{i=1}^{n}\sum_{j=1}^{m}[gcd(i,j)为质数]\). 我们设\(f(x)=[x为 ...
- Maven学习(十八)-----Maven依赖管理
其中一个Maven的核心特征是依赖管理.管理依赖关系变得困难的任务一旦我们处理多模块项目(包含数百个模块/子项目). Maven提供了一个高程度的控制来管理这样的场景. 传递依赖发现 这是很通常情况下 ...
- 译图智讯VIN码识别助力汽配商转型升级
汽配猫是上海佳驰经合能源科技有限公司自主开发的汽车配件B2B网上商城及服务平台,该平台依托互联网云技术.利用创新的商业模式及互联网思维,整合汽配产业链优秀资源,为汽车维修保养企业等产业链各方面提供汽配 ...
- 获取Java线程返回值的几种方式
在实际开发过程中,我们有时候会遇到主线程调用子线程,要等待子线程返回的结果来进行下一步动作的业务. 那么怎么获取子线程返回的值呢,我这里总结了三种方式: 主线程等待. Join方法等待. 实现Call ...