Nodejs學習筆記（五）--- Express安裝入門與模版引擎ejs

阿新 • • 發佈：2019-01-12

前言

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

　　Node.js提供了http模組，這個模組中提供了一些底層介面，可以直接使用，但是直接開發網站那還是太累了，所以http模組也不單講了，可以去看官方API：http://nodejs.org/api/http.html

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

簡介和安裝

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

　　安裝

npm install -g express-generator

　　-g：表示全域性安裝

　　到此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

　　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;

修改後的index.js 原始碼

　　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>

修改後的index.ejs 原始碼

　　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還提供了很多方法！

Nodejs學習筆記（五）--- Express安裝入門與模版引擎ejs

目錄

前言

簡介和安裝

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

模版引擎 ejs

express專案結構

express專案分析

Nodejs學習筆記（五）—Express安裝入門與模版引擎ejs

Nodejs學習筆記（五）--- Express安裝入門與模版引擎ejs

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

nodejs學習筆記（五）——處理get和post請求

【轉】Nodejs學習筆記（一）--- 簡介及安裝Node.js開發環境

Nodejs學習筆記（七）—Node.js + Express 構建網站簡單示例

Nodejs學習筆記（八）—Node.js + Express 實現上傳文件功能（felixge/node-formidable）

Nodejs學習筆記（4）文件操作 fs 及 express 上傳

nodejs學習筆記（一）——nodejs的安裝和啟動第一個httpserver

Nodejs學習筆記（六）--- Node.js + Express 構建網站預備知識

Nodejs學習筆記（七）--- Node.js + Express 構建網站簡單示例

Nodejs學習筆記（一）--- 簡介及安裝Node.js開發環境

Nodejs學習筆記（八）--- Node.js + Express 實現上傳檔案功能（felixge/node-formidable）

數據結構學習筆記（五）樹的創建和遍歷

最優化學習筆記（五）牛頓法及擬牛頓法

javascript學習筆記（五）：異常捕獲和事件處理

Spring 學習筆記（五）—— Bean之間的關系、作用域、自動裝配

Go語言學習筆記（五）文件操作

Unity3D之Mecanim動畫系統學習筆記（五）：Animator Controller

Python學習筆記（五）OOP

Nodejs學習筆記（五）--- Express安裝入門與模版引擎ejs

目錄

前言

簡介和安裝

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

模版引擎 ejs

express專案結構

express專案分析

相關推薦