vue项目模拟后台数据配置

vue版本高的已经删除了dev-server.js文件，高版本的vue需要在build/webpack.dev.conf.js文件下配置，接口。具体操作如下：

1:第一步

找到 const portfinder = require('portfinder')在后面添加下面内容：

const express = require('express')
const app = express()
var appData = require('../data.json')//加载本地数据文件
var seller=appData.seller
var goods=appData.goods
var ratings=appData.ratings
var apiRoutes = express.Router()
app.use('/api', apiRoutes)

如图：

【注】seller goods是自己需要请求的数据名称，根据自己而定。具体看json数据。这个json数据主要三部分构成，即seller goods ratings。

2：第二步

找到devServer:函数，添加内容如下：

 before(app){
      app.get('/api/seller', (req,res) =>{
        res.json({
          errno:0,
          data:seller
        })
      })
      app.get('/api/goods', (req,res) =>{
        res.json({
          errno:0,
          data:goods
        })
      })
      app.get('/api/ratings', (req,res) =>{
        res.json({
          errno:0,
          data:ratings
        })
      })
    },

如图：

3：第三步

1. 打开控制台：win+R ，输入cmd打开控制台
2. 输入npm run dev
3. 等待出现下面即可

4: 第四步

打开浏览器输入:http://localhost:8080/api/seller查看是否成功，如果配置正确出现下面的情况即可

5：如果为低版本则配置dev-server.js接即可

具体找到

var appData = require('../data.json')
var seller = appData.seller
var goods = appData.goods
var ratings = appData.ratings
var foods = appData.foods
var pice = appData.pice
var apiRoutes = express.Router()

apiRoutes.post('/foods', function (req, res) {
  res.json({
    errno: 0,
    data: foods
  });
})

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

apiRoutes.get('/goods', function (req, res) {
  res.json({
    errno: 0,
    data: goods
  })
})

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

apiRoutes.get('/pice', function (req, res) {
  res.json({
    errno: 0,
    data: pice
  });
})
app.use('/api',apiRoutes)