首页 › React论坛 › react 项目 mock数据

黑邦姥姥 發表於 2019-6-26 22:11:00

react 项目 mock数据

<p><strong>前言</strong></p>
<div>
<div>
<p>我们都知道在实际的开发阶段，后端接口开发是和前端开发同步进行，甚至迟于前端的进度，这就直就导致前端需要等待后端接口的时间。</p>
<p>这种情况就严重导致前端开发缓慢,那这时候前端的开发人员只能写静态模拟数据。</p>
<ul>
<li>使用静态的json来模拟数据</li>
</ul>
<p>这种情况是按照既定的数据格式（接口文档等），自己提供静态的JSON数据，用相关工具做接口来获取这些数据。该方法仅仅使用get请求。局限性还是很大的。</p>
<ul>
<li>模拟动态接口（Mock）</li>
</ul>
<p>这种情况是用一个 web 框架，按照既定的接口和数据结构的要求（接口文档），自己模拟后端接口的功能，让前端项目能顺利跑起来。这样就可以很方便的模拟前端开发的业务逻辑。</p>
</div>
<br><strong>技能介绍</strong><br><br></div>
<div>项目主要是使用express+mock整合来实现的动态模拟接口。</div>
<div>目录结构：</div>
<div>　　<img src="https://img2018.cnblogs.com/blog/745803/201906/745803-20190626214210711-1573051246.png"></div>
<div>&nbsp;</div>
<div>首先需要安装express</div>
<div>
<div class="cnblogs_code">
<pre>npm install --save express</pre>
</div>
<p>在mock文件加下新建server.js</p>
<p>代码如下：</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">var</span> express = require("express"<span style="color: rgba(0, 0, 0, 1)">)
</span><span style="color: rgba(0, 0, 255, 1)">var</span> app =<span style="color: rgba(0, 0, 0, 1)"> express();
</span><span style="color: rgba(0, 0, 255, 1)">var</span> bodyParser = require('body-parser'<span style="color: rgba(0, 0, 0, 1)">);

app.use(bodyParser.json());</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">body-parser 解析json格式数据</span>
app.use(bodyParser.urlencoded({            <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">此项必须在 bodyParser.json 下面,为参数编码</span>
    extended: <span style="color: rgba(0, 0, 255, 1)">true</span><span style="color: rgba(0, 0, 0, 1)">
}));

</span><span style="color: rgba(0, 0, 255, 1)">var</span> router =<span style="color: rgba(0, 0, 0, 1)"> express.Router();

app.get(</span>'/', <span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)">(req, res) {
    res.send(</span>'hello world'<span style="color: rgba(0, 0, 0, 1)">);
});

router.use(</span>"/test",require('./test'<span style="color: rgba(0, 0, 0, 1)">));

app.use(</span>"/api"<span style="color: rgba(0, 0, 0, 1)">,router)

app.listen(</span>3001)</pre>
</div>
<p>那么怎么启动这个服务了？有两种方式</p>
<p>第一种，在当前项目目录执行</p>
<div class="cnblogs_code">
<pre>node mock/server.js </pre>
</div>
<p>第二种，因为我们使用npm管理包，在package.json的scripts加入</p>
<div class="cnblogs_code">
<pre>"mock": "node ./mock/server.js"</pre>
</div>
<p>只需要执行&nbsp;<code>npm run mock</code>&nbsp;启动服务就可以了哦~~</p>
<p>这就实现了一个简单的express服务，在浏览器输入http://localhost:3001&nbsp;就可以看到页面加载出 hello world</p>
<p>&nbsp;</p>
<p>接下来就是引入mockJs ,首先安装mockjs</p>
<div class="cnblogs_code">
<pre>npm install --save-dev mockjs</pre>
</div>
<p>我们在mock的目录下面新建test.js加入代码，mock的语法这里不说了。请看mock文档的讲述，有很多知识点。</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">var</span> Mock = require("mockjs"<span style="color: rgba(0, 0, 0, 1)">)
</span><span style="color: rgba(0, 0, 255, 1)">var</span> express = require("express"<span style="color: rgba(0, 0, 0, 1)">)
</span><span style="color: rgba(0, 0, 255, 1)">var</span> router =<span style="color: rgba(0, 0, 0, 1)"> express.Router();

router.use(</span>"/profile",<span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> (req,res) {
    console.log(req.body);
    </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">调用mock方法模拟数据</span>
    <span style="color: rgba(0, 0, 255, 1)">var</span> data =<span style="color: rgba(0, 0, 0, 1)"> Mock.mock({
            </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 属性 list 的值是一个数组，其中含有 1 到 10 个元素</span>
            'list|1-10'<span style="color: rgba(0, 0, 0, 1)">: [{
                </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 属性 id 是一个自增数，起始值为 1，每次增 1</span>
                'id|+1': 1<span style="color: rgba(0, 0, 0, 1)">
            }]
      }
    );
    </span><span style="color: rgba(0, 0, 255, 1)">return</span><span style="color: rgba(0, 0, 0, 1)"> res.json(data);
})

module.exports </span>= router;</pre>
</div>
<p>在浏览器的输入http://localhost:3001/api/test/profile即可看到输出的JSON数据列表，</p>
<p><span style="background-color: rgba(255, 0, 0, 1)"><strong>如果访问的地址为：<span style="background-color: rgba(255, 0, 0, 1)">http://localhost:3001/api/profile</span>&nbsp; 则只需要把server.js中的</strong></span></p>
<pre><span style="background-color: rgba(255, 0, 0, 1)"><strong>router.use("/test",require('./test')); 修改为：router.use("/",require('./test'));</strong></span></pre>
<p>&nbsp;</p>
<h2>在React中使用</h2>
<p>在config/webpackDevServer.config.js中添加如下代码：</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)"> proxy: {
      </span>'/api/'<span style="color: rgba(0, 0, 0, 1)">: {
      target: </span>'http://localhost:3001'<span style="color: rgba(0, 0, 0, 1)">,
      secure: </span><span style="color: rgba(0, 0, 255, 1)">false</span><span style="color: rgba(0, 0, 0, 1)">
      }
    },</span></pre>
</div>
<p>运行时首先 npm run mock ，开启mock服务，然后运行项目npm run start，即可获取到mock数据</p>
<p>&nbsp;</p>
<p>参考资料：https://www.jianshu.com/p/ac23664982b2</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
</div>
<div>&nbsp;</div><br><br>
来源：https://www.cnblogs.com/alice626/p/11094225.html

查看完整版本: react 项目 mock数据