Nodejs學習筆記(四)--- Express安裝與模版引擎ejs

簡介及資料

Node.js提供了http模塊,這個模塊中提供了一些底層接口,可以直接使用,可以看看這個
http://nodejs.org/api/http.html
Express是一個輕量級、簡潔、易用的Node.js Web MVC開發框架,它基于Node.js原有進行了很多Web開發所需的功能封裝
http://expressjs.com/
https://www.npmjs.org/package/express

安裝

官網http://expressjs.com/
express4.X的有一些變化,4.x版本中將命令工具單獨分出來了(https://github.com/expressjs/generator),所有要先按裝express-generator,否則創建項目時,會提示express命令沒找到

npm install -g express-generator

https://github.com/expressjs/express#quick-start

image.png
npm install -g express
image.png
查看express版本
express --version
image.png

這邊存在一個誤區,網上很多都是直接用express -v (express -V) 這個指令,我不是很清楚是不是4.0版本之前的是識別的,但是這個指令出來是這樣的。

express -v
image.png

這里所指的 -v 是 --view.

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

1.創建一個expressWebApp

到指定工作目錄下執行

image.png

可以看到此時的package.json


image.png
2.安裝依賴項

我們看下這個指令,他自動生成了一個新的package.json。

npm init
image.png
image.png

注意上一步安裝成功后的提示,需要cd到網站目錄,并執行npm install命令安裝項目依賴項(可以在項目的package.json文件的dependencies節點下看到需要哪些依賴)

npm install
image.png
image.png
image.png
3.運行app.js文件,添加監聽啟動服務。

在expressWebApp根目錄下找到app.js并增加端口監聽,在sublime中Ctrl+B運行

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

image.png
image.png
4.瀏覽器訪問效果
image.png

相關提示:
  1.在sublime中運行過后,如果想要關閉,去任務管理器中結束node.exe進程
  2.不在sublime中運行,可以在cmd中執行node app,關閉使用快捷鍵Ctrl+C

模版引擎 ejs

ejs:Embedded JavaScript
  https://github.com/visionmedia/ejs

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

生成環境

express -e ejsWebApp
image.png

安裝依賴

cd ejsWebApp
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,添加3000端口監聽
app.listen(3000,function(){
    console.log("ejs Server Start!");
});
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: 'Tiany'},
                                {username: 'Tiany Zhong'},
                                {username: 'Zhong Dian'}] 
            });
});

module.exports = router;

image.png
4.打開views文件夾下index.ejs,并修改代碼如下
<!DOCTYPE html>
<html>
  <head>    
    <link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
  <body>

    <%= title %>
    <%- title %>
    <% users.forEach(function(user){ %>
        <h5><%= user.username %></h5>
    <% }) %>
    
  </body>
</html>
image.png
5.瀏覽器結果
node app
image.png
image.png

當我們訪問 http://localhost:3000時,app.js 中 app.use('/', index); 會轉到index.js,而index.js而index.ejs傳遞了title和users對象作為參數,細節以后我們再探討。

這里重點看看index.ejs
ejs結尾的文件就是模版文件,可以看到在文件中我們用了三種標簽方式(這種標簽方式有過其它web開發經驗的應該很好看懂)
  1.<%= %>
  這個標簽在接到收到title: < h1 >Express< /h1 >時,從顯示效果來看,他直接輸出HTML標簽到頁面上,輸出的是轉義后的變量值
  2.<%- %>   
  而這個標簽,從顯示效果上看,他沒有直接輸出HTML代碼到頁面上,輸出的是沒有轉義后的變量值
  3.<% %>
  而這個標簽,從顯示上看,他循環了出來參數中的值,標簽中是javascript邏輯代碼,注意括號的開閉合

express項目結構

image.png

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參數可以不填,默認為'/' .
  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文件 
  3.app.get(name)
  獲取名為name的項的值
  4.路由文件index.js

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

這段表示,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中可以使用,最后就是我們看到的頁面展示效果了。

內容大多是根據書籍和網上資料的總結,結合自己實踐中遇到問題做了記錄和總結,其中描述可能不是很準確,還有許多內容沒有細究,若是存在問題,還望大神指正建議。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容