vue实现登录注册

目录

一、登录页面

二、注册页面

三、配置路由

---

一、登录页面

<template><div class="login_container" style="background-color: rgb(243,243,243);height: 93.68vh;background-image: url(https://ts1.cn.mm.bing.net/th/id/R-C.f878c96c4179c501a6081ac25291be12?rik=N5jjWCVkYF1qTA&riu=http%3a%2f%2fimg95.699pic.com%2fphoto%2f40129%2f2839.jpg_wh300.jpg!%2ffh%2f300%2fquality%2f90&ehk=dcEzH%2b5aANDDgaScjN2wiRQ8feXvQvU6bSS4hZrmVNM%3d&risl=&pid=ImgRaw&r=0&sres=1&sresct=1
);background-size: 1880px 1100px"><div class="login_box"><!-- 头像 --><div class="avatar_box"><img src="../assets/img/tomato.png" alt=""></div><!-- 登录表单 --><el-form ref="loginFormRef" :model="loginForm" :rules="loginFormRules" class="login_form"><!-- 用户名 --><el-form-item prop="username"><el-input v-model="loginForm.username" prefix-icon="el-icon-user-solid"placeholder="用户名/邮箱/学号"></el-input></el-form-item><!-- 密码 --><el-form-item prop="password"><el-input v-model="loginForm.password" prefix-icon="el-icon-s-goods" type="password"placeholder="密码"></el-input></el-form-item><!-- 按钮 --><el-form-item class="btns"><el-button @click="login" type="primary">用户登录</el-button><el-button @click="toRegister">用户注册</el-button><el-button @click="resetLoginForm">管理员登录</el-button></el-form-item></el-form></div></div></template>
<script>export default {data() {return {loginForm: {username: '',password: ''},loginFormRules: {username: [{required: true, message: '请输入登录信息', trigger: 'blur'},{min: 3, max: 8, message: '长度在 3 到 8 个字符', trigger: 'blur'}],password: [{required: true, message: '请输入密码', trigger: 'blur'},{min: 6, max: 12, message: '长度在 6 到 12 个字符', trigger: 'blur'}]}}},methods: {resetLoginForm() {this.$refs.loginFormRef.resetFields();},login() {this.$refs.loginFormRef.validate(async valid => {if (!valid) return;// const {data: res} = await this.$http.post('login', this.loginForm);// if (res.status != 200)//   return this.$message.error("登录失败...");  //登录失败弹窗// this.$message.success("登录成功");// window.sessionStorage.setItem('token', res.data.token);this.$router.push('/home');})},toRegister:function(){this.$router.push('/register');}}
}</script><style lang="less" scoped>
.login_container {background-color: rgb(232, 234, 242);height: 100%;
}.login_box {width: 500px;height: 300px;background-color: #fff;box-shadow: 0 0 5px rgb(219, 219, 219);border-radius: 5px;//将登录框定位到中间position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);.avatar_box {height: 130px;width: 130px;border: 1px solid #eee;border-radius: 50%;padding: 10px;box-shadow: 0 0 10px rgb(165, 165, 165);position: absolute;left: 50%;transform: translate(-50%, -50%);background-color: #fff;img {width: 100%;height: 100%;border-radius: 50%;}}
}.btns {display: flex;justify-content: end;
}.login_form {position: absolute;bottom: 0;width: 100%;padding: 0 40px;box-sizing: border-box;
}.el-button--primary {color: #FFF;background-color: rgb(6, 101, 208);border-color: rgb(6, 101, 208);
}.el-button--primary:focus,
.el-button--primary:hover {background: rgb(5, 83, 171);border-color: rgb(5, 83, 171);color: #fff;
}.el-button--primary.is-active,
.el-button--primary:active {background: rgb(6, 101, 208);border-color: rgb(6, 101, 208);color: #fff;
}
</style>

二、注册页面

<template><div class="login-wrap" style="background-color: rgb(243,243,243);height: 93.68vh;background-image: url(https://ts1.cn.mm.bing.net/th/id/R-C.f878c96c4179c501a6081ac25291be12?rik=N5jjWCVkYF1qTA&riu=http%3a%2f%2fimg95.699pic.com%2fphoto%2f40129%2f2839.jpg_wh300.jpg!%2ffh%2f300%2fquality%2f90&ehk=dcEzH%2b5aANDDgaScjN2wiRQ8feXvQvU6bSS4hZrmVNM%3d&risl=&pid=ImgRaw&r=0&sres=1&sresct=1
);background-size: 1880px 1100px"><el-form class="login-container"><h1 class="title">用户注册</h1><el-form-item><el-input type="text" placeholder="用户账号" v-model="username" autocomplete="off"></el-input></el-form-item><el-form-item><el-input type="password" placeholder="用户密码" v-model="password" autocomplete="off"></el-input></el-form-item><el-form-item><el-input type="password" placeholder="确认密码" v-model="password1" autocomplete="off"></el-input></el-form-item><el-form-item><el-button type="primary" @click="doRegister" style="width: 48%;">注册</el-button><el-button type="primary" @click="toLogin" style="width: 48%;">返回登录</el-button></el-form-item></el-form></div></template><script>export default {name: 'Login',data: function() {return {username: '',password: '',password1:''}},methods: {doRegister:function(){},toLogin:function(){this.$router.push('/');}}}</script><style>.login-container {border-radius: 10px;margin: 0px auto;width: 350px;padding: 30px 35px 15px 35px;background: #fff;border: 1px solid #eaeaea;text-align: left;box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.1);position:absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);}.title {margin: 0px auto 40px auto;text-align: center;color: #505458;}</style>

三、配置路由

在router的index.js中写路由配置

import Vue from 'vue'
import VueRouter from 'vue-router'Vue.use(VueRouter)const routes = [{path: '/login',name:'Login',component:()=>import('../components/Login')},{path:'/',redirect:'/login'},{path:'/register',name:'Register',component:()=>import('../components/Register')}]const router = new VueRouter({mode: 'history',base: process.env.BASE_URL,routes
})export default router