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

时间  2020-01-13 标签 vue spring boot 项目 实战 五 使用 element 辅助 前端 开发

以前咱们实现了登陆功能，但不得不说登陆页面实在是太简陋了。在这个看脸的社会，若是代码写的烂，界面也作得很差看，就真的没得救了。可是若是不是专职作 UI 设计，又没有必要浪费这么多时间在上面，因此咱们须要借助一些工具来制做咱们的页面。javascript

Element - The world’s most popular Vue UI framework，你值得拥有。此时我特别想高喊一句 “PHP 是世界上最好的语言”，如今搜啥啥都说本身是最好的，输什么不能输气势啊。先看一下修改完的登陆页面
在这里插入图片描述
固然，Element 不只仅是界面这么简单，它对 Vue 又作了进一步的封装，能够简便地使用许多实用的功能。css

（小声比比）白卷，是咱们全村最好的图书管理系统。html

本篇目录

1、安装并引入 Element

Element 的官方地址为 http://element-cn.eleme.io/#/zh-CN前端

这一部分的内容在官方文档上都有体现，我只是照搬下来。在之后咱们会常用 Element 提供的组件，你们要本身尝试查阅文档，这个是中文的，仍是很好理解的。vue

1.安装 Element

根据官方文档的描述，在项目文件夹下，执行 npm i element-ui -S 便可
在这里插入图片描述java

2.引入 Element

引入分为完整引入和按需引入两种模式，按需引入能够缩小项目的体积，这里咱们选择完整引入。ios

根据文档，咱们须要修改 main.js 为以下内容web

import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

var axios = require('axios')
axios.defaults.baseURL = 'http://localhost:8443/api'
Vue.prototype.$axios = axios
Vue.config.productionTip = false

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>
      用户名:<input type="text" v-model="loginForm.username" placeholder="请输入用户名"/>
      <br><br>
      密码： <input type="password" v-model="loginForm.password" placeholder="请输入密码"/>
      <br><br>
      <button v-on:click="login">登陆</button>
  </el-card>

而后访问 http://localhost:8080/#/login ，查看效果
在这里插入图片描述
嗯，仍是很丑，可是成功了。npm

2、优化登陆页面

首先，让咱们去掉这个清奇的 V ，打开 App.vue，把 <img src="./assets/logo.png"> 删掉便可。不过我通常喜欢先注释掉，肯定没有影响了再删除。
在这里插入图片描述

1.使用 Form 组件

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

<template>
  <el-card>
      用户名:<input type="text" v-model="loginForm.username" placeholder="请输入用户名"/>
      <br><br>
      密码： <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。也能够在这个文件夹里再新建文件夹，方便管理。

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

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

之因此还要再写一个 body 的样式，是为了覆盖掉浏览器（用户代理）的默认样式。添加后保存，则能够看到以下效果
在这里插入图片描述
这时候发现界面上方有一片空白，通过查找，发现问题出在 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>

至此，登陆页面的开发彷佛已经较为完善了，但其实尚未完，由于这个登陆页面其实没有用，别人直接输入首页的网址，就能够绕过登陆页面。为了让它发挥做用，咱们还须要开发一个拦截器。

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

1、前端路由的 hash 模式与 history 模式
2、history 模式下后端错误页面的配置
3、登陆拦截的实现

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

查看系列文章目录：
https://learner.blog.csdn.net/article/details/88925013

上一篇：Vue + Spring Boot 项目实战（四）：数据库的引入

下一篇： Vue + Spring Boot 项目实战（六）：前端路由与登陆拦截器

联系我们 沪ICP备2021010478号-7