Add axios dependencies and wrap it reusable.

Author: anotherKyleFrom1994

package.json

@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "@mdi/font": "^4.7.95",
+    "axios": "^0.19.0",
     "core-js": "^3.3.2",
     "material-design-icons-iconfont": "^5.0.1",
     "vue": "^2.6.10",

src/components/base/portrait/Portrait.vue

@@ -1,6 +1,6 @@
 <template>
   <v-card class="portrait">
-    <!-- <v-card-title class="cyan darken-1">
+    <v-card-title class="cyan darken-1">
       <span class="headline white--text">Sarah Mcbeal</span>
 
       <v-spacer></v-spacer>
@@ -19,7 +19,7 @@
              icon>
         <v-icon>mdi-dots-vertical</v-icon>
       </v-btn>
-    </v-card-title> -->
+    </v-card-title>
 
     <v-img :src="imageSrc"
            height="200px"></v-img>
@@ -44,44 +44,6 @@
                    :key="'divider'+ i"
                    inset></v-divider>
       </template>
-
-      <!-- <v-list-item>
-        <v-list-item-action>
-          <v-icon>mdi-phone</v-icon>
-        </v-list-item-action>
-
-        <v-list-item-content>
-          <v-list-item-title>(323) 555-6789</v-list-item-title>
-        </v-list-item-content>
-
-        <v-list-item-action>
-          <v-icon>mdi-message-text</v-icon>
-        </v-list-item-action>
-      </v-list-item>
-
-      <v-divider inset></v-divider>
-
-      <v-list-item>
-        <v-list-item-action>
-          <v-icon>mdi-email</v-icon>
-        </v-list-item-action>
-
-        <v-list-item-content>
-          <v-list-item-title>mcbeal@example.com</v-list-item-title>
-        </v-list-item-content>
-      </v-list-item>
-
-      <v-divider inset></v-divider>
-
-      <v-list-item>
-        <v-list-item-action>
-          <v-icon>mdi-map-marker</v-icon>
-        </v-list-item-action>
-
-        <v-list-item-content>
-          <v-list-item-title>Orlando, FL 79938</v-list-item-title>
-        </v-list-item-content>
-      </v-list-item> -->
     </v-list>
 
   </v-card>

src/pages/generic/cta/Cta.ts

@@ -1,4 +1,9 @@
 import { Component, Vue, Prop, Watch, Emit } from 'vue-property-decorator';
-
+import { requestGet } from '@/plugins/axios-handler';
 @Component({})
-export default class Cta extends Vue {}
+export default class Cta extends Vue {
+
+  private hello() {
+    requestGet('aaaa', { x: 'a', y: 'b' });
+  }
+}

src/pages/generic/cta/Cta.vue

@@ -4,7 +4,7 @@
          bottom
          right
          color="secondary"
-         href="https://github.com/vuetifyjs/theme-blog"
+         @click="hello()"
          target="_blank"
          rel="noopener">
     <v-icon>mdi-download</v-icon>

src/plugins/axios-handler/axiosrc.ts

@@ -0,0 +1,17 @@
+import { AxiosRequestConfig } from 'axios';
+
+const config: AxiosRequestConfig = {};
+
+if (process.env.NODE_ENV === 'development') {
+  config.baseURL = 'https://some-domain.com/api/';
+  config.timeout = 1000;
+  config.headers = { 'X-Custom-Header': 'foobar' };
+}
+
+if (process.env.NODE_ENV === 'prodction') {
+  config.baseURL = 'https://some-domain.com/api/';
+  config.timeout = 1000;
+  config.headers = { 'X-Custom-Header': 'foobar' };
+}
+
+export default config;

src/plugins/axios-handler/index.ts

@@ -0,0 +1,24 @@
+// 默认利用axios的cancelToken进行防重复提交。
+// 如需允许多个提交同时发出。则需要在请求配置config中增加 neverCancel 属性，并设置为true
+import axios from 'axios';
+import baseConfig from './axiosrc';
+import { Vue } from 'vue-property-decorator';
+// define AJAX params that should be a key value pair
+interface params {
+  [key: string]: any
+}
+
+function createInstance (params ? : params, timeout ? : number) {
+  if (params !== undefined) baseConfig.params = params;
+  if (timeout !== undefined) baseConfig.timeout = timeout;
+
+  return axios.create(baseConfig);
+}
+
+export function requestGet (url: string, params ? : params) {
+  return createInstance(params).get(url);
+}
+
+export function requestPost (url: string, params ? : params) {
+  return createInstance(params).post(url);
+}

src/plugins/router/index.ts

@@ -21,7 +21,6 @@ for (let index in routeConfs) {
   if (routeConfs[index] !== null) {
     routes.push(routeConfs[index]);
   }
-
 }
 
 routes.push({