前端基础学习-mock模拟list及list分页数据

最新推荐文章于 2023-05-24 10:25:15 发布
最新推荐文章于 2023-05-24 10:25:15 发布
阅读量4.5k 收藏 11
点赞数 6
分类专栏： 前端 文章标签： vue javascript css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_47146037/article/details/106898309
版权

前端基础学习-mock模拟list及list分页数据

这里展示的是安装好mock之后的使用
如果未安装，可以

npm install mockjs --save-dev

我们创建mock.js展示不同情况的list数据

总体代码

// 引入mockjs
const Mock = require('mockjs')
// 获取 mock.Random 对象
const Random = Mock.Random

// 使用mockjs模拟数据
let moreList = []
for (let i = 0; i < 100; i++) {
  let newObject = {
    mtime: Random.datetime(), // 随机生成日期时间
    score: Random.natural(1, 800), // 随机生成1-800的数字
    rank: Random.natural(1, 100), // 随机生成1-100的数字
    stars: Random.natural(0, 5), // 随机生成1-5的数字
    nickname: Random.cname()// 随机生成中文名字
  }
  moreList.push(newObject)
}
Mock.mock('/api/moreList', () => {
  return {
    code: '0',
    data: moreList
  }
})

// 用于接受生成数据的数组
let tableList = []
for (let i = 0; i < 100; i++) {
  let newObject = {
    title: Random.csentence(5, 10), //  Random.csentence( min, max )
    name: Random.cname(), // Random.cname() 随机生成一个常见的中文姓名
    url: Random.url(), // 生成web地址
    date: Random.date() + ' ' + Random.time() // Random.date()指示生成的日期字符串的格式,默认为yyyy-MM-dd；Random.time() 返回一个随机的时间字符串
  }
  tableList.push(newObject)
}
// }
// console.log(tableList, 'tableList')
// 拦截ajax请求，配置mock的数据
// get请求
Mock.mock('/api/mockGetList', 'get', tableList)

// post请求分页
Mock.mock('/api/pageList', 'post', (params) => {
  console.log(params, 'params')
  const [index, size, total] = [JSON.parse(params.body).page, JSON.parse(params.body).size, tableList.length]
  let len = total / size
  // console.log(index, size, total, 'index, size, total')
  const totalPages = len - parseInt(len) > 0 ? parseInt(len) + 1 : len
  // 截取list
  // const newProduceNewsData = tableList.slice(index * size, (index + 1) * size)
  const newProduceNewsData = tableList.slice((index - 1) * size, index * size)
  // console.log(newProduceNewsData, 'newProduceNewsData')
  return {
    code: '0',
    message: 'success',
    data: {
      page: index,
      size: size,
      list: newProduceNewsData,
      total: total,
      totalPages: totalPages
    }
  }
})

1、最简单的模拟list

// 使用mockjs模拟数据
let moreList = []
for (let i = 0; i < 100; i++) {
  let newObject = {
    mtime: Random.datetime(), // 随机生成日期时间
    score: Random.natural(1, 800), // 随机生成1-800的数字
    rank: Random.natural(1, 100), // 随机生成1-100的数字
    stars: Random.natural(0, 5), // 随机生成1-5的数字
    nickname: Random.cname()// 随机生成中文名字
  }
  moreList.push(newObject)
}
Mock.mock('/api/moreList', () => {
  return {
    code: '0',
    data: moreList
  }
})

在相应文件中的使用

      <el-col :span="12">
        <h3>mock模拟list数据</h3>
        <el-table  :data="moreList" border height="400">
          <el-table-column prop="mtime" label="时间" show-overflow-tooltip></el-table-column>
          <el-table-column prop="score" label="分数" show-overflow-tooltip></el-table-column>
          <el-table-column prop="rank" label="等级" show-overflow-tooltip></el-table-column>
          <el-table-column prop="stars" label="星级" show-overflow-tooltip></el-table-column>
          <el-table-column prop="nickname" label="中文名" show-overflow-tooltip></el-table-column>
        </el-table>
      </el-col>

效果
在这里插入图片描述

2、mock模拟get请求

// 用于接受生成数据的数组
let tableList = []
for (let i = 0; i < 100; i++) {
  let newObject = {
    title: Random.csentence(5, 10), //  Random.csentence( min, max )
    name: Random.cname(), // Random.cname() 随机生成一个常见的中文姓名
    url: Random.url(), // 生成web地址
    date: Random.date() + ' ' + Random.time() // Random.date()指示生成的日期字符串的格式,默认为yyyy-MM-dd；Random.time() 返回一个随机的时间字符串
  }
  tableList.push(newObject)
}
// }
// console.log(tableList, 'tableList')
// 拦截ajax请求，配置mock的数据
// get请求
Mock.mock('/api/mockGetList', 'get', tableList)

相应文件中使用

      <el-col :span="12">
        <h3>mock模拟get接口（不分页）</h3>
        <el-table  :data="MockList" border ref="multipleTable" height="400">
          <el-table-column prop="title" label="标题" show-overflow-tooltip></el-table-column>
          <el-table-column prop="url" label="请求地址" show-overflow-tooltip></el-table-column>
          <el-table-column prop="name" label="操作人" show-overflow-tooltip></el-table-column>
          <el-table-column prop="date" label="时间" show-overflow-tooltip></el-table-column>
        </el-table>
      </el-col>

效果
在这里插入图片描述

3、mock模拟post分页

// 用于接受生成数据的数组
let tableList = []
for (let i = 0; i < 100; i++) {
  let newObject = {
    title: Random.csentence(5, 10), //  Random.csentence( min, max )
    name: Random.cname(), // Random.cname() 随机生成一个常见的中文姓名
    url: Random.url(), // 生成web地址
    date: Random.date() + ' ' + Random.time() // Random.date()指示生成的日期字符串的格式,默认为yyyy-MM-dd；Random.time() 返回一个随机的时间字符串
  }
  tableList.push(newObject)
}
// }
// console.log(tableList, 'tableList')
// 拦截ajax请求，配置mock的数据

// post请求分页
Mock.mock('/api/pageList', 'post', (params) => {
  console.log(params, 'params')
  const [index, size, total] = [JSON.parse(params.body).page, JSON.parse(params.body).size, tableList.length]
  let len = total / size
  // console.log(index, size, total, 'index, size, total')
  const totalPages = len - parseInt(len) > 0 ? parseInt(len) + 1 : len
  // 截取list
  // const newProduceNewsData = tableList.slice(index * size, (index + 1) * size)
  const newProduceNewsData = tableList.slice((index - 1) * size, index * size)
  // console.log(newProduceNewsData, 'newProduceNewsData')
  return {
    code: '0',
    message: 'success',
    data: {
      page: index,
      size: size,
      list: newProduceNewsData,
      total: total,
      totalPages: totalPages
    }
  }
})

在相应文件中使用

      <el-col :span="12">
        <h3>mock模拟post分页接口</h3>
        <el-table  :data="MockPageList" border height="400">
          <el-table-column prop="title" label="标题" show-overflow-tooltip></el-table-column>
          <el-table-column prop="url" label="请求地址" show-overflow-tooltip></el-table-column>
          <el-table-column prop="name" label="操作人" show-overflow-tooltip></el-table-column>
          <el-table-column prop="date" label="时间" show-overflow-tooltip></el-table-column>
        </el-table>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="searchForm.page"
          :page-sizes="[15, 40, 80]"
          :page-size="searchForm.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </el-col>

效果
在这里插入图片描述

4、自定义样式实现list分页

mock中的数据模拟同3
页面中的应用：

      <el-col :span="12">
        <h3>自定义样式实现list分页</h3>
        <div class="total_box">
          <div class="small_box"
            v-for="item in MockPageList"
            :key="item.name">
            <el-row>操作人：{{item.name}}</el-row>
            <el-row>操作时间：{{item.date}}</el-row>
          </div>
        </div>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="searchForm.page"
          :page-sizes="[15, 40, 80]"
          :page-size="searchForm.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </el-col>

样式：

<style lang='scss' scoped>
.total_box {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  .small_box {
    width: 30%;
    margin: 0 2% 2% 0;
    background-color: pink;
    min-width: 29%;
    cursor:pointer;
    border: 1px solid #dcdee2;
    border-radius: 2px;
  }
}
</style>

效果
在这里插入图片描述

整体的vue文件代码

<template>
  <div>
    <el-row>
      <el-col :span="12">
        <h3>mock模拟get接口（不分页）</h3>
        <el-table  :data="MockList" border ref="multipleTable" height="400">
          <el-table-column prop="title" label="标题" show-overflow-tooltip></el-table-column>
          <el-table-column prop="url" label="请求地址" show-overflow-tooltip></el-table-column>
          <el-table-column prop="name" label="操作人" show-overflow-tooltip></el-table-column>
          <el-table-column prop="date" label="时间" show-overflow-tooltip></el-table-column>
        </el-table>
      </el-col>
      <el-col :span="12">
        <h3>mock模拟list数据</h3>
        <el-table  :data="moreList" border height="400">
          <el-table-column prop="mtime" label="时间" show-overflow-tooltip></el-table-column>
          <el-table-column prop="score" label="分数" show-overflow-tooltip></el-table-column>
          <el-table-column prop="rank" label="等级" show-overflow-tooltip></el-table-column>
          <el-table-column prop="stars" label="星级" show-overflow-tooltip></el-table-column>
          <el-table-column prop="nickname" label="中文名" show-overflow-tooltip></el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <h3>mock模拟post分页接口</h3>
        <el-table  :data="MockPageList" border height="400">
          <el-table-column prop="title" label="标题" show-overflow-tooltip></el-table-column>
          <el-table-column prop="url" label="请求地址" show-overflow-tooltip></el-table-column>
          <el-table-column prop="name" label="操作人" show-overflow-tooltip></el-table-column>
          <el-table-column prop="date" label="时间" show-overflow-tooltip></el-table-column>
        </el-table>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="searchForm.page"
          :page-sizes="[15, 40, 80]"
          :page-size="searchForm.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </el-col>
      <el-col :span="12">
        <h3>自定义样式实现list分页</h3>
        <div class="total_box">
          <div class="small_box"
            v-for="item in MockPageList"
            :key="item.name">
            <el-row>操作人：{{item.name}}</el-row>
            <el-row>操作时间：{{item.date}}</el-row>
          </div>
        </div>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="searchForm.page"
          :page-sizes="[15, 40, 80]"
          :page-size="searchForm.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import axios from 'axios'
import commonFuc from '@/assets/js/commonFuc'
export default {
  name: 'tableMockList',
  mixins: [commonFuc],
  data () {
    return {
      MockList: [],
      MockPageList: [],
      moreList: [],
      searchForm: {
        page: 1,
        size: 15
      },
      total: 0
    }
  },
  mounted () {
    this.getMockList()
    this.getList()
    this.getMoreList()
  },
  methods: {
    getMockList () {
      axios.get('/api/mockGetList')
        .then(res => {
          // console.log(res, 'mock模拟get接口获取result')
          this.MockList = res.data
        })
        .catch(err => {
          console.log(err)
        })
    },
    getList () {
      axios.post('/api/pageList', this.searchForm)
        .then(res => {
          // console.log(res, 'res')
          this.MockPageList = res.data.data.list
          this.total = res.data.data.total
        })
        .catch(err => {
          console.log(err)
        })
    },
    getMoreList () {
      axios.post('/api/moreList', this.searchForm)
        .then(res => {
          console.log(res, 'res')
          this.moreList = res.data.data
        })
        .catch(err => {
          console.log(err)
        })
    }
  }
}
</script>

<style lang='scss' scoped>
.el-col-12 {
  border-right: 1px solid #e6e6e6;
  padding:0 20px 20px 20px;
}
.el-row {
  border-bottom: 1px solid #e6e6e6;
}
.total_box {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  .small_box {
    width: 30%;
    margin: 0 2% 2% 0;
    background-color: pink;
    min-width: 29%;
    cursor:pointer;
    border: 1px solid #dcdee2;
    border-radius: 2px;
  }
}
</style>

混入的mixin：

export default {
  data () {
    return {
    }
  },

  methods: {
    handleSizeChange (val) {
      this.searchForm.size = val
      this.getList()
    },
    handleCurrentChange (val) {
      this.searchForm.page = val
      this.getList()
    }
  }
}

整体效果

在这里插入图片描述

小夭。
关注
  • 6
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
在 Angular-cli 中使用 simple-mock 实现前端开发 API Mock 接口数据模拟功能的方法
10-17
主要介绍了在 Angular-cli 中使用 simple-mock 实现前端开发 API Mock 接口数据模拟功能的方法,需要的朋友可以参考下
mock list列表组件 以及弹出框邀请成功记录 antd-List滚动加载
Winsom1的博客
03-05 509
// 列表中的项目 const InviteRecord = ({ phoneNum, loginData }) => { // 单个内容的显示逻辑分离 const displayPhoneNum = (phoneNum) => { const phoneNumStr = String(phoneNum) return phoneNumStr.length ==...
Java单元测试技巧之PowerMock
云栖技术精选
03-11 343
简介：高德的技术大佬向老师在谈论方法论时说到：“复杂的问题要简单化，简单的问题要深入化。” 这句话让我感触颇深，这何尝不是一套编写代码的方法——把一个复杂逻辑拆分为许多简单逻辑，然后把每一个简单逻辑进行深入实现，最后把这些简单逻辑整合为复杂逻辑，总结为八字真言即是“化繁为简，由简入繁”。 前言 高德的技术大佬向老师在谈论方法论时说到：“复杂的问题要简单化，简单的问题要深入化。” 这句话让我感触颇深，这何尝不是一套编写代码的方法——把一个复杂逻辑拆分为许多简单逻辑，然后把每一个简单逻辑进行深入实现，.
vue项目使用mock模拟数据并实现列表的增、删、分页、批量操作功能
简白的博客
08-08 7368
mock
如何mock一个List类型的属性
雪落南城的博客
01-11 2854
https://stackoverflow.com/questions/33302340/how-to-mock-a-autowired-list-of-spring-beans
前端基础学习-mock模拟list增删改以及批量删除
小夭的博客
07-02 2349
本文主要是基于之前写过的一片博客-mock模拟分页list的基础上，用mock模拟对表格的操作 首先回顾一下mock模拟分页操作（mock引入以及安装不再赘述） mock模拟分页list // 引入mockjs const Mock = require('mockjs') // 获取 mock.Random 对象 const Random = Mock.Random // 使用mockjs模拟数据 // 用于接受生成数据的数组 let tableList = [] for (let i = 0; i &l
【Java应用】使用Mockito进行模拟和测试桩
Java技术攻略的博客
03-03 1936
在某些情况下，可能需要自定义桩方法来满足测试的需要。这时可以使用Mockito的doAnswer()方法来实现。> answer)doAnswer()方法的参数是一个Answer对象，该对象表示自定义的桩方法的行为。Answer接口中有一个方法​​answer()​​，该方法返回一个泛型对象，表示模拟方法的返回值。这个例子中，我们自定义了List的get方法，将其返回值修改为输入参数的字符串后面加上"Mockito"。
Mockito
山有木兮木有枝
11-24 740
Mockito基本使用 创建外部依赖的 Mock 对象， 然后将此 Mock 对象注入到测试类中。 执行测试代码。 校验测试代码是否执行正确。 Maven 依赖<dependency> <groupId>org.mockito</groupId> <artifactId>mockito-core</artifactId> <version>2.0.111-beta</vers
Mock.js 超全 超详细总结 保姆级别的教程
热门推荐
Mme061300的博客
04-24 1万+
mock.js是一款模拟数据生成器，可以生成随机数据，拦截 Ajax 请求，帮助前端开发工程师提供数据、快速开发
vue+mockjs模拟数据以及list分页功能
Handsome2013的博客
06-24 1924
vue+mockjs模拟数据以及list分页功能 msyrrr关注 0.1442019.06.01 10:30:30字数 132阅读 2,317 第一步：安装mockjs npm install mockjs --save-dev 第二步：创建 mock.js 文件 //mock.js 文件 import Mock from 'mockjs' // 引入mockjs const Random = Mock.Random // Mock.Random 是一个工具类，用于生成各种随机数
Mock 测试技术详解及高级特性，你不得不会的技能！
兴趣是最好的老师，勤能补拙
05-24 4581
Mock 测试是一种软件测试技术，它可以模拟外部依赖组件的行为和状态，以便进行独立、稳定和快速的测试。在实际软件开发中，我们常常需要依赖其他组件或服务来完成某些业务逻辑，例如数据库、网络连接、消息队列等等。这些外部依赖可能存在各种问题，例如不稳定、缺乏数据、难以模拟等等，从而影响我们对代码逻辑的测试、调试和优化。Mock 测试可以解决这些问题，它通过构造和配置 Mock 对象来模拟外部依赖的行为和状态，从而使得测试变得独立、稳定和准确。
jest-canvas-mock:用于在Jest中模拟画布的模块
05-09
开玩笑的帆布模拟当开玩笑地运行单元测试用例时，模拟canvas 。 对于更多的浏览器环境，您可以使用来实现实际的浏览器运行时。安装这仅应作为开发依赖项（ devDependencies ）安装，因为它仅用于测试。 npm i --save...
单元测试高级特性-mock模拟网络请求
04-22
单元测试高级特性--mock模拟网络请求单元测试高级特性--mock模拟网络请求单元测试高级特性--mock模拟网络请求单元测试高级特性--mock模拟网络请求单元测试高级特性--mock模拟网络请求单元测试高级特性--mock模拟网络...
egg-mock:模拟鸡蛋测试库
05-01
蛋模拟 模拟库可轻松测试Egg应用程序，插件和自定义Egg框架。 egg-mock从继承了所有API，提供了更大的灵活性。 安装 $ npm i egg-mock --save-dev 用法 创建测试用例 使用mm.app启动模拟服务器 // test/index.test....
react-native-fetch-mock:拿出react-native的模拟
05-02
React本机获取模拟 拿出react-native的模拟 为什么选择FetchMock？ 没有fetch模拟可以轻松地用于react-native。 因此，我自己创建一个。 要求 Nodejs> = 12.x 路线图 与Mock.js结合 支持排除其他途径 其他API...
Mockito的使用
端吉的博客
07-25 565
简单描述了Mockito常用API的使用
mock入门使用
拱卒的博客
03-12 301
// 使用 Mock var Mock = require('mockjs') var data = Mock.mock({ // 属性 list 的值是一个数组，其中含有 1 到 10 个元素 'list|1-10': [{ // 属性 id 是一个自增数，起始值为 1，每次增 1 'id|+1': 1 }] }) // 输出结果 cons...
Mockjs模拟接口实现增删改查、分页、多条件查询
wanghuichen的博客
03-14 1万+
Mockjs实现增删改查、分页、多条件查询，一起来见证Mockjs多么强大~
mock方法常用框架_最强Mock框架介绍: Mockito
weixin_39753791的博客
12-24 180
/*** Mockito测试使用实例***/public class MockitoListTest extends Assert{List mockList = mock(List.class);@Test //标准测试public void test_3A() {//arrangewhen(mockList.get(0)).thenReturn("one");when(mockList.get...
前端mock模拟假数据
最新发布
07-28
前端mock模拟假数据可以通过多种方式实现。以下是一些常用的方法： 1. 手动编写假数据：可以在前端代码中直接定义一个对象或数组，手动填充假数据。这种方法适用于简单的数据结构或测试目的。 2. 使用Mock.js库：...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值