（5）使用mock數據做出第一個測試頁面

一、引入組件

1.搜索欄主要由一個搜索框和多個按鈕組成
2.表格直接引入element-ui裏的表格組件
3.分頁組件同上
4.彈出框（模態框）同上

效果圖：

二、準備工作

1、在側邊欄加上頁面路由

在/src/router/index.js里加入如下代碼

2、在/src/views裏創建test文件夾，在該文件夾下創建index.vue文件

三、實現過程

1、搜索欄

2、表格

3、分頁

4、彈出框

四、插入mock數據

根據第三步的步驟，做出來的頁面只是空有一個架子，沒有任何數據。接下來，我們嘗試在表格裏插入一些假數據。

1、把數據寫死

直接把數據寫入list，再填充到表格中。這樣做的好處是簡單，缺點是不夠靈活。

2、使用mock數據

Test頁面：src/views/test/index.vue

導入接口：fetchList


Api接口：src/api/test/index.js

Mock數據：mock/test/index.js

五、全部代碼

1、src/router/indexx.js

{
    path: '/test',
    component: Layout,
    redirect: '/test/index',
    children: [
      {
        path: 'index',
        component: () => import('@/views/test/index'),
        name: 'test',
        meta: { title: '測試', icon: 'bug', noCache: true }
      }
    ]
  }

2、src/views/test/index.vue

<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input
        v-model="listQuery.name"
        placeholder="請輸入姓名"
        style="width: 200px;"
        class="filter-item"
        @keyup.enter.native="handleFilter" />
      <el-button
        v-waves
        class="filter-item"
        style="margin-left: 10px;"
        type="primary"
        icon="el-icon-search"
        @click="handleFilter">
        搜索
      </el-button>
      <el-button
        class="filter-item"
        style="margin-left: 10px;"
        type="primary"
        icon="el-icon-refresh-left"
        @click="handleReset">
        重置
      </el-button>
      <el-button
        class="filter-item"
        style="margin-left: 10px;"
        type="primary"
        icon="el-icon-edit"
        @click="handleCreate">
        新增
      </el-button>
      <el-button
        class="filter-item"
        style="margin-left: 10px;"
        type="primary"
        icon="el-icon-upload2"
        @click="handleImport">
        導入
      </el-button>
      <el-button
        class="filter-item"
        style="margin-left: 10px;"
        type="primary"
        icon="el-icon-download"
        @click="handleExport">
        導出
      </el-button>
      <el-button
        class="filter-item"
        style="margin-left: 10px;"
        icon="el-icon-delete"
        @click="handleDelete(sels)">
        刪除
      </el-button>
    </div>
    <!-- 表格 -->
    <el-table
      :key="tableKey"
      v-loading="listLoading"
      :data="list"
      border
      size="small"
      fit
      highlight-current-row
      style="width: 100%;"
      @sort-change="sortChange"
      @selection-change="selsChange">
      <el-table-column type="selection" width="55">
      </el-table-column>
      <el-table-column label="ID" prop="id" width="80">
        <template slot-scope="{row}">
          <span>{{ row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column label="日期" width="180">
        <template slot-scope="{row}">
          <span>{{ row.timestamp | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="姓名" width="180">
        <template slot-scope="{row}">
          <span>{{ row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="地址">
        <template slot-scope="{row}">
          <span>{{ row.address }}</span>
        </template>
      </el-table-column>
      <el-table-column label="Actions" align="center" width="130" class-name="small-padding fixed-width">
        <template slot-scope="{row}">
          <el-button type="primary" size="mini" @click="handleUpdate(row)">
            修改
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分頁 -->
    <pagination
      v-show="total>0"
      :total="total"
      samll="true"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
      @pagination="getList"/>
    <!-- 新增和修改的模態框 -->
    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" width="40%">
      <el-form
        ref="dataForm"
        :rules="rules"
        :model="temp"
        label-position="left"
        label-width="70px"
        style="width: 400px; margin-left: 50px;">
        <el-form-item label="日期" prop="timestamp">
          <el-date-picker v-model="temp.timestamp" type="datetime" placeholder="Please pick a date" />
        </el-form-item>
        <el-form-item label="姓名" prop="name">
          <el-input v-model="temp.name" />
        </el-form-item>
        <el-form-item label="地址">
          <el-input v-model="temp.address" :autosize="{ minRows: 2, maxRows: 4}" type="textarea" placeholder="請輸入地址" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">
          取消
        </el-button>
        <el-button type="primary" @click="dialogStatus==='create'?createData():updateData()">
          確定
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { fetchList, createUser, updateUser, deleteUser } from '@/api/test/index'
import Pagination from '@/components/Pagination'
export default {
  components: { Pagination },
  data() {
    return {
      textMap: {
        update: '編輯',
        create: '新增'
      },
      dialogFormVisible: false,
      listLoading: true,
      listLoading: false,
      temp: {
        id: undefined,
        address: '',
        timestamp: new Date(),
        name: ''
      },
      tableKey: 0,
      list: null,
      total: 0,
      listQuery: {
        page: 1,
        limit: 10,
        name: undefined
      },
      // 選中顯示的值
      sels: []
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      this.listLoading = true
      fetchList(this.listQuery).then(response => {
        this.list = response.data.items
        this.total = response.data.total
        // Just to simulate the time of the request
        this.listLoading = false
      })
    },
  }
}
</script>

3、src/api/test/index.js

import request from '@/utils/request'

// 獲取列表數據
export function fetchList(query) {
  return request({
    url: '/test/list',
    method: 'get',
    params: query
  })
}

4、mock/test/index.js

import Mock from 'mockjs'

let List = []
const count = 20
for (let i = 0; i < count; i++) {
  List.push(Mock.mock({
    id: '@increment',
    timestamp: +Mock.Random.date('T'),
    name: '@first',
    address: '@county(true)'
  }))
}
export default [
  {
    url: '/test/list',
    type: 'get',
    response: config => {
      // console.log('8888888888888888', config)
      const { name, page = 1, limit = 10 } = config.query
      const mockList = List.filter(item => {
        if (name && item.name !== name) return false
        return true
      })
      const pageList = mockList.filter((item, index) => index < limit * page && index >= limit * (page - 1))
      return {
        code: 20000,
        data: {
          total: mockList.length,
          items: pageList
        }
      }
    }
  },
]