vue2.0 axios本地数据请求方法

vue2.0中 axios 在没有dev-server.js下的 本地数据请求方法

1、package.json安装 axios vue-axio

 "dependencies": {
    "axios": "^0.18.0",
    "vue-axios": "^2.1.1",
  },

控制台安装：

npm install

2、main.js 配置

import axios from 'axios' // 本地JSON
import VueAxios from 'vue-axios' // 本地JSON

Vue.use(VueAxios, axios)

3、webpack.dev.conf.js 配置json访问

const portfinder = require('portfinder')

//在const portfinder = require(‘portfinder')后添加

const express = require('express')  // nodejs开发框架express，用来简化操作
const app=express()   // 创建node.js的express开发框架的实例

var appData = require('../data.json') //加载本地数据文件 
// json数据名
var seller = appData.seller //商家数据
var goods = appData.goods  //商品数据
var ratings = appData.ratings //评论数据

var apiRoutes = express.Router()    // 编写路由
app.use('/api',apiRoutes) // 所有通过接口相关的api都会通过api这个路由导向到具体的路由

   watchOptions: {
      poll: config.dev.poll,
    },
    before(app) {
      app.get('/api/seller',function(req,res){
        //服务端收到请求后返回给客户端一个json数据
        res.json({
          //当我们数据正常时，我们通过传递errno字符为0表示数据正常
          errno:0,
          //返回json中卖家数据
          data:seller
        })
      })

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


 },

4、界面访问：

<script>
  import axios from 'axios'
  export default {
    name: 'App',
    data () {
        return {
          seller: [] // 展示部分
        }
      },
      created () {
        this.getGoods() // 本地JSON
      },
      methods: {
        // 本地json获取商品数据
        getGoods () {
          axios.get('/api/seller').then((res) => {
            // this.seller = res.data.data
            console.log(res.data.data);

          })
        }
      }
  }
  </script>

5、浏览器访问 http://localhost:8080/api/seller