前端該如何優雅地 Mock 資料

語言: CN / TW / HK

時間 2022-08-09 10:30:05 SegmentFault部落格

主題: 路由器前端開發

一、什麼是 MockMock

在軟體開發領域，我們將其理解成 “模擬資料”、“虛假資料”。

二、Mock 的好處

好處有很多，一句話概括，有了 Mock，前後端人員只需要定義好介面文件就可以開始並行工作，互不影響。

三、實現 Mock

1.安裝 node.js

2.安裝其他依賴包

express (express 框架): npm install express -g
express-generator (express 專案生成外掛): npm install express-generator -g
mockjs (模擬資料生成庫): npm install mockjs
3.生成新的 express 專案並編寫服務端

新建 server.ts

import express, {
Express,
Router,
Request,
Response,
NextFunction,
} from "express";
import Mock, { Random } from "mockjs";
const app: Express = express();

const router: Router = express.Router();

app.use("*", (req: Request, res: Response, next: NextFunction) => {
res.header("Access-Control-Allow-Origin", "*");
next();
});

app.use("/api", router);

router.get("/list", (req: Request, res: Response) => {
let currPage = req.query;
res.json(
    Mock.mock({
      "data|10": [
        {
          "id|+1": 1,
          name: "@cname",
          time: "@datetime", //日期先忽略
          "source|80-100": Random.natural(80, 100),
        },
      ],
    })
  );
});

app.listen(9000, (): void => {
console.log("success serve");
});

開命令列，輸入 node server.js

在瀏覽器中輸入：http:localhost:9000/api/list

請求引數處理

router.get("/index", (req: Request, res: Response) => {
console.log(req.query);
  let num = req.query.num;
  let name_query = req.query.name;

  let res_body = {
      "code": 200,
      "msg": "成功",
      "data": {

      }
  }

  if (num=='0'){
      res_body.data={
          "query_value_name" : name_query
      }
  }else{
      res_body.data={
          "body_value_name" : '小何'
      }
  }

  res.json(
      res_body
  );
});