Spring Boot + Vue先後端分離（六）使用Element渲染登陸界面

時間 2021-08-14

標籤 php css html 前端 vue webpack ios git github web 欄目 Spring 简体版

原文原文鏈接

上篇文章說到登陸攔截器，講到了前端和後端兩種攔截器，能夠不一樣狀況使用，Spring Boot + Vue先後端分離（五）登陸攔截器；本篇文章咱們來講一下界面的渲染，系列第三篇咱們作的登陸頁面實在是太爛了，因此咱們本篇文章只說怎麼作好界面效果，這裏用到了Element組件庫。php

本文是Spring Boot + Vue先後端分離系列的第六篇，瞭解前面的文章有助於更好的理解本文：css

1.Spring Boot + Vue先後端分離（一）前端Vue環境搭建
2.Spring Boot + Vue先後端分離（二）前端Vue啓動流程
3.Spring Boot + Vue先後端分離（三）實現登陸功能
4.Spring Boot + Vue先後端分離（四）前端路由
5.Spring Boot + Vue先後端分離（五）登陸攔截器html

目錄前端

(一).安裝而且引入Elementvue

(二).優化登陸界面webpack

(三).經過Cookies實現忘記密碼
ios

前言git

上一篇你們都學習到了登陸攔截器，其實就是爲了攔截惡意登陸，或者在不登陸狀況下訪問後臺的其餘功能，本文主要說一下界面的渲染工做，在這個體驗爲王的時代，好的界面效果才能吸引人的第一感覺，這裏咱們介紹一種很強大的組件庫 Element ，來完善登陸界面。github

(一).安裝而且引入Elementweb

咱們先來看官網怎麼說他們本身的：Element，一套爲開發者、設計師和產品經理準備的基於 Vue 2.0 的桌面端組件庫

我都一一看了一下提供的這些組件，真的很實用，不須要咱們作太多，直接就能夠複製來用。

說這麼多，仍是本身去看比較實在，下面咱們就來講一下怎麼安裝和引用Element。

(1) 安裝

安裝很簡單，和安裝其餘同樣，在項目根目錄下執行命令行：npm i element-ui -S

(2)引入Element

引入也很簡單了，須要在main.js 文件中引入。

你能夠引入整個 Element，或是根據須要僅引入部分組件。咱們先介紹如何引入完整的 Element。

在 main.js 中寫入如下內容：

// The Vue build version to load with the `import` command// (runtime-only or standalone) has been set in webpack.base.conf with an alias.import Vue from 'vue'import App from './App'import router from './router'import store from './store'import ElementUI from 'element-ui'import 'element-ui/lib/theme-chalk/index.css'// cookiesimport VueCookies from 'vue-cookies'// 設置反向代理，前端請求默認發送到 http://localhost:8082/var axios = require('axios')axios.defaults.baseURL = 'http://localhost:8082/req'// 全局註冊，以後可在其餘組件中經過 this.$axios 發送數據Vue.prototype.$axios = axiosVue.config.productionTip = falseVue.use(ElementUI)Vue.use(VueCookies)
router.beforeEach((to, from, next) => {if (to.meta.requireAuth) {if (store.state.user.username) {next()} else {next({path: 'login',query: {redirect: to.fullPath}})}} else {next()}})
/* eslint-disable no-new */new Vue({el: '#app',render: h => h(App),router,store,components: { App },template: '<App/>'})

import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

上面經過這兩行引入了 Element ，注意若是要引入樣式須要單獨引入，或者參考官網文檔

https://element.eleme.cn/#/zh-CN/component/quickstart

當咱們引入成功後，就可使用它的對應標籤了好比：el-form，el-form-item

添加後界面效果會有變化，可是仍是巨醜。

(二).優化登陸界面

上面作好了組件的鋪墊，如今咱們來優化一下咱們以前作的醜到爆的登陸頁面。

我直接上代碼Login.vue的文件。

<template><body id="poster"><el-form class="login-container" label-position="left"label-width="0px" ref="loginForm" :model="loginForm" :rules="loginRules"><h3 class="login_title">書圈後臺管理系統</h3><el-form-item><el-input type="text" v-model="loginForm.username"auto-complete="off" placeholder="帳號"></el-input></el-form-item><el-form-item><el-input type="password" v-model="loginForm.password"auto-complete="off" placeholder="密碼"></el-input></el-form-item><el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;right: 130px">記住密碼</el-checkbox><el-form-item style="width: 100%"><el-button type="primary" style="width: 100%;background: #707070;border: none" v-on:click="login">登陸</el-button></el-form-item></el-form></body></template><script>export default {name: 'Login',data () {return {loginForm: {username: 'admin',password: 'admin',rememberMe: false},loading: false,responseResult: []}},created () {this.getCookie()},methods: {getCookie () {const username = this.$cookies.get('username')const password = this.$cookies.get('password')const rememberMe = this.$cookies.get('rememberMe')this.loginForm = {username: username === undefined ? this.loginForm.username : username,password: password === undefined ? this.loginForm.password : password,rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)}},login () {var _this = thisif (this.loginForm.username == null) {this.$message.warning('登陸信息不能爲空')return}this.$axios.post('/login', {username: this.loginForm.username,password: this.loginForm.password}).then(succe***esponse => {if (succe***esponse.data.code === 200) {if (_this.loginForm.rememberMe) {// this.$cookies.set(keyName, time)_this.$cookies.set('username', this.loginForm.username, { expires: 30 })_this.$cookies.set('password', this.loginForm.password, { expires: 30 })_this.$cookies.set('rememberMe', this.loginForm.rememberMe, { expires: 30 })} else {_this.$cookies.remove('username')_this.$cookies.remove('password')_this.$cookies.remove('rememberMe')}
// var data = this.loginForm_this.$store.commit('login', _this.loginForm)var path = this.$route.query.redirectthis.$router.replace({path: path === '/' || path === undefined ? '/index' : path})} else {this.$message.warning('登陸失敗！')}}).catch(failResponse => {})}}}</script><style>#poster {background:url("../assets/image/login-background.jpg") no-repeat;background-position: center;height: 100%;width: 100%;background-size: cover;position: fixed;}body{margin: 0px;}.login-container {border-radius: 15px;background-clip: padding-box;margin: 90px auto;width: 350px;padding: 35px 35px 35px 35px;background: #fff;border: 1px solid #eaeaea;box-shadow: 0 0 25px #cac6c6;}
.login_title {margin: 0px auto 40px auto;text-align: center;color: #505458;}
.el-login-footer {height: 40px;line-height: 40px;position: fixed;bottom: 0;width: 100%;text-align: center;color: #fff;font-family: Arial;font-size: 12px;letter-spacing: 1px;}</style>

1，對比以前的登陸界面，咱們修改的地方是 <template> 標籤內的 html 和 <style> 標籤內的 css。

2，登陸框通常會用 Form 來作，打開 Element 的組件文檔（http://element-cn.eleme.io/#/zh-CN/component/），發現它爲咱們提供了豐富的 Form 組件，咱們能夠點擊「顯示代碼」，複製咱們須要的部分。

咱們這裏經過<el-form> 和 <el-form-item> 標籤完成了一個登陸界面。

具體表單效果和代碼能夠直接借鑑官網的：

3，上面的代碼很好理解，<el-form> 裏面能夠放置 <el-form-item>和el-checkbox

，<el-form-item> 裏面再放置其它的內容，好比 <el-input>，<el-button>，這裏面的有關標籤的屬性，能夠查閱官網文檔 https://element.eleme.cn/#/zh-CN/component。

上面說了修改 <template>中的標籤實現佈局頁面，可是全部的這些都須要樣式的控制，咱們添加了有關的樣式：

<style>#poster {background:url("../assets/image/login-background.jpg") no-repeat;background-position: center;height: 100%;width: 100%;background-size: cover;position: fixed;}body{margin: 0px;}.login-container {border-radius: 15px;background-clip: padding-box;margin: 90px auto;width: 350px;padding: 35px 35px 35px 35px;background: #fff;border: 1px solid #eaeaea;box-shadow: 0 0 25px #cac6c6;}
.login_title {margin: 0px auto 40px auto;text-align: center;color: #505458;}</style>

解釋：
1，body 樣式，是對標籤body的樣式設置，頁面距離全部邊框的距離爲0，

2，poster 爲設置id爲 poster 的樣式添加背景圖，position: fixed;是位置設置

3，其餘不用多說了，就是輸入框的位置和標題的位置樣式設置

4，記住密碼的樣式在標籤的屬性中添加了

界面效果：

看起來是否是舒服多了，背景圖還挺不錯吧，這個是借鑑別人的，圖好難找啊啊啊啊

(三).經過Cookies實現忘記密碼

在咱們操做中習慣記住登陸的密碼，選擇記住密碼會記住登陸成功後的，帳號和密碼，下次再進入登陸界面的時候，這些信息會填充。無需再次輸入。

這裏咱們用到了vue-cookies 組件。

你們能夠看這篇文章中的使用，咱們這裏會講到引入，存儲，讀取，移除 cookies等操做。

(1) 引入

引入以前須要安裝該組件，在項目根目錄輸入命令行：npm install vue-cookies --save

引入操做很簡單，打開 main.js文件，添加下面兩行代碼。便可引入。。。

import VueCookies from 'vue-cookies'

Vue.use(VueCookies)

// The Vue build version to load with the `import` command// (runtime-only or standalone) has been set in webpack.base.conf with an alias.import Vue from 'vue'import App from './App'import router from './router'import store from './store'import ElementUI from 'element-ui'import 'element-ui/lib/theme-chalk/index.css'// cookiesimport VueCookies from 'vue-cookies'// 設置反向代理，前端請求默認發送到 http://localhost:8082/var axios = require('axios')axios.defaults.baseURL = 'http://localhost:8082/req'// 全局註冊，以後可在其餘組件中經過 this.$axios 發送數據Vue.prototype.$axios = axiosVue.config.productionTip = falseVue.use(ElementUI)Vue.use(VueCookies)
router.beforeEach((to, from, next) => {if (to.meta.requireAuth) {if (store.state.user.username) {next()} else {next({path: 'login',query: {redirect: to.fullPath}})}} else {next()}})
/* eslint-disable no-new */new Vue({el: '#app',render: h => h(App),router,store,components: { App },template: '<App/>'})

(2) 獲取信息賦值

getCookie () {const username = this.$cookies.get('username')const password = this.$cookies.get('password')const rememberMe = this.$cookies.get('rememberMe')this.loginForm = {username: username === undefined ? this.loginForm.username : username,password: password === undefined ? this.loginForm.password : password,rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)}},

(3)添加和移除

if (_this.loginForm.rememberMe) {// this.$cookies.set(keyName, time)_this.$cookies.set('username', this.loginForm.username, { expires: 30 })_this.$cookies.set('password', this.loginForm.password, { expires: 30 })_this.$cookies.set('rememberMe', this.loginForm.rememberMe, { expires: 30 })} else {_this.$cookies.remove('username')_this.$cookies.remove('password')_this.$cookies.remove('rememberMe')            }

判斷選擇狀態來操做，若是選擇了記住密碼將輸入信息存儲cookies中，若是是沒有選擇記住密碼，移除cookies中信息。

好了最後提供一下登陸界面的完整代碼：

<template><body id="poster"><el-form class="login-container" label-position="left"label-width="0px" ref="loginForm" :model="loginForm" :rules="loginRules"><h3 class="login_title">書圈後臺管理系統</h3><el-form-item><el-input type="text" v-model="loginForm.username"auto-complete="off" placeholder="帳號"></el-input></el-form-item><el-form-item><el-input type="password" v-model="loginForm.password"auto-complete="off" placeholder="密碼"></el-input></el-form-item><el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;right: 130px">記住密碼</el-checkbox><el-form-item style="width: 100%"><el-button type="primary" style="width: 100%;background: #707070;border: none" v-on:click="login">登陸</el-button></el-form-item></el-form></body></template><script>export default {name: 'Login',data () {return {loginForm: {username: 'admin',password: 'admin',rememberMe: false},loading: false,responseResult: []}},created () {this.getCookie()},methods: {getCookie () {const username = this.$cookies.get('username')const password = this.$cookies.get('password')const rememberMe = this.$cookies.get('rememberMe')this.loginForm = {username: username === undefined ? this.loginForm.username : username,password: password === undefined ? this.loginForm.password : password,rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)}},login () {var _this = thisif (this.loginForm.username == null) {this.$message.warning('登陸信息不能爲空')return}this.$axios.post('/login', {username: this.loginForm.username,password: this.loginForm.password}).then(succe***esponse => {if (succe***esponse.data.code === 200) {if (_this.loginForm.rememberMe) {// this.$cookies.set(keyName, time)_this.$cookies.set('username', this.loginForm.username, { expires: 30 })_this.$cookies.set('password', this.loginForm.password, { expires: 30 })_this.$cookies.set('rememberMe', this.loginForm.rememberMe, { expires: 30 })} else {_this.$cookies.remove('username')_this.$cookies.remove('password')_this.$cookies.remove('rememberMe')}
// var data = this.loginForm_this.$store.commit('login', _this.loginForm)var path = this.$route.query.redirectthis.$router.replace({path: path === '/' || path === undefined ? '/index' : path})} else {this.$message.warning('登陸失敗！')}}).catch(failResponse => {})}}}</script><style>#poster {background:url("../assets/image/login-background.jpg") no-repeat;background-position: center;height: 100%;width: 100%;background-size: cover;position: fixed;}body{margin: 0px;}.login-container {border-radius: 15px;background-clip: padding-box;margin: 90px auto;width: 350px;padding: 35px 35px 35px 35px;background: #fff;border: 1px solid #eaeaea;box-shadow: 0 0 25px #cac6c6;}
.login_title {margin: 0px auto 40px auto;text-align: center;color: #505458;}</style>

源碼連接：https://github.com/ProceduralZC/bookcircle

好了，登陸攔截器是否是很簡單，快快用起來本篇到這裏就ok了，敬請期待下篇。。。