loading plugin

Author: yang.zhang

.config.js

@@ -3,5 +3,4 @@
 module.exports = {
   devServer: 'http://localhost:3000',
   proServer: 'http://localhost:3000',
-  token: 'X-BLACKCAT-TOKEN',
 };

src/api/index.ts

@@ -0,0 +1,6 @@
+export const API_PRE = '/api/v1';
+
+/* 处理接口地址前缀 */
+export function stringifPath(path: string) {
+  return API_PRE + path;
+}

src/api/login.ts

@@ -1,15 +1,19 @@
 import { internalFetch, deletx } from '@/util/fetch';
+import { saveLogin, loginOut as logout } from '@/util/session';
+import { stringifPath } from './index';
 
 const PATH = '/auth/token';
 
 /* 登陆 */
 export function login(username: string, password: string) {
-  return internalFetch('POST')(true)(PATH, {
+  return internalFetch('POST')(true)(stringifPath(PATH), {
     body: { username, password },
+  }).then((res) => {
+    saveLogin(res.token);
   });
 }
 
 /* 退出 */
 export function loginOut() {
-  return deletx(PATH);
+  return deletx(stringifPath(PATH)).then(logout);
 }

src/plugins/Loading/Loading.vue

@@ -0,0 +1,50 @@
+<template>
+  <div class="loading" :class="{showing}">
+    <app-icon link="#icon-loading" :iconStyle="iconStyle" />
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator';
+import AppIcon from '@/components/AppIcon.vue';
+
+@Component({
+  components: {
+    AppIcon,
+  },
+})
+export default class Loading extends Vue {
+  private showing: boolean = false;
+  private get iconStyle() {
+    return {
+      width: '100%',
+      height: '100%',
+      display: this.showing ? 'block' : 'none',
+      animation: this.showing
+        ? 'circle_rotating 1.2s linear infinite forwards'
+        : 'none',
+    };
+  }
+  public show() {
+    this.showing = true;
+    return () => {
+      this.showing = false;
+    };
+  }
+}
+</script>
+<style lang="scss" scoped>
+@import '../../scss/theme.scss';
+@import '../../scss/_px2px.scss';
+
+.loading {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  color: $themeMain;
+  width: 64px;
+  height: 64px;
+}
+</style>
+

src/plugins/Loading/index.ts

@@ -0,0 +1,25 @@
+import Vue, { VueConstructor, PluginObject } from 'vue';
+import Loading from './Loading.vue';
+
+interface ShowFunc {
+  (): () => void;
+}
+
+const plugin: PluginObject<{}> = {
+  install(Vue: VueConstructor, options = {}) {
+    const CONSTRUCTOR = Vue.extend(Loading);
+    let cache: Vue & { show: ShowFunc } | null = null;
+
+    function loading(): () => void {
+      let loading = cache || (cache = new CONSTRUCTOR());
+      if (!loading.$el) {
+        let vm = loading.$mount();
+        (document.querySelector('body') as HTMLElement).appendChild(vm.$el);
+      }
+      return loading.show();
+    }
+    Vue.prototype.$loading = loading;
+  },
+};
+
+export default plugin;

src/plugins/Loading/vue.d.ts

@@ -0,0 +1,11 @@
+import Vue from 'vue';
+
+interface LoadingFunc {
+  (): () => void;
+}
+
+declare module 'vue/types/vue' {
+  interface Vue {
+    $loading: LoadingFunc;
+  }
+}

src/plugins/index.ts

@@ -1,4 +1,6 @@
 import Vue from 'vue';
 import Toast from './Toast';
+import Loading from './Loading';
 
 Vue.use(Toast);
+Vue.use(Loading);

src/router/index.ts

@@ -9,6 +9,7 @@ import { hasLogin } from '@/util/session';
 Vue.use(Router);
 
 let router = new Router({
+  mode: 'history',
   routes: [
     {
       path: '/',

src/scss/global.scss

@@ -13,7 +13,16 @@ body,
   height: 100%;
   width: 100%;
 }
-body{
+body {
   width: 16rem;
   margin: 0 auto;
 }
+
+@keyframes circle_rotating {
+  0% {
+    transform: rotate(0);
+  }
+  to {
+    transform: rotate(1turn);
+  }
+}

src/util/fetch.ts

@@ -1,7 +1,7 @@
 /* fetch api  */
 
 import { getCookie } from '@/util/cookie';
-const { token } = require('../../.config.js');
+import { TOKEN } from '@/util/session';
 
 interface FetchParams {
   body?: { [key: string]: any };
@@ -28,7 +28,7 @@ export function internalFetch(type: 'GET' | 'POST' | 'DELETE') {
       headers = headers instanceof Headers ? headers : new Headers();
       headers.set('Content-Type', 'application/json');
       if (!isGetToken) {
-        headers.set(token, getCookie(token));
+        headers.set(TOKEN, getCookie(TOKEN));
       }
       let stringifyBody;
       if (body) {