pizvue73f
/
unilife
1
0
Fork 1
Code Issues Pull Requests Packages Projects Releases Wiki Activity

前端bug修改，表单可以正确显示

Browse Source
pull/2/head
abab2320 2 months ago
parent fb05160bc6
commit 5e1494edd2
6 changed files with 139 additions and 93 deletions
Show Stats Download Patch File Download Diff File

1
Front/vue-unilife/package.json
Unescape View File

@ -14,6 +14,7 @@
"element-plus": "^2.9.7",
"vee-validate": "^4.15.0",
"vue": "^3.5.13",
"vue-router": "^4.5.0",
"yup": "^1.6.1"
},
"devDependencies": {

21
Front/vue-unilife/pnpm-lock.yaml
Unescape View File

@ -8,6 +8,9 @@ importers:
.:
dependencies:
'@vue/shared':
specifier: ^3.5.13
version: 3.5.13
axios:
specifier: ^1.8.3
version: 1.8.3
@ -20,6 +23,9 @@ importers:
vue:
specifier: ^3.5.13
version: 3.5.13(typescript@5.7.3)
vue-router:
specifier: ^4.5.0
version: 4.5.0(vue@3.5.13(typescript@5.7.3))
yup:
specifier: ^1.6.1
version: 1.6.1
@ -371,6 +377,9 @@ packages:
'@vue/compiler-vue2@2.7.16':
resolution: {integrity: sha512-qYC3Psj9S/mfu9uVi5WvNZIzq+xnXMhOwbTFKKDD7b1lhpnn71jXSFdTQ+WsIEk0ONCd7VV2IMm7ONl6tbQ86A==}
'@vue/devtools-api@6.6.4':
resolution: {integrity: sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g==}
'@vue/devtools-api@7.7.2':
resolution: {integrity: sha512-1syn558KhyN+chO5SjlZIwJ8bV/bQ1nOVTG66t2RbG66ZGekyiYNmRO7X9BJCXQqPsFHlnksqvPhce2qpzxFnA==}
@ -733,6 +742,11 @@ packages:
'@vue/composition-api':
optional: true
vue-router@4.5.0:
resolution: {integrity: sha512-HDuk+PuH5monfNuY+ct49mNmkCRK4xJAV9Ts4z9UFc4rzdDnxQLyCMGGc8pKhZhHTVzfanpNwB/lwqevcBwI4w==}
peerDependencies:
vue: ^3.2.0
vue-tsc@2.2.8:
resolution: {integrity: sha512-jBYKBNFADTN+L+MdesNX/TB3XuDSyaWynKMDgR+yCSln0GQ9Tfb7JS2lr46s2LiFUT1WsmfWsSvIElyxzOPqcQ==}
hasBin: true
@ -980,6 +994,8 @@ snapshots:
de-indent: 1.0.2
he: 1.2.0
'@vue/devtools-api@6.6.4': {}
'@vue/devtools-api@7.7.2':
dependencies:
'@vue/devtools-kit': 7.7.2
@ -1345,6 +1361,11 @@ snapshots:
dependencies:
vue: 3.5.13(typescript@5.7.3)
vue-router@4.5.0(vue@3.5.13(typescript@5.7.3)):
dependencies:
'@vue/devtools-api': 6.6.4
vue: 3.5.13(typescript@5.7.3)
vue-tsc@2.2.8(typescript@5.7.3):
dependencies:
'@volar/typescript': 2.4.12

37
Front/vue-unilife/src/api/user.js
Unescape View File

@ -1,37 +0,0 @@
import request from '../utils/request';
// 用户注册
export function register(data) {
return request({
url: '/auth/register',
method: 'post',
data
});
}
// 用户密码登录
export function login(data) {
return request({
url: '/auth/login',
method: 'post',
data
});
}
// 获取邮箱验证码
export function getEmailCode(data) {
return request({
url: '/auth/email/code',
method: 'post',
data
});
}
// 邮箱验证码登录
export function loginWithCode(data) {
return request({
url: '/auth/login/code',
method: 'post',
data
});
}

161
Front/vue-unilife/src/components/LogPage.vue
Unescape View File

@ -1,38 +1,49 @@
<script setup lang="ts">
import request from '../utils/request' // 确认路径是否正确
import * as yup from 'yup'
import { useField, useForm } from 'vee-validate'
import { ref ,watch} from 'vue'
import {useRouter} from 'vue-router'
import { useField, useForm, } from 'vee-validate'
import { ref } from 'vue'
import { computed } from 'vue'
const token = ref<string>('')
const router = useRouter()
// 注册登录切换
const testEmail = ref('test@example.com')
const testPassword = ref('123456')
//切换功能实现
const transRate = ref('90')
const switchLogin = ref(true);
const switchLoginMethod = ref<boolean>(true);
const switchLoginMethodEvent = () =>{
password.value = vericode.value = verifyPassword.value = "";
switchLoginMethod.value = !switchLoginMethod.value;
if(switchLoginMethod.value)//邮箱登录切换密码登录
{
password.value = verifyPassword.value = 123456;
}
else
{
vericode.value = 1;
if(switchLoginMethod.value) {
login_password.value = "";
login_password_email.value = login_vericode_email.value;
} else {
login_vericode.value = "";
login_vericode_email.value = login_password_email.value;
}
}
const form_box = ref<HTMLElement | null>(null);
//保证界面切换后不出现非对应的错误提示——可优化！！！！！
const switchLoginEvent = () =>{
password.value = vericode.value = verifyPassword.value = "";
//登录注册切换
const switchLoginEvent = () =>{
switchLogin.value = !switchLogin.value;
switchLogin.value ? transRate.value = '0' : transRate.value = '90';
if(form_box.value)
{
form_box.value.style.transform = `translateX(${transRate.value}%)`;
}
if(switchLoginMethod.value) {
login_password.value = login_vericode.value = "";
login_password_email.value = login_vericode_email.value = register_email.value;
} else {
register_password.value = register_verifyPassword.value = register_vericode.value = "";
login_vericode_email.value = login_password_email.value = register_email.value;
}
}
@ -40,56 +51,65 @@ const form_box = ref<HTMLElement | null>(null);
//注册表单
const RegisterForm = useForm({
validationSchema : yup.object({
email: yup.string().email("请输入邮箱").required("请输入正确的邮箱"),
password: yup.string().min(6,"密码至少6位").required("请输入密码"),
verifyPassword: yup.string().oneOf([yup.ref('password')],"两次密码不一致").required("请确认密码"),
vericode: yup.string().required("请输入验证码")
register_email: yup.string().email("请输入邮箱").required("请输入正确的邮箱"),
register_password: yup.string().min(6,"密码至少6位").required("请输入密码"),
register_verifyPassword: yup.string().oneOf([yup.ref('password')],"两次密码不一致").required("请确认密码"),
register_vericode: yup.string().required("请输入验证码")
}),
})
const {value: register_email} = useField('register_email')
const {value: register_password} = useField ('register_password')
const {value: register_verifyPassword} = useField('register_verifyPassword')
const {value: register_vericode} = useField('register_vericode')//验证码
//登录表单
//密码登录表单
const LoginPasswordForm = useForm({
validationSchema : yup.object({
email: yup.string().email("请输入邮箱").required("请输入正确的邮箱"),
password: yup.string().min(6,"密码至少6位").required("请输入密码"),
login_password_email: yup.string().email("请输入邮箱").required("请输入正确的邮箱"),
login_password: yup.string().min(6,"密码至少6位").required("请输入密码")
}),
})
const{value: login_password_email} = useField('login_password_email')
const{value: login_password} = useField('login_password')
//验证码登录表单
const LoginEmailForm = useForm({
validationSchema : yup.object({
email: yup.string().email("请输入邮箱").required("请输入正确的邮箱"),
vericode: yup.string().required("请输入验证码")
login_vericode_email: yup.string().email("请输入邮箱").required("请输入正确的邮箱"),
login_vericode: yup.string().required("请输入验证码")
}),
})
const {value: email} = useField('email')
const {value: password} = useField('password')
const {value: verifyPassword} = useField('verifyPassword')
const {value: vericode} = useField('vericode')//验证码
const{value:login_vericode_email} = useField('login_vericode_email')
const{value: login_vericode} = useField('login_vericode')
//错误提示
const showErrors = ref(false)
const ErrorsMessage = ref('')
const checkErrors = () => {
if(RegisterForm.errors.value.email || RegisterForm.errors.value.password || RegisterForm.errors.value.verifyPassword || RegisterForm.errors.value.vericode) {
if(RegisterForm.errors.value.register_email || RegisterForm.errors.value.register_password || RegisterForm.errors.value.register_verifyPassword || RegisterForm.errors.value.register_vericode) {
showErrors.value = true
ErrorsMessage.value = '请检查输入是否正确'
}
if(LoginPasswordForm.errors.value.email || LoginPasswordForm.errors.value.password) {
}else if(LoginPasswordForm.errors.value.login_password_email || LoginPasswordForm.errors.value.login_password) {
showErrors.value = true
ErrorsMessage.value = '请检查输入是否正确'
}
if(LoginEmailForm.errors.value.email || LoginEmailForm.errors.value.vericode) {
}else if(LoginEmailForm.errors.value.login_vericode_email || LoginEmailForm.errors.value.login_vericode) {
showErrors.value = true
ErrorsMessage.value = '请检查输入是否正确'
}
}
//注册表单提交
const onRegisterSubmit = () => {
LoginEmailForm.resetForm();
LoginPasswordForm.resetForm();
RegisterForm.handleSubmit(() => {
testcode().then((res) => {
if(res.code === 200) {
register().then((res) => {
if(res.code === 200) {
console.log('注册成功')
localStorage.setItem('token', res.data.token)
router.push({path:'/personal'})
} else {
console.log('注册失败')
}
@ -101,31 +121,57 @@ const onRegisterSubmit = () => {
})();
}
const chooseLogin = () => {
//登录表单提交
const onLoginSubmit = () => {
if(!switchLoginMethod.value) {
onLoginPasswordSubmit()
} else {
onLoginEmailSubmit()
}
}
const onLoginPasswordSubmit = () => {
LoginPasswordForm.handleSubmit(() => {
LoginEmailForm.resetForm();
RegisterForm.resetForm();
LoginPasswordForm.handleSubmit((values) => {
console.log('表单调用成功',values)
if(login_password_email.value == testEmail.value && login_password.value == testPassword.value) {
console.log('测试登录成功')
console.log(router)
router.push({name:'Personal'})
} else {
login().then((res) => {
if(res.code === 200) {
console.log('登录成功')
console.log('密码登录成功')
localStorage.setItem('token', res.data.token)
} else {
console.log('登录失败')
}
})
}
},
(errors) => {
console.log('密码登录表单调用失败',errors)
})();
}else {
LoginPasswordForm.resetForm();
RegisterForm.resetForm();
LoginEmailForm.handleSubmit(() => {
testcode().then((res) => {
if(res.code === 200) {
console.log('邮箱登录成功')
localStorage.setItem('token', res.data.token)
} else {
console.log('登录失败')
}
})
},
(errors)=>{
console.log("邮箱登录表单调用失败",errors)
})();
}
}
const onLoginEmailSubmit = () => {
LoginEmailForm.handleSubmit(() => {
testcode().then((res) => {
if(res.code === 200) {
console.log('登录成功')
localStorage.setItem('token', res.data.token)
} else {
console.log('登录失败')
}
@ -134,6 +180,9 @@ const onLoginEmailSubmit = () => {
}
//axios接口
const email = computed(()=>register_email.value ?? login_password_email.value ?? login_vericode_email.value)
const password = computed(()=>register_password.value ?? login_password.value)
const vericode = computed(()=>register_vericode.value ?? login_vericode.value)
//发送邮箱验证码
async function emailcode(){
const res = await request.get('/users/code', {
@ -182,6 +231,7 @@ async function login(){
})
return res.data;
}
</script>
<template>
@ -203,12 +253,12 @@ async function login(){
<div class = "register-box" :class = "{hidden: !switchLogin}">
<h1>register</h1>
<div class="email-vericode">
<input type="text" placeholder="邮箱" v-model="email">
<input type="text" placeholder="邮箱" v-model="register_email">
<button class="vericode-btn" @click = "emailcode">获取验证码</button>
</div>
<input type="password" placeholder="密码" v-model="password">
<input type ="password" placeholder = "确认密码" v-model = "verifyPassword">
<input type="text" placeholder="验证码" v-model="vericode">
<input type="password" placeholder="密码" v-model="register_password">
<input type ="password" placeholder = "确认密码" v-model = "register_verifyPassword">
<input type="text" placeholder="验证码" v-model="register_vericode">
<button @click = "onRegisterSubmit(),checkErrors()">注册</button>
</div>
<!-- 登录表单 -->
@ -216,19 +266,19 @@ async function login(){
<!--密码登录-->
<div class = password-method :class="{hidden: switchLoginMethod}">
<h1>login</h1>
<input type="text" placeholder="邮箱" v-model="email">
<input type="password" placeholder="密码" v-model="password">
<input type="text" placeholder="邮箱" v-model="login_password_email">
<input type="password" placeholder="密码" v-model="login_password">
<button class = "switch-btn" @click="switchLoginMethodEvent">邮箱登录</button>
</div>
<!--邮箱登录-->
<div class = "email-method" :class ="{hidden: !switchLoginMethod}">
<h1>login</h1>
<input class ="email-text" type="text" placeholder="邮箱" v-model="email">
<input class ="email-text" type="text" placeholder="邮箱" v-model="login_vericode_email">
<button class="email-btn" @click="emailcode">获取验证码</button>
<input type="text" placeholder="验证码" v-model="vericode">
<input type="text" placeholder="验证码" v-model="login_vericode">
<button class = "switch-btn" @click="switchLoginMethodEvent">密码登录</button>
</div>
<button @click="chooseLogin(),checkErrors()">登录</button>
<button @click="onLoginSubmit(),checkErrors()">登录</button>
</div>
</div>
<div>
@ -280,10 +330,11 @@ async function login(){
}
.error-msg{
width:500px;
width:30%;
position: absolute;
top:5%;
left:30%;
left:35%;
display: flex;
}
.form-box{

5
Front/vue-unilife/src/main.ts
Unescape View File

@ -3,7 +3,10 @@ import './style.css'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import router from './routers'
const app = createApp(App)
app.mount('#app')
app.use(ElementPlus)
app.use(router)
app.mount('#app')

7
Front/前端环境.md
Unescape View File

@ -45,4 +45,11 @@ pnpm install yup
```cmd
pnpm add element-plus
```
组件
### 安装VueRouter
```cmd
pnpm i vue-router
pnpm add vue-router@4
```
用来完成界面跳转，同时完成vuerouter与ts的适配
Write Preview
Loading…
Cancel
Save