swig 렌더링 템플릿과 결합된 노드-JS 튜토리얼-php.cn

swig 렌더링 템플릿과 결합된 노드

不言

풀어 주다： 2018-04-10 17:00:03

원래의

1100명이 탐색했습니다.

이 글에서 공유한 내용은 swig 렌더링 템플릿과 결합된 노드에 관한 것입니다. 이는 특정 참조 가치가 있으므로 필요한 친구가 참조할 수 있습니다.

여기에서는 nodejs에서 swig 템플릿을 적용하는 방법에 대한 몇 가지 기본 사용법을 요약합니다.
물론, Express 프레임워크를 사용하여 노드 백엔드에 서비스를 구축하세요

var express = require(&#39;express&#39;);
var server = express();

server.listen(8080,&#39;localhost&#39;,(req,res)=>{
     console.log(&#39;服务器启动...&#39;);
})

로그인 후 복사

시작이 성공한 후 swig 템플릿의 관련 구성 설정을 시작하세요. 구체적인 코드는 다음과 같습니다.
npm install swig -s
설치가 성공한 후 swig 구성, 코드를 다음과 같이 추가합니다.

//配置摸板引擎
var swig = require(&#39;swig&#39;);
//参数1，摸板引擎的名称，固定字段
//参数2，摸板引擎的方法
server.engine(&#39;html&#39;,swig.renderFile);
//摸板引擎存放目录的关键字，固定字段
//实际存在的目录，html文件就在html文件夹下面
server.set(&#39;views&#39;,__dirname+&#39;/html&#39;);
//注册摸板引擎，固定字段
server.set(&#39;view engine&#39;,&#39;html&#39;);
//关闭swig缓存,缓存的目的也是提高node服务器的响应速度
swig.setDefaults({cache:false});

로그인 후 복사

렌더링해야 할 데이터를 구성합니다.

server.get(&#39;/&#39;,(req,res)=>{
    //render方法只有在使用摸板引擎之后才会生效，其中 参数1是需要渲染的摸板名称，参数2就是需要渲染到页面的一些参数
    res.render(&#39;temp&#39;,{
        name:&#39;张三&#39;,
        user:{
            name:&#39;栗子&#39;,
            age:18
        },
        lists:[&#39;item1&#39;,&#39;item2&#39;,&#39;item3&#39;,&#39;item4&#39;,&#39;item5&#39;,
        &#39;item6&#39;,&#39;item7&#39;,&#39;item8&#39;,&#39;item9&#39;,&#39;item10&#39;,&#39;item11&#39;,&#39;item12&#39;,
        &#39;item13&#39;,&#39;item14&#39;,&#39;item15&#39;,&#39;item16&#39;,&#39;item17&#39;,&#39;item18&#39;,&#39;item19&#39;,
        &#39;item20&#39;,&#39;item21&#39;,&#39;item22&#39;,&#39;item23&#39;,&#39;item24&#39;,&#39;item25&#39;,&#39;item26&#39;]
    });
})

로그인 후 복사

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 == &#39;栗子&#39; && user.age == &#39;18&#39;%}
    姓名:<p>栗子</p>
    {% elseif user.name == &#39;张三&#39;%}
    <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 &#39;./common.html&#39; %}
</body>
</html>

로그인 후 복사

특정 페이지
swig 렌더링 템플릿과 결합된 노드

위에서는 swig 템플릿 엔진을 사용하여 페이지 렌더링에 매개변수를 전달하는 방법을 설명했습니다. swig를 사용하여 html의 공개 부분을 추출하는 방법을 살펴보겠습니다.
html 페이지의 공개 부분(예: 헤더, 공용 js CSS 파일, 탐색 모음 등
공개 페이지 설정:

<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

<!-- 继承所有页面公共的页面模块layout.html -->
{% extends &#39;./layout.html&#39;%}
{% block css %}
<link rel="stylesheet" href="/static/css/home.css">
{% 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 %}

로그인 후 복사

노드 서버를 시작하고 홈 페이지를 렌더링하면

server.get(&#39;/&#39;,(req,res)=>{
    res.render(&#39;www/home&#39;,{});
})

로그인 후 복사

swig 렌더링 템플릿과 결합된 노드

이 표시됩니다. 관련 권장 사항:

노드는 토큰 기반 인증을 구현합니다

예제에서는 node.js가 SQL Server 데이터베이스를 얻는 방법을 자세히 설명합니다

위 내용은 swig 렌더링 템플릿과 결합된 노드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!