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的功能强大(模版继承、判断、循环、变量等),然而风格我忍不了,放出来感受一下;

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:\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

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

  1. crossplaform---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. crossplatform---Nodejs in Visual Studio Code 05.Swig+Bootstrap

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

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

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

  9. Nodejs in Visual Studio Code 08.IIS

    1.开始 本文部分内容均转载自文章: http://www.hanselman.com/blog/InstallingAndRunningNodejsApplicationsWithinIISOnWi ...

随机推荐

  1. ubuntu12.10中没有/etc/inittab文件探究

    1. 我们首先来看一下Linux系统开机启动过程: Ubuntu是Linux系统的衍生系统,其开机启动过程与上图相差不大,但是随着系统的不断发展,终究还是有不同的地方,下面,我们来了解一下Ubuntu ...

  2. codevs 1994 排队 排列组合+高精度

    /* 数学题0.0 最后答案:A(n,n)*A(n+1,2)*A(n+3,m)+A(n,n)*C(m,1)*A(2,2)*C(n+1,1)*A(n+2,m-1); 简单解释一下 +之前的很显然 先排男 ...

  3. ACM比赛技巧

    一.语言是最重要的基本功   无论侧重于什么方面,只要是通过计算机程序去最终实现的竞赛,语言都是大家要过的第一道关.亚洲赛区的比赛支持的语言包括C/C++与JAVA.笔者首先说说JAVA,众所周知,作 ...

  4. JS获取客户端的窗口大小

    function getClientSize() {    var c = window,    b = document,    a = b.documentElement;    if (c.in ...

  5. 通过dbcp链接池对数据库操作报 Cannot create PoolableConnectionFactory (Could not create connection to database server. Attempted reconnect 3 times. Giving up.)--解决方案

    org.springframework.transaction.CannotCreateTransactionException: Could not open JDBC Connection for ...

  6. NOI 193棋盘分割.cpp

    193:棋盘分割 查看 提交 统计 提问 总时间限制:  1000ms 内存限制:  65536kB 描述 将一个8*8的棋盘进行如下分割:将原棋盘割下一块矩形棋盘并使剩下部分也是矩形,再将剩下的部分 ...

  7. statistic学习笔记

    1. 假设检验:就是对于符合一定前提条件的数据,先作一个假设H0,还有一个备择假设H1(一般是H0的反面,或者是H0不包含的情况),通过一定的计算公式,算出一个值(比如开方检验就是开方值),这个值的理 ...

  8. underscorejs-every学习

    2.10 every 2.10.1 语法: _.every(list, predicate, [context]) 2.10.2 说明: 对list集合的每个成员根据predicate进行真值检测,如 ...

  9. 百度分享share.js插件

    //百度分享window._bd_share_config = { common : { bdText : '分享标题', bdDesc : '分享描述', bdUrl : '分享链接', bdPic ...

  10. javascript知识图谱