當前位置：首頁 > 前端技术 > vue >内容正文

vue

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

發布時間：2024/9/27 vue 48 豆豆

生活随笔收集整理的這篇文章主要介紹了 Vue + Spring Boot 项目实战（六）：使用 Element 辅助前端开发小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

文章目錄

一、安裝并引入 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>用戶名: <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> 里的代碼如下

上面的代碼應該很好理解，<el-form> 里面可以放置 <el-form-item>，<el-form-item> 里面再放置其它的內容，比如 <el-input>，關于 <el-input> 的屬性，可以查閱 Input 的文檔，<el-button> 亦然。

在開發前端的內容時，我們修改了代碼，就可以對應地看到效果，而不用重啟項目。我一般會把瀏覽器也開著，以便實時監測。修改完上面的內容，頁面變成了這樣

2.添加樣式

為了進一步優化界面，我們為組件再添加一些樣式，即在 Login.vue 的最后添加如下代碼

刷新頁面（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 快速集成ElementUI
下一篇： Springboot2学习博客