react 项目 mock数据

react

前言

我们都知道在实际的开发阶段,后端接口开发是和前端开发同步进行,甚至迟于前端的进度,这就直就导致前端需要等待后端接口的时间。

这种情况就严重导致前端开发缓慢,那这时候前端的开发人员只能写静态模拟数据。

  • 使用静态的json来模拟数据

这种情况是按照既定的数据格式(接口文档等),自己提供静态的JSON数据,用相关工具做接口来获取这些数据。该方法仅仅使用get请求。局限性还是很大的。

  • 模拟动态接口(Mock)

这种情况是用一个 web 框架,按照既定的接口和数据结构的要求(接口文档),自己模拟后端接口的功能,让前端项目能顺利跑起来。这样就可以很方便的模拟前端开发的业务逻辑。


技能介绍

项目主要是使用express+mock整合来实现的动态模拟接口。

目录结构:

  

 

首先需要安装express

npm install --save express

在mock文件加下新建server.js

代码如下:

var express = require("express")

var app = express();

var bodyParser = require('body-parser');

app.use(bodyParser.json()); //body-parser 解析json格式数据

app.use(bodyParser.urlencoded({ //此项必须在 bodyParser.json 下面,为参数编码

extended: true

}));

var router = express.Router();

app.get('/', function(req, res) {

res.send('hello world');

});

router.use("/test",require('./test'));

app.use("/api",router)

app.listen(3001)

那么怎么启动这个服务了?有两种方式

第一种,在当前项目目录执行

node mock/server.js 

第二种,因为我们使用npm管理包,在package.json的scripts加入

"mock": "node ./mock/server.js"

只需要执行 npm run mock 启动服务就可以了哦~~

这就实现了一个简单的express服务,在浏览器输入http://localhost:3001 就可以看到页面加载出 hello world

接下来就是引入mockJs ,首先安装mockjs

npm install --save-dev mockjs

我们在mock的目录下面新建test.js加入代码,mock的语法这里不说了。请看mock文档的讲述,有很多知识点。

var Mock = require("mockjs")

var express = require("express")

var router = express.Router();

router.use("/profile",function (req,res) {

console.log(req.body);

//调用mock方法模拟数据

var data = Mock.mock({

// 属性 list 的值是一个数组,其中含有 1 到 10 个元素

'list|1-10': [{

// 属性 id 是一个自增数,起始值为 1,每次增 1

'id|+1': 1

}]

}

);

return res.json(data);

})

module.exports = router;

在浏览器的输入http://localhost:3001/api/test/profile即可看到输出的JSON数据列表,

如果访问的地址为:http://localhost:3001/api/profile  则只需要把server.js中的

router.use("/test",require('./test')); 修改为:router.use("/",require('./test'));

在React中使用

在config/webpackDevServer.config.js中添加如下代码:

 proxy: {

'/api/': {

target: 'http://localhost:3001',

secure: false

}

},

运行时首先 npm run mock ,开启mock服务,然后运行项目npm run start,即可获取到mock数据

参考资料:https://www.jianshu.com/p/ac23664982b2

 

以上是 react 项目 mock数据 的全部内容, 来源链接: utcz.com/z/382322.html

回到顶部