This commit is contained in:
吕才卓 2024-04-07 15:17:13 +08:00
parent 448c0b0e1f
commit 4856f437b5
9 changed files with 243 additions and 6 deletions

View File

@ -1,8 +1,8 @@
import request from "@/utils/request"; import request from "@/utils/request";
// 统一管理接口 // 统一管理接口
const API = { 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); export const reqUserone = (data) => request.post(API.LOGIN_URL, data);

Binary file not shown.

Before

Width:  |  Height:  |  Size: 28 KiB

BIN
src/assets/bg.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 226 KiB

BIN
src/assets/bg1.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.8 MiB

View File

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

View File

@ -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>

View File

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

View File

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

View File

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