vue 的mockjs使用

最新推荐文章于 2025-05-14 11:39:36 发布

咸鱼与梦想

最新推荐文章于 2025-05-14 11:39:36 发布

阅读量508

点赞数

CC 4.0 BY-SA版权

分类专栏： vue mockjs 文章标签： vue for mock

本文链接：https://blog.youkuaiyun.com/angle_lzc/article/details/79755498

vue 同时被 2 个专栏收录

25 篇文章

订阅专栏

mockjs

1 篇文章

订阅专栏

本文介绍如何使用MockJS为前端项目模拟数据。首先通过npm安装MockJS并保存为开发依赖，接着创建mock.js文件导入Mock模块，定义随机生成的数据结构，并设置API路径及请求方式。最后，在main.js中引入mock.js并在组件中发起请求验证数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

官网

1、安装

    npm i mockjs --save-dev

2、编辑mock.js

    import Mock from 'mockjs'
    //Random：存储各种随机函数的对象
    let Random = Mock.Random 

    const data =  () => {
      let arr = []
      for (let i = 0; i < 10; i++) {
        let newArticleObject = {
          title: Random.csentence(5),
          content: Random.cparagraph(5, 7),
          time: Random.date() + ' ' + Random.time(),
          location: Random.city()
        }
        arr.push(newArticleObject)
      }
      return {arr}
    }
    // 第三个参数可以是对象也可以是返回对象的函数
    Mock.mock('/api/data', 'get', data)

3、在main.js中引入

import './mock'

4、在*.vue中使用

methods:{
      click:function(){
        this.$axios({
          url: '/api/data',
          method: 'get',
        }).then((res)=>{
          console.log(res.data)
        })
      }
    }