• Nodejs in Visual Studio Code 04.Swig模版


    1.开始

    设置Node_Global:npm config set prefix "C:Program Files odejs"

    Express组件:npm install express -g(全局安装)

    Express-Generator:npm install express-generator -g(全局安装)

    如果没有设置global可能导致express命令在cmd里面无法执行

    我接触过3个模版jade,ejs,swig,最后选择了swig

    jade :是express的默认View模版,jade的功能强大(模版继承、判断、循环、变量等),然而风格我忍不了,放出来感受一下;

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

    ejs : 看起来像是html了,风格我喜欢,但是里面把模版要素和js混用看着很纠结,如果写到后面很难维护 ,最重要的是功能没有jade那么多,弃用原因2是不支持模版继承;

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

    swig :缺点是搜索结果比ejs、jade少很多,然而支持继承,功能比ejs强大,又是html风格的,没有和js混用的缺点,棒棒哒;

    <!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/

    2.改造Express默认模版使用swig作为ViewEngine

     打开CMD使用命令新建一个Express Example

    $ cd D:LibrariesDocumentsVisual 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_modulesswig
    ├── 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:LibrariesDocumentsVisual Studio Codemyapp
    > node ./bin/www
    

    源代码:https://github.com/Mengkzhaoyun/nodepractise

    目录:01.Swig

  • 相关阅读:
    只有APE文件的情况下自己制作CUE文件的方法转,经过本人验证真实可靠good!20101128终极解决版
    无法加载登录用户界面DLL MyGina.dll 解决
    sql2000_简单入门,以前的笔记
    dell_又一例:raid的变化(断电后,可能没有电池造成)
    MSSQL使用帮助租赁空间后的数据库链接
    PS创建动作并利用批处理命令自动处理多图片转
    office2003修复安装,缺少SKU011.CAB文件_解决
    使用双wan口的企业/校园网解决方案初探
    我机也中病毒MS Driver Management Service(原创)
    win2003开机有问题:Windows 无法查询 {7B849a69220F451EB3FE2CB811AF94AE} 的 DllName 注册表项,它将不会被加载。最有可能的原因是注册错误。
  • 原文地址:https://www.cnblogs.com/mengkzhaoyun/p/5356138.html
Copyright © 2020-2023  润新知