1.开始

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

Express组件：npm install express -g（全局安装）

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

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

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

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

1
2
3
4
5
extends layout
 
block content
  h1= title
  p Welcome to #{title}

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

1
2
3
4
5
6
7
<% if (names.length) { %> 
  <ul> 
    <% names.forEach(function(name){ %> 
      <li foo='<%= name + "'" %>'><%= name %></li> 
    <% }) %> 
  </ul> 
<% } %>

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!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

1
2
3
4
5
6
7
8
9
10
11
$ 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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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

1
2
3
4
5
6
7
8
9
10
11
12
13
<!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

1
2
3
4
5
6
7
8
{% 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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{% 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

1
2
3
4
5
6
7
8
9
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运行项目

1
2
3
4
5
6
7
8
$ 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

http://www.cnblogs.com/mengkzhaoyun/p/5356138.html

crossplaform---Nodejs in Visual Studio Code 04.Swig模版的更多相关文章

  1. Nodejs in Visual Studio Code 04.Swig模版

    1.开始 设置Node_Global:npm config set prefix "C:\Program Files\nodejs" Express组件:npm install e ...

  2. Nodejs in Visual Studio Code 05.Swig+Bootstrap

    1. 开始 准备好Express+Swig的练习代码:https://github.com/Mengkzhaoyun/nodepractise 准备好AdminLTE后台管理模版:https://ww ...

  3. Nodejs in Visual Studio Code 11.前端工程优化

    1.开始 随着互联网技术的发展,企业应用里到处都是B/S设计,我有幸经历了很多项目有Asp.Net的,有Html/js的,有Silverlight的,有Flex的.很遗憾这些项目很少关注前端优化的问题 ...

  4. Nodejs in Visual Studio Code 10.IISNode

    1.开始 Nodejs in Visual Studio Code 08.IIS : http://www.cnblogs.com/mengkzhaoyun/p/5410185.html 参考此篇内容 ...

  5. Nodejs in Visual Studio Code 14.IISNode与IIS7.x

    1.开始 部署IISNode环境请参考:Nodejs in Visual Studio Code 08.IIS 部署Nodejs程序请参考:Nodejs in Visual Studio Code 1 ...

  6. Nodejs in Visual Studio Code 01.简单介绍Nodejs

    1.开始 作者自己:开发人员,Asp.Net , html / js , restful , memcached , oracle ,windows , iis 目标读者:供自己以后回顾 2.我看No ...

  7. Nodejs in Visual Studio Code 07.学习Oracle

    1.开始 Node.js:https://nodejs.org OracleDB: https://github.com/oracle/node-oracledb/blob/master/INSTAL ...

  8. crossplatform---Nodejs in Visual Studio Code 05.Swig+Bootstrap

    1. 开始 准备好Express+Swig的练习代码:https://github.com/Mengkzhaoyun/nodepractise 准备好AdminLTE后台管理模版:https://ww ...

  9. Nodejs in Visual Studio Code 06.新建Module

    1.开始 Node.js:https://nodejs.org 2.Moudle js编程中,由于大家可以直接在全局作用域中编写代码,使开发人员可以很容易的新建一个全局变量或这全局模块,这些全局变量或 ...

随机推荐

  1. 定位导致物化视图无法快速刷新的原因 分类： H2_ORACLE 2013-08-08 23:04 335人阅读 评论(0) 收藏

    转载自:http://yangtingkun.itpub.net/post/468/13318 物化视图的快速刷新采用了增量的机制,在刷新时,只针对基表上发生变化的数据进行刷新.因此快速刷新是物化视图 ...

  2. js实现计时功能

    原文链接:https://blog.csdn.net/qq_37936542/article/details/78912786 一:计时器功能 <!DOCTYPE html> <ht ...

  3. 卡特兰（Catalan）数列

    卡特兰数又称卡塔兰数,英文名 Catalan number,是组合数学中一个常出现在各种计数问题中出现的数列.以比利时的数学家欧仁·查理·卡塔兰 (1814–1894)的名字来命名,其前几项为 : 1 ...

  4. 细说Oracle中NULL值

    1.NULL是什么? NULL表示UNKNOW(未知),其不代表不论什么值. 比如一行中某列没有不论什么值即为NULL. ORACLE同意不论什么一种数据类型的字段为空,除了下面两种情况: 1)主键字 ...

  5. phpstorm常用快捷键有哪些（图解归类）

    phpstorm常用快捷键有哪些(图解归类) 一.总结 一句话总结: 10.方法参数提示,显示默认参数   解答:--------CTRL+P 13.显示类层级关系图,继承/实现关系   解答:--- ...

  6. 【codeforces 602E】Kleofáš and the n-thlon

    time limit per test1 second memory limit per test256 megabytes inputstandard input outputstandard ou ...

  7. 在erlang项目中使用protobuf

    在erlang项目中使用protobuf http://blog.csdn.net/mycwq/article/details/21864191 protobuf是google的一个序列化框架,类似X ...

  8. 【BZOJ 1018】 [SHOI2008]堵塞的交通traffic

    [题目链接]:http://www.lydsy.com/JudgeOnline/problem.php?id=1018 [题意] [题解] 按照这里的题解写的http://blog.csdn.net/ ...

  9. oracle 全部查询和表空间，以及其关系

    select * from dba_users;   查看数据库里面全部用户,前提是你是有dba权限的帐号.如sys,system select * from all_users;     查看你能管 ...

  10. 【t011】最小覆盖子串

    Time Limit: 1 second Memory Limit: 32 MB [问题描述] 给定一个含有N个元素的序列A,你的任务就是求出序列A的最小覆盖子串的长度. 本题中的一些定义: 串S,是 ...