五 Vue學習 首頁學習
阿新 • • 發佈:2018-04-06
mini borde ret type tle UC ucc 3D sco
首頁: http://localhost:8002/#/, 登錄頁面如下:
index.js文件中如下的路由配置,轉過去看login.vue是如何實現的。
const routes = [
{
path: ‘/‘,
component: login
},
(這裏一個問題: login.vue是如何與index.xml整到一起的呢:
login作為路由在Router中定義,而在App.vue中Router是參數,這樣login就是App.vue的路由了; App.vue和index.html已經綁定了,並且在App.vue的模板中又又有<Router-View>標簽,所以就可以在index.html中看到login的內容了。)
login.vue代碼如下:
<section>: HTML5中的新標簽,定義了文檔的某個區域。比如章節、頭部、底部或者文檔的其他區域。
v-show=
"true/false
: VUE元素的隱藏和顯示;
el-form: element的表單
rules: element-UI組件定義的規則,對規則進行校驗,如果不滿足,會有相應的提示信息等,其規則定義在下面:
rules: { username: [ { required:true, message: ‘請輸入用戶名‘, trigger: ‘blur‘ }, // 定義了username必填,提示的信息,以及觸發條件 ], password: [ { required: true, message: ‘請輸入密碼‘, trigger: ‘blur‘ } ], },
ref: 表示是el-form的別名,或者叫引用,供其他地方使用:
如下的代碼,在提交表單的時候,用的就是ref指定的名字。
<el-form-item> <el-button type="primary" @click="submitForm(‘loginForm‘)" class="submit_btn">登陸</el-button> </el-form-item>
placeholder:
v-if: 指令是條件渲染指令,它根據表達式的真假來刪除和插入.
v-for: v-for指令基於一個數組渲染一個列表;
v-bind: 和某個值綁定
v-on : v-on指令用於給監聽DOM事件;
<template> <div class="login_page fillcontain"> <!--<transition name="form-fade" mode="in-out">--> <section class="form_contianer" v-show="showLogin"> <div class="manage_tip"> <p>檔案管理系統</p> </div> <el-form :model="loginForm" :rules="rules" ref="loginForm"> <el-form-item prop="username"> <el-input v-model="loginForm.username" placeholder="用戶名"><span>dsfsf</span></el-input> </el-form-item> <el-form-item prop="password"> <el-input type="password" placeholder="密碼" v-model="loginForm.password"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm(‘loginForm‘)" class="submit_btn">登陸</el-button> </el-form-item> </el-form> <!--<p class="tip">溫馨提示:</p>--> <!--<p class="tip">未登錄過的新用戶,自動註冊</p>--> <!--<p class="tip">註冊過的用戶可憑賬號密碼登錄</p>--> </section> <!--</transition>--> </div> </template> <script> import {login, getAdminInfo} from ‘@/api/getData‘ import {mapActions, mapState} from ‘vuex‘ export default { data(){ return { loginForm: { username: ‘‘, password: ‘‘, }, rules: { username: [ { required: true, message: ‘請輸入用戶名‘, trigger: ‘blur‘ }, ], password: [ { required: true, message: ‘請輸入密碼‘, trigger: ‘blur‘ } ], }, showLogin: false, } }, mounted(){ this.showLogin = true; if (!this.adminInfo.id) { this.getAdminData() } }, computed: { ...mapState([‘adminInfo‘]), }, methods: { ...mapActions([‘getAdminData‘]), async submitForm(formName) { this.$refs[formName].validate(async (valid) => { if (valid) { const res = await login({user_name: this.loginForm.username, password: this.loginForm.password}) if (res.status == 1) { this.$message({ type: ‘success‘, message: ‘登錄成功‘ }); this.$router.push(‘manage‘) }else{ this.$message({ type: ‘error‘, message: res.message }); } } else { this.$notify.error({ title: ‘錯誤‘, message: ‘請輸入正確的用戶名密碼‘, offset: 100 }); return false; } }); }, } // watch: { // adminInfo: function (newValue){ // if (newValue.id) { // this.$message({ // type: ‘success‘, // message: ‘檢測到您之前登錄過,將自動登錄‘ // }); // this.$router.push(‘manage‘) // } // } // } } </script> <style lang="less" scoped> @import ‘../style/mixin‘; .login_page{ background-color: #324057; } .manage_tip{ position: absolute; width: 100%; top: -100px; left: 0; p{ font-size: 34px; color: #fff; } } .form_contianer{ .wh(320px, 210px); .ctp(320px, 210px); padding: 25px; border-radius: 5px; text-align: center; background-color: #fff; .submit_btn{ width: 100%; font-size: 16px; } } .tip{ font-size: 12px; color: red; } .form-fade-enter-active, .form-fade-leave-active { transition: all 1s; } .form-fade-enter, .form-fade-leave-active { transform: translate3d(0, -50px, 0); opacity: 0; } </style>
五 Vue學習 首頁學習