使用Element進(jìn)行前端開(kāi)發(fā)的詳細(xì)圖文教程
前言
本文介紹如何使用vue-element-admin+element進(jìn)行前端開(kāi)發(fā)。
我們可以使用element組件很方便的進(jìn)行前端開(kāi)發(fā)，并且每個(gè)組件都已經(jīng)提供了對(duì)應(yīng)的代碼，只需要復(fù)制我們需要的功能即可。
前提：下載編譯運(yùn)行vue-elemnt-admin，詳細(xì)可見(jiàn)vue-element-admin官網(wǎng)
＞ git clone -b api https://github.com/five3/vue-element-admin.git
＞ cd vue-element-admin
＞ npm i
＞ npm run dev
出現(xiàn)如下顯示，說(shuō)明運(yùn)行成功，可以訪問(wèn)。
目的：實(shí)現(xiàn)任務(wù)列表項(xiàng)目前端
1、添加路由
1、在src/router/index.js文件，并在constantRoutes列表中追加一個(gè)路由子項(xiàng)
{
path: '/todo',
component: Layout,
redirect: '/todo/index',
hidden: false,
children: [
{
path: 'index',
component: () =＞ import('@/views/todo/index'),
name: 'Profile',
meta: { title: '任務(wù)列表', icon: 'list', noCache: true }
}
]
}2、添加頁(yè)面
創(chuàng)建一個(gè)路徑為src/views/todo的目錄，同時(shí)在該目錄下創(chuàng)建一個(gè)名為index.vue的文件
<template></template>
<div class="app-container"></div>
<h1></h1>{{ title }}</h1></h1>
</div>
</template>
<script></script>
export default {
name: 'Todo',
data() {
return {
title: '任務(wù)列表'
}
}
}
</script>3、添加元素
頁(yè)面上的當(dāng)前任務(wù)、未完成、已完成，實(shí)際是三個(gè)tab標(biāo)簽頁(yè)
打開(kāi)element網(wǎng)站，找到tab標(biāo)簽頁(yè)這個(gè)組件，找到想要的效果，打開(kāi)代碼復(fù)制到index.vue
創(chuàng)建任務(wù)按鈕是一個(gè)按鈕。
<el-button type="primary" @click="createTask">創(chuàng)建任務(wù)</el-button>
任務(wù)名稱(chēng)這一行是一個(gè)table表格
<el-table
:data="tableData"
border
style="width: 100%;">
<el-table-column
fixed
prop="name"
label="任務(wù)名稱(chēng)"
width="100">
</el-table-column>
<el-table-column
prop="desc"
label="任務(wù)描述"
width="400">
</el-table-column>
<el-table-column
prop="start_time"
label="開(kāi)始時(shí)間"
width="150">
</el-table-column>
<el-table-column
prop="end_time"
label="結(jié)束時(shí)間"
width="150">
</el-table-column>
<el-table-column
prop="assign"
label="執(zhí)行人"
width="120">
</el-table-column>
<el-table-column
prop="status"
label="任務(wù)狀態(tài)"
width="120">
</el-table-column>
<el-table-column
fixed="right"
label="操作"
width="60">
<template slot-scope="scope">
<el-button type="text" size="small" @click="editTask(scope.row)">編輯</el-button>
</template>
</el-table-column>
</el-table>
最后個(gè)表格列-操作下面，還包括一個(gè)編輯的text按鈕。
<el-table-column
fixed="right"
label="操作"
width="60">
<template slot-scope="scope">
<el-button type="text" size="small" @click="editTask(scope.row)">編輯</el-button>
</template>
</el-table-column>點(diǎn)擊創(chuàng)建任務(wù)，右側(cè)彈出一個(gè)面板
這其實(shí)是一個(gè)抽屜組件，組件內(nèi)是一個(gè)表單組件。
4、添加事件
在頁(yè)面代碼中通過(guò)@click屬性來(lái)綁定事件處理函數(shù)，還需要在methods對(duì)象中定義對(duì)應(yīng)的處理函數(shù)對(duì)象
export default {
name: 'Todo',
data() {
return {
...
form: {
'name': '',
'desc': '',
'start_time': '',
'end_time': '',
'assign': '',
'status': ''
}
}
},
methods: {
createTask () {
this.title = '創(chuàng)建任務(wù)';
this.drawer = true;
this.form = {};
},
editTask (row) {
this.title = '編輯任務(wù)';
this.drawer = true;
this.form = row;
},
onSubmit() {
console.log('submit!');
}
}
}5、提交表單數(shù)據(jù)
在之前的內(nèi)容中已經(jīng)完成了頁(yè)面的設(shè)計(jì)和交互，這里需要做的是把表單的內(nèi)容提交到服務(wù)器端。Vue中發(fā)送ajax請(qǐng)求到服務(wù)器端推薦使用axios組件，而vue-element-admin框架已經(jīng)集成并封裝了該組件。首先，在src/api目錄下新建一個(gè)todo.js的文件
import request from '@/utils/request'
export function submit (data) {
return request({
url: '/api/todo',
method: 'post',
headers: {
'Content-Type': 'application/json'
},
data
})
}這里定義了一個(gè)發(fā)送ajax請(qǐng)求的submit函數(shù)，該函數(shù)實(shí)際上調(diào)用了封裝好axios組件的request函數(shù)，并將請(qǐng)求相關(guān)的url、method、headers、data數(shù)據(jù)傳遞給該底層函數(shù)。之后，在src/views/todo/index.vue頁(yè)面中引入定義好的submit函數(shù)，并將onSubmit處理函數(shù)中的內(nèi)容進(jìn)行替換。
<script>
import {submit} from '@/api/todo'
…
onSubmit () {
submit(this.form).then((response)=>{
if (response.code === 0) {
this.$message({
showClose: true,
message: '保存成功！',
type: 'success'
});
}
})
}
</script>這里調(diào)用submit函數(shù)，把表單數(shù)據(jù)提交給requests，然后獲取返回結(jié)果response。
當(dāng)response為0時(shí)，返回message。
任務(wù)內(nèi)容提交到服務(wù)器之后，還需要再次從服務(wù)器拉取下來(lái)以便于查看。與提交數(shù)據(jù)到服務(wù)器類(lèi)似，從服務(wù)器獲取數(shù)據(jù)同樣需要通過(guò)ajax方式來(lái)發(fā)送HTTP請(qǐng)求。具體要做的是在src/api/todo.js文件中新建一個(gè)名為pullData的函數(shù)。具體內(nèi)容如下：
export function pullData (par) {
return request({
url: '/api/todo',
method: 'get',
params: par
})
}然后，在src/views/todo/index.vue文件中引入該函數(shù)，同時(shí)定義一個(gè)調(diào)用該函數(shù)的新函數(shù)getTaskData。
getTaskList (tab) {
pullData({tab: tab}).then((response)=＞{
if (response.code === 0) {
this.tableData = response.data;
}
})
}同時(shí)在點(diǎn)擊tab加載頁(yè)面時(shí)，調(diào)用該函數(shù)
mounted() {
this.getTaskList(this.activeTab)
},完整代碼的分支路徑為：https://github.com/five3/vue-element-admin/tree/todo
總結(jié)
到此這篇關(guān)于使用Element進(jìn)行前端開(kāi)發(fā)的文章就介紹到這了,更多相關(guān)Element前端開(kāi)發(fā)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue3動(dòng)態(tài)路由+菜單欄的實(shí)現(xiàn)示例
在后臺(tái)管理系統(tǒng)，可以根據(jù)登錄用戶(hù)的不同返回不同路由，頁(yè)面也會(huì)根據(jù)這些路由生成對(duì)應(yīng)的菜單，本文主要介紹了vue3動(dòng)態(tài)路由+菜單欄的實(shí)現(xiàn)示例，感興趣的可以了解一下2024-04-04
Composition Api封裝業(yè)務(wù)hook思路示例分享
這篇文章主要為大家介紹了Composition Api封裝業(yè)務(wù)hook的思路示例分享，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
這篇文章主要為大家詳細(xì)介紹了Vue3.0手寫(xiě)輪播圖效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-10-10
vue+antv實(shí)現(xiàn)雷達(dá)圖的示例代碼
這篇文章主要介紹了vue+antv實(shí)現(xiàn)雷達(dá)圖，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-12-12
最近接了一個(gè)移動(dòng)端的項(xiàng)目，實(shí)現(xiàn)微信掃碼功能，今天小編利用這個(gè)平臺(tái)給大家分享vue實(shí)現(xiàn)二維碼掃描功能的實(shí)現(xiàn)代碼，需要的朋友參考下吧2021-08-08
Vue批量圖片顯示時(shí)遇到的路徑被解析問(wèn)題
這篇文章主要介紹了Vue批量圖片顯示時(shí)遇到的路徑被解析問(wèn)題，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
vue3使用vue-count-to組件的實(shí)現(xiàn)
這篇文章主要介紹了vue3使用vue-count-to組件的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
vue實(shí)現(xiàn)未登錄跳轉(zhuǎn)到登錄頁(yè)面的方法
這篇文章主要介紹了vue實(shí)現(xiàn)未登錄跳轉(zhuǎn)到登錄頁(yè)面的方法，主要目的是實(shí)現(xiàn)未登錄跳轉(zhuǎn)，需要的朋友參考下吧2018-07-07
這篇文章主要介紹了Vue.js暴露方法給WebView的使用操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-09-09
vue?scss后綴文件background-image路徑錯(cuò)誤的解決
這篇文章主要介紹了vue?scss后綴文件background-image路徑錯(cuò)誤的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12