（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

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
        }
      }
    }
  },
]