登录页面添加

README.md

@@ -18,16 +18,6 @@ npm run serve
 npm run build
 ```
 
-## Run your unit tests
-```
-npm run test:unit
-```
-
-## Run your end-to-end tests
-```
-npm run test:e2e
-```
-
 ## Lints and fixes files
 ```
 npm run lint

package-lock.json

@@ -2689,9 +2689,9 @@
       "dev": true
     },
     "element-plus": {
-      "version": "1.0.1-beta.2",
-      "resolved": "http://192.168.250.101:4873/element-plus/-/element-plus-1.0.1-beta.2.tgz",
-      "integrity": "sha1-CmoQ3BU+5KTsVHdbrSKmhT6uYzc=",
+      "version": "1.0.1-beta.3",
+      "resolved": "http://192.168.250.101:4873/element-plus/-/element-plus-1.0.1-beta.3.tgz",
+      "integrity": "sha1-lF1Xh4I+ikR1G5AbGxqUrS1If18=",
       "requires": {
         "@popperjs/core": "^2.4.4",
         "async-validator": "^3.4.0",

package.json

@@ -10,7 +10,7 @@
   "dependencies": {
     "await-to-js": "^2.1.1",
     "axios": "^0.21.0",
-    "element-plus": "^1.0.1-beta.2",
+    "element-plus": "^1.0.1-beta.3",
     "vue": "^3.0.4",
     "vue-class-component": "^8.0.0-rc.1",
     "vue-router": "^4.0.0-rc.6",

src/App.vue

@@ -1,3 +1,3 @@
 <template>
-  <router-view/>
+  <router-view />
 </template>

src/api/index.ts

@@ -1,3 +0,0 @@
-import EnclosureHttp from "./utils/core";
-
-export default EnclosureHttp;

src/assets/index.css

@@ -10,6 +10,17 @@ body {
   position: relative;
 }
 
+* {
+  touch-action: pan-y;
+  -moz-user-select: none;
+  -o-user-select: none;
+  -khtml-user-select: none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+
 .login,
 .register {
   width: 100%;

src/components/info.vue

@@ -1,44 +1,115 @@
 <template>
   <div class="info">
-    <!-- <input type="text" /><br />
-    <input type="text" /><br />
-    <button>1</button> -->
-    <p>{{ info.userName }}</p>
-    <p>{{ info.passWord }}</p>
-    <p>{{ info.dynamicText }}</p>
+    <el-form :model="ruleForm" ref="ruleForm" class="rule-form">
+      <el-form-item prop="userName">
+        <el-input
+          clearable
+          v-model="ruleForm.userName"
+          placeholder="请输入用户名"
+          prefix-icon="el-icon-user"
+        ></el-input>
+      </el-form-item>
+      <el-form-item prop="passWord">
+        <el-input
+          clearable
+          v-model="ruleForm.passWord"
+          placeholder="请输入密码"
+          prefix-icon="el-icon-lock"
+        ></el-input>
+      </el-form-item>
+      <el-form-item prop="verify">
+        <el-input
+          v-model="ruleForm.verify"
+          placeholder="请输入验证码"
+        ></el-input>
+        <span
+          class="verify"
+          title="刷新"
+          v-html="ruleForm.svg"
+          @click.prevent="refreshVerify"
+        ></span>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click.prevent="onLogin">登录</el-button>
+        <el-button @click="resetForm">重置</el-button>
+      </el-form-item>
+    </el-form>
   </div>
 </template>
 
 <script lang='ts'>
-import { defineComponent, PropType } from "vue";
+import {
+  defineComponent,
+  PropType,
+  onBeforeMount,
+  getCurrentInstance,
+} from "vue";
 
 export interface ContextProps {
   userName: string;
   passWord: string;
-  verify?: number;
+  verify: number | null;
+  svg: any;
   telephone?: number;
-  dynamicText: string;
+  dynamicText?: string;
 }
 
 export default defineComponent({
   props: {
-    info: {
+    ruleForm: {
       type: Object as PropType<ContextProps>,
       require: true,
     },
   },
+  emits: ["onLogin", "refreshVerify"],
+  setup(props, ctx) {
+    let vm: any;
+
+    onBeforeMount(() => {
+      vm = getCurrentInstance(); //获取组件实例
+    });
+
+    // 点击登录
+    const onLogin = (evt: Object): void => {
+      ctx.emit("onLogin", evt);
+    };
+
+    // 刷新验证码
+    const refreshVerify = (): void => {
+      ctx.emit("refreshVerify");
+    };
+    // 表单重置
+    const resetForm = (): void => {
+      vm.refs.ruleForm.resetFields();
+    };
+
+    return { resetForm, onLogin, refreshVerify };
+  },
 });
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
 .info {
   width: 30vw;
-  height: 40vh;
+  height: 48vh;
   background: url("./login.png") no-repeat center;
   background-size: cover;
   position: absolute;
   border-radius: 20px;
   right: 100px;
-  top: 35vh;
+  top: 30vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  .rule-form {
+    width: 80%;
+    .verify {
+      position: absolute;
+      margin: -10px 0 0 -120px;
+      &:hover {
+        cursor: pointer;
+      }
+    }
+  }
 }
 </style>

src/main.ts

@@ -2,7 +2,7 @@ import { createApp } from 'vue'
 import App from './App.vue'
 import router from './router'
 import store from './store'
-import EnclosureHttp from "./api/utils/core"
+// import EnclosureHttp from "./utils/http"
 
 // 内置ElementPlus
 import ElementPlus from 'element-plus'
@@ -14,6 +14,6 @@ import "./assets/index.css"
 const app = createApp(App)
 
 // 全局注册Axios
-app.config.globalProperties.$http = new EnclosureHttp()
+// app.config.globalProperties.$http = new EnclosureHttp()
 
 app.use(store).use(router).use(ElementPlus).mount('#app')

src/utils/http/config.ts

@@ -1,5 +1,5 @@
-import { AxiosRequestConfig } from "axios";
-import { excludeProps } from "./utils";
+import { AxiosRequestConfig } from "axios"
+import { excludeProps } from "./utils"
 /**
  * 默认配置
  */
@@ -11,21 +11,21 @@ export const defaultConfig: AxiosRequestConfig = {
     "Content-Type": "application/json",
     "X-Requested-With": "XMLHttpRequest"
   },
-};
+}
 
 export function genConfig(config?: AxiosRequestConfig): AxiosRequestConfig {
   if (!config) {
-    return defaultConfig;
+    return defaultConfig
   }
 
-  const { headers } = config;
+  const { headers } = config
   if (headers && typeof headers === "object") {
     defaultConfig.headers = {
       ...defaultConfig.headers,
       ...headers
-    };
     }
-  return { ...excludeProps(config!, "headers"), ...defaultConfig };
+  }
+  return { ...excludeProps(config!, "headers"), ...defaultConfig }
 }
 
-export const METHODS = ["post", "get", "put", "delete", "option", "patch"];
+export const METHODS = ["post", "get", "put", "delete", "option", "patch"]

src/utils/http/core.ts

@@ -3,11 +3,11 @@ import Axios, {
   CancelTokenStatic,
   AxiosInstance,
   Canceler
-} from "axios";
+} from "axios"
 
-import { genConfig } from "./config";
+import { genConfig } from "./config"
 
-import { transformConfigByMethod } from "./utils";
+import { transformConfigByMethod } from "./utils"
 
 import {
   cancelTokenType,
@@ -15,7 +15,7 @@ import {
   EnclosureHttpRequestConfig,
   EnclosureHttpResoponse,
   EnclosureHttpError
-} from "./types.d";
+} from "./types.d"
 
 class EnclosureHttp {
   // 初始化配置对象
@@ -25,7 +25,7 @@ class EnclosureHttp {
   private static axiosInstance: AxiosInstance = Axios.create(genConfig());
 
   // 保存 EnclosureHttp实例
-  private static EnclosureHttpInstance: EnclosureHttp;
+  private static EnclosureHttpInstance: EnclosureHttp
 
   // axios取消对象
   private CancelToken: CancelTokenStatic = Axios.CancelToken;
@@ -41,12 +41,12 @@ class EnclosureHttp {
   private beforeResponseCallback: EnclosureHttpRequestConfig["beforeResponseCallback"] = undefined;
 
   public get cancelTokenList(): Array<cancelTokenType> {
-    return this.sourceTokenList;
+    return this.sourceTokenList
   }
 
   // eslint-disable-next-line class-methods-use-this
   public set cancelTokenList(value) {
-    throw new Error("cancelTokenList不允许赋值");
+    throw new Error("cancelTokenList不允许赋值")
   }
 
   /**
@@ -62,7 +62,7 @@ class EnclosureHttp {
    */
   // eslint-disable-next-line class-methods-use-this
   private genUniqueKey(config: EnclosureHttpRequestConfig): string {
-    return `${config.url}--${JSON.stringify(config.data)}`;
+    return `${config.url}--${JSON.stringify(config.data)}`
   }
 
   /**
@@ -70,21 +70,21 @@ class EnclosureHttp {
    * @returns void 0
    */
   private cancelRepeatRequest(): void {
-    const temp: { [key: string]: boolean } = {};
+    const temp: { [key: string]: boolean } = {}
 
     this.sourceTokenList = this.sourceTokenList.reduce<Array<cancelTokenType>>(
       (res: Array<cancelTokenType>, cancelToken: cancelTokenType) => {
-        const { cancelKey, cancelExecutor } = cancelToken;
+        const { cancelKey, cancelExecutor } = cancelToken
         if (!temp[cancelKey]) {
-          temp[cancelKey] = true;
-          res.push(cancelToken);
+          temp[cancelKey] = true
+          res.push(cancelToken)
         } else {
-          cancelExecutor();
+          cancelExecutor()
         }
-        return res;
+        return res
       },
       []
-    );
+    )
   }
 
   /**
@@ -97,7 +97,7 @@ class EnclosureHttp {
         ? this.sourceTokenList.filter(
           cancelToken => cancelToken.cancelKey !== cancelKey
         )
-        : [];
+        : []
   }
 
   /**
@@ -108,33 +108,33 @@ class EnclosureHttp {
   private httpInterceptorsRequest(): void {
     EnclosureHttp.axiosInstance.interceptors.request.use(
       (config: EnclosureHttpRequestConfig) => {
-        const $config = config;
+        const $config = config
 
-        const cancelKey = this.genUniqueKey($config);
+        const cancelKey = this.genUniqueKey($config)
 
         $config.cancelToken = new this.CancelToken((cancelExecutor: (cancel: any) => void) => {
-          this.sourceTokenList.push({ cancelKey, cancelExecutor });
-        });
+          this.sourceTokenList.push({ cancelKey, cancelExecutor })
+        })
 
-        this.cancelRepeatRequest();
+        this.cancelRepeatRequest()
 
-        this.currentCancelTokenKey = cancelKey;
+        this.currentCancelTokenKey = cancelKey
         // 优先判断post/get等方法是否传入回掉，否则执行初始化设置等回掉
         if (typeof this.beforeRequestCallback === "function") {
-          this.beforeRequestCallback($config);
-          this.beforeRequestCallback = undefined;
-          return $config;
+          this.beforeRequestCallback($config)
+          this.beforeRequestCallback = undefined
+          return $config
         }
         if (EnclosureHttp.initConfig.beforeRequestCallback) {
-          EnclosureHttp.initConfig.beforeRequestCallback($config);
-          return $config;
+          EnclosureHttp.initConfig.beforeRequestCallback($config)
+          return $config
         }
-        return $config;
+        return $config
       },
       error => {
-        return Promise.reject(error);
+        return Promise.reject(error)
       }
-    );
+    )
   }
 
   /**
@@ -142,7 +142,7 @@ class EnclosureHttp {
    * @returns void 0
    */
   public clearCancelTokenList(): void {
-    this.sourceTokenList.length = 0;
+    this.sourceTokenList.length = 0
   }
 
   /**
@@ -150,46 +150,46 @@ class EnclosureHttp {
    * @returns void 0
    */
   private httpInterceptorsResponse(): void {
-    const instance = EnclosureHttp.axiosInstance;
+    const instance = EnclosureHttp.axiosInstance
     instance.interceptors.response.use(
       (response: EnclosureHttpResoponse) => {
 
         // 请求每次成功一次就删除当前canceltoken标记
-        const cancelKey = this.genUniqueKey(response.config);
-        this.deleteCancelTokenByCancelKey(cancelKey);
+        const cancelKey = this.genUniqueKey(response.config)
+        this.deleteCancelTokenByCancelKey(cancelKey)
         // 优先判断post/get等方法是否传入回掉，否则执行初始化设置等回掉
         if (typeof this.beforeResponseCallback === "function") {
-          this.beforeResponseCallback(response);
-          this.beforeResponseCallback = undefined;
-          return response.data;
+          this.beforeResponseCallback(response)
+          this.beforeResponseCallback = undefined
+          return response.data
         }
         if (EnclosureHttp.initConfig.beforeResponseCallback) {
-          EnclosureHttp.initConfig.beforeResponseCallback(response);
-          return response.data;
+          EnclosureHttp.initConfig.beforeResponseCallback(response)
+          return response.data
         }
 
-        return response.data;
+        return response.data
       },
       (error: EnclosureHttpError) => {
-        const $error = error;
+        const $error = error
         // 判断当前的请求中是否在 取消token数组理存在，如果存在则移除（单次请求流程）
         if (this.currentCancelTokenKey) {
           const haskey = this.sourceTokenList.filter(
             cancelToken => cancelToken.cancelKey === this.currentCancelTokenKey
-          ).length;
+          ).length
           if (haskey) {
             this.sourceTokenList = this.sourceTokenList.filter(
               cancelToken =>
                 cancelToken.cancelKey !== this.currentCancelTokenKey
-            );
-            this.currentCancelTokenKey = "";
+            )
+            this.currentCancelTokenKey = ""
           }
         }
-        $error.isCancelRequest = Axios.isCancel($error);
+        $error.isCancelRequest = Axios.isCancel($error)
         // 所有的响应异常 区分来源为取消请求/非取消请求
-        return Promise.reject($error);
+        return Promise.reject($error)
       }
-    );
+    )
   }
 
   public request<T>(
@@ -202,24 +202,24 @@ class EnclosureHttp {
       method,
       url,
       ...axiosConfig
-    } as EnclosureHttpRequestConfig);
+    } as EnclosureHttpRequestConfig)
     // 单独处理自定义请求/响应回掉
     if (axiosConfig?.beforeRequestCallback) {
-      this.beforeRequestCallback = axiosConfig.beforeRequestCallback;
+      this.beforeRequestCallback = axiosConfig.beforeRequestCallback
     }
     if (axiosConfig?.beforeResponseCallback) {
-      this.beforeResponseCallback = axiosConfig.beforeResponseCallback;
+      this.beforeResponseCallback = axiosConfig.beforeResponseCallback
     }
 
     return new Promise((resolve, reject) => {
       EnclosureHttp.axiosInstance.request(config)
         .then((response: EnclosureHttpResoponse) => {
-          resolve(response.data);
+          resolve(response.data)
         })
         .catch((error: any) => {
-          reject(error);
-        });
-    });
+          reject(error)
+        })
+    })
   }
 
   public post<T>(
@@ -227,7 +227,7 @@ class EnclosureHttp {
     params?: T,
     config?: EnclosureHttpRequestConfig
   ): Promise<T> {
-    return this.request<T>("post", url, params, config);
+    return this.request<T>("post", url, params, config)
   }
 
   public get<T>(
@@ -235,9 +235,8 @@ class EnclosureHttp {
     params?: T,
     config?: EnclosureHttpRequestConfig
   ): Promise<T> {
-    return this.request<T>("get", url, params, config);
+    return this.request<T>("get", url, params, config)
   }
-
 }
 
-export default EnclosureHttp;
+export default EnclosureHttp

src/utils/http/index.ts

@@ -0,0 +1,3 @@
+import EnclosureHttp from "./core"
+export const http = new EnclosureHttp()
+

src/utils/http/types.d.ts

@@ -4,7 +4,7 @@ import Axios, {
     AxiosResponse,
     Method,
     AxiosError
-} from "axios";
+} from "axios"
 
 import { METHODS } from './config'
 

src/utils/http/utils.ts

@@ -1,4 +1,4 @@
-import { EnclosureHttpRequestConfig } from "./types.d";
+import { EnclosureHttpRequestConfig } from "./types.d"
 
 export function excludeProps<T extends { [key: string]: any }>(
   origin: T,
@@ -7,23 +7,23 @@ export function excludeProps<T extends { [key: string]: any }>(
   return Object.keys(origin)
     .filter(key => !prop.includes(key))
     .reduce((res, key) => {
-      res[key] = origin[key];
-      return res;
-    }, {} as { [key: string]: T });
+      res[key] = origin[key]
+      return res
+    }, {} as { [key: string]: T })
 }
 
 export function transformConfigByMethod(
   params: any,
   config: EnclosureHttpRequestConfig
 ): EnclosureHttpRequestConfig {
-  const { method } = config;
+  const { method } = config
   const props = ["delete", "get", "head", "options"].includes(
     method!.toLocaleLowerCase()
   )
     ? "params"
-    : "data";
+    : "data"
   return {
     ...config,
     [props]: params
-  };
+  }
 }

src/utils/token.ts

@@ -9,11 +9,11 @@ export function setToken(token: string): void {
 
 // 取
 export function getToken(): string {
-  let token = sessionStorage.getItem("Token") && JSON.parse(sessionStorage.getItem("Token") || "");
-  return token;
+  let token = sessionStorage.getItem("Token") && JSON.parse(sessionStorage.getItem("Token") || "")
+  return token
 }
 
 // 删
 export function delToken(): void {
-  sessionStorage.removeItem("Token");
+  sessionStorage.removeItem("Token")
 }

src/views/home.vue

@@ -1,3 +1,14 @@
 <template>
-  <div>Home</div>
+  <div></div>
 </template>
+
+<script lang='ts'>
+export default {
+  setup() {
+    return {};
+  },
+};
+</script>
+
+<style scoped>
+</style>

src/views/login.vue

@@ -1,32 +1,60 @@
 <template>
   <div class="login">
-    <info :info="contextInfo" />
+    <info
+      :ruleForm="contextInfo"
+      @on-login="onLogin"
+      @refreshVerify="refreshVerify"
+    />
   </div>
 </template>
 
 <script lang="ts">
-import { ref } from "vue";
+import {
+  ref,
+  reactive,
+  onMounted,
+  onBeforeMount,
+  getCurrentInstance,
+} from "vue";
+import { http } from "../utils/http";
 import info, { ContextProps } from "../components/info.vue";
-const contextInfo: ContextProps = {
-  userName: "admin",
-  passWord: "123456",
-  dynamicText: "登录",
-};
+
 export default {
-  mounted() {
-    // @ts-ignore
-    this.$http.request("get", "/getApi");
-  },
   components: {
     info,
   },
   setup() {
+    // 刷新验证码
+    const getVerify = async () => {
+      let { svg } = await http.request("get", "/captcha");
+      contextInfo.svg = svg;
+    };
+
+    const contextInfo: ContextProps = reactive({
+      userName: "",
+      passWord: "",
+      verify: null,
+      svg: null,
+    });
+
+    // 登录
+    const onLogin = (): void => {
+      console.log(contextInfo.userName);
+    };
+
+    const refreshVerify = (): void => {
+      getVerify();
+    };
+
+    onBeforeMount(() => {
+      getVerify();
+    });
+
     return {
       contextInfo,
+      onLogin,
+      refreshVerify,
     };
   },
 };
 </script>
-
-<style scoped>
-</style>

src/views/register.vue

@@ -1,21 +1,13 @@
 <template>
-  <div class="register">{{ text }}</div>
+  <div></div>
 </template>
 
-<script lang="ts">
-import { ref } from "vue"
+<script lang='ts'>
 export default {
-  mounted() {
-    // @ts-ignore
-    this.$http.request("get", "/getApi")
-  },
   setup() {
-    const text = ref("register")
-    return {
-      text,
-    }
+    return {};
   },
-}
+};
 </script>
 
 <style scoped>

tsconfig.json

@@ -34,7 +34,7 @@
     "src/**/*.tsx",
     "src/**/*.vue",
     "tests/**/*.ts",
-    "tests/**/*.tsx"
+    "tests/**/*.tsx", "src/mixins/bus.js"
   ],
   "exclude": [
     "node_modules"