vue项目中使用mock.js模拟数据

最新推荐文章于 2022-11-25 10:07:25 发布

陨石猎人

最新推荐文章于 2022-11-25 10:07:25 发布

阅读量738

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue mock.js 文章标签： vue中使用mock.js 前端调用模拟数据

本文链接：https://blog.youkuaiyun.com/qq_42205731/article/details/81705146

vue 同时被 2 个专栏收录

9 篇文章

订阅专栏

mock.js

2 篇文章

订阅专栏

本文介绍如何利用Mock.js在前端开发中模拟API接口返回的数据。通过安装Mock.js并配置相应的模板，可以轻松地实现前后端分离开发时的接口模拟。文章详细说明了从安装到在项目中使用的整个流程。

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

注：mock.js基础教程可参见 https://blog.youkuaiyun.com/qq_42205731/article/details/81705350

安装

命令行输入 cnpm install mockjs

在main.js同级新建mockjs文件

内容如下：

const Mock=require('mockjs');  //引入mockjs文件
var template={
'data|1-4':[{
'title':'@title',
'article':'@article'
}]
}

var template1={
    'data|1-4':[{
    'title':'小王',
    'article':'赵四'
    }]
    }
Mock.mock('/api/data',template);   //网址自定义，和请求路径相同即可
Mock.mock('/api/data1',template1);

在main.js中引入mock文件

require('./mock');

在你要使用的vue文件中调用接口

$.ajax({
      type:'POST',
      url:'/api/data1',    //url 路径和自建的mock.js文件中的网址保持一致
      dataType:'json',
      success:function(res){
        console.log(res.data);
      }
    })