上一次寫了一個是關於express的使用,但是是web頁面方向,又因爲上一次的是靜態化頁面,那既然要寫web怎麼會讓動態化頁面呢,所以這次既要用到ejs也會順帶聯繫一下restful。
先來看看上一次要導入中間件body-parser時候我們看到package.json裏面我們將要導入的body-parser放入dependencies中,當然這裏會順便記錄一下有關dependencies裏面版本中出現的^和~,這兩者之前的區別既不用公式說明了,其實很好理解~代表取版本第二位數比如~1.1.1那就大於1.1.1但是小於1.2.0,^代表取第一位數^1.1.1大於1.1.1小於2.0.0,不再贅述。還有一個那就是有關package-lock.json中的dependencies,其實這個也是比較容易理解的,簡單說就是我們在node_module這個文件夾下面會看到下面是一些我們用到或沒用到的插件,像這樣:
又橘色和銀灰色的。暫且不管顏色,這裏面有的插件都可以在package-lock.json中找到,換句話說其實是如果你想在這個node項目裏面用到某一個插件首先你需要在package-lock.json中添加dependencies,這樣你就可以在上圖中的位置找到你想要的插件,這個時候你會看到你添加的插件文件夾是橘色的就像上圖,其實到這裏你還不能require這個插件的,你還需要在package.json這個裏面添加dependencies纔可以。
上面的導入插件的方式比較笨重,需要手動添加會有各種問題,其實在webstrom裏可以使用更快捷的方式File-->setting-->(輸入)Node.js and NPM如圖:
點擊右側的+會彈出如下:
輸入你想要安裝的插件名稱在左側會列出相似名稱的選好你想要的點擊左下方的Install Package就ok了。
上面一些有關插件配置的問題就到這裏,下面看代碼部分,這個就精彩了,既然說到了ejs和restful,那就放在一起來吧,
var express = require("express"); var fs = require("fs"); var app = express(); var bodyparser = require("body-parser"); var http = require("http"); var path = require("path"); app.set('views',path.join(__dirname,'views'));//設置好ejs的加載路徑 app.set('view engine','ejs');//設置視圖是以ejs爲後綴的文件 app.use(bodyparser.urlencoded({ extended: false}));//原理暫時不知道,但是用法上次也寫過 app.use(express.static('public'));//這句是加載靜態文件的不多解釋上次做過了
準備工作很熟悉,下面是正文:
app.get('/user/detail',function (req,res) { var username = req.query.username; var password = req.query.password; var code = ''; var dataObject = ''; var description = ''; var request =http.request('http://127.2.2.2:8085/user/message?username=' + username +'&password=' + password,function (response) { var jsonstr = ''; response.on('data',function (data) { jsonstr += data; }); response.on('end',function () { jsonstr = JSON.parse(jsonstr); console.log(jsonstr); code = jsonstr.code; console.log(code); dataObject = jsonstr.dataObject; description = jsonstr.description; res.render('userdetail',{responseCode:code,obj:JSON.stringify(dataObject),des:description,title:'welcom'}); //res.send('request code is:' + code +'<br>'+' dataObject is: ' +JSON.stringify(dataObject) + '<br>'+' description is: ' + description); }); }); request.end(); }); var server = app.listen(8084,'127.1.2.1',function () { var host = server.address().address; var port = server.address().port; console.log('server is starting on http://' + host +':'+ port); });
這裏我們調用了另一個接口獲取信息同時獲取信息之後返回一個視圖,視圖名叫userdetail.ejs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>userDetail</title>
</head>
<body>
<table border="1" cellspacing="0">
<thead>
<tr>server response user messages:</tr>
<tr>
<td>響應碼</td>
<td>用戶信息</td>
<td>描述</td>
</tr>
</thead>
<tbody>
<tr><%= title.toUpperCase() %></tr>
<tr>
<td><%= responseCode %></td>
<td><%= obj %></td>
<td><%= des %></td>
</tr>
</tbody>
</table>
</body>
</html>
再看調用接口的內容:
var express = require("express"); var app = express(); app.get('/user/message',function (req,res) { var username = req.query.username; var password = req.query.password; var responseStr = { 'code':0,'dataObject':{'username':username,'password':password},'description':'this user have no auther' } res.end(JSON.stringify(responseStr)); }); var server = app.listen(8085,'127.2.2.2',function () { var host = server.address().address; var port = server.address().port; console.log('server has started on http://' + host + port); });