vue項目學習記錄（二）antd組件庫及axios

一、 引入ant design of vue 組件庫

antd組件庫按需引入

二 、使用axios進行數據交互

在Vue1.0的時候有一個官方推薦的 ajax 插件 vue-resource， Vue 更新到 2.0 之後，官方就不再更新 vue-resource。

作者尤雨溪推薦使用axios：

最近團隊討論了一下，Ajax 本身跟 Vue 並沒有什麼需要特別整合的地方，使用 fetch polyfill 或是 axios、superagent 等等都可以起到同等的效果，vue-resource 提供的價值和其維護成本相比並不划算，所以決定在不久以後取消對 vue-resource 的官方推薦。已有的用戶可以繼續使用，但以後不再把 vue-resource 作爲官方的 ajax 方案。這裏可以去掉 vue-resource，文檔也不必翻譯了。

目前主流的vue項目都是使用axios，既然大家都用，那我也跟着用吧（好隨便的樣子）。

1. axios

1.1 axios簡介

1.2 安裝

//使用npm
npm install axios
//使用淘寶源
$ cnpm install axios
//使用 bower
$ bower install axios
//或者使用cdn：
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

1.3 引入

引入插件可以直接在 main.js 中引入並使用 Vue.use()來註冊，但是 axios並不是vue插件，所以不能 使用Vue.use()。

解決方法–修改原型鏈：

//main.js
import axios from 'axios'
//把axios對象掛到Vue實例上面，使用axios的時候直接 this.$axios就可以了 
Vue.prototype.$axios = axios

接下來就可以通過 this.$axios在組件中使用了：

//home。vue
methods: {
     getphoto() {
     	this.$axios.get('https://www.baidu.com/s?wd=圖片')
		  .then(function (response) {
		    console.log(response);
		  })
		  .catch(function (error) {
		    console.log(error);
		  });
     }
  }

1.4 使用說明

axios文檔寫的挺詳細，具體可以看這個。

1.5 使用示例

一開始想試試百度和豆瓣top250,但是有跨域問題。
https://www.baidu.com/s
F12打開調試工具可以看到，百度搜索的表單action到’/s’,輸入框name爲’wd’


http://api.douban.com/v2/movie/top250

1.6 使用mockjs模擬前後臺交互

mockjs

1、安裝

cnpm install mockjs --dev

2、使用示例
在src路徑下創建目錄mock

mock文件夾 新建mock.js文件

// 引入mockjs
import Mock from 'mockjs'

// 創建模擬數據 具體的數據生成方法 請查看文檔http://mockjs.com/examples.html
function creatPostMock () {
  const list = []
  const mockdata = {
    id: '@increment', // 數據定義 @increment
    'object|1': {
      '310000': '上海市',
      '320000': '江蘇省',
      '330000': '浙江省',
      '340000': '安徽省'
    },
    name: '@pick(["a", "e", "i", "o", "u"])',
    m1: '@integer(60, 100)',
    m2: '@integer(60, 100)',
    m3: '@integer(60, 100)',
    m4: '@integer(60, 100)',
    m5: '@integer(60, 100)',
    m6: '@integer(60, 100)',
    m7: '@integer(60, 100)',
    m8: '@integer(60, 100)',
    m9: '@integer(60, 100)'
  }
  for (var i = 0; i < 10; i++) {
    const a = Mock.mock(mockdata)
    list.push(a)
  }
  const data = {
    data: {},
    size: 1,
    pagesize: 10
  }
  data.data = list
  return data
}

// 創建模擬數據
function creatGetMock () {
  const getMock = Mock.mock({
    'list|1-10': [{
      'id|+1': 1
    }]
  })
  return getMock
}

// 將模擬好的數據輸出出去；
export {creatPostMock, creatGetMock}

mock文件夾 新建index.js文件

// 引入mockjs
import Mock from 'mockjs'
// 引入生成的模擬數據
import {creatPostMock, creatGetMock} from './mock'

// 設置請求延時時間
Mock.setup({
  // timeout: 2000 方式一 直接設置值
  timeout: '2000 - 5000' // 方式二 設置區間 注意這個是一個字符串形式
})

// 設置攔截的接口 格式請看文檔 https://github.com/nuysoft/Mock/wiki/Mock.mock()
// 注意: 這裏攔截的地址 最好使用正則匹配 如果直接使用字符串接口 就有可能攔截不到帶參數的請求 報錯404
Mock.mock(/\/api\/mock(|\?\S*)$/, 'post', creatPostMock)
// Mock.mock('/api/mock', 'get', creatGetMock) // 方式一
Mock.mock(/\/api\/mock(|\?\S*)$/, 'get', creatGetMock) // 方式二

在main.js 文件裏面引入我們寫好的mock/index.js文件 用於攔截請求

import('./mock/index') // 引入設置好基礎的mock, 用於攔截請求

在api文件下 新建一個自定義接口文件 如questMock.js 裏面是我們需要請求數據的模擬接口；

// 封裝的post
function postMockList (data) {
  return this.$axios.post('/api/mock', {
    data
  })
}
// 封裝的get
function getMockList (data) {
  return this.$axios.get('/api/mock', {
    data
  })
}
// 輸出
export { postMockList, getMockList }

新建一個Test.vue，配置好router

<template>
  <div class="hello">
    <div class="mask" :class="{boxNone:isMask }"></div>
    <div>
      <p>這是獲取mock 數據</p>
      <button @click="getMockData">get模擬數據</button>
      <button @click="postMockData">post模擬數據</button>
    </div>
  </div>
</template>

<script>
import { postMockList, getMockList } from '../api/questMock.js'
export default {
  name: 'test',
  data () {
    return {
      msg: '模擬前後臺交互',
      getMock: getMockList,
      postMock: postMockList,
      isMask: true
    }
  },
  methods: {
    getMockData () {
      this.isMask = false
      this.getMock({
        params: {
          name: '隔壁老王'
        }
      }).then(res => {
        this.isMask = true
        console.log('GET模擬數據', res)
      }).catch(e => {
        console.log('錯誤', e)
      })
    },
    postMockData () {
      this.isMask = false
      this.postMock({
        name: 'xiaoming',
        age: '5'
      }).then(res => {
        this.isMask = true
        console.log('POST模擬數據', res)
      }).catch(e => {
        console.log('錯誤', e)
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
.mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  background-color: green;
  opacity: 0.5;
}
.mask.boxNone {
  display: none;
}
</style>

1.7 easymock

easymock

Easy Mock 是一個可視化，並且能快速生成 模擬數據 的持久化服務。

輸入賬密會自動註冊賬號。

登陸後easymock會自動創建一個演示項目，點擊右下角的圖標即可添加項目。