nodejs 圖解express+supervisor+ejs的用法(推薦)

更新時(shí)間：2017年09月08日 08:27:24 投稿：jingxian

下面小編就為大家?guī)?lái)一篇nodejs 圖解express+supervisor+ejs的用法(推薦)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

通過(guò)node js自帶的http模塊搭建了一個(gè)簡(jiǎn)易的服務(wù)器，實(shí)際在開(kāi)發(fā)中，一般用的是express框架，本文我們就來(lái)講講項(xiàng)目開(kāi)發(fā)中必備不可少的幾樣?xùn)|西：

•服務(wù)器( express )

•路由( express.Router )

•模板引擎( ejs )

•當(dāng)然再加上數(shù)據(jù)庫(kù)，就可以完成一個(gè)mvc的web應(yīng)用了，數(shù)據(jù)庫(kù)的用法，后期我會(huì)寫(xiě)一個(gè)項(xiàng)目

一、首先，新建一個(gè)項(xiàng)目文件夾( ghostwu )，在命令行下切換到該目錄，用npm init --yes 初始化package.json文件

安裝express: npm install express --save

二、新建index.js文件，輸入以下代碼

var express = require('express');
var app = express();

app.get('/', function(req, res) {
 res.send( 'welcome to study express -by ghostwu' );
}).listen( 8080 );

第一行，加載express模塊

第二行，開(kāi)啟web服務(wù)器

第三行，web服務(wù)器監(jiān)聽(tīng)8080端口，當(dāng)通過(guò)瀏覽器輸入( http://localhost:8080 ) 就會(huì)看到這段信息：welcome to study express -by ghostwu

三、如果你寫(xiě)過(guò)node服務(wù)器，你就會(huì)發(fā)現(xiàn)一個(gè)問(wèn)題，每次修改之后，都要重啟服務(wù)器，一般來(lái)說(shuō)，我們修改文件之后，保存，刷新網(wǎng)頁(yè)就能看到修改，需要達(dá)到這樣的效果，我們就要安裝supervisor，這個(gè)相當(dāng)于webpack的熱加載，我們采用全局安裝： npm install -g supervisor，安裝完成之后，我們以后就這樣運(yùn)行服務(wù)器文件了： supervisor --harmony index

之后修改index.js文件，只要保存，刷新網(wǎng)頁(yè)就能馬上看到修改之后的結(jié)果了

四、增加路由處理，修改index.js文件，把代碼修改成如下：

var express = require('express');
var app = express();
app.get('/', function(req, res) {
 res.send('hello, express');
});
app.get('/user/:name', function(req, res) {
 res.send('hello, ' + req.params.name);
});
app.get('/user/:name/age/:age', function(req, res) {
 res.send('info: user:' + req.params.name + ', age:' + req.params.age );
});
app.listen( 8080 );

http://localhost:8080/ ----> 顯示hello, express

http://localhost:8080/user/ghostwu ----->顯示hello, ghostwu

http://localhost:8080/user/ghostwu/age/22 ---->顯示info: user:ghostwu, age:22

:name占位符：用來(lái)接收user后面的值 :age占位符用來(lái)接收age后面的值， req.params后面獲取的鍵名就是這個(gè)占位符

如果你學(xué)過(guò)php,那么就相當(dāng)于下面這種get接收參數(shù)方式

xxx.php?user=ghostwu&age=22 -----> $_REQUEST['user'] $_REQUEST['age']

五、一般在項(xiàng)目中，路由是需要單獨(dú)分離出來(lái)的，便于維護(hù)和擴(kuò)展

新建routers，然后在下面創(chuàng)建index.js和info.js文件

index.js代碼：

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

router.get('/', function(req, res) {
 res.send('hello, express');
});

module.exports = router;

info.js代碼:

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

router.get('/:name', function(req, res) {
 res.send('hello, ' + req.params.name);
});
router.get('/:name/age/:age2', function(req, res) {
 res.send('info: user:' + req.params.name + ', age:' + req.params.age2 );
});

module.exports = router;

ghostwu這個(gè)目錄下面的index.js文件代碼為:

var express = require('express');
var app = express();
var indexRouter = require('./routers/index');
var infoRouter = require('./routers/info');

app.use('/', indexRouter);
app.use('/user', infoRouter);

app.listen(8080);

通過(guò)以上的代碼，就完成了路由的分離，把 / 和 /user分別放在index.js，info.js文件，然后導(dǎo)出router對(duì)象，通過(guò)app.use找到對(duì)應(yīng)的路由

六、ejs模板的應(yīng)用

安裝: npm install ejs --save

index.js文件：

var path = require('path');
var express = require('express');
var app = express();
var indexRouter = require('./routers/index');
var infoRouter = require('./routers/info');

//設(shè)置模板目錄: views
app.set('views', path.join(__dirname, 'views'));

//設(shè)置模板引擎: ejs
app.set('view engine', 'ejs');
app.use('/', indexRouter);
app.use('/user', infoRouter);
app.listen(8080);

info.js文件

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

router.get('/:name', function(req, res) {
 res.render( 'info', {
 name : 'ghostwu',
 age : 22,
 sex : 'man'
 });
});
module.exports = router;

第5行res.render渲染模板文件 info.ejs，第二個(gè)參數(shù)就是數(shù)據(jù)

info.ejs文件

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
 </head>
 <body>
  用戶(hù)信息:
  <hr>
  <ul>
   <li>用戶(hù)名: <%=name%></li>
   <li>年齡: <%=age%></li>
   <li>性別: <%=sex%></li>
  </ul>
 </body>
</html>

<%=變量名%>讀出數(shù)據(jù)

<% code %>：運(yùn)行 JavaScript 代碼，不輸出
<%= code %>：轉(zhuǎn)義html標(biāo)簽
<%- code %>：不轉(zhuǎn)義html標(biāo)簽

其他ejs用法，結(jié)合手冊(cè)查下