node+swig를 사용한 렌더링-JS 튜토리얼-php.cn

node+swig를 사용한 렌더링

php中世界最好的语言

풀어 주다： 2018-06-08 14:59:58

원래의

2618명이 탐색했습니다.

이번에는 node+swig 렌더링 사용에 대해 소개하겠습니다. node+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의 공개 부분을 추출하는 방법을 살펴보겠습니다.

html 페이지의 공개 부분, 예: 헤더, 공용 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 %}

로그인 후 복사

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

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

로그인 후 복사

I가 표시됩니다. 이 기사의 사례를 읽은 후 방법을 마스터했다고 믿으십시오. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트에 있는 다른 관련 기사를 주의 깊게 살펴보시기 바랍니다.