（5）使用mock数据做出第一个测试页面

我不是女神ヾ 2023-02-18 15:21 21阅读 0赞

# 一、引入组件 #

1.搜索栏主要由一个搜索框和多个按钮组成  
2.表格直接引入element-ui里的表格组件  
3.分页组件同上  
4.弹出框（模态框）同上

效果图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhbmd1b2ZlaQ_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhbmd1b2ZlaQ_size_16_color_FFFFFF_t_70 1]

# 二、准备工作 #

### 1、在侧边栏加上页面路由 ###

在/src/router/index.js里加入如下代码  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhbmd1b2ZlaQ_size_16_color_FFFFFF_t_70 2]  
![在这里插入图片描述][20200618161032615.png]

### 2、在/src/views里创建test文件夹，在该文件夹下创建index.vue文件 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhbmd1b2ZlaQ_size_16_color_FFFFFF_t_70 3]

# 三、实现过程 #

### 1、搜索栏 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhbmd1b2ZlaQ_size_16_color_FFFFFF_t_70 4]

### 2、表格 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhbmd1b2ZlaQ_size_16_color_FFFFFF_t_70 5]

### 3、分页 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhbmd1b2ZlaQ_size_16_color_FFFFFF_t_70 6]

### 4、弹出框 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhbmd1b2ZlaQ_size_16_color_FFFFFF_t_70 7]

# 四、插入mock数据 #

根据第三步的步骤，做出来的页面只是空有一个架子，没有任何数据。接下来，我们尝试在表格里插入一些假数据。

### 1、把数据写死 ###

直接把数据写入list，再填充到表格中。这样做的好处是简单，缺点是不够灵活。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhbmd1b2ZlaQ_size_16_color_FFFFFF_t_70 8]

### 2、使用mock数据 ###

Test页面：src/views/test/index.vue  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhbmd1b2ZlaQ_size_16_color_FFFFFF_t_70 9]  
导入接口：fetchList  
![在这里插入图片描述][20200618161222212.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhbmd1b2ZlaQ_size_16_color_FFFFFF_t_70 10]  
Api接口：src/api/test/index.js  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhbmd1b2ZlaQ_size_16_color_FFFFFF_t_70 11]  
Mock数据：mock/test/index.js  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhbmd1b2ZlaQ_size_16_color_FFFFFF_t_70 12]

# 五、全部代码 #

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhbmd1b2ZlaQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200618160924367.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhbmd1b2ZlaQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhbmd1b2ZlaQ_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200618160934570.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhbmd1b2ZlaQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhbmd1b2ZlaQ_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200618161025967.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhbmd1b2ZlaQ==,size_16,color_FFFFFF,t_70
[20200618161032615.png]: https://img-blog.csdnimg.cn/20200618161032615.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhbmd1b2ZlaQ_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200618161037985.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhbmd1b2ZlaQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhbmd1b2ZlaQ_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20200618161059795.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhbmd1b2ZlaQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhbmd1b2ZlaQ_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20200618161106985.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhbmd1b2ZlaQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhbmd1b2ZlaQ_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/2020061816111334.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhbmd1b2ZlaQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhbmd1b2ZlaQ_size_16_color_FFFFFF_t_70 7]: https://img-blog.csdnimg.cn/20200618161121821.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhbmd1b2ZlaQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhbmd1b2ZlaQ_size_16_color_FFFFFF_t_70 8]: https://img-blog.csdnimg.cn/20200618161210166.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhbmd1b2ZlaQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhbmd1b2ZlaQ_size_16_color_FFFFFF_t_70 9]: https://img-blog.csdnimg.cn/20200618161216882.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhbmd1b2ZlaQ==,size_16,color_FFFFFF,t_70
[20200618161222212.png]: https://img-blog.csdnimg.cn/20200618161222212.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhbmd1b2ZlaQ_size_16_color_FFFFFF_t_70 10]: https://img-blog.csdnimg.cn/20200618161227421.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhbmd1b2ZlaQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhbmd1b2ZlaQ_size_16_color_FFFFFF_t_70 11]: https://img-blog.csdnimg.cn/20200618161232334.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhbmd1b2ZlaQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhbmd1b2ZlaQ_size_16_color_FFFFFF_t_70 12]: https://img-blog.csdnimg.cn/20200618161238409.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhbmd1b2ZlaQ==,size_16,color_FFFFFF,t_70