登入頁面簡單的實現了，不過沒有對頁面進行美化一下，今天對頁面進行一下美化。
elementui已經整合進來了。所以就直接進行使用
使用 Form 元件
裡面都太複雜了，隨便參考一個
<el-form class="login-container" > <h3 class="login_title">後臺登入</h3> <el-form-item> <el-input placeholder="賬號" v-model="loginForm.username" type="text" clearable/> </el-form-item> <el-form-item> <el-input placeholder="請輸入密碼" v-model="loginForm.password" type="password" show-password></el-input> </el-form-item> <el-form-item style="width: 100%"> <el-button type="primary" v-on:click="login" style="width: 100%">登入</el-button> </el-form-item> {{$store.state.user.userDetail.userId}} </el-form>上面的程式碼，<el-form> 裡面放置 <el-form-item>，<el-form-item> 裡面再放置其它的內容，比如 <el-input>，關於 <el-input> 和<el-button> 的屬性，檢視官方文件，
在簡單的新增一下樣式
<style> .login-container{ width: 460px; border-radius: 15px; background-clip: padding-box; border:1px solid #f3f3f3; margin: 90px auto; padding: 35px 35px 15px 35px; box-shadow: 0 0 25px #cac6c6; } .login_title { margin: 0px auto 40px auto; text-align: center; font-size: 18px; color: #505458; font-family: "微軟雅黑 Light"; }</style>這樣登入頁面的效果就展示出來了
Vuex的使用，先看下目錄結構
新建store檔案下，module分模組存放 store.js進行集合存放，然後提供使用
user.js
var state= { userDetail:{ userId:'test' }}var mutations={ setUser(state,user){ state.userDetail = user; }}export default { state, mutations}store.js
import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)import user from './module/user'const store = new Vuex.Store({ modules: { user }})export default storemain.js進行引用
import Vue from 'vue'import App from './App.vue'import './plugins/element.js'import store from './store/store'import router from './router/index' //引入路由配置var axios = require('axios')axios.defaults.baseURL = 'http://localhost:8080/api'// 全域性註冊，之後可在其他元件中通過 this.$axios 傳送資料Vue.prototype.$axios = axiosVue.config.productionTip = falsenew Vue({ render: h => h(App), router, store,}).$mount('#app')login.vue進行引用
<template> <el-form class="login-container" > <h3 class="login_title">後臺登入</h3> <el-form-item> <el-input placeholder="賬號" v-model="loginForm.username" type="text" clearable/> </el-form-item> <el-form-item> <el-input placeholder="請輸入密碼" v-model="loginForm.password" type="password" show-password></el-input> </el-form-item> <el-form-item style="width: 100%"> <el-button type="primary" v-on:click="login" style="width: 100%">登入</el-button> </el-form-item> {{$store.state.user.userDetail.userId}} </el-form></template><script> export default { name: 'Login', data () { return { loginForm: { username: '', password: '' }, responseResult: [] } }, methods: { login () { this.$axios .post('/login', { username: this.loginForm.username, password: this.loginForm.password }) .then(successResponse => { if (successResponse.data.code === 200) { alert(successResponse.data.userId); this.$store.commit('setUser',{'userId':successResponse.data.userId}) this.$router.replace({path: '/home'}) } }) .catch(failResponse => { console.log(failResponse) }) } } }</script><style> .login-container{ width: 460px; border-radius: 15px; background-clip: padding-box; border:1px solid #f3f3f3; margin: 90px auto; padding: 35px 35px 15px 35px; box-shadow: 0 0 25px #cac6c6; } .login_title { margin: 0px auto 40px auto; text-align: center; font-size: 18px; color: #505458; font-family: "微軟雅黑 Light"; }</style>vuex其實在這裡是可以不用的，不過因為以後可能會用到，所以就學習了一下， 寫了進來。
登入目前就完成了。
最新評論