你好,【程序职场】专注于:Spring Boot ,微服务 和 前端APP开发,闲暇之余一起聊聊职场规划,个人成长,还能带你一起探索 副业赚钱渠道,在提升技术的同时我们一起交流 敏捷流程 提高工作效率,从技术到管理一步步提升自我!
标签:一个执着的职场程序员!
上篇文章说到登录拦截器,讲到了前端和后端两种拦截器,可以不同情况使用,Spring Boot + Vue前后端分离(五)登录拦截器;本篇文章我们来说一下界面的渲染,系列第三篇我们做的登录页面实在是太烂了,所以我们本篇文章只说怎么做好界面效果,这里用到了Element组件库。
本文是Spring Boot + Vue前后端分离 系列的第六篇,了解前面的文章有助于更好的理解本文:
1.Spring Boot + Vue前后端分离(一)前端Vue环境搭建
2.Spring Boot + Vue前后端分离(二)前端Vue启动流程
3.Spring Boot + Vue前后端分离(三)实现登录功能
4.Spring Boot + Vue前后端分离(四)前端路由
5.Spring Boot + Vue前后端分离(五)登录拦截器
目录
(一).安装并且引入Element
(二).优化登录界面
(三).通过Cookies实现忘记密码
前言
上一篇大家都学习到了 登录拦截器,其实就是为了拦截恶意登录,或者在不登录情况下访问后台的其他功能,本文主要说一下 界面的渲染工作,在这个体验为王的时代,好的界面效果才能吸引人的第一感受,这里我们介绍一种很强大的组件库 Element ,来完善登录界面。
(一).安装并且引入Element
我们先来看 官网怎么说他们自己的: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'
// cookies
import VueCookies from 'vue-cookies'
// 设置反向代理,前端请求默认发送到 http://localhost:8082/
var axios = require('axios')
axios.defaults.baseURL = 'http://localhost:8082/req'
// 全局注册,之后可在其他组件中通过 this.$axios 发送数据
Vue.prototype.$axios = axios
Vue.config.productionTip = false
Vue.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 = this
if (this.loginForm.username == null) {
this.$message.warning('登录信息不能为空')
return
}
this.$axios
.post('/login', {
username: this.loginForm.username,
password: this.loginForm.password
})
.then(successResponse => {
if (successResponse.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.redirect
this.$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等操作。
vue-cookies https://www.cnblogs.com/s313139232/p/9341762.html
(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'
// cookies
import VueCookies from 'vue-cookies'
// 设置反向代理,前端请求默认发送到 http://localhost:8082/
var axios = require('axios')
axios.defaults.baseURL = 'http://localhost:8082/req'
// 全局注册,之后可在其他组件中通过 this.$axios 发送数据
Vue.prototype.$axios = axios
Vue.config.productionTip = false
Vue.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 = this
if (this.loginForm.username == null) {
this.$message.warning('登录信息不能为空')
return
}
this.$axios
.post('/login', {
username: this.loginForm.username,
password: this.loginForm.password
})
.then(successResponse => {
if (successResponse.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.redirect
this.$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了,敬请期待下篇。。。
作者:小小蒲公英