欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

使用Element進(jìn)行前端開發(fā)的詳細(xì)圖文教程

 更新時間：2022年11月07日 11:59:48   作者：東方不敗就是我  
眾所周知Element是一套Vue.js后臺組件庫,它能夠幫助你更輕松更快速地開發(fā)后臺項目,下面這篇文章主要給大家介紹了關(guān)于使用Element進(jìn)行前端開發(fā)的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下

前言

本文介紹如何使用vue-element-admin+element進(jìn)行前端開發(fā)。

我們可以使用element組件很方便的進(jìn)行前端開發(fā)，并且每個組件都已經(jīng)提供了對應(yīng)的代碼，只需要復(fù)制我們需要的功能即可。

前提：下載編譯運行vue-elemnt-admin，詳細(xì)可見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)容進(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時，返回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進(jìn)行前端開發(fā)的文章就介紹到這了,更多相關(guān)Element前端開發(fā)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評論