文章目录

一、安装并引入 Element
- 1.安装 Element
- 2.引入 Element
二、优化登录页面
- 1.使用 Form 组件
- 2.添加样式
- 3.设置背景
- 4.完整代码

之前我们实现了登录功能，但不得不说登录页面实在是太简陋了。在这个看脸的社会，如果代码写的烂，界面也做得不好看，就真的没得救了。但是如果不是专职做 UI 设计，又没有必要浪费这么多时间在上面，所以我们需要借助一些工具来制作我们的页面。

Element - The world’s most popular Vue UI framework，你值得拥有。先看一下修改完的登录页面

当然，Element 不仅仅是界面这么简单，它对 Vue 又做了进一步的封装，可以简便地使用许多实用的功能。

一、安装并引入 Element

Element 的官方地址：https://element.eleme.cn/#/zh-CN

这一部分的内容在官方文档上都有体现，我只是照搬下来。在以后我们会经常使用 Element 提供的组件，大家要自己尝试查阅文档，这个是中文的，还是很好理解的。

1.安装 Element

根据官方文档的描述，在项目文件夹下，执行 npm i element-ui -S 即可

2.引入 Element

引入分为完整引入和按需引入两种模式，按需引入可以缩小项目的体积，这里我们选择完整引入。

根据文档，我们需要修改 src/main.js 为如下内容

import Vue from 'vue'
import App from './App'
import router from './router'
// 引入ElementUI
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'var axios = require('axios')
// 设置反向代理，前端请求默认发送到 http://localhost:8443/api
axios.defaults.baseURL = 'http://localhost:8443/api'
// 全局注册，之后可在其它组件中通过 this.$axios 发送数据
Vue.prototype.$axios = axios
Vue.config.productionTip = false
// Vue使用ElementUI
Vue.use(ElementUI)/* eslint-disable no-new */
new Vue({el: '#app',render: h => h(App),router,components: { App },template: '<App/>'
})

这样便完成了 Element 的引入。为了测试一下，我们打开 Login.vue，把最外层的 <div> 标签改为 <el-card>（下面是 <template> 内的完整代码）

  <el-card>用户名:&nbsp;<input type="text" v-model="loginForm.username" placeholder="请输入用户名"/><br><br>密&nbsp;&nbsp;&nbsp;&nbsp;码:&nbsp;<input type="password" v-model="loginForm.password" placeholder="请输入密码"/><br><br><button v-on:click="login">登录</button></el-card>

然后访问 http://localhost:8080/#/login ，查看效果

嗯，还是很丑，但是成功了。

二、优化登录页面

首先，让我们去掉这个清奇的 V ，打开 App.vue，把 <img src="./assets/logo.png"> 删掉即可。不过我一般喜欢先注释掉，确定没有影响了再删除。

1.使用 Form 组件

让我们来修改 Login.vue 的代码。原来是这样的

<template><el-card>用户名:&nbsp;<input type="text" v-model="loginForm.username" placeholder="请输入用户名"/><br><br>密&nbsp;&nbsp;&nbsp;&nbsp;码:&nbsp;<input type="password" v-model="loginForm.password" placeholder="请输入密码"/><br><br><button v-on:click="login">登录</button></el-card>
</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) {this.$router.replace({path: '/index'})}}).catch(failResponse => {})}}
}
</script>

为了设计界面，我们需要关注的地方是 <template> 标签内的 html 和 <style> 标签内的 css。登录框我们一般会用 Form 来做，打开 Element 的组件文档（http://element-cn.eleme.io/#/zh-CN/component/），发现它为我们提供了丰富的 Form 组件，我们可以点击“显示代码”，复制我们需要的部分。

不过这里好像并没有特别符合我们应用场景的表单，或者说这些都是比较复杂的，我们只需要其中的一小部分。把页面再往下拉，可以看到关于这个组件的属性、事件、方法等的文档，根据这个文档，我们可以自己去构建需要的表单。

首先，我们修改 <template> 里的代码如下

<template><el-form class="login-container" label-position="left"label-width="0px"><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-form-item style="width: 100%"><el-button type="primary" style="width: 100%;background: #505458;border: none" v-on:click="login">登录</el-button></el-form-item></el-form>
</template>

上面的代码应该很好理解，<el-form> 里面可以放置 <el-form-item>，<el-form-item> 里面再放置其它的内容，比如 <el-input>，关于 <el-input> 的属性，可以查阅 Input 的文档，<el-button> 亦然。

在开发前端的内容时，我们修改了代码，就可以对应地看到效果，而不用重启项目。我一般会把浏览器也开着，以便实时监测。修改完上面的内容，页面变成了这样

2.添加样式

为了进一步优化界面，我们为组件再添加一些样式，即在 Login.vue 的最后添加如下代码

<style>.login-container {border-radius: 15px;background-clip: padding-box;margin: 90px auto;width: 350px;padding: 35px 35px 15px 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>

刷新页面（Ctrl + F5），看起来顺眼多了

3.设置背景

最后，我们为这个单调的登录页面设置一个背景。我在网上找了这张图

可以把它保存下来，放在 src\assets 文件夹下，命名为 eva.jpg 在 build 项目时，这个文件夹里的图片会被自动转成 base64。也可以在这个文件夹里再新建文件夹，方便管理。

为了使用背景图片，我在标签的外又添加了一个父标签 <body>，id 设置为 poster，并在 <style> 中添加如下内容

<body id="poster"></body>

 #poster {background:url("../assets/eva.jpg") no-repeat;background-position: center;height: 100%;width: 100%;background-size: cover;position: fixed;}body{margin: 0px;}

这时候发现界面上方有一片空白，经过查找，发现问题出在 App.vue 里，把下面这句代码删除即可

OK，又一次大功告成了。

另外可以在 Login.vue 的 data 方法中设置输入框的默认值，省的每次进来都要再输一遍。

4.完整代码

最后附上 Login.vue 的完整代码，可以直接复制

<template><body id="poster"><el-form class="login-container" label-position="left"label-width="0px"><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-form-item style="width: 100%"><el-button type="primary" style="width: 100%;background: #505458;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: '123'},responseResult: []}},methods: {login () {this.$axios.post('/login', {username: this.loginForm.username,password: this.loginForm.password}).then(successResponse => {if (successResponse.data.code === 200) {this.$router.replace({path: '/index'})}}).catch(failResponse => {})}}}
</script><style>#poster {background:url("../assets/eva.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 15px 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>

至此，登录页面的开发似乎已经较为完善了，但其实还没有完，因为这个登录页面其实没有用，别人直接输入首页的网址，就可以绕过登录页面。为了让它发挥作用，我们还需要开发一个拦截器。

下一篇文章主要讲解以下内容：

一、前端路由的 hash 模式与 history 模式
二、history 模式下后端错误页面的配置
三、登录拦截的实现

为什么要在登录页面上废这么多篇幅呢？因为把这个页面做完，就差不多理解了项目的构成，之后的开发就可以把精力集中在业务功能的实现上了。之后的基本模式，就是前端开发组件、后端开发控制器，调试功能，做起来会很快。

Vue + Spring Boot 项目实战（六）：使用 Element 辅助前端开发相关推荐

Vue + Spring Boot 项目实战（七）：前端路由与登录拦截器
文章目录前言一.前端路由二.使用 History 模式三.后端登录拦截器 3.1. LoginController 3.2. LoginInterceptor 3.3. WebConfigur ...
Vue + Spring Boot 项目实战（六）：前端路由与登录拦截器
本篇目录前言一.前端路由二.使用 History 模式三.后端登录拦截器 1.LoginController 2.LoginInterceptor 3.WebConfigurer 4.效果检验 ...
Vue + Spring Boot 项目实战（十五）：动态加载后台菜单
重要链接: 「系列文章目录」「项目源码(GitHub)」本篇目录前言一.后端实现 1.表设计 2.pojo 3.菜单查询接口(树结构查询) 二.前端实现 1.后台页面设计 2.数据处理 3.添 ...
Vue + Spring Boot 项目实战（七）：导航栏与图书页面设计
本篇目录前言一.导航栏的实现 1.路由配置 2.使用 NavMenu 组件二.图书管理页面 1.LibraryIndex.vue 2.SideMenu.vue 3.Books.vue 前言之前 ...
Vue + Spring Boot 项目实战（十七）：后台角色、权限与菜单分配
重要链接: 「系列文章目录」「项目源码(GitHub)」本篇目录前言一.角色.权限分配 1.用户信息表与行数据获取 2.角色分配 3.权限分配二.菜单分配下一步前言有感于公司旁边的兰州 ...
Vue + Spring Boot 项目实战（四）：数据库的引入
这一篇的主要内容是引入数据库并实现通过数据库验证用户名与密码. 本篇目录一.引入数据库 1.安装数据库 2.使用 Navicat 创建数据库与表二.使用数据库验证登录 1.项目相关配置 2.登录控 ...
Vue + Spring Boot 项目实战（三）：前后端结合测试（登录页面开发）
前面我们已经完成了前端项目 DEMO 的构建,这一篇文章主要目的如下: 一.打通前后端之间的联系,为接下来的开发打下基础二.登录页面的开发(无数据库情况下) 本篇目录前言:关于开发环境一.后端项 ...
Vue + Spring Boot 项目实战（九）：核心功能的前端实现
本篇目录前言一.代码部分 1.EditForm.vue(新增) 2.SearchBar.vue(新增) 3.Books.vue(修改) 4.LibraryIndex.vue(修改) 5.SideM ...
Vue + Spring Boot 项目实战（二十一）：缓存的应用
重要链接: 「系列文章目录」「项目源码(GitHub)」本篇目录前言一.缓存:工程思想的产物二.Web 中的缓存 1.缓存的工作模式 2.缓存的常见问题三.缓存应用实战 1.Redis 与 ...
Vue + Spring Boot 项目实战（四）：前后端结合测试（登录页面开发）
前面我们已经完成了前端项目 DEMO 的构建,这一篇文章主要目的如下: ①打通前后端之间的联系,为接下来的开发打下基础 ②登录页面的开发(无数据库情况下) 文章目录一.后端项目创建 1.1. 项目/ ...

Vue + Spring Boot 项目实战（六）：使用 Element 辅助前端开发