express 4.x+ swig

時間 2019-12-13

標籤 express 4.x swig 简体版

原文原文鏈接

Express 是一個基於 Node.js 平臺的極簡、靈活的 web 應用開發框架，它提供一系列強大的特性，幫助你建立各類 Web 和移動設備應用。

express官網：http://www.expressjs.com.cn/javascript

經過應用生成器工具 express 能夠快速建立一個應用的骨架。css

經過以下命令安裝：html

$ npm install express-generator -g

-h 選項能夠列出全部可用的命令行選項：java

$ express -h

  Usage: express [options] [dir]

  Options:

    -h, --help          output usage information
    -V, --version       output the version number
    -e, --ejs           add ejs engine support (defaults to jade)
        --hbs           add handlebars engine support
    -H, --hogan         add hogan.js engine support
    -c, --css <engine>  add stylesheet <engine> support (less|stylus|compass|sass) (defaults to plain css)
        --git           add .gitignore
    -f, --force         force on non-empty directory

例如，下面的示例就是在當前工做目錄下建立一個命名爲 myapp 的應用。node

$ express myapp

   create : myapp
   create : myapp/package.json
   create : myapp/app.js
   create : myapp/public
   create : myapp/public/javascripts
   create : myapp/public/images
   create : myapp/routes
   create : myapp/routes/index.js
   create : myapp/routes/users.js
   create : myapp/public/stylesheets
   create : myapp/public/stylesheets/style.css
   create : myapp/views
   create : myapp/views/index.jade
   create : myapp/views/layout.jade
   create : myapp/views/error.jade
   create : myapp/bin
   create : myapp/bin/www

而後安裝全部依賴包：git

$ cd myapp 
$ npm install

啓動這個應用（MacOS 或 Linux 平臺）：github

$ DEBUG=myapp npm start

Windows 平臺使用以下命令：web

> SET DEBUG=myapp:* & npm start

而後在瀏覽器中打開 http://localhost:3000/ 網址就能夠看到這個應用了。iexpress

經過 Express 應用生成器建立的應用通常都有以下目錄結構：npm

.
├── app.js
├── bin
│   └── www
├── package.json
├── public
│   ├── images
│   ├── javascripts
│   └── stylesheets
│       └── style.css
├── routes
│   ├── index.js
│   └── users.js
└── views
    ├── error.jade
    ├── index.jade
    └── layout.jade

7 directories, 9 files

1.
先執行$ npm install express-generator -g
而後$ npm install express-generator -g

而後在瀏覽器中打開 http://localhost:3000/ 網址就能夠看到這個應用了。

swig 是node端的一個優秀簡潔的模板引擎，相似Python模板引擎Jinja，目前不只在node端較爲通用，相對於jade、ejs優秀，並且在瀏覽器端也能夠很好地運行。

這是官方文檔。

安裝swig

1 $ npm install swig --save

在express中使用swig

在express框架中，默認的模版是jade，更改成swig模版引擎。

修改packge.json

1 "jade": "~1.11.0",改成1 "swig": "^1.4.2",

 1 {
 2   "name": "myapp",
 3   "version": "0.0.0",
 4   "private": true,
 5   "scripts": {
 6     "start": "node ./bin/www"
 7   },
 8   "dependencies": {
 9     "body-parser": "~1.17.1",
10     "cookie-parser": "~1.4.3",
11     "debug": "~2.6.3",
12     "express": "~4.15.2",
13     "morgan": "~1.8.1",
14     "serve-favicon": "~2.4.2",
15     "swig": "^1.4.2"
16   }
17 }

修改app.js

 1 var app = express(); 
 2 app.set('view engine', 'jade');
 3 // 把上面的代碼改成下面的
 4 // view engine setup
 5 var app = express();
 6 var swig = require('swig');
 7 app.engine('html', swig.renderFile); //使用swig渲染html文件
 8 app.set('view engine', 'html'); //設置默認頁面擴展名
 9 app.set('view cache', false); //設置模板編譯無緩存
10 app.set('views', path.join(__dirname, 'views')); //設置項目的頁面文件，也就是html文件的位置
11 swig.setDefaults({cache: false}); //關閉swig模板緩存
12 swig.setDefaults({loader: swig.loaders.fs(__dirname + '/views')}); //從文件載入模板，請寫絕對路徑，不要使用相對路徑

而後把原來的views文件夾下得文件後綴都改成html

模板文件layout.html

 1 <!doctype html>
 2 <html>
 3 <head>
 4   <meta charset="utf-8">
 5   <title>{% block title %}{% endblock %}</title>
 6   {% block head %}
 7   {% endblock %}
 8 </head>
 9 <body>
10   {% block content %}{% endblock %}
11 </body>
12 </html>

index.html

 1 {% extends 'layout.html' %}
 2 
 3 {% block title %}index {{title}} {%endblock%}
 4 
 5 {% block head %}
 6 {{title}}
 7 {% endblock %}
 8 
 9 {% block content %}
10 <p>This is just an awesome page.</p>
11 {% endblock %}

而後再路由中設置便可使用：

routes\index.js

1 router.get('/', function(req, res, next) {
2   res.render('index', { title: '標題' });
3 });

以後我在命令行裏執行 $ SET DEBUG=myapp:* & npm start

出現錯誤

因而我又在myapp文件夾下再次執行 $ npm install swig --save

而後終於對了，在myapp\node_modules\.bin 裏面出現 swig 跟 swig.cmd

參考文檔：http://blog.csdn.net/duola8789/article/details/70157900

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。