添加g

Author: fanxiaocheng

meta.js

@@ -22,5 +22,8 @@ module.exports = {
       "message": "Author"
     }
   },
-  "skipInterpolation": "src/**/*.vue",
+  "skipInterpolation": [
+    "src/**/*.vue",
+    "doc/*"
+  ],
 }

template/package.json

@@ -11,6 +11,8 @@
     "lint": "eslint --ext .js,.vue src"
   },
   "dependencies": {
+    "@antv/data-set": "^0.8.9",
+    "@antv/g2": "^3.1.1",
     "axios": "^0.16.2",
     "cd-vue": "^0.1.1",
     "element-ui": "^2.3.7",

template/src/api/index.js

@@ -1,15 +1,24 @@
 import axios from 'axios';
 import { parseUrl, addPrefix } from './utils';
-// import jsonRpc from './jsonrpc/index';
 
 // API配置
 import config from '@/api/config';
 
 // 模拟数据
-// import '@/api/mock';
+import '@/api/mock';
 
 // 拦截器
-import '@/api/interceptors';
+import interceptorsList from '@/api/interceptors';
+
+const restAxios = axios.create();
+
+Object.keys(interceptorsList).map((key) => {
+  const list = interceptorsList[key];
+  list.map((item) => {
+    console.log(item, key, 'restAxios');
+    restAxios.interceptors[key].use(item.success, item.error);
+  });
+});
 
 const Api = {};
 
@@ -20,13 +29,11 @@ const axiosApi = () => {
       url = options && options.query ? parseUrl(url, options.query) : url;
       url = addPrefix(url);
 
-      return axios(Object.assign({}, item, options, { url }));
+      return restAxios(Object.assign({}, item, options, { url }));
     }
   });
 };
 
 axiosApi();
 
-// Api.jsonrpc = jsonRpc;
-
 export default Api;

template/src/api/interceptors.js

@@ -1,4 +1,3 @@
-import axios from 'axios';
 import store from '@/store';
 import router from '@/router';
 import * as types from '@/store/mutation-types';
@@ -8,46 +7,52 @@ const statusCode = {
   EXPIRED_CREDENTIAL: 5,
 };
 
-axios.interceptors.request.use((config) => {
-  config.headers.Accept = 'application/vnd.edusoho.v2+json';
-
-  if (store.state.token) {
-    config.headers['X-CSRF-Token'] = store.state.token;
-  }
-
-  console.log('request', config);
-  return config;
-}, error => Promise.reject(error));
-
-axios.interceptors.response.use((res) => {
-  console.log('resSuccess', res.data);
-
-  return res.data;
-}, (error) => {
-  console.log('resError', error);
-
-  if (!error.response) {
-    console.log(error);
-    error.message = '网络问题，请联系管理员';
-    return Promise.reject(error);;
-  }
-
-  switch (error.response.status) {
-    case 401:
-      const code = error.response.data.error.code;
-      // token过期的情况
-      if (code === statusCode.EXPIRED_CREDENTIAL) {
-        store.commit(types.USER_LOGOUT);
-
-        router.replace({
-          name: 'login',
-          query: { redirect: router.currentRoute.name },
-        });
+export default {
+  request: [{
+    success: (config) => {
+      config.headers.Accept = 'application/vnd.edusoho.v2+json';
+
+      if (store.state.token) {
+        config.headers['X-CSRF-Token'] = store.state.token;
+      }
+
+      console.log('request', config);
+      return config;
+    },
+    error: error => Promise.reject(error),
+  }],
+  response: [{
+    success: (res) => {
+      console.log('resSuccess', res.data);
+      return res.data;
+    },
+    error: (error) => {
+      console.log('resError', error);
+
+      if (!error.response) {
+        console.log(error);
+        error.message = '网络问题，请联系管理员';
+        return Promise.reject(error);;
+      }
+
+      switch (error.response.status) {
+        case 401:
+          const code = error.response.data.error.code;
+          // token过期的情况
+          if (code === statusCode.EXPIRED_CREDENTIAL) {
+            store.commit(types.USER_LOGOUT);
+
+            router.replace({
+              name: 'login',
+              query: { redirect: router.currentRoute.name },
+            });
+          }
+          break;
+        default:
+          break;
       }
-      break;
-    default:
-      break;
-  }
 
-  return Promise.reject(error.response.data.error);
-});
+      return Promise.reject(error.response.data.error);
+    },
+  }],
+}

template/src/api/jsonrpc/README.md

@@ -1,37 +1,46 @@
 ### jsonrpc 下载与使用
 
-* 下载
+## 下载
 
 ```js
 yarn add jsonrpc-dispatch
 ```
 
-* 引入
-
-在api中引入该库，在中后台解决方案中位于 ./src/api/jsonrpc/index.js
+## 初始化jsonrpc，规定请求行为和回调。
 
 ```js
-import jsonRpcConfig from '@/api/jsonRpc-config';
-```
-
-
-初始化jsonrpc，规定请求行为和回调。
+// 实例一个独立的axios，区分rest请求方式
+const jsonrpcAxios = axios.create();
+// 挂载拦截器
+Object.keys(interceptorsList).map((key) => {
+  const list = interceptorsList[key];
+  list.map((item) => {
+    jsonrpcAxios.interceptors[key].use(item.success, item.error);
+  });
+});
 
-```js
 // axios调用
 const jsonrpc = new JSONRPC((message) => {
-  axios({
+  jsonrpcAxios({
     url: '/adminrpc', // 请求路由
     method: 'post', // 请求方式
     baseURL: 'http://live-service.local.cg-dev.cn', // 请求基础路由
     data: message, // 发送消息主体
     responseType: 'json', // 发送消息格式json
   }).then((res) => {
-    jsonrpc.handle.bind(jsonrpc, res.data); //回调后使用jsonrpc.handle触发其本身的回调。
+    if (!res) {
+      return;
+    }
+    if (res.error) {
+      throw new Error(res.error);
+    }
+    jsonrpc.handle(res.data); //回调后使用jsonrpc.handle触发其本身的回调。
   });
 });
 
-export default jsonrpc;
+export {
+  jsonrpc
+};
 
 // 在需要的组件中引入jsonrpc
 import jsonrpc from '@/api/jsonrpc.js',
@@ -42,36 +51,61 @@ jsonrpc.request('add', [1,2]).then((result) => {
 });
 
 
-
-
 //可初始化多个jsonrpc消息对象，方便对不同域名的内容发送请求
 const live = new JSONRPC((message) => {
-  axios({
+  jsonrpcAxios({
     url: '/adminrpc', 请求路由
     method: 'post', // 请求方式
     baseURL: 'http://live-service.local.cg-dev.cn', // 请求基础路由
     data: message, // 发送消息主体
     responseType: 'json', // 发送消息格式json
   }).then((res) => {
-    live.handle.bind(live, res.data); //回调后使用jsonrpc.handle触发其本身的回调。
+    if (!res) {
+      return;
+    }
+    if (res.error) {
+      throw new Error(res.error);
+    }
+    live.handle(res.data); //回调后使用jsonrpc.handle触发其本身的回调。
   });
 });
 const log = new JSONRPC((message) => {
-  axios({
+  jsonrpcAxios({
     url: '/adminrpc', 请求路由
     method: 'post', // 请求方式
     baseURL: 'http://log.cg-dev.cn', // 请求基础路由
     data: message, // 发送消息主体
     responseType: 'json', // 发送消息格式json
   }).then((res) => {
-    log.handle.bind(log, res.data); //回调后使用jsonrpc.handle触发其本身的回调。
+    if (!res) {
+      return;
+    }
+    if (res.error) {
+      throw new Error(res.error);
+    }
+    log.handle(res.data); //回调后使用jsonrpc.handle触发其本身的回调。
   });
 });
-export default{
+export {
 	live,
 	log,
 };
 
 ```
 请求拦截部分在 ./src/api/jsonrpc/interceptors.js 中，有详细描述
 
+## 组件内引入
+
+```js
+import { jsonrpc } from '@/api/jsonrpc/index';
+```
+
+使用
+
+```js
+const requestData = {
+  /* 请求所需参数 */
+}
+jsonrpc.request('方法名', requestData);
+```
+

template/src/api/jsonrpc/index.js

@@ -2,18 +2,30 @@ import axios from 'axios';
 import JSONRPC from 'jsonrpc-dispatch'
 
 // 拦截器
-import '@/api/jsonrpc/interceptors';
+import interceptorsList from '@/api/jsonrpc/interceptors';
+
+const jsonrpcAxios = axios.create();
+
+Object.keys(interceptorsList).map((key) => {
+  const list = interceptorsList[key];
+  list.map((item) => {
+    console.log(item, key, 'jsonrpcAxios');
+    jsonrpcAxios.interceptors[key].use(item.success, item.error);
+  });
+});
 
 const jsonrpc = new JSONRPC((message) => {
-  axios({
+  jsonrpcAxios({
     url: '/adminrpc', // 请求路由
     method: 'post', // 请求方式
     baseURL: 'http://live-service.local.cg-dev.cn', // 请求基础路由
     data: message, // 发送消息主体
     responseType: 'json', // 发送消息格式json
   }).then((res) => {
-    jsonrpc.handle.bind(jsonrpc, res.data); //回调后使用jsonrpc.handle触发其本身的回调。
+    jsonrpc.handle(res); //回调后使用jsonrpc.handle触发其本身的回调。
   });
 });
 
-export default jsonrpc;
+export {
+  jsonrpc
+};