一、 引入ant design of vue 组件库
二 、使用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模拟前后台交互
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
Easy Mock 是一个可视化,并且能快速生成 模拟数据 的持久化服务。
输入账密会自动注册账号。
登陆后easymock会自动创建一个演示项目,点击右下角的图标即可添加项目。