前端該如何優雅地 Mock 資料

語言: CN / TW / HK

一、什麼是 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
      );
    });

寫在最後

  • 作為一個前端開發,學會 Mock 是最基本的事情,不僅可以提高開發效率還可以把介面資訊掌握在自己的手上。
  • 關於 mock 還有其他的的功能,這次只是簡單的示例分享,有興趣深挖的建議自行百度學習。

原始碼附件已經打包好上傳到百度雲了,大家自行下載即可~

連結: https://pan.baidu.com/s/14G-b...

提取碼: yu27

百度雲連結不穩定,隨時可能會失效,大家抓緊儲存哈。如果百度雲連結失效了的話,請留言告訴我,我看到後會及時更新~

開源地址

碼雲地址: http://github.crmeb.net/u/defu

Github 地址: http://github.crmeb.net/u/defu