node.js 10 Web框架Express 介紹,安裝,靜態頁面,路由

上一篇:

前面介紹了node.js的文件模塊,http server以及靜態網站的創建。有了這些知識作為基礎,我們可以瞭解一下node.js的Web框架了。

從Java一路過來的朋友可能覺得Web框架還是比較重量級的,比如最初的Struts到後來的Spring,中間Apache組織也有過一些其他的模板框架,總體而言無論是從使用還是學習來講,都是需要花費較多時間的。對於大型應用而言,這個投入是值得的。如果需要在較短的時間開發小型web應用,就值得商榷了。

好在有了node.js的出現,出現了像Express這樣的輕量級,靈活的web框架,中小型web應用的開發速度就有了飛速的提升。


node.js 10 Web框架Express 介紹,安裝,靜態頁面,路由

express.js

node.js Web框架

Java的世界裡,Spring的使用目前處於絕對優勢。但是其他語言就不一樣了,無論node.js還是python,都有多個web應用框架。尤其是node.js,web框架較多,業界甚至評出了10大node.js web框架。不過不要驚慌,萬變不離其宗,很多node.js web框架都是在Express的基礎上開發的。這也是為什麼在我的node.js系列裡一定會出現node.js。最近炙手可熱的框架koa也是之前Express的一幫開發人員後來做的,後面我也會專門寫一篇介紹Koa。


之所以介紹Express,一是因為很多node.js框架都是在Express基礎上的,另一個原因是Express非常輕便,上手很快,快到做一個CRUD的時間可以縮短到幾個小時或者更短。這讓我想起若干年前,我在使用Java Blueprint EJB做一個CRUD用了大約2天時間,包括了服務器的配置,在不同的web server上調試。然而node.js不需要這些,因為http server 以及Application server都是程序員自己用node.js代碼寫的。從另一個層面來講,真正的大型企業級應用,我個人不推薦node.js。小型輕量級應用,node.js是首選。

Express JS

Github上收穫了47.7k個星,目前來看是下載量最多的node.js框架。我之前介紹的node.js博客系統Ghost使用的web框架就是Express。

通過Express可以提供靜態網站服務,路由,中間件,以及與模板引擎配合使用。

Express JS安裝運行

安裝通過npm進行。

  1. 安裝express "npm install express --save"
<code>D:\\Projects\\nodejs\\NodeDemo\\forms>npm install express --save
npm WARN [email protected] No description
npm WARN [email protected] No repository field.

+ [email protected]
added 50 packages from 37 contributors and audited 127 packages in 11.149s
found 0 vulnerabilities/<code>
  1. 在第一步完成後,express就已經在本地安裝完成。但是沒辦法像create-react-app那樣創建程序框架。好在express有一個程序生成器,express-generator。通過命令"npm install express-generator -g"即可安裝。
<code>D:\\Projects\\nodejs\\NodeDemo\\forms>npm install -g express-generator
D:\\Program Files\\nodejs\\node_global\\express -> D:\\Program Files\\nodejs\\node_global\\node_modules\\express-generator\\bin\\express-cli.js
+ [email protected]
added 10 packages from 13 contributors in 6.346s/<code>

  1. 運行"express"命令創建項目文件

由於我們已經建好了forms項目目錄,所以直接運行express就可以在目錄下創建項目文件和子目錄。如果項目目錄沒有創建號,可以運行"express <project>"。該命令會自動創建<project>目錄,並在目錄下創建相關子目錄和文件。/<project>/<project>

<code>D:\\Projects\\nodejs\\NodeDemo\\forms>express

warning: the default view engine will not be jade in future releases
warning: use `--view=jade' or `--help' for additional options

destination is not empty, continue? [y/N] y

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

install dependencies:
> npm install

run the app:
> SET DEBUG=node10:* & npm start/<code>

注意我們在運行時,系統有提示“destination is not empty, continue? [y/N]”,直接輸入"y"就好。這是因為我們在forms目錄下創建,並且該目錄下已有部分通過"npm -i"創建的項目文件。

  1. 運行"npm install"安裝express相關依賴包
<code>D:\\Projects\\nodejs\\NodeDemo\\forms>npm install
added 4 packages from 3 contributors, removed 2 packages, updated 16 packages and audited 141 packages in 12.091s
found 0 vulnerabilities/<code>

  1. 運行項目"npm start"
<code>D:\\Projects\\nodejs\\NodeDemo\\forms>npm start

> [email protected] start D:\\Projects\\nodejs\\NodeDemo\\forms
> node ./bin/www

GET / 200 17.703 ms - 207
GET /stylesheets/style.css 200 5.473 ms - 111/<code>

此時,打開自己的瀏覽器,訪問http://localhos:3000/即可顯示express創建的項目的主頁。


node.js 10 Web框架Express 介紹,安裝,靜態頁面,路由

expressjs homepage

ExpressJS 靜態頁面處理

使用框架有一個好處,那就是很多底層的處理不需要自己通過代碼一行一行敲,框架的價值在於可以提供很多封裝好的接口。

在靜態頁面的處理上,我們不需要在通過fs模塊讀取文件,通過response返回給客戶端。在express中,只需要調用response.render()方法,傳入模板文件名稱即可。

示例代碼:<project>/routes/index.js/<project>

<code>//引入express
var express = require('express');
var router = express.Router();

/* 獲取靜態頁面 */
router.get('/', function(req, res, next) {
res.render('index', { title: 'Express' });
});
//導出抹開
module.exports = router;/<code>

上面的代碼從express創建的項目的代碼中抽取,可以看到返回靜態頁面只需要引入express模塊,調用路由Router,然後通過get方法,調用response.render()讀取到index模板文件,將該靜態模板文件返回客戶端即可。注意,在這裡有一個{title:'Express'}是模板中的參數,我們後面會介紹。

短短數行代碼,沒有繞人的邏輯,靜態頁面處理就完成了。

ExpressJS 路由

在上面的靜態頁面處理過程中,我們已經使用了路由Router。路由的具體使用方法如下:

  1. 在入口文件app.js中引入實際處理的路由。比如我們實際處理靜態頁面index的路由是<project>/routes/index.js, 那麼在app.js中我們可以通過下列代碼引入index 路由router /<project>
<code>var indexRouter = require('./routes/index');/<code>
  1. 設定靜態頁面/模板目錄
<code>app.set('views', path.join(__dirname, 'views'));
......
//中間省略數行代碼
......
app.use(express.static(path.join(__dirname, 'public')));/<code>

這裡的__dirname表示當前目錄,這行代碼指定了靜態頁面/模板的目錄。

3.通過app.use指定相關路徑的處理路由

<code>app.use('/', indexRouter);/<code>

這裡表示,當訪問網站時,系統會使用index路由處理,即<project>/routes/index.js。/<project>

而前面我們講到過在index.js中,系統調用了res.render()方法傳入模板文件,即返回瀏覽器靜態頁面。

ExpressJS 動態頁面處理

通過res.send()方法進行。

<code>router.get('/', function(req, res, next) {
res.send('respond with a resource');
});/<code>

示例代碼可以查看<project>/routes/users.js/<project>

這就是處理路徑/users的路由,將路由信息在app.js中寫入即可。

<code>var usersRouter = require('./routes/users');
app.use('/users', usersRouter);/<code>

當用戶通過瀏覽器訪問http://localhost:3000/users時,系統會調用<project>/routes/users.js中的response.get()方法返回信息給客戶端。/<project>


node.js 10 Web框架Express 介紹,安裝,靜態頁面,路由

users路由

總結

上面介紹了expressJS以及安裝,靜態頁面,路由和動態頁面的處理。

後面會介紹expressJS以及相關的模板引擎以及中間件。

如果有什麼問題,歡迎朋友們留言討論。


分享到:


相關文章: