【11】 Express安裝入門與模版引擎ejs

時間 2019-11-17

標籤 express 安裝入門模版引擎 ejs 简体版

原文原文鏈接

前言

　　前面也學習了一些Node.js的基本入門知道，如今開始進入Web開發的部分；javascript

　　Node.js提供了http模塊，這個模塊中提供了一些底層接口，能夠直接使用，可是直接開發網站那仍是太累了，因此http模塊也不單講了，能夠去看官方API：http://nodejs.org/api/http.htmlcss

　　下面咱們直接從Express框架着手去進行Web開發，它實現好了更高層的接口，讓Web開發更簡單快捷...html

簡介和安裝

　　Express是一個輕量級、簡潔、易用的Node.js Web MVC開發框架，它基於Node.js原有進行了不少Web開發所需的功能封裝...java

　　http://expressjs.com/node

　　https://www.npmjs.org/package/expressgit

　　安裝github

npm install -g express-generatorweb

　　https://github.com/visionmedia/express#quick-startexpress

　　-g：表示全局安裝npm

　　到此express就在全局環境中安裝成功！

　　 PS：用npm安裝有時可能進度不動，多試幾回！

運行第一個基於express框架的Web

　　1.建立一個testWebApp

express testWebApp

　　2.安裝依賴項

　　注意上一步安裝成功後的提示，須要cd到網站目錄，並執行npm install命令安裝項目依賴項（能夠在項目的package.json文件的dependencies節點下看到須要哪些依賴）

　　3.修改app.js文件並運行

　　在testWebApp根目錄下找到app.js並增長端口監聽，在sublime中Ctrl+B運行

app.listen(8100,function(){
    console.log("Server Start!");
});

　　4.經過瀏覽器訪問，看看效果

　　到此成功的運行起來基本express框架的Web！

　　相關提示：

　　1.在sublime中運行事後，若是想要關閉，去任務管理器中結束node.exe進程

　　2.不在sublime中運行，能夠在cmd中執行node app，關閉使用快捷鍵Ctrl+C

模版引擎 ejs

　　在上面建立的testWebApp中express默認使用的模版擎爲jade，我的以爲jade雖然簡潔但不直觀，因此選擇了更易上手的ejs。

　　ejs：Embedded JavaScript

　　https://github.com/visionmedia/ejs

　　1.建立一個express + ejs的項目

express -e testEjsWebApp

cd testEjsWebApp

npm install

　　express參數

  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)
    -H, --hogan         add hogan.js engine support
    -c, --css <engine>  add stylesheet <engine> support (less|stylus|compass) (d
efaults to plain css)
    -f, --force         force on non-empty directory

　　2.建立成功後，打開app.js，添加8100端口監聽

　　3.打開routes文件夾下index.js，並修改代碼以下

var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res) {
  res.render('index', { title: '<h1>Express</h1>'
                          ,users:[{username: 'Wilson'},
                                {username: 'Wilson Zhong'},
                                {username: 'Zhong Wei'}] 
            });
});

module.exports = router;

　　4.打開views文件夾下index.ejs,並修改代碼以下

<!DOCTYPE html>
<html>
  <head>    
    <link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
  <body>

    <%= title %>
    <%- title %>
    <% users.forEach(function(user){ %>
        <h6><%= user.username %></h6>
    <% }) %>
    
  </body>
</html>

　　5.運行頁面，查看結果

　　在這裏，咱們尚未講express的一些東西，因此你們先不要管太多細節部分，只要知道上面示例中當經過http://localhost:8100訪問時，

　　會轉到index.js，而index.js而index.ejs傳遞了title和users對象做爲參數。

　　這裏重點看看index.ejs

　　ejs結尾的文件就是模版文件，能夠看到在文件中咱們用了三種標籤方式（這種標籤方式有過其它web開發經驗的應該很好看懂）

　　1.<%- %>

　　這個標籤在接到收到title: '<h1>Express</h1>'時，從顯示效果來看，他直接輸出HTML標籤到頁面上，輸出的是轉義後的變量值

　　2.<%= %> 　　

　　而這個標籤，從顯示效果上看，他沒有直接輸出HTML代碼到頁面上，輸出的是沒有轉義後的變量值

　　3.<% %>

　　而這個標籤，從顯示上看，他循環了出來參數中的值，標籤中是javascript邏輯代碼，注意括號的開閉合

　　在這裏，簡單認識一下ejs，下面開始看看express的結構！

express項目結構

　　上面新建了一個叫testEjsWebApp的項目，模版引擎使用的ejs，先看看項目的結構

　　1.node_modules文件夾

　　這文件夾就是在建立完項目後，cd到項目目錄執行npm install後生成的文件夾，下載了項目須要的依賴項

　　2.package.json文件

　　此文件是項目的配置文件（可定義應用程序名，版本，依賴項等等）

　　node_modules文件夾下的依賴項是從哪裏知道的呢？緣由就是項目根目錄下的這個package.json文件，執行npm install時會去找此文件中的dependencies，並安裝指定的依賴項

　　3.public文件夾(包含images、javascripts、stylesheets)

　　這個文件夾作過Web開發的應該一看就知道，爲了存放圖片、腳本、樣式等文件的

　　4.routes文件夾

　　用於存放路由文件，

　　5.views文件夾

　　用於存放模版文件

express項目分析

　　先從app.js看起

　　1.app.set(name,value)

　　把名字爲name的項的值設爲value，用於設置參數

　　app.set('views', path.join(__dirname, 'views')); 設置了模版文件夾的路徑；主要清楚__dirname的意思就能夠了，它是node.js中的全局變量，表示取當前執行文件的路徑

　　app.set('view engine', 'ejs'); 設置使用的模版引擎，咱們使用的ejs

　　2.app.use([path], function)

　用這個方法來使用中間件，由於express依賴於connect，有大量的中間件，能夠經過app.use來使用；path參數能夠不填，默認爲'/' (項目中用到的就不分別解釋了，用到的時候自已查一API的中間件部分)

　　app.use(express.static(path.join(__dirname, 'public'))); 這一句中可能要注意一下，express.static( )是處理靜態請求的，設置了public文件，public下全部文件都會以靜態資料文件形式返回（如樣式、腳本、圖片素材等文件）

var routes = require('./routes/index');
var users = require('./routes/users');

app.use('/', routes);
app.use('/users', users);

　　上面代碼表示當用戶使用/訪問時，調用routes，即routes目錄下的index.js文件，其中.js後綴省略，用/users訪問時，調用routes目錄下users.js文件

　　這就是爲何，咱們示例中用http://localhost:8100/訪問是，修改的index.js裏的文件代碼能夠執行（固然index.js文件中也要寫對應的代碼，才能是咱們最終看到的效果）

　　3.app.get(name)

　　獲取名爲name的項的值

if (app.get('env') === 'development') {
    app.use(function(err, req, res, next) {
        res.status(err.status || 500);
        res.render('error', {
            message: err.message,
            error: err
        });
    });
}

　　表示若是是開發環境，處理error時會輸出堆棧信息

　　4.路由文件index.js

　　主要看下面這段代碼

router.get('/', function(req, res) {
  res.render('index', { title: '<h1>Express</h1>'
                          ,users:[{username: 'Wilson'},
                                {username: 'Wilson Zhong'},
                                {username: 'Zhong Wei'}] 
            });
});

　　這段表示，router.get表示經過get請求/時，響應後面的function處理，兩個參數分別是request、response；

　　res.render表示調用模版引擎解析名字index的模板，傳並傳入了title和users兩個對象作爲參數；

　　爲何它會知道解板views目錄下的index.ejs?而不是其它目錄下的文件，或者後其它後綴名的文件？

　　緣由就是app.js中的設置：

app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');

　　而這兩個參數在index.ejs中能夠使用，那麼加上ejs的部分，就會返回最終生成的頁面展示！

　　到此應該差很少能動手用express+ejs作了一點東西了，入門就先到這裏吧！

　　提示：關於express，仍是有必要去看看API，application、request、response、router、middleware還提供了不少方法！

做者：   Porschev[鍾慰]
出處：   http://www.cnblogs.com/zhongweiv/
微博:     http://weibo.com/porschev 歡迎任何形式的轉載，但請務必註明原文詳細連接

相關標籤/搜索

nodejs+ejs+express+echart

每日一句

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