基于node書(shū)寫(xiě)一個(gè)接口 || express(一)

  • 本篇利用node.js來(lái)寫(xiě)基于本地服務(wù)的接口，并使其調(diào)用成功

1 . 首先需要安裝node.js

如果希望通過(guò) Node.js 來(lái)運(yùn)行 Javascript 代碼，則必須在計(jì)算機(jī)上安裝 Node.js 環(huán)境才行。

安裝包可以從 Node.js 的官網(wǎng)首頁(yè)直接下載，進(jìn)入到 Node.js 的官網(wǎng)首頁(yè)（https://nodejs.org/en/），點(diǎn)擊綠色的按鈕，下載所需的版本后，雙擊直接安裝即可。

① LTS 為長(zhǎng)期穩(wěn)定版，對(duì)于追求穩(wěn)定性的企業(yè)級(jí)項(xiàng)目來(lái)說(shuō)，推薦安裝 LTS 版本的 Node.js。

② Current 為新特性嘗鮮版，對(duì)熱衷于嘗試新特性的用戶來(lái)說(shuō)，推薦安裝 Current 版本的 Node.js。但是，Current 版本中可能存在隱藏的 Bug 或安全性漏洞，因此不推薦在企業(yè)級(jí)項(xiàng)目中使用 Current 版本的 Node.js。

2 . 啟動(dòng)本地服務(wù)

  • 1 . 創(chuàng)建一個(gè)文件夾，在里面創(chuàng)建一個(gè)入口文件app.js
  • 2 . 初始化包管理配置 npm init根據(jù)提示輸入對(duì)象內(nèi)容即可，也可以直接按回車(chē)選擇默認(rèn)配置
  • 3 . 此時(shí)就可以下我們啟動(dòng)本地服務(wù)器所依賴(lài)的包npm i express
  • 4 . 創(chuàng)建最基本的本地服務(wù)器，例如服務(wù)器文件名為app.js那么啟動(dòng)服務(wù)器命令就為node .\app.js 
const express = require('express');
const app = express();

// 啟動(dòng)服務(wù)器
app.listen(80, () => {
  console.log('express server running at http://127.0.0.1')
})

3 . 寫(xiě)一個(gè)基于node.js的接口

const express = require('express');
const app = express();

// 解析表單中間件
app.use(express.urlencoded({ extended: false }))

// req.query  req.body為請(qǐng)求接口時(shí)用戶端傳遞的參數(shù)  
app.get('/user', (req, res)=>{
const body = req.query
  res.send({
    status: 200,
    data: body,
    message: '請(qǐng)求成功'
  })
})

app.post('/my', (req, res)=>{
  const body = req.body
  res.send({
    status: 200,
    data: body,
    message: '請(qǐng)求成功'
  })
})

// 啟動(dòng)服務(wù)器
app.listen(80, () => {
  console.log('express server running at http://127.0.0.1')
})

4 . 如果有條件可以安裝postman來(lái)進(jìn)行接口的測(cè)試

5 . 用axios進(jìn)行請(qǐng)求測(cè)試

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
  <button class="bon">GET點(diǎn)擊請(qǐng)求</button>
  <button class="btn">POST點(diǎn)擊請(qǐng)求</button>
</body>
<script>
  let bon = document.querySelector('.bon')
  let btn = document.querySelector('.btn')

  bon.addEventListener('click',()=>{
    axios({
      method: 'GET',
      url: 'http://127.0.0.1/user',
      params: {
        name: '我是GET請(qǐng)求'
      }
    }).then(function(res){
      console.log(res);
    })
  })
  // ------------  分割線   --------------------------------
  btn.addEventListener('click',()=>{
    let body =[{name: '我是POST請(qǐng)求'}]
    axios({
      method: 'POST',
      url: 'http://127.0.0.1/my',
      data: body
    }).then(function(res){
      console.log(res);
    })
  })
</script>
</html>

6 . 處理axios的POST請(qǐng)求跨域被攔截與無(wú)返回值問(wèn)題

6.1 . 當(dāng)請(qǐng)求時(shí)會(huì)出現(xiàn)這樣一個(gè)報(bào)錯(cuò)：
  • 處理跨域被攔截
    1 . 回到app.js服務(wù)器文件中，打開(kāi)終端下輸入npm i cors這個(gè)包
    2 . 導(dǎo)入cors這個(gè)包并注冊(cè)全局中間件，注意此中間件要在請(qǐng)求與路由之前
const cors = require('cors');
app.use(cors())
6.2 . 服務(wù)端參數(shù)未獲取到客戶端傳遞參數(shù)問(wèn)題
  • 根據(jù)現(xiàn)在的代碼服務(wù)端是把客戶端的請(qǐng)求參數(shù)原封不動(dòng)返回回去，既然沒(méi)有返回值，證明服務(wù)端沒(méi)有接收到請(qǐng)求參數(shù)

1 . 解決JSON表單格式的傳輸

app.use(express.json());

2 . 解決 application/x-www-form-urlencoded 格式的表單數(shù)據(jù)

app.use(express.urlencoded({ extended: false }))
  • 此時(shí)就可以隨心所欲的寫(xiě)一些接口了

7 . 最后是完整代碼

  • 服務(wù)端app.js文件
const express = require('express');
const app = express();
const cors = require('cors');

// 處理跨域中間件
app.use(cors())
// 處理JSON表單格式中間件
app.use(express.json());
// 處理application/x-www-form-urlencoded表單格式的中間件
app.use(express.urlencoded({ extended: false }))

app.get('/user', (req, res)=>{
  const body = req.query;
  res.send({
    status: 200,
    data: body,
    message: '請(qǐng)求成功'
  })
})

app.post('/my', (req, res)=>{
  const body = req.body
  res.send({
    status: 200,
    data: body,
    message: '請(qǐng)求成功'
  })
})

// 啟動(dòng)服務(wù)器
app.listen(80, () => {
  console.log('express server running at http://127.0.0.1')
})
  • 完整代碼客戶端
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
  <button class="bon">GET點(diǎn)擊請(qǐng)求</button>
  <button class="btn">POST點(diǎn)擊請(qǐng)求</button>
</body>
<script>
  let bon = document.querySelector('.bon')
  let btn = document.querySelector('.btn')

  bon.addEventListener('click',()=>{
    axios({
      method: 'GET',
      url: 'http://127.0.0.1/user',
      params: {
        name: '我是GET請(qǐng)求'
      }
    }).then(function(res){
      console.log(res);
    })
  })
  // ------------  分割線   --------------------------------
  btn.addEventListener('click',()=>{
    let body =[{name: '我是POST請(qǐng)求'}]
    axios({
      method: 'POST',
      url: 'http://127.0.0.1/my',
      data: body
    }).then(function(res){
      console.log(res);
    })
  })
</script>
</html>
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容