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了，敬请期待下篇。。。