vue.js 2.0 版本—写一个模拟后台数据请求

1.创建json文件

在与package.json同级目录建立data.json文件
data.json文件内容：

{
  "seller": {

    "name": "粥品香坊（回龙观）",
    "description": "蜂鸟专送",
    "deliveryTime": 38,
    "score": 4.2,
    "serviceScore": 4.1,
    "foodScore": 4.3,
    "rankRate": 69.2,
    "minPrice": 20,
    "deliveryPrice": 4,
    "ratingCount": 24,
    "sellCount": 90,
    "bulletin": "粥品香坊其烹饪粥料的秘方源于中国千年古法，在融和现代制作工艺，由世界烹饪大师屈浩先生领衔研发。坚守纯天然、0添加的良心品质深得消费者青睐，发展至今成为粥类的引领品牌。是2008年奥运会和2013年园博会指定餐饮服务商。"
   }
  
 }

2.修改webpack.dev.con文件

在 webpack.dev.conf.js文件里面添加,有两种方式添加
第一种，利用express请求数据，可以用于post,get请求，这个已经可以测试通过，请求的地址为http://localhost:3000/api/seller

const express = require('express')

const apiServer = express();
const apiRouter = express.Router()
const appData = require('../data.json')

var seller = appData.seller;

apiRouter.get('/seller', function (req, res) {
  res.json({
    errno: 0,
    data: seller
  });
});


apiServer.use('/api', apiRouter);
apiServer.listen(3000, function (err) {
  if (err) {
    console.log(err)
    return
  }
  console.log('Listening at http://localhost:' + 3000 + '\n')
})

第二种，利用json-server请求json数据，用于get请求，这个方式请求没有测试通过，返回的数据为空 http://localhost:3000/api

//这里是json-server配置信息  
// json-server.js  
const jsonServer = require('json-server')  
const apiServer = jsonServer.create()  
const apiRouter = jsonServer.router('data.json') //数据关联server，db.json与index.html同级  
const middlewares = jsonServer.defaults()  
  
apiServer.use(middlewares)  
apiServer.use('/api',apiRouter)  
apiServer.listen(3000, () => {                 //监听端口  
  console.log('JSON Server is running')  
})

2.请求的地址的变更

如果觉得上面的请求http://localhost:3000/api/seller 修改成http://localhost:8080/api/seller，
步骤如下
config/index.js找到proxyTable
添加： '/api/':'http://localhost:3000/'

3.参考地址

https://blog.csdn.net/benben513624/article/details/78562529