password

src/api/login.js

@@ -1,8 +1,8 @@
 import request from "@/utils/request";
 // 统一管理接口
 const API = {
-  LOGIN_URL: "/api/user",
+  LOGIN_URL: "/api/login",
 };
 
-export const reqUser = () => request.get(API.LOGIN_URL);
+export const reqUser = () => request.post(API.LOGIN_URL);
 export const reqUserone = (data) => request.post(API.LOGIN_URL, data);

src/pages/login/index.vue

@@ -33,10 +33,15 @@
                 <lock-on-icon slot:string="prefix-icon"></lock-on-icon>
               </t-input>
             </t-form-item>
-            <t-form-item>
+            <t-form-item class="form-actions">
               <t-button theme="primary" type="submit" block>登录</t-button>
-
-              <button @click.prevent="showForgotPasswordModal">忘记密码</button>
+              <div class="forgot-password-spacer"></div>
+              <t-button
+                type="text"
+                @click="handleForgotPasswordClick"
+                class="text"
+                >修改密码</t-button
+              >
             </t-form-item>
           </t-form>
         </div>
@@ -137,6 +142,11 @@ const onSubmit = async () => {
 onMounted(() => {
   reqUser();
 });
+
+function handleForgotPasswordClick() {
+  router.push("/password-reset")
+}
+
 </script>
 
 <style lang="less" scoped>
@@ -145,7 +155,7 @@ onMounted(() => {
   position: absolute;
   width: 100%;
   height: 100%;
-  background: url(../../assets/bg.jpeg);
+  background: url(../../assets/bg.jpg);
   background-size: cover;
   overflow: hidden;
 }
@@ -174,4 +184,18 @@ onMounted(() => {
   align-items: center;
   justify-content: center;
 }
+.form-actions {
+  display: flex;
+  justify-content: space-between;
+}
+.forgot-password-spacer {
+  flex-grow: 1;
+  width: 0;
+  height: 0;
+  margin-left: 3rem;
+}
+.text {
+  padding-left: 1.8rem;
+  padding-right: 1.8rem;
+}
 </style>

src/pages/password/index.vue

@@ -0,0 +1,196 @@
+<template>
+  <div class="password-container">
+    <div class="password-form">
+      <t-form
+        :data="formData"
+        :rules="rules"
+        ref="form"
+        @reset="onReset"
+        @submit="onSubmit"
+        @validate="onValidate"
+      >
+        <t-form-item label="学号" name="account">
+          <t-input
+            v-model="formData.account"
+            placeholder="请输入学号"
+          ></t-input>
+        </t-form-item>
+        <t-form-item label="密码" name="password">
+          <t-input
+            type="password"
+            v-model="formData.password"
+            placeholder="请输入密码"
+          ></t-input>
+        </t-form-item>
+        <t-form-item label="确认密码" name="rePassword">
+          <t-input
+            type="password"
+            v-model="formData.rePassword"
+            placeholder="请再次输入密码"
+          ></t-input>
+        </t-form-item>
+        <t-form-item style="margin-left: 6rem">
+          <t-space size="10px">
+            <t-button theme="primary" type="submit">提交</t-button>
+            <t-button theme="default" variant="base" type="reset"
+              >重置</t-button
+            >
+          </t-space>
+        </t-form-item>
+      </t-form>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { MessagePlugin } from "tdesign-vue-next";
+import { reactive } from "vue";
+import router from "@/router";
+
+const INITIAL_DATA = {
+  account: '',
+  password: '',
+  rePassword: '',
+};
+
+const formData = reactive({
+  ...INITIAL_DATA,
+});
+
+const rules = reactive({
+  account: [
+    {
+      required: true,
+      message: '学号必填',
+      type: 'error',
+    },
+    {
+      min: 10,
+      message: "输入不正确",
+    },
+    {
+      max: 10,
+      message: "输入不正确",
+    },
+  ],
+  password: [
+    {
+      required: true,
+      message: '密码必填',
+      type: 'error',
+    },
+    {
+      len: 8,
+      message: "请输入 8 位密码",
+    },
+    {
+      pattern: /[A-Z]+/,
+      message: "密码必须包含大写字母",
+    },
+  ],
+  rePassword: [
+    {
+      required: true,
+      message: '密码必填',
+      type: 'error',
+    },
+    {
+      len: 8,
+      message: "请输入 8 位密码",
+    },
+    {
+      pattern: /[A-Z]+/,
+      message: "密码必须包含大写字母",
+    },
+  ],
+});
+
+const onReset = () => {
+  MessagePlugin.success('重置成功');
+};
+
+const onSubmit = ({ validateResult, firstError }) => {
+  if (validateResult === true) {
+    MessagePlugin.success('提交成功');
+  } else {
+    console.log('Errors: ', validateResult);
+    MessagePlugin.warning(firstError);
+  }
+};
+const onValidate = ({ validateResult, firstError }) => {
+  if (validateResult === true) {
+    console.log('Validate Success');
+  } else {
+    console.log('Validate Errors: ', firstError, validateResult);
+  }
+};
+// 自定义异步校验器，使用 resolve 返回结果控制校验结果、校验信息、校验结果类型
+const userNameValidator = (val) => new Promise((resolve) => {
+  const timer = setTimeout(() => {
+    if (['Zhang', 'Li', 'Wang'].includes(val)) {
+      resolve({
+        result: true,
+      });
+    } else {
+      resolve({
+        result: false,
+        message: '用户名不存在',
+        type: 'error',
+      });
+    }
+    clearTimeout(timer);
+  }, 10);
+});
+// 自定义校验器，不同的值输出不同的校验结果。支持异步校验（文案选自某密码重置站点，如有侵权，请联系我们删除）
+const passwordValidator = (val) => {
+  if (val.length > 0 && val.length <= 2) {
+    return {
+      result: false,
+      message: '太简单了！再开动一下你的小脑筋吧！',
+      type: 'error',
+    };
+  }
+  if (val.length > 2 && val.length < 4) {
+    return {
+      result: false,
+      message: '还差一点点，就是一个完美的密码了！',
+      type: 'warning',
+    };
+  }
+  return {
+    result: true,
+    message: '太强了，你确定自己记得住吗！',
+    type: 'success',
+  };
+};
+// 自定义异步校验器
+const rePassword = (val) => new Promise((resolve) => {
+  const timer = setTimeout(() => {
+    resolve(formData.password === val);
+    clearTimeout(timer);
+  });
+});
+
+</script>
+
+<style lang="scss" scoped>
+.password-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  background-image: url(../../assets/bg1.jpg);
+  background-size: cover;
+  padding: 2rem;
+}
+.password-form {
+  width: 26%;
+  height: 35%;
+  background-color: rgba(255, 255, 255, 0.8);
+  border-radius: 1.25rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+</style>

src/pages/students/student.vue

@@ -39,6 +39,8 @@
 </template>
 
 <script setup>
+import { MessagePlugin } from "tdesign-vue-next";
+import { ref } from "vue";
 </script>
 
 <style lang="scss" scoped>

src/router/index.js

@@ -2,6 +2,7 @@ import { createRouter, createWebHistory } from "vue-router";
 import FinanceBillManage from "./modules/financeBillManage";
 import ReceivablesManagement from "./modules/receivables-management";
 import Login from "@/pages/login/index.vue";
+import Password from "@/pages/password/index.vue";
 import Student from "@/pages/students/student.vue";
 
 import Layout from "@/layout/index.vue";
@@ -14,6 +15,11 @@ const router = createRouter({
       name: "login",
       component: Login,
     },
+    {
+      path: "/password-reset",
+      name: "password",
+      component: Password,
+    },
     {
       path: "/student",
       name: "student",

vite.config.js

@@ -8,6 +8,15 @@ import { viteMockServe } from "vite-plugin-mock";
 
 // https://vitejs.dev/config/
 export default defineConfig({
+  server: {
+    proxy: {
+      'api': {
+        url  : 'http://localhost:8080',
+        changeOrigin: true,
+        rewrite: (path) => path.replace(/^\/api/, '')
+      }
+    }
+  },
   plugins: [
     vue(),
     vueJsx(),