node结合swig渲染摸板的方法
在这里就nodejs如何应用swig摸板，总结一下一些基本的用法。
首先当然是利用express框架在node后台上面搭建服务
var express = require('express');
var server = express();
server.listen(8080,'localhost',(req,res)=>{
console.log('服务器启动...');
})
启动成功之后，开始设置swig摸板的相关配置，具体代码如下：
npm install swig -s
安装成功之后，加上swig配置，代码如下：
//配置摸板引擎
var swig = require('swig');
//参数1，摸板引擎的名称，固定字段
//参数2，摸板引擎的方法
server.engine('html',swig.renderFile);
//摸板引擎存放目录的关键字，固定字段
//实际存在的目录，html文件就在html文件夹下面
server.set('views',__dirname+'/html');
//注册摸板引擎，固定字段
server.set('view engine','html');
//关闭swig缓存,缓存的目的也是提高node服务器的响应速度
swig.setDefaults({cache:false});
配置需要渲染的数据：
server.get('/',(req,res)=>{
//render方法只有在使用摸板引擎之后才会生效，其中 参数1是需要渲染的摸板名称，参数2就是需要渲染到页面的一些参数
res.render('temp',{
name:'张三',
user:{
name:'栗子',
age:18
},
lists:['item1','item2','item3','item4','item5',
'item6','item7','item8','item9','item10','item11','item12',
'item13','item14','item15','item16','item17','item18','item19',
'item20','item21','item22','item23','item24','item25','item26']
});
})
html文件的具体代码如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div>摸板引擎</div>
<!-- {{}} 插值表达式-->
姓名:<p>{{name}}</p>
{% if user.name == '栗子' && user.age == '18'%}
姓名:<p>栗子</p>
{% elseif user.name == '张三'%}
<p>张三</p>
{% endif %}
<p>遍历数组</p>
{% for items in lists%}
<li>items</li>
{% endfor %}
<!-- 页面上面设置数据 -->
{% set arr = [1,2,3,4,5]%}
<p>{{arr.length}}</p>
<!-- 如何引入页面-->
{% include './common.html' %}
</body>
</html>
具体页面显示如下：
上面讲的是使用swig摸板引擎如何传递参数到页面渲染，下面来看看如何使用swig提取html公共的部分：
html页面公共的部分，比如说header，公共的js css文件，导航栏等
设置一个公共的页面：
<header>
<title>node</title>
<!-- css占位符主要用来显示其他页面的个性化的css文件，例如home.css about.css -->
{% block css%}
{% endblock %}
<link rel="stylesheet" href="/static/css/layout.css" rel="external nofollow" >
</header>
<!-- 所以页面公共的导航栏 -->
<nav>
<li><a href="">首页</a></li>
<li><a href="">关于我们</a></li>
<li><a href="">商品列表</a></li>
<li><a href="">登录</a></li>
<li><a href="">注册</a></li>
</nav>
<!-- content占位符主要用来显示其他页面的个性化的内容显示，不同的页面有不同的显示方式 -->
{% block content%}
{% endblock %}
<!-- js占位符主要用来显示其他页面的个性化的js文件，例如home.js about.js -->
{% block js%}
{% endblock %}
<script src="/static/js/layout.js"></script>
home.html
<!-- 继承所有页面公共的页面模块layout.html -->
{% extends './layout.html'%}
{% block css %}
<link rel="stylesheet" href="/static/css/home.css" rel="external nofollow" >
{% endblock %}
{% block content %}
<li><a href="">1</a></li>
<li><a href="">2</a></li>
<li><a href="">3</a></li>
<li><a href="">4</a></li>
<li><a href="">5</a></li>
<li><a href="">6</a></li>
{% endblock %}
{% block js %}
<script src="/static/js/home.js"></script>
{% endblock %}
当启动node服务器，渲染home页面的时候，你会看到
server.get('/',(req,res)=>{
res.render('www/home',{});
})
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
您可能感兴趣的文章:
- 详解Node.js模板引擎Jade入门
- 基于Node.js模板引擎教程-jade速学与实战1
- 详解nodejs模板引擎制作
- node.js中EJS 模板快速入门教程
- Nodejs高扩展性的模板引擎 functmpl简介
- Node.js的Web模板引擎ejs的入门使用教程
- NodeJS创建基础应用并应用模板引擎
- Node.js项目中调用JavaScript的EJS模板库的方法
- node.js 使用ejs模板引擎时后缀换成.html
相关推荐
-
基于Node.js模板引擎教程-jade速学与实战1
环境准备: 全局安装jade: npm install jade -g 初始化项目package.json: npm init --yes 安装完成之后,可以使用 jade --help 查看jade的命令行用法 一.在项目目录下新建index.jade文件 inde.jade代码: doctype html html head meta(charset='utf-8') title body h3 欢迎学习jade 1,标签按照html的缩进格式写 2,标签的属性可以采用圆括号 3,如果标签有
-
详解nodejs模板引擎制作
关于模板,我倒是用过了不少.最开始要数Java的JSP了,然后接触了PHP的smarty,再就是Python的jinja2, Django内置模板,现在刚开始看Nodejs,也发现了不少类似的模板引擎,ejs, jade等等吧. 模板带来的最直接的好处就是加速开发,前后端分离.除此之外,对于字符串的格式化同样是个比较好的应用.习惯了python中 string = "hello {}".format("郭璞") # hello 郭璞 string = "h
-
Node.js的Web模板引擎ejs的入门使用教程
Node 开源模板的选择很多,但推荐像我这样的老人去用 EJS,有 Classic ASP/PHP/JSP 的经验用起 EJS 来的确可以很自然,也就是说,你能够在 <%...%> 块中安排 JavaScript 代码,利用最传统的方式 <%=输出变量%>(另外 <%-输出变量是不会对 & 等符号进行转义的).安装 EJS 命令如下: npm install ejs JS 调用 JS 调用的方法主要有两个: ejs.compile(str, options); //
-
Node.js项目中调用JavaScript的EJS模板库的方法
作为外部模块,调用的方法和mysql模块是相同的,不再赘述. ejs的render函数有两个参数 第一个是字符串,第二个是可选的对象,和其他javascript模版一样需要渲染的数据也是包含在option对象中的 ejs.render(str,option); // 渲染字符串 str 一般是通过nodejs文件系统的readfile方法读取 ejs.render(str,{ data : user_data // 需要渲染的数据 }); 当str字符串中没有包含 include 标签时,渲染数
-
node.js 使用ejs模板引擎时后缀换成.html
这是一个小技巧,看着.ejs的后缀总觉得不爽,使用如下方法,可以将模板文件的后缀换成我们习惯的.html. 1.在app.js的头上定义ejs: 复制代码 代码如下: var ejs = require('ejs'); 2.注册html模板引擎: 复制代码 代码如下: app.engine('html',ejs.__express); 3.将模板引擎换成html: 复制代码 代码如下: app.set('view engine', 'html'); 4.修改模板文件的后缀为.html. 好了,任
-
NodeJS创建基础应用并应用模板引擎
本次的目的是搭建一个最基础的可以实现功能的NodeJS服务器,能够体现出NodeJS的工作流程以及开发的基本框架. 需求:已经安装了nodejs以及express. 一.构建基础的NodeJS服务器(express.路由) var express = require('express'); //引入express模块 var app = express(); //调用express()函数,对函数进行初始化 app.get('/stooges/:name?', function(req, res
-
Nodejs高扩展性的模板引擎 functmpl简介
关于functmpl functmpl 是一个基于JavaScript/Nodejs的高扩展性的模板引擎 模板格式 <#包含/> 如果想在一个模板中插入另一个模板,可以使用<#包含/> 比如插入模板 a.ftl : <#"a.ftl"/> <@功能/> 除了输出变量.包含模板外,也可以加入更多自定义的功能,比如:枚举.赋值 但额外的功能需要自定义. 自定功能的具体格式为 <@功能名称 参数名=参数值/> <@功能名称 参
-
node.js中EJS 模板快速入门教程
Node 开源模板的选择很多,但推荐像我这样的老人去用 EJS,有 Classic ASP/PHP/JSP 的经验用起 EJS 来的确可以很自然,也就是说,你能够在 <%...%> 块中安排 JavaScript 代码,利用最传统的方式 <%=输出变量%>(另外 <%-输出变量是不会对 & 等符号进行转义的).安装 EJS 命令如下: npm install ejs JS 调用 JS 调用的方法主要有两个: ejs.compile(str, options); //
-
详解Node.js模板引擎Jade入门
Jade是Node.js的一个模板引擎,它借鉴了Haml的很多地方,所以语法上和Haml比较相近.并且,Jade也支持空格. 1.标签 在Jade里,一行开头的任何文本都被默认解释成HTML标签.并且你只需要你写开始标签--注意:不需要加"<>".因为Jade会帮我们渲染闭合和开始标签.例如: body div h1 Jade是Node.js的一个模板引擎 p 它借鉴了Haml的很多地方,所以语法上和Haml比较相近. div footer © Pandora 上面的Jad
-
node结合swig渲染摸板的方法
在这里就nodejs如何应用swig摸板,总结一下一些基本的用法. 首先当然是利用express框架在node后台上面搭建服务 var express = require('express'); var server = express(); server.listen(8080,'localhost',(req,res)=>{ console.log('服务器启动...'); }) 启动成功之后,开始设置swig摸板的相关配置,具体代码如下: npm install swig -s 安装成功之
-
使用Node.js实现简易MVC框架的方法
在使用Node.js搭建静态资源服务器一文中我们完成了服务器对静态资源请求的处理,但并未涉及动态请求,目前还无法根据客户端发出的不同请求而返回个性化的内容.单靠静态资源岂能撑得起这些复杂的网站应用,本文将介绍如何使用Node处理动态请求,以及如何搭建一个简易的 MVC 框架.因为前文已经详细介绍过静态资源请求如何响应,本文将略过所有静态部分. 一个简单的示例 先从一个简单示例入手,明白在 Node 中如何向客户端返回动态内容. 假设我们有这样的需求: 当用户访问/actors时返回男演员列表页
-
Node.js创建一个Express服务的方法详解
本文实例讲述了Node.js创建一个Express服务的方法.分享给大家供大家参考,具体如下: 1.创建一个HttpServer服务端 在node.js官网下载好node的Windows版本后一路下一步安装好了node,新建一个server.js文件,开始第一个node文件.首先在文件开头需要使用require包含所需要的模块,然后利用http.createServer创建一个server,并执行回调函数.在回调函数内对请求req进行处理,并返回res结果. 利用url的parse方法将req请
-
Vue使用预渲染代替SSR的方法
页面渲染方式 前段时间了解到页面有几种渲染方式:SPA SSR,以前写的一个网站但是用的渲染方式是 SPA,导致搜索引擎爬虫抓不到任何信息,对 SEO 优化不很好,本想改成 SSR,但是改动配置很多,弄来弄去怕影响开发,今天在 Vue 官网看到预渲染,今天试了下,感觉是一个折中的方法,而且配置改动不大,大家可以试试 什么是服务器端渲染 (SSR)? Vue.js 是构建客户端应用程序的框架.默认情况下,可以在浏览器中输出 Vue 组件,进行生成 DOM 和操作 DOM.然而,也可以将同一个组件渲
-
js使用DOM操作实现简单留言板的方法
本文实例讲述了js使用DOM操作实现简单留言板的方法.分享给大家供大家参考.具体分析如下: 如图所示简易留言板,也就是自娱自乐版,说白了就是练习DOM操作. 要点一:document.createElement("标签名") 新建元素 要点二:父元素.appendChild("元素") 把新建的元素插入到页面的标签中(在标签的最后一个显示),这样才会在浏览器中显示出来 要点三:父元素.insertBefore("元素","要插入哪个元
-
js实现点击图片将图片地址复制到粘贴板的方法
本文实例讲述了js实现点击图片将图片地址复制到粘贴板的方法.分享给大家供大家参考.具体如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml
-
基于thinkPHP框架实现留言板的方法
本文实例讲述了基于thinkPHP框架实现留言板的方法.分享给大家供大家参考,具体如下: 奋斗了一天,终于THINKPHP小邓留言版的概念版出来了 其实真的THINKPHP开发速度很快,作为一个互联网上"搬砖"的,从事这种 纯码农的事也是无可厚非的. 代码就实现了如下功能 1.留言功能. 2.验证功能. 3.分页显示功能. 就是写了几行代码(PS:页面设计代码不算,就算控制器和模型的代码) 下面我公布一下控制的器的代码,关于THINKPHP的代码规则我就不阐述了,看thinkphp手册
-
Go语言实现简单留言板的方法
本文实例讲述了Go语言实现简单留言板的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: package main import ( // "fmt" "io" "log" "net/http" "text/template" "time" "database/sql" "gi
-
node.js读取文件到字符串的方法
本文实例讲述了node.js读取文件到字符串的方法.分享给大家供大家参考.具体分析如下: Node.js是一套用来编写高性能网络服务器的JavaScript工具包,一系列的变化由此开始.比较独特的是,Node.js会假设你是在POSIX环境下运行它Linux 或 Mac OS X. 主要代码如下: var fs = require('fs'); var file = fs.readFileSync(path, "utf8"); console.log(file); 希望本文所述对大家的
-
使用Node.js给图片加水印的方法
一.准备工作: 首先,确保你本地已经安装好了node环境. 然后,我们进行图像编辑操作需要用到一个Node.js的库:images. 这个库的地址是:https://github.com/zhangyuanwei/node-images,作者定义它为 "Node.js轻量级跨平台图像编解码库" ,并提供了一系列接口. 我们要做的首先是安装images库: npm install images 二.直接上DEMO: 步骤如下: step1:文件夹结构 step2:JS代码 var ima