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>