rewrite axios && mock data

src/api/article.js

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

src/api/article_table.js

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

src/api/login.js

-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',

src/api/qiniu.js

-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
+//   });
+// }

src/api/remoteSearch.js

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

src/mock/article.js

@@ -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: ''
   })
 };

src/mock/article_table.js

 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 }]
   })
 };

src/mock/index.js

-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;

src/mock/login.js

+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'
 };

src/mock/remoteSearch.js

 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 }
   }
 };

src/utils/fetch.js

@@ -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;

src/utils/index.js

@@ -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;

src/views/example/dragTable.vue

@@ -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;

src/views/example/form1.vue

@@ -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
             }));
           })

src/views/example/inlineEditTable.vue

@@ -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;
           })
         }

src/views/example/table.vue

@@ -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;
           })
         },

src/views/permission/index.vue

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