之前我們實現了登錄功能，但不得不說登錄頁面實在是太簡陋了。在這個看臉的社會，如果代碼寫的爛，界面也做得不好看，就真的沒得救了。但是如果不是專職做 UI 設計，又沒有必要浪費這麼多時間在上面，所以我們需要藉助一些工具來製作我們的頁面。

Element - The world’s most popular Vue UI framework，你值得擁有。此時我特別想高喊一句 “PHP 是世界上最好的語言”，現在搜啥啥都說自己是最好的，輸什麼不能輸氣勢啊。先看一下修改完的登錄頁面

當然，Element 不僅僅是界面這麼簡單，它對 Vue 又做了進一步的封裝，可以簡便地使用許多實用的功能。

（小聲比比）白卷，是我們全村最好的圖書管理系統。

本篇目錄

一、安裝並引入 Element

二、優化登錄頁面

一、安裝並引入 Element

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

這一部分的內容在官方文檔上都有體現，我只是照搬下來。在以後我們會經常使用 Element 提供的組件，大家要自己嘗試查閱文檔，這個是中文的，還是很好理解的。

1.安裝 Element

根據官方文檔的描述，在項目文件夾下，執行 npm i element-ui -S 即可

2.引入 Element

引入分爲完整引入和按需引入兩種模式，按需引入可以縮小項目的體積，這裏我們選擇完整引入。

根據文檔，我們需要修改 main.js 爲如下內容

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 ，查看效果

嗯，還是很醜，但是成功了。

二、優化登錄頁面

首先，讓我們去掉這個清奇的 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>

至此，登錄頁面的開發似乎已經較爲完善了，但其實還沒有完，因爲這個登錄頁面其實沒有用，別人直接輸入首頁的網址，就可以繞過登錄頁面。爲了讓它發揮作用，我們還需要開發一個攔截器。

下一篇文章主要講解以下內容：

一、前端路由的 hash 模式與 history 模式
二、history 模式下後端錯誤頁面的配置
三、登錄攔截的實現

爲什麼要在登錄頁面上廢這麼多篇幅呢？因爲把這個頁面做完，就差不多理解了項目的構成，之後的開發就可以把精力集中在業務功能的實現上了。之後的基本模式，就是前端開發組件、後端開發控制器，調試功能，做起來會很快。

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

上一篇：Vue + Spring Boot 項目實戰（四）：數據庫的引入

下一篇： Vue + Spring Boot 項目實戰（六）：前端路由與登錄攔截器

Vue + Spring Boot 項目實戰（五）：使用 Element 輔助前端開發

本篇目錄

一、安裝並引入 Element

1.安裝 Element

2.引入 Element

二、優化登錄頁面

1.使用 Form 組件

2.添加樣式

3.設置背景

4.完整代碼

Python 潮流週刊#52：Python 處理 Excel 的資源

Vue + Spring Boot 項目實戰（十五）：動態加載後臺菜單

Vue + Spring Boot 項目實戰（十八）：博客功能開發

Vue + Spring Boot 項目實戰（十二）：訪問控制及其實現思路

Vue + Spring Boot 項目實戰（十）：圖片上傳與項目的打包部署

如何打造標準開源項目（序）：打造開源項目的意義

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結