mock.js用法实例

2024年03月31日 建站教程

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);
    });
  }
};

本文链接:http://so.lmcjl.com/news/797/

展开阅读全文