當(dāng)前位置：首頁 > 前端技术 > vue >内容正文

vue

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

發(fā)布時間：2024/9/27 vue 84 豆豆

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

文章目錄

一、安裝并引入 Element
- 1.安裝 Element
- 2.引入 Element
二、優(yōu)化登錄頁面
- 1.使用 Form 組件
- 2.添加樣式
- 3.設(shè)置背景
- 4.完整代碼

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

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

當(dāng)然，Element 不僅僅是界面這么簡單，它對 Vue 又做了進(jìn)一步的封裝，可以簡便地使用許多實(shí)用的功能。

一、安裝并引入 Element

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

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

1.安裝 Element

根據(jù)官方文檔的描述，在項(xiàng)目文件夾下，執(zhí)行 npm i element-ui -S 即可

2.引入 Element

引入分為完整引入和按需引入兩種模式，按需引入可以縮小項(xiàng)目的體積，這里我們選擇完整引入。

根據(jù)文檔，我們需要修改 src/main.js 為如下內(nèi)容

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') // 設(shè)置反向代理，前端請求默認(rèn)發(fā)送到 http://localhost:8443/api axios.defaults.baseURL = 'http://localhost:8443/api' // 全局注冊，之后可在其它組件中通過 this.$axios 發(fā)送數(shù)據(jù) 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> 標(biāo)簽改為 <el-card>（下面是 <template> 內(nèi)的完整代碼）

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

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

二、優(yōu)化登錄頁面

首先，讓我們?nèi)サ暨@個清奇的 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>

為了設(shè)計界面，我們需要關(guān)注的地方是 <template> 標(biāo)簽內(nèi)的 html 和 <style> 標(biāo)簽內(nèi)的 css。登錄框我們一般會用 Form 來做，打開 Element 的組件文檔（http://element-cn.eleme.io/#/zh-CN/component/），發(fā)現(xiàn)它為我們提供了豐富的 Form 組件，我們可以點(diǎn)擊“顯示代碼”，復(fù)制我們需要的部分。

不過這里好像并沒有特別符合我們應(yīng)用場景的表單，或者說這些都是比較復(fù)雜的，我們只需要其中的一小部分。把頁面再往下拉，可以看到關(guān)于這個組件的屬性、事件、方法等的文檔，根據(jù)這個文檔，我們可以自己去構(gòu)建需要的表單。

首先，我們修改 <template> 里的代碼如下

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

在開發(fā)前端的內(nèi)容時，我們修改了代碼，就可以對應(yīng)地看到效果，而不用重啟項(xiàng)目。我一般會把瀏覽器也開著，以便實(shí)時監(jiān)測。修改完上面的內(nèi)容，頁面變成了這樣

2.添加樣式

為了進(jìn)一步優(yōu)化界面，我們?yōu)榻M件再添加一些樣式，即在 Login.vue 的最后添加如下代碼

刷新頁面（Ctrl + F5），看起來順眼多了

3.設(shè)置背景

最后，我們?yōu)檫@個單調(diào)的登錄頁面設(shè)置一個背景。我在網(wǎng)上找了這張圖

可以把它保存下來，放在 src\assets 文件夾下，命名為 eva.jpg 在 build 項(xiàng)目時，這個文件夾里的圖片會被自動轉(zhuǎn)成 base64。也可以在這個文件夾里再新建文件夾，方便管理。

為了使用背景圖片，我在標(biāo)簽的外又添加了一個父標(biāo)簽 <body>，id 設(shè)置為 poster，并在 <style> 中添加如下內(nèi)容

<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;}

這時候發(fā)現(xiàn)界面上方有一片空白，經(jīng)過查找，發(fā)現(xiàn)問題出在 App.vue 里，把下面這句代碼刪除即可

OK，又一次大功告成了。

另外可以在 Login.vue 的 data 方法中設(shè)置輸入框的默認(rèn)值，省的每次進(jìn)來都要再輸一遍。

4.完整代碼

最后附上 Login.vue 的完整代碼，可以直接復(fù)制

<template><body id="poster"><el-form class="login-container" label-position="left"label-width="0px"><h3 class="login_title">系統(tǒng)登錄</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>

至此，登錄頁面的開發(fā)似乎已經(jīng)較為完善了，但其實(shí)還沒有完，因?yàn)檫@個登錄頁面其實(shí)沒有用，別人直接輸入首頁的網(wǎng)址，就可以繞過登錄頁面。為了讓它發(fā)揮作用，我們還需要開發(fā)一個攔截器。

下一篇文章主要講解以下內(nèi)容：

一、前端路由的 hash 模式與 history 模式
二、history 模式下后端錯誤頁面的配置
三、登錄攔截的實(shí)現(xiàn)

為什么要在登錄頁面上廢這么多篇幅呢？因?yàn)榘堰@個頁面做完，就差不多理解了項(xiàng)目的構(gòu)成，之后的開發(fā)就可以把精力集中在業(yè)務(wù)功能的實(shí)現(xiàn)上了。之后的基本模式，就是前端開發(fā)組件、后端開發(fā)控制器，調(diào)試功能，做起來會很快。

總結(jié)

以上是生活随笔為你收集整理的Vue + Spring Boot 项目实战（六）：使用 Element 辅助前端开发的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

上一篇： Vue 快速集成ElementUI
下一篇： Vue + Spring Boot 项目