ホームページ > 記事 > ウェブフロントエンド > swig レンダリング テンプレートと組み合わせたノード
swig レンダリング テンプレートと組み合わせたノード
- 不言オリジナル
- 2018-04-10 17:00:031022ブラウズ
この記事で共有した内容は、swig レンダリング テンプレートと組み合わせたノードに関するもので、必要な友人は参考にしてください。
ここでは、nodejs で swig テンプレートを適用する方法についていくつかの基本的な使用法をまとめます。もちろん、まず最初に、Express フレームワークを使用してノードのバックエンドにサービスを構築します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 のパブリック部分を抽出する方法を見てみましょう:
パブリック ページを設定します:
<header>
<title>node</title>
<!-- css占位符主要用来显示其他页面的个性化的css文件，例如home.css about.css -->
{% block css%}
{% endblock %}
<link rel="stylesheet" href="/static/css/layout.css">
</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
d4cca6311f99f023c034557d9c699285
{% extends './layout.html'%}
{% block css %}
93df20d6087b99c1f2fce1dfd065778e
{% endblock %}
{% block content %}
25edfb22a4f469ecb59f1190150159c66170e8999ab19ec641e0422470b16d5c15db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c66170e8999ab19ec641e0422470b16d5c25db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c66170e8999ab19ec641e0422470b16d5c35db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c66170e8999ab19ec641e0422470b16d5c45db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c66170e8999ab19ec641e0422470b16d5c55db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c66170e8999ab19ec641e0422470b16d5c65db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
{% endblock %}
{% block js %}
4598c8b9c010e04b865fd3e7954034832cacc6d41bbb37262a98f745aa00fbf0
{% endblock %}
ノード サーバーを起動してホームページをレンダリングすると、
server.get('/',(req,res)=>{
res.render('www/home',{});
})
が表示されます。関連する推奨事項:
以上がswig レンダリング テンプレートと組み合わせたノードの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：jsのトラバーサル問題の詳細な説明次の記事：jsのトラバーサル問題の詳細な説明