mock.js用法实例

1、先安装mockjs插件，参考mock.js安装流程

2、建一个mock.js模拟数据

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

// 模拟数据，包括标题、内容、创建时间
const data = function() {
    let dataList = []
    for (let i = 0; i < 20; i++) {
        let dataObject = {
            title: Random.ctitle(), //Random.ctitle(min,max) 随机产生一个中文标题，长度默认在3-7之间
            content: Random.cparagraph(), //Random.cparagraph(min,max) 随机生成一个中文段落，段落里句子个数默认3-7个
            createdTime: Random.date(), //Random.date() 指定生成的日期字符串格式
            img: Random.image(), // 生成默认图片
            username: Random.cname() //生成默认名字
        }
        dataList.push(dataObject)
    }
    return dataList
}

// 请求该url，就可以返回dataList
Mock.mock('http://localhost:8080/mock/index', data)

3、把mock.js引入到main.js中

import './utils/mock'

4、新建请求模拟数据方法：/mock/mockServer

import axios from "axios";

// 请求模拟数据
export const reqMockData = () => axios.get('http://localhost:8080/mock/index')

5、Index.vue中输出数据

import { reqMockData } from "../mock/mockServer"; //引入模拟数据
export default {
  mounted() {
    reqMockData().then(res => {
      console.log(res);
    });
  }
};

进入前端入门建站教程官网入口

vue项目生产环境中使用mock数据（mockjs和vite-plugin-mock）

dedecms织梦静态页实现动态显示随机文章的方法

mockjs生成随机数据参数介绍

mock.js安装流程

js随机生成多种颜色

标签： mockjs, 随机

上面是“mock.js用法实例”的全面内容，想了解更多关于 mockjs 内容，请继续关注web建站教程。

当前网址：https://m.ipkd.cn/webs_2086.html

声明：本站提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请发送到邮箱：admin@ipkd.cn，我们会在看到邮件的第一时间内为您处理！