关于随机数据生成的一点记录

导读

很多时候，咱们在进行网页开发时，经常会需要使用一些数据来填充到页面中，才能对网页的最终呈现效果有一定的了解，对于这些数据来说，其实早些时候，一直是使用手工填充的方式，这需要咱们去手动输入或者生成大量数据，如果所需的数据量很大，那将会是一个痛苦的过程。

于是，就有了随机数据的做法，随机数据顾名思义，就是通过某些服务或插件，自动生成我们所需的数据，并将这些数据填充到网页或其他内容中，让我们能够对界面或软件性能等有正确的分析。

这里就分享下自己目前用的随机数据生成方式吧，这里分两部分，第一部分介绍Mock.JS，第二部分介绍随机真实图片。

Mock.JS

首先，提到随机数据生成，很多人第一个想到的就是Mock.JS，没错，这是一个Node.JS下的随机数据包，能够通过API调用的形式，获取咱们所需要的随机数据，可获取数据类型丰富，基本满足了日常的需求。

由于我最近一直使用Vite进行开发，所以这里就介绍下在Vite下的使用方式吧。

安装

进入Vite项目路径，安装Mock.JS组件包及对应Vite插件：

yarn add mockjs vite-plugin-mock -D

打开vite.config.js进行插件配置：

import vue from '@vitejs/plugin-vue'
import * as path from 'node:path'
import { defineConfig } from 'vite'
import { viteMockServe } from 'vite-plugin-mock'

// https://vite.dev/config/
export default defineConfig({
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src')
    }
  },
  plugins: [
    vue({
      template: {
        transformAssetUrls: {
          base: null,
          includeAbsolute: false
        }
      }
    }),
    viteMockServe({ mockPath: 'mock' })
  ]
})

编写

在项目根路径下创建mock文件夹（注意：这里是根路径，不是src路径），编写通用文件utils.js：

import mock from 'mockjs'

const pagination = (pageNo, pageSize, list) => {
  const offset = (pageNo - 1) * Number(pageSize)

  return offset + Number(pageSize) >= list.length
    ? list.slice(offset, list.length)
    : list.slice(offset, offset + Number(pageSize))
}

export const { Random } = mock

export const API = '/api/v1'

export const getRequestToken = (headers) => headers?.authorization

export const resultSuccess = (result, message = 'ok') => {
  return {
    code: 200,
    result,
    message,
    type: 'success'
  }
}

export const resultPageSuccess = (page, pageSize, list, message = 'ok') => {
  const pageData = pagination(page, pageSize, list)

  return {
    code: 200,
    result: pageData,
    page: Math.floor(list.length / pageSize) + 1,
    message: message,
    total: list.length,
    type: 'success'
  }
}

export const resultError = (message = 'Request failed', code = -1, result = null) => {
  return {
    code: code,
    result: result,
    message: message,
    type: 'error'
  }
}

export const newCategories = [
  {
    id: 1,
    name: '新闻'
  },
  {
    id: 2,
    name: '公告'
  },
  {
    id: 3,
    name: '热点'
  },
  {
    id: 4,
    name: '活动'
  }
]

编写新闻数据生成文件new.js：

import { API, resultSuccess, newCategories, Random } from './utils.js'

export const makeNews = (count = 10) => {
  const result = []

  for (let i = 0; i < count; i++) {
    const category = newCategories[Random.natural(0, newCategories.length - 1)]

    result.push({
      id: '@natural(1)',
      title: '@ctitle',
      created: '@datetime',
      updated: '@datetime',
      readers: '@natural(1000,5000000)',
      status: '@boolean',
      category: category,
      author: {
        id: '@natural(1)',
        name: '@cname'
      }
    })
  }

  return result
}

export default [
  {
    url: `${API}/new/list`,
    statusCode: 200,
    method: 'get',
    response: ({ query }) => {
      const { count } = query

      return resultSuccess(makeNews(count))
    }
  },
  {
    url: `${API}/new/detail`,
    statusCode: 200,
    method: 'get',
    response: ({ query }) => {
      const { id } = query
      
      return resultSuccess({
        id: '@natural(1)',
      	title: '@ctitle',
      	created: '@datetime',
      	updated: '@datetime',
      	readers: '@natural(1000,5000000)',
      	status: '@boolean',
      	content: '@cparagraph(10,50)',
      	category: category,
      	author: {
        	id: '@natural(1)',
        	name: '@cname'
      	}
      })
    }
  }
]

使用

在Vue中进行数据调用：

<script setup>
  import { onMounted, ref } from 'vue'
  import { getNews } from '@/api/new'
  
  const data = ref([])

  onMounted(async () => {
    const { result } = await getNews({count: 10})
    
    data.value = result
  })
</script>

<template>
  <ul>
    <li v-for="item in data" :key="item.key">
      <router-link :to="{name: 'New_View', params: {id: item.id}}" :title="item.title">{{ item.title }}</router-link>
  	</li>
  </ul>
</template>

API文件new.js写法：

import client from '@/api/client'

export const getNews = params => client.get('/new/list', { params })

至于axios怎么去封装，就不在这里重复了，网上一大堆教程，此时执行预览，就可以看到，已经能够正确获取到咱们所需要的随机数据了。

随机图片

在来说说随机图片的生成，虽然Mock.JS也能生成随机图片，可其实使用后就发现，生成的随机图片其实就是有背景色及文字的简单图片，那如果我们想使用真实图片时，要如何来获取呢？

其实也非常简单，网上有现成的API供咱们使用：

https://picsum.photos/600/800

直接访问或插入img标签中，就能获取到一幅600x800的真实图片，除了简单的图片获取外，还有一些额外的参数，可以更方便咱们的图片获取：

# 获取webp文件格式图片
https://picsum.photos/600/800.webp
# 获取jpg文件格式图片
https://picsum.photos/600/800.jpg
# 获取灰色调图片
https://picsum.photos/600/800?grayscale
# 同时获取多幅图片，避免获取到同一张，可以添加参数
https://picsum.photos/600/800?random=xxx
# 获取模糊图片
https://picsum.photos/600/800?blur=2

康诺's blog