Spring Boot + Vue前后端分离(六)使用Element渲染登录界面

标签: SpringBoot+Vue

你好,欢迎来到 【程序职场】 ,这里有你需要的技术提升,职场规划,个人成长,副业发展 等文章。

和更多小伙伴 一起学习,一起进步。

上篇文章说到登录拦截器,讲到了前端和后端两种拦截器,可以不同情况使用,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'// 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 = 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'// 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 = 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了,敬请期待下篇。。。​​​​​​​

加微信(mmlz6879),回复「程序职场」或公众号右下角点击「撩我   ->  加群」拉你进讨论群和众多爱学习的小伙伴一起学习。

作者:小小蒲公英
公众号:程序职场
微信:mmlz6879
简介:专注于 Spring Boot ,微服务,前端APP,副业赚钱,职场规划,运营管理,个人成长 等,关注后回复   学习资料 ,领取为你精心准备的学习干货!
一个执着的职场程序员
资料: 可以在公众号后台回复 “学习资料”  获得技能提升的干货资料。

原文链接:加载失败,请重新获取