Node.js怎么使用express寫接口

這篇文章主要講解了“Node.js怎么使用express寫接口”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“Node.js怎么使用express寫接口”吧！

創(chuàng)建基本的服務(wù)器

//導(dǎo)入express模塊
const express =require('rexpress')
//創(chuàng)建express的服務(wù)器實例
const app=express()

....

//調(diào)用app.listen方法 ，指定端口號并啟動web服務(wù)器
app.listen(80,function(){
  console.log('server running at http://127.0.0.1');
})

創(chuàng)建API路由模塊

// apiRouter.js
var express=require('express')  //導(dǎo)入express
var apiRouter=express.Router() //創(chuàng)建路由對象
module.exports=router //向外導(dǎo)出對象
//app.js
const apiRouter=require('./apiRouter')
app.use('api',apiRouter)

編寫GET接口

apiRouter.get('/get',(req,res)=>{
//1.獲取到客戶端通過查詢字符串，發(fā)送到服務(wù)器的數(shù)據(jù)
const query=req.query
//2.調(diào)用res.send()方法 ，把數(shù)據(jù)響應(yīng)給客戶端
    res.send({
        status:0,               //狀態(tài)，0表示成功  1表示失敗
        msg:'GET請求成功,        // 狀態(tài)描述
        data:query               //需要響應(yīng)給客戶端的數(shù)據(jù)
    })
})

編寫POST接口

apiRouter.post('/post',(req,res)=>{
//1.獲取到客戶端通過查詢字符串，發(fā)送到服務(wù)器的數(shù)據(jù)
const body=req.body
//2.調(diào)用res.send()方法 ，把數(shù)據(jù)響應(yīng)給客戶端
    res.send({
        status:0,               //狀態(tài)，0表示成功  1表示失敗
        msg:'POST請求成功,        // 狀態(tài)描述
        data:body               //需要響應(yīng)給客戶端的數(shù)據(jù)
    })
})

在拿到路由之前需要配置解析表單的中間件

//配置解析表單數(shù)據(jù)的中間件
app.use(express.urlencoded({extended:false}))

CROS跨域資源共享

1.接口的跨域問題

剛才編寫的GET和POST接口，存在一個很嚴(yán)重的問題:不支持跨域請求。解決接口跨域問題的方案主要有兩種

• CORS(主流的解決方案，推薦使用)CORS(主流的解決方案，推薦使用)

• JSONP(有缺陷的解決方案:只支持GET請求)有缺陷的解決方案:只支持GET請求

2.使用cros中間件拒絕跨域問題

cros是Express的一個第三方的中間件。通過安裝和配置cors中間件，可以很方便的解決跨域問題

使用步驟

• 運(yùn)行npm install cros 安裝中間件

• 使用const cros=require(‘cros’)導(dǎo)入中間件

• 在路由之前調(diào)用app.use(cros())配置中間件

3.什么是cros

cros(Cross-Origin Resource Sharing，跨域資源共享)由一系列HTTP響應(yīng)頭組成，這些HTTP響應(yīng)頭決定瀏覽器是否阻止前端JS代碼跨域獲取資源

瀏覽器的同源安全策略默認(rèn)會阻止網(wǎng)頁"跨域"或缺資源，但是如果接口服務(wù)器配置了CROS相關(guān)的HTTP響應(yīng)頭

就可以接觸瀏覽器端的跨域訪問限制

4.cros的注意事項

• cros主要在服務(wù)器端進(jìn)行配置?？蛻舳藶g覽器無需做任何額外的配置，即可請求開啟了cros的接口

• cros在瀏覽器在有兼容性。

5.cros請求的分類

客戶端在請求cors接口時，根據(jù) 請求方式和請求頭的不同，跨域?qū)ros的請求分為兩大類，分別是：

• 簡單請求

• 請求方式：GET,POST,HEAT 三者之一

• HTTP頭部信息不超過一下幾種字段：無自定義頭部，Accept,Accept-Language,Content-Language,DPR,Dpwnlink,Sava-Data,Viewport-Width,Width,Content-Type

• 預(yù)檢請求

• 請求方式為GET,POST,HEAD之外的請求Method類型

• 請求頭在包含自定義頭部字段

• 向服務(wù)器發(fā)送了application/json格式的數(shù)據(jù)

在瀏覽器與服務(wù)器正式通信之前，瀏覽器會發(fā)送OPTION請求進(jìn)行預(yù)檢，以獲取瀏覽器是否允許該實際請求，所以這一次的OPTION請求為“預(yù)檢請求”,服務(wù)器成功響應(yīng)預(yù)檢請求后，才會發(fā)送真正的請求，并且攜帶真實數(shù)據(jù)

6.簡單請求和預(yù)檢請求的區(qū)別

簡單請求的特點: 客戶端與服務(wù)器之間只會發(fā)生一次請求。
預(yù)檢請求的特點: 客戶端與服務(wù)器之間會發(fā)生兩次請求，OPTION預(yù)檢請求成功之后，才會發(fā)起真正的請求。

JSONP接口

1.回顧jsonp的概念和特點

概念 ：瀏覽器通過/

特點：

• JSONP不屬于真正的ajax請求，因為它沒有使用XMLHttpRequest這個對象

• JSONP僅支持GET請求，不支持POST,PUT,DELETE等請求

2.創(chuàng)建jsonp接口的注意事項

如果項目中已經(jīng)配置了CROS的跨域資源共享，為了防止沖突，必須在配置CROS中間件之前聲明JSONP的接口，否則JSONP接口會被處理成開啟了CROS的接口

3.實現(xiàn)JSONP接口的步驟

• 獲取客戶端的發(fā)送過來的回調(diào)函數(shù)的名字

• 得到要通過JSONP形式發(fā)送給客戶端的數(shù)據(jù) JSON.stringify()

• 根據(jù)前面兩走的到的數(shù)據(jù)，拼接出一個函數(shù)調(diào)用的字符串

• 把上一步拼接得到的字符串，響應(yīng)給客戶端的/

4.實現(xiàn)JSONP接口的具體代碼

app.get('/api/jsonp',(req,res)=>{
  //獲取客戶端發(fā)送過來的回調(diào)函數(shù)的名字
  const  funcName=req.query.callback
  //得到要通過JSONP形式發(fā)送給客戶端的數(shù)據(jù)
  const data={name:'zs',age:22}
  //根據(jù)前面兩步得到的數(shù)據(jù)，拼接一個函數(shù)調(diào)用的字符串
  const scriptStr=`${funcName}(${JSON.stringify(data)})`
  //把上一步得到的拼接字符串，響應(yīng)給客戶端的<script>標(biāo)簽進(jìn)行解析
  res.send(scriptStr)
})

5.在網(wǎng)頁在使用jq發(fā)起jsonp請求

調(diào)用$.ajax()，提供JSONP的配置請求，從而發(fā)起JSONP請求

$("#btnJSONP").on("click", function () {
    $.ajax({
        type: "GET",
        url: "http://127.0.0.1/api/jsonp",
        dataType: "jsonp",
        success: function (res) {
        console.log(res);
        },
    });
});

感謝各位的閱讀，以上就是“Node.js怎么使用express寫接口”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對Node.js怎么使用express寫接口這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關(guān)知識點的文章，歡迎關(guān)注！