Nodejs in Visual Studio Code 04.Swig模版

時間 2019-11-17

標籤 nodejs visual studio code 04.swig swig 模版欄目 Visual Studio 简体版

原文原文鏈接

1.開始javascript

設置Node_Global：npm config set prefix "C:\Program Files\nodejs"css

Express組件：npm install express -g（全局安裝）html

Express-Generator：npm install express-generator -g（全局安裝）java

若是沒有設置global可能致使express命令在cmd裏面沒法執行node

我接觸過3個模版jade,ejs,swig，最後選擇了swiggit

jade ：是express的默認View模版，jade的功能強大（模版繼承、判斷、循環、變量等）,然而風格我忍不了，放出來感覺一下；github

extends layout

block content
  h1= title
  p Welcome to #{title}

ejs ：看起來像是html了，風格我喜歡，可是裏面把模版要素和js混用看着很糾結，若是寫到後面很難維護，最重要的是功能沒有jade那麼多，棄用緣由2是不支持模版繼承；express

<% if (names.length) { %>  
  <ul>  
    <% names.forEach(function(name){ %>  
      <li foo='<%= name + "'" %>'><%= name %></li>  
    <% }) %>  
  </ul>  
<% } %>

swig ：缺點是搜索結果比ejs、jade少不少，然而支持繼承，功能比ejs強大，又是html風格的，沒有和js混用的缺點，棒棒噠；npm

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>{% block title %}My Site{% endblock %}</title>

  {% block head %}
  <link rel="stylesheet" href="main.css">
  {% endblock %}
</head>
<body>
  {% block content %}{% endblock %}
</body>
</html>

注：上表Swig最強參考 http://paularmstrong.github.io/node-templates/json

2.改造Express默認模版使用swig做爲ViewEngine

打開CMD使用命令新建一個Express Example

$ cd D:\Libraries\Documents\Visual Studio Code
$ express myapp
 
create : myapp
create : myapp/package.json
......
 
install dependencies:
> cd myapp && npm install
run the app:
> SET DEBUG=myapp:* & npm start

修改package.json文件，將jade替換爲swig

修改app.js將jade viewengine替換爲swig viewengine

修改後：swig ViewEngine

var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
//add swig required
var swig = require('swig');

var routes = require('./routes/index');
var users = require('./routes/users');

var app = express();

// view engine setup -swig
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'tpl');
app.engine('tpl', swig.renderFile);

修改view/layout.jade ，改名爲view/layout.tpl

修改後layout.html

<!DOCTYPE html>
<html>

<head>
    <title>{% block title %} {% endblock %}</title>
    <link rel="stylesheet" href="/stylesheets/style.css">
</head>

<body>
    {% block content %} {% endblock %}
</body>

</html>

修改view/index.jade，改名爲view/index.tpl

修改後index.tpl

{% extends 'layout.tpl' %}

{% block title %}{{ title }}{% endblock %}

{% block content %}
    <h1>{{ title }}</h1>
    <p>Welcome to {{ title }}</p>
{% endblock %}

修改view/error.jade，改名爲view/error.tpl

修改後error.tpl

{% extends 'layout.tpl' %}

{% block title %}{% endblock %}


{% block content %}

  <div class="container">

    <h1>{{ message }}</h1>
    <h2>{{ error.status }}</h2>
    <pre>{{ error.stack }}</pre>

  </div>

{% endblock %}

修改routes/index.js

var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', { title: 'Swig Express' });
});

module.exports = router;

修改完成，打開CMD運行項目

$ npm install
swig@1.4.2 node_modules\swig
├── optimist@0.6.1 (wordwrap@0.0.3, minimist@0.0.10)
└── uglify-js@2.4.24 (uglify-to-browserify@1.0.2, async@0.2.10, yargs@3.5.4, source-map@0.1.34)

$ npm start
> myapp@0.0.0 start d:\Libraries\Documents\Visual Studio Code\myapp
> node ./bin/www

源代碼：https://github.com/Mengkzhaoyun/nodepractise

目錄：01.Swig