node.js的express模組實現GET和POST請求

喆星高照發表於2022-06-14
Node.jsExpress

一、環境

1、安裝express

npm i express@4.17.1 // 安裝express模組

2、安裝nodemon

npm i nodemon -g 

 

3、安裝cors

npm install cors --save 或者 npm install cors -D

 

4、執行命令

nodemon .\test.js

二、程式碼（話不多說直接上程式碼）

1、程式碼結構：

 

 

 

 

test.html為頁面
test.js為伺服器端程式碼
apiRouter為封裝的路由模組
2、apiRouter.js

const express = require("express");
const database = require("mime-db");
const router = express.Router();
//匯入
const cors = require('cors');
//掛載
router.use(cors({
    origin:['http://localhost:8083'],
    methods:['GET','POST'],
    alloweHeaders:['Conten-Type', 'Authorization']
}));

 
// 掛載對應的路由
router.get("/get", (req, res) => {
  // 通過 req.query 獲取客戶端通過查詢字串，傳送到伺服器的資料
  const query = req.query
 let backData = query.name+'test拼接' 
  // 向客戶端響應處理的結果
  res.send({
    status: 0, // 0成功，1失敗
    code:200,
    msg: "get請求成功！",
    data: backData, // 響應給客戶端的資料
  });
});
 
router.post("/post", (req, res) => {
  // 通過 req.body 獲取請求體中包含的 url-encoded 格式的資料
  const body = req.body;
   let backData = body.author+'test拼接處理資料' 
  // 呼叫res.send方法，向客戶端響應結果
  res.send({
      status: 0,
      code:200,
      msg: 'POST請求成功！',
      data: backData
  })
 
});
 
module.exports = router;

 


3、test.js

const express = require("express");
// 建立伺服器例項
const app = express();
 
// 配置解析表單資料的中介軟體
app.use(express.urlencoded({ extended: false }));
 
// 一定要在路由之前，配置cors中介軟體，從而解決介面跨域問題
const cors = require("cors");
app.use(cors());
 
// 匯入路由模組
const router = require("./apiRouter");
 
// 把路由掛載到app例項上
app.use("/api", router);
 
// 啟動伺服器
app.listen(8081, () => {
  console.log("server running at http://127.0.0.1:8081");
});

 


4、test.html

<!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://cdn.staticfile.org/jquery/3.4.1/jquery.min.js"></script>
  </head>
  <body>
    <button id="btnGET">GET</button>
    <button id="btnPOST">POST</button>
    <script>
      $(function () {
        // 測試Get介面
        $("#btnGET").on("click", function () {
          $.ajax({
            type: "GET",
            // url: "http://127.0.0.1:8081/api/get",
            url: "http://10.15.253.205:8081/api/get",
            data: {
              name: "zs",
              age: 30,
            },
 
            success: function (res) {
              console.log(res);
            },
          });
        });
        // 測試Post介面
        $("#btnPOST").on("click", function () {
          $.ajax({
            type: "POST",
            url: "http://10.15.253.205:8081/api/post",
            data: {
              bookname: "西遊記",
              author: "吳承恩",
            },
            success: function (res) {
              console.log(res);
            },
          });
        });
      });
    </script>
  </body>
</html>

 


效果：

 

 寫在最後，簡單的node伺服器，希望可以幫到大家，

相關文章