目录
一、登录页面
html
<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>
二、注册页面
html
<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中写路由配置
javascript
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