Vue實現(xiàn)簡單登錄界面

更新時間：2022年06月19日 06:43:52 作者：5210丫

這篇文章主要為大家詳細(xì)介紹了Vue實現(xiàn)簡單登錄界面，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了Vue實現(xiàn)簡單登錄界面的具體代碼，供大家參考，具體內(nèi)容如下

實現(xiàn)：

界面實現(xiàn)
表單規(guī)則校驗
結(jié)合后臺 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{
? ? ? ? // 表單數(shù)據(jù)綁定
? ? ? ? loginForm: {
? ? ? ? ? username: 'admin',
? ? ? ? ? password: '123456'
? ? ? ? },
? ? ? ? // 檢驗規(guī)則
? ? ? ? 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=Message
Vue.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 = false
axios.defaults.baseURL=''
Vue.prototype.$http=axios
new Vue({
? router,
? render: h => h(App)
}).$mount('#app')

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: