#初識(shí)Express# Express 框架處理前端請(qǐng)求（/:id）

tracy 發(fā)布于2019-08-22 17:31 / 874人閱讀

摘要：講解配置客戶端路由請(qǐng)求地址。將改成也是可以的，只是請(qǐng)求類型會(huì)變成。一個(gè)對(duì)象，其包含了一系列的屬性，這些屬性和在路由中命名的參數(shù)名是一一對(duì)應(yīng)的。有四個(gè)參數(shù)，分別是，做請(qǐng)求處理，做響應(yīng)處理，執(zhí)行正確參數(shù)時(shí)的函數(shù)操作，是被監(jiān)聽參數(shù)的值。

文章涉及到的API：req.params，res.json()，app.get(),app.post(),app.param()。

API講解

1. app.get()、app.post()

配置客戶端路由（請(qǐng)求地址）。

app.post("/get_json/:id", function (req, res) {
  // 響應(yīng)塊代碼
})

這里配置了一個(gè)POST請(qǐng)求的地址。將app.post()改成app.get()也是可以的，只是請(qǐng)求類型會(huì)變成get。

2. req.params

一個(gè)對(duì)象，其包含了一系列的屬性，這些屬性和在路由中命名的參數(shù)名是一一對(duì)應(yīng)的。例如，如果你有/user/:name路由，name屬性可通過req.params.name的方式獲取到，這個(gè)對(duì)象默認(rèn)值為{}。

3. res.json()

發(fā)送一個(gè)json的響應(yīng)。這個(gè)方法和將一個(gè)對(duì)象或者一個(gè)數(shù)組作為參數(shù)傳遞給res.send()方法的效果相同。不過，你可以使用這個(gè)方法來轉(zhuǎn)換其他的值到json，例如null，undefined。(雖然這些都是技術(shù)上無效的JSON)。

4. app.param()

這個(gè)API有兩個(gè)參數(shù)，（name, callback）,name是被監(jiān)聽參數(shù)的字段名， callback則是對(duì)監(jiān)聽結(jié)果的回調(diào)函數(shù)。callback有四個(gè)參數(shù)，分別是 request、response、next、name，request做請(qǐng)求處理，response做響應(yīng)處理，next執(zhí)行正確參數(shù)時(shí)的函數(shù)操作，name是被監(jiān)聽參數(shù)的值。

app.param("id", function(req, res, next, id) {
    if (id == 3) {
        next() // 參數(shù)正確調(diào)用next函數(shù)
    } else { // 監(jiān)聽參數(shù)不存在或者錯(cuò)誤，給出錯(cuò)誤響應(yīng)
        console.log("Erro !!!");
        res.send("Erro !!!!");
    }
})

示例代碼

服務(wù)端代碼

var express = require("express");
var bodyParser = require("body-parser");
var app = express();
// 解析json格式的數(shù)據(jù)
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));

// POST請(qǐng)求 返回JSON串?dāng)?shù)據(jù)
app.post("/get_json/:id", function (req, res) {
   console.log("接收到 POST 請(qǐng)求");
   var json = {
           "message": "歡迎訪問",
           "data": { "a": 1, "b": 2, "c": 4, "d": 3, "e": 5 }
   }
   res.json(json);
})
// 處理不同參數(shù)的請(qǐng)求
app.param("id", function(req, res, next, id) {
    if (id == 3) {
        next() // 執(zhí)行正常操作，返回JSON數(shù)據(jù)
    } else {
        console.log("Erro ！！！");
        console.log(req.params);
        res.send("Erro !!!!");
    }
})

客戶端請(qǐng)求

ajax({
    url: "/get_json/1",  // 傳 3 的時(shí)候，后臺(tái)才會(huì)返回JSON數(shù)據(jù)
    type: "POST",
    data: data,
    success: function(data){
        // console.log( JSON.parse(data) );
           console.log(data);
    }
})