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