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

通過node js自帶的http模塊搭建了一個簡易的服務器，實際在開發中，一般用的是express框架，本文我們就來講講項目開發中必備不可少的幾樣東西：

創新互聯公司是一家專業提供云縣企業網站建設,專注與做網站、網站制作、HTML5、小程序制作等業務。10年已為云縣眾多企業、政府機構等服務。創新互聯專業網絡公司優惠進行中。

•服務器( express )

•路由( express.Router )

•模板引擎( ejs )

•當然再加上數據庫，就可以完成一個mvc的web應用了，數據庫的用法，后期我會寫一個項目

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

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

安裝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模塊

第二行，開啟web服務器

第三行，web服務器監聽8080端口，當通過瀏覽器輸入( http://localhost:8080 ) 就會看到這段信息：welcome to study express -by ghostwu

三、如果你寫過node服務器，你就會發現一個問題，每次修改之后，都要重啟服務器，一般來說，我們修改文件之后，保存，刷新網頁就能看到修改，需要達到這樣的效果，我們就要安裝supervisor，這個相當于webpack的熱加載，我們采用全局安裝： npm install -g supervisor，安裝完成之后，我們以后就這樣運行服務器文件了： supervisor --harmony index

之后修改index.js文件，只要保存，刷新網頁就能馬上看到修改之后的結果了

四、增加路由處理，修改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占位符：用來接收user后面的值 :age占位符用來接收age后面的值， req.params后面獲取的鍵名就是這個占位符

如果你學過php,那么就相當于下面這種get接收參數方式

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

五、一般在項目中，路由是需要單獨分離出來的，便于維護和擴展

新建routers，然后在下面創建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這個目錄下面的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);

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

通過以上的代碼，就完成了路由的分離，把 / 和 /user分別放在index.js，info.js文件，然后導出router對象，通過app.use找到對應的路由

六、ejs模板的應用

安裝: 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');

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

//設置模板引擎: 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，第二個參數就是數據

info.ejs文件

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

<%=變量名%>讀出數據

<% code %>：運行 JavaScript 代碼，不輸出
<%= code %>：轉義html標簽
<%- code %>：不轉義html標簽

其他ejs用法，結合手冊查下

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