使用node+swig渲染
这次给大家带来使用node+swig渲染，使用node+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>
<p>摸板引擎</p>
<!-- {{}} 插值表达式-->
姓名:<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',{});
})
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
以上是使用node+swig渲染的详细内容。更多信息请关注PHP中文网其他相关文章！
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
nodejs中的全局变量有哪些
Apr 21, 2024 am 04:54 AM
Node.js 中存在以下全局变量：全局对象：global核心模块：process、console、require运行时环境变量：__dirname、__filename、__line、__column常量：undefined、null、NaN、Infinity、-Infinity
nodejs安装目录里的npm与npm.cmd文件有什么区别
Apr 21, 2024 am 05:18 AM
Node.js 安装目录中有两个与 npm 相关的文件：npm 和 npm.cmd，区别如下：扩展名不同：npm 是可执行文件，npm.cmd 是命令窗口快捷方式。Windows 用户：npm.cmd 可以在命令提示符下使用，npm 只能从命令行运行。兼容性：npm.cmd 特定于 Windows 系统，npm 跨平台可用。使用建议：Windows 用户使用 npm.cmd，其他操作系统使用 npm。
nodejs怎么连接mysql数据库
Apr 21, 2024 am 06:13 AM
要连接 MySQL 数据库，需要遵循以下步骤：安装 mysql2 驱动程序。使用 mysql2.createConnection() 创建连接对象，其中包含主机地址、端口、用户名、密码和数据库名称。使用 connection.query() 执行查询。最后使用 connection.end() 结束连接。
Pi Node教学：什么是Pi节点？如何安装和设定Pi Node？
Mar 05, 2025 pm 05:57 PM
PiNetwork节点详解及安装指南本文将详细介绍PiNetwork生态系统中的关键角色——Pi节点，并提供安装和配置的完整步骤。Pi节点在PiNetwork区块链测试网推出后，成为众多先锋积极参与测试的重要环节，为即将到来的主网发布做准备。如果您还不了解PiNetwork，请参考Pi币是什么？上市价格多少？Pi用途、挖矿及安全性分析。什么是PiNetwork？PiNetwork项目始于2019年，拥有其专属加密货币Pi币。该项目旨在创建一个人人可参与
nodejs可以写前端吗
Apr 21, 2024 am 05:00 AM
是的，Node.js可用于前端开发，主要优势包括高性能、丰富的生态系统和跨平台兼容性。需要考虑的注意事项有学习曲线、工具支持和社区规模较小。
nodejs和java的差别大吗
Apr 21, 2024 am 06:12 AM
Node.js 和 Java 的主要差异在于设计和特性：事件驱动与线程驱动：Node.js 基于事件驱动，Java 基于线程驱动。单线程与多线程：Node.js 使用单线程事件循环，Java 使用多线程架构。运行时环境：Node.js 在 V8 JavaScript 引擎上运行，而 Java 在 JVM 上运行。语法：Node.js 使用 JavaScript 语法，而 Java 使用 Java 语法。用途：Node.js 适用于 I/O 密集型任务，而 Java 适用于大型企业应用程序。
