使用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
vue+antv實(shí)現(xiàn)雷達(dá)圖的示例代碼
這篇文章主要介紹了vue+antv實(shí)現(xiàn)雷達(dá)圖,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-12-12
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?scss后綴文件background-image路徑錯(cuò)誤的解決
這篇文章主要介紹了vue?scss后綴文件background-image路徑錯(cuò)誤的解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-12-12

