模板引擎ejs与html,后台模板引擎ejs与前台模板引擎artTemplate的简单介绍
动态网页是指前端页面当中的数据内容来源于后台数据库,前端的html代码会随着后台数据的变化而变化,是动态生成的。制作动态网页有两种方式,一种方式是在后台拿到前端的html模板,利用后台模板引擎(如ejs等)在后台完成数据与html模板的拼接,最后把拼接完成的完整html代码返回给前端。但是这种工作模式会逐步走向过时,因为它不符合前后端分离的趋势。而第二种方式则更加符合我们所提倡的前后端分离的概念,即后台只提供json数据,不做模板拼接的工作,前端通过ajax来向后台请求json数据,然后在前台利用前台模板引擎(如artTemplate等)完成数据与模板的拼接工作,从而生成完整的html代码。下面就详细介绍这两种模板引擎的常用用法。
一、后台模板引擎ejs
现在比较著名的后台模板引擎有ejs和jade。这两个都属于node的第三方模块包,都可以通过npm的方式进行下载,我们下面具体介绍ejs的用法。
1、下载并引包
在当前的项目文件夹下,用命令->npm install ejs来下载这个模块包。然后通过const ejs = require('ejs');来引包。
2、书写前端模板
由于之后要在后台完成模板拼接的工作,并且前端的数据也来源于后台,故对于前端模板,我们只需要根据ejs所需要的模板的语法规则,把之后要填入数据的部分用特殊的标识符标出即可。我们用来包裹在html代码当中出现的js代码,对于html代码当中需要数据输出的部分用来包裹表示,这些标识符内部出现的变量、数组、对象等均来源于后台数据。如index.html当中示例:
ejs-template
模板字符串
3、后台模板引擎完成模板拼接
我们将前端模板index.html文件,与主文件1.js放在同一个目录下,在1.js当中使用http模块可以新建一个服务器,当用户访问指定ip和指定端口号时,会利用fs模块去读index.html文件当中的内容,直接得到为buffer类型,再使用.toString()方法将其转换为字符串类型。在后台利用ejs.render()方法把模板字符串和json数据拼接,生成完整的html代码字符串,然后设置好响应头,把完整的内容通过响应体的方式呈递给前端页面。下面为主文件1.js的示例代码:
const ejs = require('ejs');
const http =require('http');
const fs = require('fs');
const path = require('path');
var server = http.createServer((req,res)=>{
var dictionary = {
a:'ejs',
list:['apple','banana','pear','tomato']
};
var target = path.join(__dirname,'./index.html');
fs.readFile(target,(err,data)=>{
if(err) throw err;
var template = data.toString();
var html = ejs.render(template,dictionary);
res.writeHead(200,{"Content-Type":"text/html;charset=UTF8"});
res.end(html);
});
});
server.listen(3000,'192.168.155.1');
开启该服务器之后,访问对应的网址,则呈递的页面结果如下图所示:
二、前台模板引擎artTemplate
1、下载并引包
我们在github上搜索artTemplate,下载地址为 https://github.com/lhywork/ar...,下载完成之后在dist文件夹下可以看到对应的四个js源文件,由于artTemplate支持两种语法,简洁语法版和原生语法版,其中js文件名当中带-native的为原生语法版,带-debug的为带注释的js文件。下面我们只介绍原生语法版的用法,为了使引入的文件尽可能的小,所以选择template-native.js文件进行引入。
由于是前台模板引擎,所以我们在前端文件index.html当中用的方式引入。
2、书写模板
我们在该前端页面当中在标签对当中书写html模板字符串,其中给该script标签定义一个id名,便于识别。我们用来包裹在html代码当中出现的js代码,对于html代码当中需要数据输出的部分用来包裹表示,这些标识符内部出现的变量、数组、对象等均来源于后台数据。这种用法与之前介绍的ejs相类似。下面为模板的示例代码:
3、前台模板引擎完成模板拼接
在此我们在前端定义一个json数据,实际上数据应该来自于ajax请求的后台数据。再利用固定的方法名template(),将模板字符串与json数据进行模板拼接,形成完整的html代码,注入到dom元素当中。其中index.html的示例代码为:
artTemplate-demo
window.onload = function(){
var dictionary = {
title : 'artTemplate-demo',
list: ['apple','banana','pear','tomato']
};
var html = template('test',dictionary);
document.getElementById('content').innerHTML = html;
}
前端页面渲染的结果如下图所示:
模板引擎ejs与html,后台模板引擎ejs与前台模板引擎artTemplate的简单介绍相关推荐
- java 模板引擎_SpringBoot入门系列(四)如何整合Thymeleaf模板引擎
前面介绍了Spring Boot的优点,然后介绍了如何快速创建Spring Boot 项目.不清楚的朋友可以看看之前的文章:https://www.cnblogs.com/zhangweizhong/ ...
- java h5模板引擎_详解SpringBoot+Thymeleaf 基于HTML5的现代模板引擎
序言: Thymeleaf 是Java服务端的模板引擎,与传统的JSP不同,前者可以使用浏览器直接打开,因为可以忽略掉拓展属性,相当于打开原生页面,给前端人员也带来一定的便利.如果你已经厌倦了JSP+ ...
- element ui 前台模板_SpringBoot + Vue + ElementUI 实现后台管理系统模板 -- 前端篇(二):引入 element-ui 定义基本页面显示...
前提: (1) 相关博文地址: SpringBoot + Vue + ElementUI 实现后台管理系统模板 -- 前端篇(一):搭建基本环境:https://www.cnblogs.com/l-y ...
- php注册登录模板,Phpcms V9 管理后台登陆及会员注册登录模板的修改方法
一.怎么修改Phpcms V9管理后台登陆界面样式? 具体模板文件位置:phpcms/modules/admin/templates/login.tpl,打开查看到这一段代码: 复制代码代码如下: & ...
- php快速搭建后台,基于thinkphp的后台管理系统模板快速搭建,thinkphp后台模板_PHP教程...
基于thinkphp的后台管理系统模板快速搭建,thinkphp后台模板 当我们在搭建网站的时候,后端开发人员在编写后台的管理系统的时候,往往会因为缺少一个合适的后台管理系统的模板,而必须去重新编写一 ...
- 分布式商城项目-后台开发-SSM工程整合网站模板
分布式商城项目-后台开发-SSM工程整合网站模板 我们在JavaWeb开发学习过程中,需要使用到前端的页面,可能很多时候,我们并不擅长于设计UI,比如html,jsp.但又希望自己做出来的程序能够好看 ...
- Axure电商后台业务管理系统原型模板/通用版电商后台管理系统/订单管理/营销管理/运营管理/财务管理/统计分析/库存管理/流量统计/运营管理/用户管理/秒杀促销/交易统计/活动管理/广告管理
Axure电商后台业务管理系统原型模板/通用版电商后台管理系统/订单管理/营销管理/运营管理/财务管理/统计分析/库存管理/流量统计/运营管理/用户管理/秒杀促销/交易统计/活动管理/广告管理 作品名 ...
- DTCMS插件的制作实例电子资源管理(三)前台模板页编写
总目录 插件目录结构(一) Admin后台页面编写(二) 前台模板页编写(三) URL重写(四) 本实例旨在以一个实际的项目中的例子来介绍如何在dtcms中制作插件,本系列文章非入门教程,部分逻辑实现 ...
- js模板字符串自定义类名_详解JavaScript ES6中的模板字符串
这篇文章主要介绍了详解JavaScript ES6中的模板字符串,JS的ES6版本带来诸多简洁化方面的重大改进,需要的朋友可以参考下 在 ES6 中引入了一种新的字符串字面量 - 模板字符串,除了使用 ...
最新文章
- 开启报名丨中文信息学会青工委学术沙龙:“推荐系统前沿进展”
- Facebook恐打破最长月度连跌记录,黄金时代宣告结束!
- python和c++哪个好找工作-python和C++语言有何优缺点?哪个更适合人工智能?
- 通过FILETIME得到时间
- vector的求和用法accumulate
- JMetro“ Metro”选项卡,Java的TreeView和ContextMenu(JavaFX)
- Linux设备驱动:DMA 接口API
- light4java_Light Weight Component Library for Java
- 联想拯救者Legion Y7000P 2020款(10代INTEL+GTX1650)安装ubuntu16.04(双系统)
- 公众号笔记: 2018年12月
- django orm与scrapy集成:
- 框架的配置文件的映射机制
- 用阿里服务器搭建彩虹网代刷平台
- [译] 人人都是设计师。我们可以的
- 软件开发过程与项目管理(8.软件项目质量计划)
- 网易云课堂 python网络爬虫实战
- 2018-2019 ICPC, NEERC, Northern Eurasia Finals K. King Kog's Reception 线段树
- 亲历的商务谈判过程(续)——谈谈国企和我的经历
- 获取当前时间的后一天/前一天或者后1小时/前1小时
- deepin添加启动图标(快捷方式)
热门文章
- COMSOL中“模式分析”、“边界模式分析”的区别
- 安装saltstack遇到缺包问题!自己遇到的错!若有雷同请海涵
- STM32 CubeMax TCRT5000L光电对管巡线 原理与实现
- u盘启动识别不到服务器硬盘,云骑士u盘装系统时找不到硬盘驱动器怎么解决
- 线性表的顺序、链式存储结构基本操作
- C++实现单源最短路算法
- java驱动打印机_本地打印机驱动程序如何找到网络打印机?
- 多示例学习(Multi Instance Learning)和 弱监督学习(Weakly Supervised Learning)
- UBTC7月份升级的温馨提示
- (超详细)语音信号处理之特征提取