一、不分离与分离的比较

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模板引擎(一)的更多相关文章

  1. ajax配合art-template模板引擎的使用

    最近才接触js的模板引擎听说相比以前使用的js foreach加载后台返回的json数据简便很多而且效率方面也很不错.今天自己玩了一下 后台使用的是.net mvc,数据库脚本就不提供了,返回的Jso ...

  2. Express 中配置使用 art-template模板引擎

    art-template 官网 https://aui.github.io/art-template/ 安装: npm install --save art-template npm install ...

  3. artTemplate模板引擎学习实战

    在我的一篇关于智能搜索框异步加载数据的文章中,有博友给我留言,认为我手写字符串拼接效率过低,容易出错.在经过一段时间的摸索和学习之后,发现现在拼接字符串的方法都不在是自己去书写了,而是使用Javasc ...

  4. koa art-template模板引擎的使用

    art-template 模板引擎介绍 art-template 是一个简约.超快的模板引擎. 它采用作用域预声明的技术来优化模板渲染速度,从而获得接近 JavaScript 极限的运行 性能,并且同 ...

  5. Node学习之(第三章:art-template模板引擎的使用)

    前言 大家之前都有使用过浏览器中js模板引擎,其实在Node.js中也可以使用模板引擎,最早使用模板引擎的概念是在服务端新起的. art-template art-template是一款高性能的Jav ...

  6. artTemplate模板引擎

    artTemplate模板引擎         <li>索引 {{i + 1}} :{{value}}</li>     {{/each}} </ul> </ ...

  7. Express ( MiddleWare/中间件 路由 在 Express 中使用模板引擎 常用API

    A fast, un-opinionated, minimalist web framework for Node.js applications. In general, prefer simply ...

  8. artTemplate模板引擎的源码拜读

    最初接触的模板引擎还是基于node的ejs,当时觉得很神奇原来还可以这么玩,后来随着学习的深入,使用过jade,doT等,当然还有一些比较火的诸如juicer.underscore还没有深入接触,直到 ...

  9. Art-Template模板引擎(原生写法与简洁写法)

    模板引擎:把js数据转换成html需要的页面,这就是模板引擎需要做的事     • native原生语法     1. 准备数据     2. 把数据转化成html格式的字符串 使用模板引擎 artT ...

随机推荐

  1. Hadoop守护进程的作用(转)

    概述: <ignore_js_op> Hadoop是一个能够对大量数据进行分布式处理的软件框架,实现了Google的MapReduce编程模型和框架,能够把应用程序分割成许多的 小的工作单 ...

  2. 银行业务-Excel文件的拆分逻辑

    一.问题: 随着银行业务数据量的急剧增加,原始的人力统计数据已经不能满足要求, 需要开发一款可以实现自动化数据统计的系统平台,进行数据的采集.加工.过滤.统计.预测 其中数据采集方式又以[Excel] ...

  3. day 6 汽车4S店铺

    1.版本1:大框架 class CarStore(object): '''定义一个汽车店铺类''' pass class Car(object): '''定义一个汽车类''' pass car_sto ...

  4. 1116: [POI2008]CLO

    1116: [POI2008]CLO https://lydsy.com/JudgeOnline/problem.php?id=1116 分析: 单独考虑每个联通块的情况. 设这个联通块里有n个点,那 ...

  5. C#:通过NuGet程序包下载CefSharp来加载谷歌浏览器

    ------------吾亦无他,唯手熟尔,谦卑若愚,好学若饥------------- 首先我讲明一下我要做的,公司有个C# wpf的项目需要我把一个开发好的网页嵌入到客户端当中,由于种种原因,我放 ...

  6. 可能是全网首个支持阿里云Elasticsearch Xapck鉴权的Skywalking

    可能是全网首个支持阿里云Elasticsearch Xapck鉴权的Skywalking 对Skywalking有兴趣的同学参见:年轻人的第一个APM-Skywalking 之前在搭建Skywalki ...

  7. Struts 2(一):初识Struts

    [很久以前的笔记,后续继续完善] 在了解Struts 2框架之前,首先了解一下Model 1和Model 2架构,以及它们的优缺点. 1.1 Model 1架构模式 Model 1的核心是JSP文件, ...

  8. Maven学习(十六)-----Maven插件

    Maven插件 Maven 是一个执行插件的框架,每一个任务实际上是由插件完成的.Maven 插件通常用于: 创建 jar 文件 创建 war 文件 编译代码文件 进行代码单元测试 创建项目文档 创建 ...

  9. Maven学习(四)-----Maven中央存储库

    Maven中央存储库 当你建立一个 Maven 的项目,Maven 会检查你的 pom.xml 文件,以确定哪些依赖下载.首先,Maven 将从本地资源库获得 Maven 的本地资源库依赖资源,如果没 ...

  10. JS继承方法

    1.原型链: 每个构造函数都有一个原型对象,且有一个指针指向该原型对象(prototype),原型对象都包含一个指向构造函数的指针(constructor),而实例都包含一个指向原型对象的内部指针(p ...