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