最近工作不是很忙，自己做了一个vue的移动端的小项目，涉及到后台数据的时候，网上查阅了一些资料，因为是自己写的项目没有后台只能自己模拟数据，刚开始就自己写了一些静态数据后来觉得尽量模拟真实的比较好些，刚好也了解一下axios因为之前用的是vue-resource，就此开始挖坑填坑之路-------
首先说一下mock.js http://mockjs.com/这是它的官网，讲的还是很详细，主要有各种数据模板可以去定义，废话不多说，下面开始正文
1、安装mock
npm install mockjs --save-dev
2、安装axios
npm install axios --save
3、我们来看一下项目结构
mock.js
const Mock = require('mockjs');
// 获取 mock.Random 对象
const Random = Mock.Random;
// mock一组数据
const userInfoData = function() {
let person = [
{
label:'姓名',
text:Random.cname(),//随机生成中文名
},
{
label:'身份证号',
text:Random.id()//随机生成身份证
},
{
label:'手机号',
text:/^[1][3,4,5,7,8][0-9]{9}$/ //正则生成手机号
},
{
label:'地址',
text:Random.county(true) //随机生成地址
},
{
label:'返佣银行卡号',
text:/^([1-9]{1})(\d{14}|\d{18})$/
},
{
label:'开户行',
text:Random.cword(2,4)+'银行'
},
]
return {
person: person
}
}
// Mock.mock( url, post/get , 返回的数据)；
Mock.mock('/user/index', 'post', userInfoData());
Mock.mock('user/ma','post',{
phone:/^[1][3,4,5,7,8][0-9]{9}$/,
photo:Random.dataImage('118x118', '居间协议')
});
Mock.mock('user/login','post',{
userId:'@natural(0,100)'
})
Mock.setup({
timeout:0-300
})
这个就是mock.js里面的数据，你可以在里面定义各种数据模板，然后当然还需要模拟的api这个就是在axios/api.js里面统一管理进行拦截ajax请求
axios/api.js如下
import axios from 'axios'
import vue from 'vue' axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded' // 请求拦截器
axios.interceptors.request.use(function(config) {
return config;
}, function(error) {
return Promise.reject(error);
})
// 响应拦截器
axios.interceptors.response.use(function(response) {
return response;
}, function(error) {
return Promise.reject(error);
}) // 封装axios的post请求
export function fetch(url, params) {
return new Promise((resolve, reject) => {
axios.post(url, params)
.then(response => {
resolve(response.data);
})
.catch((error) => {
reject(error);
})
})
} export default {
JH_info(url, params) {
return fetch(url, params);
}
}
这里就自己看，不用多说了，最后用export default去暴露接口进行引用
接下来就是怎么在自己页面调用mock数据
上代码
import api from '../../axios/api.js' //引入api
export default { data(){
return {
proStatue:'等待上传居间协议',
proPhoto:require('../../assets/img/logo.png'),
upload:'ok',
imageUrl:'',
user:[
{
label:'姓名',
text:'小花'
},
{
label:'身份证号',
text:'467829299277718369'
},
{
label:'手机号',
text:'136890288802'
},
{
label:'开启时间',
text:'2018-05-01'
},
{
label:'来源',
text:'都某人'
},
{
label:'权益',
text:1000.00
},
{
label:'手续费',
text:1000.00
}, ],
}
},
created(){
44 this.setUserApi();//调用了定义的请求方法
45 api.JH_info('user/ma','123')//直接页面创建的时候请求接口
46 .then(res=>{
47 console.log('img',res);
48 this.imageUrl = res.photo;
49 })
50 },
methods:{
// 图片上传
handleAvatarSuccess(res, file) {
console.log('file',file);
this.imageUrl = URL.createObjectURL(file.raw);
},
beforeAvatarUpload(file) {
const isJPG = file.type === 'image/jpeg';
const isLt2M = file.size / 1024 / 1024 < 2; if (!isJPG) {
this.$message.error('上传头像图片只能是 JPG 格式!');
}
if (!isLt2M) {
this.$message.error('上传头像图片大小不能超过 2MB!');
}
return isJPG && isLt2M;
},
//提交审核
checkInfo(){
this.upload = 'true';
this.proStatue = '等待审核';
}, setUserApi(){
api.JH_info('/user/index','123')
.then(res => {
console.log(res);
this.user = res.person;
});
},
}
}
这是控制台打印的数据
当然还有更多mock的数据模板你可以去尝试