Vue如何实现简单登录界面

这篇文章主要介绍“Vue如何实现简单登录界面”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“Vue如何实现简单登录界面”文章能帮助大家解决问题。

实现：

• 界面实现

• 表单规则校验

• 结合后台 api 校验

• 提示消息

App.vue

<template>  <div id="app"><!--路由占位符 -->   <router-view></router-view>  </div></template><script>export default {  name: 'app'}</script><style></style>

登录页面login.vue

<template>   <div class="login_container">     <div class="login_box">      <div class="ava_box">        <img src="../assets/loGo.png" />      </div>      <!-- 账号 -->      <el-fORM :model="loginForm" ref="loginFormRef" :rules="loginFormRules" label-width="0px" class="login_form">        <el-form-item prop="username">          <el-input  v-model="loginForm.username"  prefix-icon="el-icon-user-solid"></el-input>        </el-form-item>        <!-- 密码 -->        <el-form-item prop="passWord">          <el-input   v-model="loginForm.password" show-password="true" prefix-icon="el-icon-lock"></el-input>        </el-form-item>         <!-- 按钮 -->        <el-form-item class="btns">          <el-button type="primary" @click="login" round>登录</el-button>          <!--      <el-button type="success" round>成功按钮</el-button> -->          <el-button type="info" @click="resetLoginForm" round>重置</el-button>        </el-form-item>      </el-form>     </div>   </div></template> <script>  export default {    data(){      return{        // 表单数据绑定        loginForm: {          username: 'admin',          password: '123456'        },        // 检验规则        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=>{            console.log(valid);            if(!valid) return;             const {data: res}= await this.$Http.post('login',this.loginForm);             console.log(res)             if(res.meta.status!=200) return this.$message.error('登录失败')            this.$message.success('登录成功')         });      }    }  }</script><style lang="less" scoped>   .login_container {    background-color: #2b4b6b;    height: 100%;  }   .login_box {    height: 300px;    width: 450px;    background-color: #fff;    border-radius: 3px;    position: absolute;    left: 50%;    top: 50%;    // 横轴，纵轴    transform: translate(-50%, -50%);     .ava_box {      height: 130px;      width: 130px;      border: 1px solid #eee;      border-radius: 50%;      padding: 10px;      box-shadow: 0 0 10px #DDD;      position: absolute;      left: 50%;      transform: translate(-50%, -50%);      background-color: #fff;       img {        width: 100%;        height: 100%;        border-radius: 50%;        background-color: #eee;      }    }    .btns{      display: flex;      justify-content: flex-end;     }    .login_form{      position: absolute;      bottom: 0px;      width: 100%;      padding: 0 20px;      box-sizing: border-box;     }  }</style>

element.js

import Vue from 'vue'import { Button, Form, FormItem, Input,Message } from 'element-ui'Vue.prototype.$message=MessageVue.use(Button)Vue.use(Form)Vue.use(FormItem)Vue.use(Input)Vue.use(Message)

main.js

import Vue from 'vue'import App from './App.vue'import router from './router'import './plugins/element.js'import './assets/CSS/global.css'import axiOS from 'axios'Vue.config.productionTip = falseaxios.defaults.baseURL=''Vue.prototype.$http=axiosnew Vue({  router,  render: h => h(App)}).$mount('#app')

关于“Vue如何实现简单登录界面”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注编程网精选频道，小编每天都会为大家更新不同的知识点。