使用mock.js伪造图片数据,图片链接是枚举值

这段代码展示了如何使用Mockjs和moment库来生成模拟图片URL和好友列表数据。它包含一个getImage函数用于获取随机图片URL,以及一个initFriendsList函数用于初始化包含不同类型好友列表的数据。整个过程涉及到随机数生成、日期格式化以及数据结构的构建。
摘要由CSDN通过智能技术生成

 

const Mock = require('mockjs')
const moment = require('moment')

const getImage = () => {
  const urlArr = [
    'http://images.gongzuoshouji.cn/teacher/2021-08-09/84751fbcf153487f868a21a77048d19c.jpg',
    'http://images.gongzuoshouji.cn/teacher/20210804/196b0fa5d1726432492ad5edae6a565b.jpg',
    'http://images.gongzuoshouji.cn/teacher/20210730/a8e65bfaf7575a051a45b8dedd528af4.jpg',
  ]
  const index = Mock.Random.integer(0, urlArr.length - 1)
  return urlArr[index]
}

//初始化好友列表、群列表数据
const initFriendsList = () => {
  const friendsList = []
  const getList = ({type}) => {
    let arr = []
    for (let i = 0; i < 100; i++) {
      const temp = Mock.mock({
        name: '@cname',
        msg: '@ctitle',
        type,
        img: getImage() ,
        date: moment().subtract(i, 'day').format()
      })
      arr.push({ ...temp, id: i + 1 })
    }
    return arr
  }
  for (let i = 0; i < 4; i++) {
    friendsList.push({
      type: i + 1 + '',
      friends: getList({type: i + 1 + ''})
    })
  }
  return friendsList
}

const friendsList = initFriendsList()

 

  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
Mock.js可以动态生成各种类型的数据,包括数字、字符串、布尔、数组、对象等等。以下是使用Mock.jsmock动态生成数据的步骤: 1. 安装Mock.js 可以通过npm安装Mock.js,命令如下: ``` npm install mockjs ``` 也可以在HTML文件中直接引用Mock.js的CDN链接: ``` <script src="https://cdn.bootcdn.net/ajax/libs/Mock.js/1.0.1-beta3/mock-min.js"></script> ``` 2. 定义Mock数据模板 Mock.js的核心是数据模板,它是一个JavaScript对象,用来描述Mock数据的结构和类型。例如,以下是一个简单的Mock数据模板: ``` var data = { name: '@cname', // 随机生成中文名字 age: '@integer(18, 60)', // 随机生成18到60之间的整数 gender: '@boolean', // 随机生成布尔 hobbies: ['@word', '@word', '@word'] // 随机生成三个英文单词组成的数组 }; ``` 3. 使用Mock数据模板生成Mock数据 使用Mock.js的`Mock.mock()`方法可以根据数据模板生成Mock数据,例如: ``` var mockData = Mock.mock(data); ``` `mockData`就是根据`data`模板生成的Mock数据。 4. 使用Mock数据 生成Mock数据后,可以将其用于测试、演示或其他目的。例如,将Mock数据渲染到页面中: ``` document.getElementById('name').innerHTML = mockData.name; document.getElementById('age').innerHTML = mockData.age; document.getElementById('gender').innerHTML = mockData.gender ? '男' : '女'; document.getElementById('hobbies').innerHTML = mockData.hobbies.join(', '); ``` 以上就是使用Mock.jsmock动态生成数据的基本步骤。Mock.js还支持更多高级功能,例如数据占位符、数据生成规则、拦截Ajax请求等等,可以根据需要进行学习和使用
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

徐同保

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值