使用axios来mock数据以及使用node服务来代理本地接口

使用axios来mock数据

1、安装axios

2、创建数组json

3、配置devser

vue-cli3在vue.config.js里面配置

vue-cli2以下的版本在webpack.dev.conf.js里面配置

配置代码如下：

const webpack = require('webpack')
const path = require('path')
const appData = require('./data.json')//data数据
const seller = appData.seller

module.exports = {
  devServer: {
    before(app) {
      app.get('/api/seller', function (req, res) {
        res.json({
          errno: 0,
          data: seller
        })
      })
    }
  }
}

4、配置完成后要重新启动一下npm run dev/npm run serve(注:在vue中只要改了config文件夹里面的东西都要重新启一下服务，不然不起作用)

5、在浏览器打开 http://localhost:8080/api/seller就可以看到数据了

6、封装axios来获取数据

创建api文件夹==》创建俩个js文件helper.js和index.js

helper.js

import axios from 'axios'

const urlMap = {
  development: '/',
  production: ''
}
const baseUrl = urlMap[process.env.NODE_ENV]
const ERR_OK = 0

export function get(url) {
  return function(params = {}) {
    return axios.get(baseUrl + url, {
      params
    }).then((res) => {
      const {errno, data} = res.data
      if (errno === ERR_OK) {
        return data
      }
    }).catch((e) => {
    })
  }
}

index.js

import {get } from './helpers'

const seller= get('/api/seller')


export {
    seller,
}

 

使用node服务来代理本地接口

以下是用vue-cli3来开发的，

新建一个页面prod.server.js

配置页面代码如下

const express = require('express')

const app = express()

const appData = require('./data.json')
const seller = appData.seller

const router = express.Router()

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

app.use('/api', router)

app.use(express.static('./dist'))

const port = process.env.PORT || 8900

module.exports = app.listen(port, function (err) {
  if (err) {
    console.log(err)
    return
  }
  console.log('Listening at http://localhost:' + port + '\n')
})

页面配置完成后要启动一下服务

node prod.server.js