vue-admin-template使用路由和mockjs進行二次開發

最近在研究vue-admin-template模板，準備對他做二次開發，其中必須要經歷的步驟就是創建路由和請求mock假數據了，下面是我寫的一個商品頁面，所有的數據都是利用Mockjs隨機生成的，現在簡單說一下我的編寫步驟和思路，給剛開始接觸vue-admin的小夥伴們學習嘻嘻。

如果對這個模板不熟悉的話建議先閱讀一下官方文檔

1.首先我們在views下新建一個product文件夾，然後在裏面新建一個index.vue，官方文檔說了，側邊欄是動態生成的，所以我們只需要在路由表裏添加一個路由

2.進入router/index.js，添加一個路由，我把它當作子路由添加到Example中

    path: '/example',
    component: Layout,
    redirect: '/example/table',
    name: 'Example',
    meta: { title: 'Example', icon: 'example' },
    children: [
      {                     // 添加一個子路由
        path: 'product',    // 路徑
        name: 'Product',    // 路由的名字
        component: () => import('@/views/product/index'),  // 導入
        meta: { title: 'Product', icon: '' }     // title表示網頁標題，icon是顯示在側邊欄的圖標，這裏先不寫
      }

3.編寫mockjs，在mock和api文件夾下分別新建一個product.js文件

這兩個文件都可以複製他們同級目錄下的table.js文件，因爲裏面的內容差不多是一樣的，只需稍微修改一下，如上面的url路徑要改成和product相關的，這樣api下的product.js就完成了
再把mock下的table.js複製到mock下的product.js，然後把數據改成我們需要生成的數據，具體用法見mockjs官網，代碼如下

import Mock from 'mockjs'

const data = Mock.mock({
  'items|10': [{                          // 生成10個數組
    id: '@id',
    pid: '@integer(1000, 1100)',          // 生成一個1000-1100之間的整數
    name: '@name',                        // 生成一個英文名字，cname爲中文名字
    description: '@csentence(10, 20)',    // 生成一句中文
    price: '@integer(10,100) $',
    edit: '',
    value: '@float(2,4)',                // 生成一個2-5之間的浮點數
    display_time: '@datetime',           // 生成一個日期
    sales: '@integer(300, 5000)'
  }]
})

export default [
  {
    url: '/vue-admin-template/product/list',   // 路徑記得要改
    type: 'get',
    response: config => {
      const items = data.items
      return {
        code: 20000,
        data: {
          total: items.length,
          items: items
        }
      }
    }
  }
]

你以爲這樣就配置完啦？並不是，這時候你會發現export default是灰色的，說明它還沒有被引用，還有一個地方需要導入它，聰明的你應該猜到了，打開mock文件夾下的index.js，加入兩行代碼

然後回到product.js就會發現export default亮起來啦

4.然後再回到views文件夾下把我們的頁面完善一下，話不多說，直接把table下的index.vue複製到product下的index.vue中，只需要改lable和{{ }}中的內容，根據自己的需求寫就ok了

最後我把我的product的index.vue代碼分享給大家，祝小夥伴們學習愉快！

<template>
  <div class="app-container">
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      stripe
      fit
      highlight-current-row
    >
      <el-table-column align="center" label="Num" width="95">
        <template slot-scope="scope">
          {{ scope.$index }}
        </template>
      </el-table-column>

      <el-table-column label="ID" align="center" width="100">
        <template slot-scope="scope">
          {{ scope.row.pid }}
        </template>
      </el-table-column>

      <el-table-column label="Products" align="center">
        <template slot-scope="scope">
          <el-popover trigger="hover" placement="top">
            <p>Name: {{ scope.row.name }}</p>
            <p>Description: {{ scope.row.description }}</p>
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">{{ scope.row.name }}</el-tag>
            </div>
          </el-popover>
        </template>
      </el-table-column>

      <el-table-column label="Sales" align="center">
        <template slot-scope="scope">
          {{ scope.row.sales }}
        </template>
      </el-table-column>

      <el-table-column label="Rate" align="center">
        <template slot-scope="scope">
          <el-rate v-model="scope.row.value" disabled text-color="#ff9900"></el-rate>
        </template>
      </el-table-column>

      <el-table-column label="Price" align="center" width="100">
        <template slot-scope="scope">
          <el-input v-show="scope.row.edit" size="small" v-model="scope.row.price "></el-input>
          <span v-show="!scope.row.edit">{{ scope.row.price }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="Edit">  // 內聯編輯
        <template scope="scope">
          <el-button v-show='!scope.row.edit' type="primary" @click='scope.row.edit=true' size="small" icon="el-icon-edit">Edit</el-button>
          <el-button v-show='scope.row.edit' type="success" @click='scope.row.edit=false' size="small" icon="el-icon-check">完成</el-button>
          <el-button type="danger" @click='delPro(scope.row.pid)' size="small" icon="el-icon-delete">Del</el-button>
        </template>
      </el-table-column>

      <el-table-column align="center" prop="created_at" label="Display_time" width="200">
        <template slot-scope="scope">
          <i class="el-icon-time" />
          <span>{{ scope.row.display_time }}</span>
        </template>
      </el-table-column>

    </el-table>
  </div>
</template>

<script>
import { getList } from '@/api/product'

export default {
  data() {
    return {
      list: null,
      listLoading: true
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      this.listLoading = true
      getList().then(response => {
        this.list = response.data.items
        this.listLoading = false
      })
    }
  }
}
</script>