（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