Node.js的express框架

初次寫博客，有不足的地方，還請大家多多包涵！

話不多說，我是一個從事前端工作一年的小白，對於前端的知識認識還是比較少的。聽大牛說寫博客分享可以提升自己的技能。所以就來各位大牛面前獻丑一波0.0

是因為看到node的介紹是想要創建自己的服務，新手比較適合node一些。今天我是來分享一下我使用node.js中的express框架的一些基本心得。

首先你是要有安裝node的，，安裝教程在這個里面，

http://www.runoob.com/nodejs/nodejs-install-setup.html

按照教程安裝好以后，我們開始使用express框架，我用express寫了一個簡單的小Demo，只是獲取到一條數據（我是一張圖片）。

1：我們需要有是三個文件，一個是html文件，和一個js文件（在js文件里面寫服務），第三個是json文件（服務來獲取的數據）

ajax.html  和nono.js 以及ajaxaa.json  和 jquery的js文件，json數據比較簡單，就一個對象

2：首先是我們的靜態的頁面，沒有多大要求，能有一個裝數據的地方就可以的。

<div class="all">
<div class="image">

</div>
<p class="info"></p>
</div>

 

 

3：js文件里面，我們這樣寫

             因為要用的是express框架，所以我們先下載上這個框架，打開相應文件夾cmd進入小黑框（我是這樣叫的）然后我們輸入命令cnpm install express --save這個命令出現以下就是成功了，文件夾里面或多出package.json的文件

其次我么你在js的文件里面引入這個框架，這樣寫  var ex = require("express");就是引入了，定義一個變量調用他 var app = ex();然后我們可以用這個框架先開啟一個服務，代碼如下

var ex = require("express");
var app = ex();

app.get("/", function(req, res) {
res.send("你好呀")
});
var r = app.listen(8124, function() {
console.log("開啟成功")
})

 

用我們定義的這個變量寫一個gte方法，里面有兩個參數，一個是和前台頁面相同的一個參數，后面是一個回調函數，函數里面有兩個對象，來處理和相應數據 req，res

res.send（）是傳送HTTP響應,我們來啟動服務，打開相應的文件夾下，cmd進入黑窗口，輸入node nono.js          是node+js文件名

服務開啟成功，我們打開瀏覽器，輸入我們的端口號  http://localhost:8124/  打開之后可以看到，我們在send()里面輸入的話

到這里我們已經開啟一個服務了，下面我們開始寫獲取到json里面的數據，我們用fs來進行讀取和寫入，file是對應的我們的json文件的位置

var ex = require("express");
var app = ex();
var fs = require("fs");
var file = "../info/ajaxaa.json"

 

下面我會粘貼進去一段話，這是用來防止跨域問題的，當然我們的res.send("你好呀")這段話就可以注釋了，

res.writeHead(200, {
"content-type": "text/html;charset=utf-8",
"Access-Control-Allow-Origin": "*"
});

 

下面我們是要來讀取json里面的數據 所以要用到  readFile這個方法，代碼如下，其中 這個方法里面有兩個參數，一個file是我們上面定義的json文件地址變量，后面跟一個函數，函數里面兩個參數err是失敗，data就是我們的數據，

如果失敗，那就打印一下，只是為了方便看出來，不寫也沒事，成功之后我們也打印一下，之后在進我們小黑里面輸入命令結果如下：其中顯示服務開啟成功，以及成功獲取到數據，

fs.readFile(file,function(err,data){
if(err){
console.log("'失敗");
}else{
console.log("成功")
}
})

 

下面就是比較復雜的一個問題，我也是搞了有一段時間，我們打印一下數據data會顯示一堆的二進制的，解決方法是 data.toString()吧他轉換成了不是二進制的，在然后我們需要用 var arr1 = JSON.parse(arr); 吧它轉出那個對象形式

但是我們要傳給前台的必須是字符串形式的，我們還需在轉換一下 JSON.stringify(arr1)，這樣我們就可以向前台傳送數據了，這是真題的后js文件里面的代碼

var ex = require("express");
var app = ex();
var fs = require("fs");
var file = "../info/ajaxaa.json"

app.get("/", function(req, res) {
//res.send("你好呀")
res.writeHead(200, {
"content-type": "text/html;charset=utf-8",
"Access-Control-Allow-Origin": "*"
});
fs.readFile(file,function(err,data){
if(err){
console.log("'失敗");
}else{
var arr = data.toString();
console.log(arr);
var arr1 = JSON.parse(arr);
console.log(arr1);
res.end(JSON.stringify(arr1))
}
})
});
var r = app.listen(8124, function() {
console.log("開啟成功")
})；

 

前台的獲取 ：

 我是使用的jq的ajax獲取的，info是p標簽，url是我們后台自己啟動的服務的接口，$ajax里面是有基本的四個屬性，type是我們要用get還是post來操作，我們本次講的是get,下次試一下post

url就是我們的后台接口，asyns:是否異步處理，默認的true，success是成功之后的操作，一個函數，里面是res成功，也是有一個判斷，如果讓成功，我們就獲取到這個對象，獲取到的是后台傳來的字符串，我們是呀操作對象的，用json.parse來把字符串轉換成對象形式，json.stringify是把對象轉換成字符串形式。

獲取到這個對象之后，用for   in 來循環這個兌現，我們的object[o],是我們的每一個對象數據，object[o].p就是獲取到我們的數據，可以把它寫進我么你的p標簽里面。

var info = $('.info');
var url = "http://127.0.0.1:8124"
$.ajax({
type: "get",
url: url,
async: true,
success: function(res) {
if(res) {
var obj = JSON.parse(res);
console.log(obj);
for(var o in obj) {
console.log(obj[o].p);
var str = `<span>` + obj[o].p + `</span>`
info.html(str)
};
} else {
console.log("失敗");
}
}
});

 

 

今天這個json的express框架就這么一些了，第一次寫博客內容，有不好的也希望大家多指出來，大家一起進步。我會持續更新的。