web建站教程
     
  1. 首页
  2. 前端UI组件库
  3. AI项目和框架
  4. 前端知识
  5. AI应用
  6. IT知识
  7. ComfyUI插件
  8. 地图大全
  9. 休息站

mock.js用法实例

1276 ℃

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://ipkd.cn/webs_2086.html

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

当前位置: 首页 > mockjs
扣子空间 – 免费全能AI办公智能体
Trae:新一代免费的AI编程工具
上一篇:
下一篇:
x 打工人ai神器
x 扫一扫打开藏历小程序

打开微信“扫一扫”查看今日藏历!