百搜论坛欢迎您的加入!
adimg adimg
 
昨日:篇  今日:篇   总帖:篇   会员:
CRMEBLv12 
前端该如何优雅地 Mock 数据     

一、什么是 Mock

Mock 在软件开发领域,我们将其理解成 “模拟数据”、“虚假数据”。

二、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-bpVthImHD4eosZUNSFA?pwd=yu27
提取码: yu27

百度云链接不稳定,随时可能会失效,大家抓紧保存哈。

如果百度云链接失效了的话,请留言告诉我,我看到后会及时更新~

开源地址

码云地址:
http://github.crmeb.net/u/defu

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

 0  已被阅读了115次  楼主 2022-08-09 14:20:24
回复列表

回复:前端该如何优雅地 Mock 数据

联系站长 友链申请桂ICP备19000949号-1     桂ICP备19000949号-1
您的IP:44.192.26.60,2022-10-04 08:47:05,Processed in 0.01401 second(s).
免责声明: 本网不承担任何由内容提供商提供的信息所引起的争议和法律责任。
Powered by HadSky 7.12.3
已有0次打赏
(0) 分享
分享
取消
免责声明
1、本站资源,均来自网络,版权归原作者,所有资源和文章仅限用于学习和研究目的 。
2、不得用于商业或非法用途,否则,一切责任由该用户承担 !
如果觉得本文还不错请点个赞或者打赏点轻币哦~
拒绝伸手党,拿走请回复,尊重楼主,尊重你我他~

侵权删除请致信 E-Mail:207882320@qq.com