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：首先是咱們的靜態的頁面，沒有多大要求，能有一個裝數據的地方就能夠的。

1 <div class="all">
2 <div class="image">
3 
4 </div>
5 <p class="info"></p>
6 </div>

 

 

3：js文件裏面，咱們這樣寫

             由於要用的是express框架，因此咱們先下載上這個框架，打開相應文件夾cmd進入小黑框（我是這樣叫的）而後咱們輸入命令cnpm install express --save這個命令出現如下就是成功了，文件夾裏面或多出package.json的文件

其次我麼你在js的文件裏面引入這個框架，這樣寫  var ex = require("express");就是引入了，定義一個變量調用他 var app = ex();而後咱們能夠用這個框架先開啓一個服務，代碼以下

1 var ex = require("express");
2 var app = ex();
3 
4 app.get("/", function(req, res) {
5 res.send("你好呀")
6 });
7 var r = app.listen(8124, function() {
8 console.log("開啓成功")
9 })

 

用咱們定義的這個變量寫一個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("你好呀")這段話就能夠註釋了，

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

 

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

若是失敗，那就打印一下，只是爲了方便看出來，不寫也沒事，成功以後咱們也打印一下，以後在進咱們小黑裏面輸入命令結果以下：其中顯示服務開啓成功，以及成功獲取到數據，

1 fs.readFile(file,function(err,data){
2 if(err){
3 console.log("'失敗");
4 }else{
5 console.log("成功")
6 }
7 })

 

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

可是咱們要傳給前臺的必須是字符串形式的，咱們還需在轉換一下 JSON.stringify(arr1)，這樣咱們就能夠向前臺傳送數據了，這是真題的後js文件裏面的代碼

 1 var ex = require("express");
 2 var app = ex();
 3 var fs = require("fs");
 4 var file = "../info/ajaxaa.json"
 5 
 6 app.get("/", function(req, res) {
 7 //res.send("你好呀")
 8 res.writeHead(200, {
 9 "content-type": "text/html;charset=utf-8",
10 "Access-Control-Allow-Origin": "*"
11 });
12 fs.readFile(file,function(err,data){
13 if(err){
14 console.log("'失敗");
15 }else{
16 var arr = data.toString();
17 console.log(arr);
18 var arr1 = JSON.parse(arr);
19 console.log(arr1);
20 res.end(JSON.stringify(arr1))
21 }
22 })
23 });
24 var r = app.listen(8124, function() {
25 console.log("開啓成功")
26 })；

 

前臺的獲取 ：

 我是使用的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標籤裏面。

 1 var info = $('.info');
 2 var url = "http://127.0.0.1:8124"
 3 $.ajax({
 4 type: "get",
 5 url: url,
 6 async: true,
 7 success: function(res) {
 8 if(res) {
 9 var obj = JSON.parse(res);
10 console.log(obj);
11 for(var o in obj) {
12 console.log(obj[o].p);
13 var str = `<span>` + obj[o].p + `</span>`
14 info.html(str)
15 };
16 } else {
17 console.log("失敗");
18 }
19 }
20 });

 

 

今天這個json的express框架就這麼一些了，第一次寫博客內容，有很差的也但願你們多指出來，你們一塊兒進步。我會持續更新的。