Amadeus
/
springboot-vue-template-jwt-frontend
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

注册界面编写

This commit is contained in:
Amadeus 2024-05-17 22:36:22 +08:00
parent 840170b66e
commit b79b3d2449
4 changed files with 96 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
my-project-frontend/src/router/index.js
View File

@ -14,12 +14,13 @@ const router = createRouter( {
path: '',
name: 'welcome-login',
component: () => import('@/views/welcome/LoginPage.vue')
},{
path: 'register',
name: 'welcome-register',
component: () => import('@/views/welcome/RegisterPage.vue')
}
]
}, {
/*
添加路由
*/
path: '/index',
name: 'index',
component: () => import('@/views/IndexView.vue')

7
my-project-frontend/src/views/WelcomeView.vue
View File

@ -14,7 +14,12 @@
<div style="margin-top: 5px" >在这里你可以同性交友,因为都是男的,没有学java的女生</div>
</div>
<div class="right-card">
<router-view/>
<!--添加淡入淡出的效果-->
<router-view v-slot="{ Component }">
<transition name="el-fade-in-linear" mode="out-in">
<component :is="Component" />
</transition>
</router-view>
</div>
</div>

6
my-project-frontend/src/views/welcome/LoginPage.vue
View File

@ -2,9 +2,7 @@
import { User , Lock} from '@element-plus/icons-vue'
import {reactive, ref} from "vue";
import {login} from "@/net";
/*
导入路由
*/
import router from "@/router";
const formRef = ref()
@ -80,7 +78,7 @@ function userLogin(){
<span style="font-size: 13px ; color: gray">没有账户?</span>
</el-divider>
<div>
<el-button style="width: 270px" type="warning" plain>立即注册</el-button>
<el-button @click="router.push('/register')" style="width: 270px" type="warning" plain>立即注册</el-button>
</div>
</div>

84
my-project-frontend/src/views/welcome/RegisterPage.vue Normal file
View File

@ -0,0 +1,84 @@
<script setup>
import {reactive} from "vue";
import {EditPen, Lock, Message, User} from "@element-plus/icons-vue";
import router from "@/router";
const form = reactive({
username: '',
password: '',
password_repeat: '',
email: '',
code: ''
})
const rule = {
}
</script>
<template>
<div style="text-align: center;margin: 0 20px">
<div style="margin-top: 100px">
<div style="font-size: 25px; font-weight: bold">注册用户</div>
<div style="font-size: 14px ; color: gray">欢迎注册我们的学习平台,请在下方填写相关信息</div>
</div>
<div style="margin-top: 50px">
<el-form :model="form" :rule="rule">
<el-form-item>
<el-input v-model="form.username" maxlength="10" type="text" placeholder="用户名">
<template #prefix >
<el-icon><User/></el-icon>
</template>
</el-input>
</el-form-item>
<el-form-item>
<el-input v-model="form.password" maxlength="10" type="password" placeholder="密码">
<template #prefix >
<el-icon><Lock/></el-icon>
</template>
</el-input>
</el-form-item>
<el-form-item>
<el-input v-model="form.password_repeat" maxlength="10" type="password" placeholder="重复密码">
<template #prefix >
<el-icon><Lock/></el-icon>
</template>
</el-input>
</el-form-item>
<el-form-item>
<el-input v-model="form.email" maxlength="10" type="email" placeholder="电子邮件地址">
<template #prefix >
<el-icon><Message/></el-icon>
</template>
</el-input>
</el-form-item>
<el-form-item>
<el-row :gutter="10" style="width: 100%;">
<el-col :span="17">
<el-input v-model="form.code" maxlength="6" type="text" placeholder="请输入验证码">
<template #prefix>
<el-icon><EditPen/></el-icon>
</template>
</el-input>
</el-col>
<el-col :span="5">
<el-button type="success">获取验证码</el-button>
</el-col>
</el-row>
</el-form-item>
</el-form>
</div>
<div style="margin-top: 80px">
<el-button style="width: 270px" type="warning" plain>立即注册</el-button>
</div>
<div style="margin-top: 20px">
<span style="font-size: 15px;line-height: 15px;color: gray">已有账户?</span>
<el-link style="translate: 0 -1px" @click="router.push('/')">立即登录</el-link>
</div>
</div>
</template>
<style scoped>
</style>