crossplaform---Nodejs in Visual Studio Code 04.Swig模版
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模版的更多相关文章
- Nodejs in Visual Studio Code 04.Swig模版
1.开始 设置Node_Global:npm config set prefix "C:\Program Files\nodejs" Express组件:npm install e ...
- Nodejs in Visual Studio Code 05.Swig+Bootstrap
1. 开始 准备好Express+Swig的练习代码:https://github.com/Mengkzhaoyun/nodepractise 准备好AdminLTE后台管理模版:https://ww ...
- Nodejs in Visual Studio Code 11.前端工程优化
1.开始 随着互联网技术的发展,企业应用里到处都是B/S设计,我有幸经历了很多项目有Asp.Net的,有Html/js的,有Silverlight的,有Flex的.很遗憾这些项目很少关注前端优化的问题 ...
- Nodejs in Visual Studio Code 10.IISNode
1.开始 Nodejs in Visual Studio Code 08.IIS : http://www.cnblogs.com/mengkzhaoyun/p/5410185.html 参考此篇内容 ...
- 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 ...
- Nodejs in Visual Studio Code 01.简单介绍Nodejs
1.开始 作者自己:开发人员,Asp.Net , html / js , restful , memcached , oracle ,windows , iis 目标读者:供自己以后回顾 2.我看No ...
- Nodejs in Visual Studio Code 07.学习Oracle
1.开始 Node.js:https://nodejs.org OracleDB: https://github.com/oracle/node-oracledb/blob/master/INSTAL ...
- crossplatform---Nodejs in Visual Studio Code 05.Swig+Bootstrap
1. 开始 准备好Express+Swig的练习代码:https://github.com/Mengkzhaoyun/nodepractise 准备好AdminLTE后台管理模版:https://ww ...
- Nodejs in Visual Studio Code 06.新建Module
1.开始 Node.js:https://nodejs.org 2.Moudle js编程中,由于大家可以直接在全局作用域中编写代码,使开发人员可以很容易的新建一个全局变量或这全局模块,这些全局变量或 ...
随机推荐
- [PostgreSQL] Ensure Uniqueness in Postgres
Let’s say we have a bank. Our bank wants to give each account for each user a unique name, for insta ...
- Yarn架构基本概况(一)
1)引言 针对MRv1在扩展性.可靠性,资源利用率和多框架的支持上存在着明显的不足.进而诞生了下一代的MapReduce的计算框架MapReduce Version2,MRV1中有一个非常大的问题就是 ...
- MyBatis Generator插件之SerializablePlugin
org.mybatis.generator.plugins.SerializablePlugin 在generatorConfig.xml中加上配置: <plugin type="or ...
- MySQL5.7 四种日志文件
mysql 日志包括:错误日志,二进制日志,通用查询日志,慢日志等 一:通用查询日志: 记录建立的客户端连接和执行的语句 1)show variables like '%verision%'; 显示数 ...
- 【solr基础教程之九】客户端 分类: H4_SOLR/LUCENCE 2014-07-30 15:28 904人阅读 评论(0) 收藏
一.Java Script 1.由于Solr本身可以返回Json格式的结果,而JavaScript对于处理Json数据具有天然的优势,因此使用JavaScript实现Solr客户端是一个很好的选择. ...
- solr源码导入eclipse 分类: H4_SOLR/LUCENCE 2014-07-14 14:11 550人阅读 评论(1) 收藏
转载自:http://blog.csdn.net/vltic/article/details/19917377 (1)相应的开发环境准备 (1)jdk1.6+的安装和环境变量配置(命 ...
- HDOJ 5001 Walk
概率DP dp[j][d] 表示不经过i点走d步到j的概率, dp[j][d]=sigma ( dp[k][d-1] * Probability ) ans = sigma ( dp[j][D] ) ...
- Django会话cookie&session
任务描述:实现登录和退出 1.项目结构 2.源代码 urls.py from django.conf.urls import url from django.contrib import admin ...
- request与response对象详述
request与response对象. 1. request代表请求对象 response代表的响应对象. 学习它们我们可以操作http请求与响应. 2.request,response体系结构. 在 ...
- iOS云存储:CloudKit 基本使用教程 增删改查(Swift)
一.从iOS8开始,苹果为开发者提供了ClouKit,可以把我们的应用程序和用户数据存储在iCloud上,用于代替后台服务器,开发移动代码即可. 二.设置 (1)需要一个开发者账号,并且设置一个bun ...