axios的使用與數據的mock

本文轉載自查看原文 2018-06-06 22:10 1555 vue+node+mongdb搭建商城

❤記在前面

人，不經過長夜的痛哭，是不能了解人生的，我們將這些苦痛當作一種功課和學習，

直到有一日真正的感覺成長了時，甚至會感謝這種苦痛給我們的教導

——三毛

一、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);
        });
      }
    }