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、界面访问:


                    
                    

你可能感兴趣的:(Vue.js)