nodejs 開發網頁(express框架)
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;
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的部分,就會返回最終生成的頁面展現!