前端mock数据

前后端并行开发时，前后端只需要定义好接口api，前端就可以mock假数据，进行模拟开发。针对小项目，推荐方案1、2；大项目推荐方案4。

• 1. 页面中写死数据，或者变量赋值后被引用

  页面较多的时候，后期和后端联调接口的时候，需要修改大量引用了变量或者死数据的代码。故比较推荐用于搭建小型项目。

  const data = {
    "first":[
      {"name":"王小婷","nick":"祈澈菇凉"},
      {"name":"安安","nick":"坏兔子"},
      {"name":"编程微刊","nick":"简书"}
    ]
  }
  
  console.log(data);
  

 

• 2. require引入，或者axios读取本地json文件

  将模拟数据编辑成json数据或者是零碎的js脚本中，通过请求，取回数据，并进行业务逻辑处理，渲染到dom

  const data = require(''../../static/data.json'');
  
  或者
  axios.get('../../static/data.json').then(response => {
    console.log(response.data);
    this.data = response.data;
  }, response => {
    console.log("error");
  });
  

 

• 3. 线上来mock数据(可视化api管理平台)

  • 使用 https://easy-mock.com
  • 使用 http://rapapi.org/org/index.do
  • 使用 https://yapi.fanruan.com/login
     

• 4.集成koa或者express框架来搭建简易服务器(比较推荐)

  router.get('/ruei/getTabData', (request, response) => {
    const json = fs.readFileSync(path.resolve(__dirname, '../../mock/tabData.json'), 'utf-8')
  
    console.log(`获取数据: ${new Date()}; 数据接口: activityPage`)
  
    response.status(200).send(json)
  })
  

  参考项目：
   

总结

整个接口交互联调过程如下：

1. 前后台在需求分解之后，一起定义好接口api，包含：请求url（项目前缀+具体的接口名称）、请求方式、请求参数、数据响应；

2. 前端研发人员根据接口约定，模拟请求返回对应的数据，完成对应的交互；

3. 后台人员根据接口约定，完成对应的api，并完成对应的自测；

4. 待后台人员交付接口api后，前端人员直接修改接口项目前缀，切换到对应的环境，即可进入项目提测。