web建站教程
  1. 首页
  2. vuejs
  3. js
  4. 好玩
  5. seo教程
  6. 前端知识
  7. 百度echarts
  8. 更多
    php入门
    nodejs
    mockjs
    reactjs
    mysql
    wordpress
    织梦cms
    帝国cms
    git教程
    IT知识
    模板大全
    休息站

mock.js用法实例

684 ℃
     

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
本文共计928个字,预计阅读时长7分钟
生活小工具,收录了80多款小工具
上一篇: 推荐一款简单高效漂亮的多平台笔记应用——Zoho Notebook
下一篇: 推荐2款充满科技感的艺术字体——小新黑体、小新潮酷体
x 打工人ai神器