码迷,mamicode.com
首页 > 其他好文 > 详细

vue2.0:(二)、mock数据

时间:2018-03-22 15:32:52      阅读:145      评论:0      收藏:0      [点我收藏+]

标签:技术   googl   mpi   localhost   pre   style   现在   格式化   json   

什么是mock数据呢?很多情况下,后台的搭建比起前端来说要麻烦的多,所以,常常是前端写好了页面以后后台接口却没有写好,但是在一个项目中,接口调试确实是最浪费时间的,所以,往往前端需要自己模拟数据。

第一步:这里有一个data.json,用来放置我们模拟的数据:

    技术分享图片其格式类似于:技术分享图片

    但是最后具体是什么样的数据格式,你还要根据页面的结构,信息和后台来决定。

  第二步:我们需要配置来获取到接口里面的数据:

    你会在build 文件夹里面找到dev-server.js,打开后,有一个地方有app.express();

    技术分享图片

    接下来我们可以写如下代码:

    

var app = express()

var appData = require(‘../data.json‘);
var seller = appData.seller;
var  goods = appData.goods;
var ratings = appData.ratings;

var apiRouter = express.Router();
apiRouter.get(‘/seller‘,function (req, res){
  res.json({
    errno: 0,
    data: seller
  })
});
apiRouter.get(‘/goods‘,function (req, res){
  res.json({
    errno: 0,
    data: goods
  })
});
apiRouter.get(‘/ratings‘,function (req, res){
  res.json({
    errno: 0,
    data: ratings
  })
});
app.use(‘/api‘, apiRouter);
var compiler = webpack(webpackConfig)

  第三步:现在我们可以启动服务,打开localhost,来测一下我们的api 是否配置成功,如果,打开后,如下的格式是用了google 的jsonview插件将其格式化了。

技术分享图片

 

vue2.0:(二)、mock数据

标签:技术   googl   mpi   localhost   pre   style   现在   格式化   json   

原文地址:https://www.cnblogs.com/beyrl-blog/p/8624014.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!