sam/admin-fe
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

rewrite axios && mock data

Browse source
This commit is contained in:
Pan 2017-05-15 17:56:45 +08:00
parent 1d05d661bc
commit 5aa22731c8
17 changed files with 137 additions and 204 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/api/article.js
View file

@ -1,4 +1,4 @@
import { fetch } from 'utils/fetch';
import fetch from 'utils/fetch';
export function getList() {
return fetch({

2
src/api/article_table.js
View file

@ -1,4 +1,4 @@
import { fetch } from 'utils/fetch';
import fetch from 'utils/fetch';
export function fetchList(query) {
return fetch({

3
src/api/login.js
View file

@ -1,4 +1,4 @@
import { fetch } from 'utils/fetch';
import fetch from 'utils/fetch';
export function loginByEmail(email, password) {
const data = {
@ -19,7 +19,6 @@ export function logout() {
});
}
export function getInfo(token) {
return fetch({
url: '/user/info',

50
src/api/qiniu.js
View file

@ -1,28 +1,28 @@
import fetch, { tpFetch } from 'utils/fetch';
// import fetch, { tpFetch } from 'utils/fetch';
export function getToken() {
return fetch({
url: '/qiniu/upload/token',
method: 'get'
});
}
export function upload(data) {
return tpFetch({
url: 'https://upload.qbox.me',
method: 'post',
data
});
}
// export function getToken() {
// return fetch({
// url: '/qiniu/upload/token',
// method: 'get'
// });
// }
// export function upload(data) {
// return tpFetch({
// url: 'https://upload.qbox.me',
// method: 'post',
// data
// });
// }
/* 外部uri转七牛uri*/
export function netUpload(token, net_url) {
const imgData = {
net_url
};
return fetch({
url: '/qiniu/upload/net/async',
method: 'post',
data: imgData
});
}
// /* 外部uri转七牛uri*/
// export function netUpload(token, net_url) {
// const imgData = {
// net_url
// };
// return fetch({
// url: '/qiniu/upload/net/async',
// method: 'post',
// data: imgData
// });
// }

2
src/api/remoteSearch.js
View file

@ -1,4 +1,4 @@
import { fetch } from 'utils/fetch';
import fetch from 'utils/fetch';
export function userSearch(name) {
return fetch({

44
src/mock/article.js
View file

@ -17,33 +17,21 @@ for (let i = 0; i < count; i++) {
}
export default {
getList: () => new Promise(resolve => {
setTimeout(() => {
resolve([200, {
data: List
}]);
}, 100);
}),
getArticle: () => new Promise(resolve => {
setTimeout(() => {
resolve([200, {
data: {
id: 120000000001,
author: { key: 'mockPan' },
source_name: '原创作者',
category_item: [{ key: 'global', name: '全球' }],
comment_disabled: false,
content: '<p>我是测试数据我是测试数据</p><p><img class="wscnph" src="https://wpimg.wallstcn.com/4c69009c-0fd4-4153-b112-6cb53d1cf943" data-wscntype="image" data-wscnh="300" data-wscnw="400" data-mce-src="https://wpimg.wallstcn.com/4c69009c-0fd4-4153-b112-6cb53d1cf943"></p>"',
content_short: '我是测试数据',
display_time: +new Date(),
image_uri: 'https://wpimg.wallstcn.com/e4558086-631c-425c-9430-56ffb46e70b3',
platforms: ['a-platform'],
source_uri: 'https://github.com/PanJiaChen/vue-element-admin',
status: 'published',
tags: [],
title: ''
}
}]);
}, 100);
getList: () => List,
getArticle: () => ({
id: 120000000001,
author: { key: 'mockPan' },
source_name: '原创作者',
category_item: [{ key: 'global', name: '全球' }],
comment_disabled: false,
content: '<p>我是测试数据我是测试数据</p><p><img class="wscnph" src="https://wpimg.wallstcn.com/4c69009c-0fd4-4153-b112-6cb53d1cf943" data-wscntype="image" data-wscnh="300" data-wscnw="400" data-mce-src="https://wpimg.wallstcn.com/4c69009c-0fd4-4153-b112-6cb53d1cf943"></p>"',
content_short: '我是测试数据',
display_time: +new Date(),
image_uri: 'https://wpimg.wallstcn.com/e4558086-631c-425c-9430-56ffb46e70b3',
platforms: ['a-platform'],
source_uri: 'https://github.com/PanJiaChen/vue-element-admin',
status: 'published',
tags: [],
title: ''
})
};

27
src/mock/article_table.js
View file

@ -1,5 +1,5 @@
import Mock from 'mockjs';
import { param2Obj } from 'utils';
const List = [];
const count = 100;
@ -21,9 +21,9 @@ for (let i = 0; i < count; i++) {
export default {
getList: config => {
const { importance, type, title, page, limit, sort } = config.params;
const { importance, type, title, page, limit, sort } = param2Obj(config.url);
let mockList = List.filter(item => {
if (importance && item.importance !== importance) return false;
if (importance && item.importance !== +importance) return false;
if (type && item.type !== type) return false;
if (title && item.title.indexOf(title) < 0) return false;
return true;
@ -33,21 +33,12 @@ export default {
}
const pageList = mockList.filter((item, index) => index < limit * page && index >= limit * (page - 1));
return new Promise(resolve => {
setTimeout(() => {
resolve([200, {
total: mockList.length,
items: pageList
}]);
}, 100);
})
return {
total: mockList.length,
items: pageList
}
},
getPv: () => new Promise(resolve => {
setTimeout(() => {
resolve([200, {
pvData: [{ key: 'PC网站', pv: 1024 }, { key: 'mobile网站', pv: 1024 }, { key: 'ios', pv: 1024 }, { key: 'android', pv: 1024 }]
}]);
}, 100);
getPv: () => ({
pvData: [{ key: 'PC网站', pv: 1024 }, { key: 'mobile网站', pv: 1024 }, { key: 'ios', pv: 1024 }, { key: 'android', pv: 1024 }]
})
};

30
src/mock/index.js
View file

@ -1,27 +1,25 @@
import axios from 'axios';
import MockAdapter from 'axios-mock-adapter';
import Mock from 'mockjs';
import loginAPI from './login';
import articleAPI from './article';
import article_tableAPI from './article_table';
import remoteSearchAPI from './remoteSearch';
const mock = new MockAdapter(axios);
// 登录相关
mock.onPost('/login/loginbyemail').reply(loginAPI.loginByEmail);
mock.onPost('/login/logout').reply(loginAPI.logout);
mock.onGet('/user/info').reply(loginAPI.getInfo);
Mock.mock(/\/login\/loginbyemail/, 'post', loginAPI.loginByEmail);
Mock.mock(/\/login\/logout/, 'post', loginAPI.logout);
Mock.mock(/\/user\/info\.*/, 'get', loginAPI.getInfo)
// 文章相关
mock.onGet('/article/list').reply(articleAPI.getList);
mock.onGet('/article/detail').reply(articleAPI.getArticle);
// // 文章相关
Mock.mock(/\/article\/list/, 'get', articleAPI.getList);
Mock.mock(/\/article\/detail/, 'get', articleAPI.getArticle);
// table example相关
mock.onGet('/article_table/list').reply(article_tableAPI.getList);
mock.onGet('/article_table/pv').reply(article_tableAPI.getPv);
// // table example相关
Mock.mock(/\/article_table\/list/, 'get', article_tableAPI.getList);
Mock.mock(/\/article_table\/p/, 'get', article_tableAPI.getPv);
// 搜索相关
mock.onGet('/search/user').reply(remoteSearchAPI.searchUser);
// // 搜索相关
Mock.mock(/\/search\/user/, 'get', remoteSearchAPI.searchUser);
mock.onAny().passThrough();
export default mock;
export default Mock;

41
src/mock/login.js
View file

@ -1,3 +1,5 @@
import { param2Obj } from 'utils';
const userMap = {
admin: {
role: ['admin'],
@ -28,36 +30,17 @@ const userMap = {
export default {
loginByEmail: config => {
const { email } = JSON.parse(config.data);
return new Promise((resolve, reject) => {
if (userMap[email.split('@')[0]]) {
setTimeout(() => {
resolve([200, {
data: userMap[email.split('@')[0]]
}]);
}, 500);
} else {
reject('账号不正确')
}
})
console.log(config)
const { email } = JSON.parse(config.body);
return userMap[email.split('@')[0]];
},
getInfo: config => {
const { token } = config.params;
return new Promise((resolve, reject) => {
if (userMap[token]) {
setTimeout(() => {
resolve([200, {
data: userMap[token]
}]);
}, 100);
} else {
reject('获取失败')
}
})
const { token } = param2Obj(config.url);
if (userMap[token]) {
return userMap[token];
} else {
return Promise.reject('a');
}
},
logout: () => new Promise(resolve => {
setTimeout(() => {
resolve([200, { data: 'success' }]);
}, 100);
})
logout: () => 'success'
};

11
src/mock/remoteSearch.js
View file

@ -1,4 +1,5 @@
import Mock from 'mockjs';
import { param2Obj } from 'utils';
const NameList = [];
const count = 100;
@ -12,18 +13,12 @@ NameList.push({ name: 'mockPan' })
export default {
searchUser: config => {
const { name } = config.params;
const { name } = param2Obj(config.url);
const mockNameList = NameList.filter(item => {
const lowerCaseName = item.name.toLowerCase()
if (name && lowerCaseName.indexOf(name.toLowerCase()) < 0) return false;
return true;
});
return new Promise(resolve => {
setTimeout(() => {
resolve([200, {
items: mockNameList
}]);
}, 100);
})
return { items: mockNameList }
}
};

105
src/utils/fetch.js
View file

@ -3,69 +3,44 @@ import { Message } from 'element-ui';
import store from '../store';
import router from '../router';
export default function _fetch(options) {
return new Promise((resolve, reject) => {
const instance = axios.create({
baseURL: process.env.BASE_API,
// timeout: 2000,
headers: { 'X-Ivanka-Token': store.getters.token }
});
instance(options)
.then(response => {
const res = response.data;
if (res.code !== 20000) {
console.log(options); // for debug
Message({
message: res.message,
type: 'error',
duration: 5 * 1000
});
// 50014:Token 过期了 50012:其他客户端登录了 50008:非法的token
if (res.code === 50008 || res.code === 50014 || res.code === 50012) {
Message({
message: res.message,
type: 'error',
duration: 5 * 1000
});
// 登出
store.dispatch('FedLogOut').then(() => {
router.push({ path: '/login' })
});
}
reject(res);
}
resolve(res);
})
.catch(error => {
Message({
message: '发生异常错误,请刷新页面重试,或联系程序员',
type: 'error',
duration: 5 * 1000
});
console.log(error); // for debug
reject(error);
});
});
}
export function fetch(options) {
return new Promise((resolve, reject) => {
const instance = axios.create({
timeout: 2000 // 超时
});
instance(options)
.then(response => {
const res = response.data;
resolve(res);
})
.catch(error => {
Message({
message: error,
type: 'error',
duration: 5 * 1000
});
console.log(error); // for debug
reject(error);
});
});
}
const service = axios.create({
baseURL: process.env.BASE_API
});
service.interceptors.request.use(config => {
// Do something before request is sent
if (store.state.token) {
config.headers.Token = store.state.token;
}
return config;
}, error => {
// Do something with request error
console.log(error); // for debug
Promise.reject(error);
})
service.interceptors.response.use(
response => {
console.log(response)
return response;
},
error => {
console.log('err' + error);// for debug
const code = error.response.data;
if (code === 50008 || code === 50014 || code === 50012) {
Message({
message: res.message,
type: 'error',
duration: 5 * 1000
});
// 登出
store.dispatch('FedLogOut').then(() => {
router.push({ path: '/login' })
});
}
return Promise.reject(error);
}
)
export default service;

5
src/utils/index.js
View file

@ -110,6 +110,11 @@
})).join('&');
}
export function param2Obj(url) {
const search = url.split('?')[1];
return JSON.parse('{"' + decodeURIComponent(search).replace(/"/g, '\\"').replace(/&/g, '","').replace(/=/g, '":"') + '"}')
}
export function html2Text(val) {
const div = document.createElement('div');
div.innerHTML = val;

5
src/views/example/dragTable.vue
View file

@ -96,8 +96,8 @@
getList() {
this.listLoading = true;
fetchList(this.listQuery).then(response => {
this.list = response.items;
this.total = response.total;
this.list = response.data.items;
this.total = response.data.total;
this.listLoading = false;
this.olderList = this.list.map(v => v.id);
this.newList = this.olderList.slice();
@ -124,6 +124,7 @@
.drag-handler{
width: 30px;
height: 30px;
cursor: pointer;
}
.show-d{
margin-top: 15px;

4
src/views/example/form1.vue
View file

@ -237,9 +237,9 @@
},
getRemoteUserList(query) {
userSearch(query).then(response => {
if (!response.items) return;
if (!response.data.items) return;
console.log(response)
this.userLIstOptions = response.items.map(v => ({
this.userLIstOptions = response.data.items.map(v => ({
key: v.name
}));
})

4
src/views/example/inlineEditTable.vue
View file

@ -59,7 +59,6 @@
data() {
return {
list: null,
total: null,
listLoading: true,
listQuery: {
page: 1,
@ -84,11 +83,10 @@
getList() {
this.listLoading = true;
fetchList(this.listQuery).then(response => {
this.list = response.items.map(v => {
this.list = response.data.items.map(v => {
v.edit = false;
return v
});
this.total = response.total;
this.listLoading = false;
})
}

4
src/views/example/table.vue
View file

@ -227,8 +227,8 @@
getList() {
this.listLoading = true;
fetchList(this.listQuery).then(response => {
this.list = response.items;
this.total = response.total;
this.list = response.data.items;
this.total = response.data.total;
this.listLoading = false;
})
},

2
src/views/permission/index.vue
View file

@ -24,7 +24,7 @@
watch: {
role(val) {
this.$store.commit('SET_ROLES', [val]);
window.location.reload()
this.$router.push({ path: '/permission/index?' + +new Date() });
}
}
}