axios的使用与数据的mock

时间：2018-06-06 23:39:22 阅读：939 评论：0 收藏：0 [点我收藏+]

标签：desc .com info img set png ESS class 哈哈哈

?记在前面

人，不经过长夜的痛哭，是不能了解人生的，我们将这些苦痛当作一种功课和学习，

直到有一日真正的感觉成长了时，甚至会感谢这种苦痛给我们的教导

——三毛

一、axios官方文档基本阅读

我们先从官方实例上上看看axios的用法：https://github.com/axios/axios

技术分享图片

上面的这个记个大概就好，下面一起来实践一下

二、新建mock.json

1.首先新建一个mock文件，里面放上首页所需要的数据：轮播图、活动、推荐

技术分享图片

②mock.json

{

  "code": 200,
  "msg": "",
  "data": {
    "swiper": [
      "../static/carousel1.png",
      "../static/carousel2.png",
      "../static/carousel3.png"
    ],
    "activity": [
      {
        "img": "../static/carousel1.png",
        "name": "品牌:Minoz Store",
        "desc": "温柔了岁月，惊艳了时光"
      },
      {
        "img": "../static/carousel2.png",
        "name": "品牌:Minoz Store",
        "desc": "你是人间四月天"
      },
      {
        "img": "../static/carousel1.png",
        "name": "品牌:Minoz Store",
        "desc": "你好，欢迎光临Minoz Store"
      }
    ],
    "recommend": [
      {
        "img": "@/assets/logo1.png",
        "name": "品牌:Minoz Store",
        "desc": "Hello World"
      },
      {
        "img": "@/assets/logo2.png",
        "name": "品牌:Minoz Store",
        "desc": "你好啊，哈哈哈"
      },
      {
        "img": "../static/carousel1.png",
        "name": "品牌:Minoz Store",
        "desc": "Welcome to my store"
      }
    ]
  }
}

三、axious的安装和数据mock的一些配置

1.先来安装axios和express，为什么要用到express？因为我们数据的mock中需要用到express框架实现，后面再详细讲解express

①安装axios和express

技术分享图片

同样在package.json中可以看到:

技术分享图片

②在build->webpack.dev.conf.js的头部引入

// mock数据
const express = require(‘express‘)
const app = express()
var appData = require(‘./../mock/mock.json‘)
var router = express.Router()

// 通过路由请求本地数据
app.use(‘/api‘, router)

技术分享图片

③在build->webpack.dev.conf.js里的devSever中添加before方法

// 添加before方法
    before(app) {
      app.get(‘/api/index‘, (req, res) => {
        res.json({
          errno: 0,
          data: appData
        })
      })
    }

技术分享图片

四、使用axios获取mock数据

1.我们进入home.vue页面先引入axios

技术分享图片

2.然后在methods中写个函数：用axios获取首页数据并打印，然后当vue生命周期为mounted阶段时调用它：

mounted() {
      this.getIndexData();
    },
    methods: {
      getIndexData() {
        axios.get("/api/index").then(res => {
          let data = res.data;
          console.log(data);
        });
      }
    }

技术分享图片