前端Vue使用封装Mock.js和api请求模拟数据案例(带源码)

已于 2022-04-27 11:53:07 修改
阅读量1.7k 收藏 8
点赞数 4
分类专栏： vue Vue插件 文章标签： vue.js javascript 前端 mock.js
于 2022-03-09 15:46:50 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_49714202/article/details/123379406
版权

目录

一:准备阶段

1.安装mockjs axios

npm install mockjs --save
npm install axios --save

2.main.js全局引入

import './utils/mock'//此部分引入的是我们所编写的mockjs文档
import axios from 'axios'
Vue.prototype.$axios = axios

二:使用阶段

1.src下面创建api文件里面在创建request.js封装好的api，代码如下:

import axios from 'axios'
// 案例!!!!!
export function getCase() {
  return axios.get('/api/case')
}

// 文本列表
export function county() {
  return axios.get('/api/getObject')
}

// 折线数据
export function getList() {
  return axios.post('/api/line')
}

// home折线数据
export function getLine() {
  return axios.post('/api/lineAdd')
}



axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'

// 请求拦截器
axios.interceptors.request.use(function (config) {
  return config;
}, function (error) {
  return Promise.reject(error);
})
// 响应拦截器
axios.interceptors.response.use(function (response) {
  return response;
}, function (error) {
  return Promise.reject(error);
})

// 封装axios的post请求
export function fetch(url, params) {
  return new Promise((resolve, reject) => {
    axios.post(url, params)
      .then(response => {
        resolve(response.data);
      })
      .catch((error) => {
        reject(error);
      })
  })
}

export default {
  mockdata(url, params) {
    return fetch(url, params);
  }
}

2.src下面创建utils文件里面在创建mock.js封装好的模拟数据库，写接口造数据地方代码如下:
官方文档mock.js更多数据案例: http://mockjs.com/examples.html

Mock.mock( rurl, rtype, function( options ) ) rurl 需要拦截的url
rtype 需要拦截的ajax请求类型 function( options ) 用于生成响应数据的函数
记录用于生成响应数据的函数。当拦截到匹配 rurl 和 rtype 的 Ajax 请求时，函数 function(options)
将被执行，并把执行结果作为响应数据返回。

import Mock from 'mockjs'
// 案例！！！！和详解意思，还是不懂看文档
Mock.mock('/api/case', 'get', () => {
  return Mock.mock({
    "mtime": "@datetime", //随机生成日期时间
    "score|1-800": 800, //随机生成1-800的数字
    "rank|1-100": 100, //随机生成1-100的数字
    "stars|1-5": 5, //随机生成1-5的数字
    "nickname": "@cname", //随机生成中文名字
  })
})

// 返回字符串
Mock.mock('/api/data', 'get', () => {
  return Mock.mock({
    'string|3': '*' //  string 代表字符串名称  后面3代表个数
  })
})

// 返回指定范围的整数
Mock.mock('/api/getInteger', () => {
  return Mock.mock({
    'a|1-100': 100 // 
  })
})

// 返回随机数组
Mock.mock('/api/getArr', () => {
  return Mock.mock({
    'data|1-30': [{
      'name': '张三'
    }]
  })
})

// 返回随机字符
Mock.mock('/api/getRandom1', () => {
  return Mock.mock({
    'random1': /[a-z]{2}[A-Z]{2}[0-9]/
  })
})

// 返回随机字符
Mock.mock('/api/getRandom2', () => {
  return Mock.mock({
    random2: '@string("lower", 5)'
  })
})

// 返回UUID
Mock.mock('/api/getUUID', () => {
  return {
    'uuid': Mock.Random.id()
  }
})


// 返回随机个数的对象
Mock.mock('/api/getObject', () => {
  return Mock.mock({
    'list|10': [{
      'id|+1': 1,
      'classroom|1': ['精品语文班', '精品作业A班', '英语班', '语文班'],
      'from|1': ['到店咨询', '微店', '壹家教', '学习服务平台'],
      'status|1': ['意识强烈', '预报名', '意向一般', '暂无意向'],
    }],
    name: Mock.Random.cname(), //随机产生一个中文的姓名
    addr: Mock.mock('@county(true)'), //随机生成一个地址
    'age|18-60': 1, //随机生成一个数字 大小在18到60
    birth: Mock.Random.date(), //随机生成一个日期
    sex: Mock.Random.integer(0, 1), //随机生成一个整数，0/1 ，根据这个来给“男” “女”
    email: Mock.mock('@EMAIL()'), //随机生成一个邮箱
    'moblie|1': ['13531544954', '13632250649', '15820292420', '15999905612'], //在数组中随机找一个
    'num1|1-100.2': 1, //1-100 中随机生成一个保留两位小数点
    'num2|100-300.2': 1,
    'classroom|1': ['精品语文班', '精品作业A班', '英语班', '语文班'],
    'from|1': ['到店咨询', '微店', '壹家教', '学习服务平台'],
    'status|1': ['意识强烈', '预报名', '意向一般', '暂无意向'],
    time: Mock.Random.date('yyyy-MM-dd'),
    mobile: /^1[0-9]{10}$/ //用正则匹配1开头的11位数字的手机号
  })
})



// 第二种~~~~~
// const cateData = {"data":[{"all":484,"children":[{"all":120,"pid":10000,"quesId":10001,"quesName":"武汉"},{"all":100,"pid":10000,"quesId":10002,"quesName":"鄂州"},{"all":90,"pid":10000,"quesId":10003,"quesName":"咸宁"},{"all":66,"pid":10000,"quesId":10004,"quesName":"黄冈"},{"all":88,"pid":10000,"quesId":10005,"quesName":"荆州"}],"pid":1,"quesId":10000,"quesName":"湖北"},{"all":450,"children":[{"all":100,"pid":11000,"quesId":11001,"quesName":"广州"},{"all":200,"pid":11000,"quesId":11002,"quesName":"惠州"},{"all":70,"pid":11000,"quesId":11003,"quesName":"珠海"},{"all":80,"pid":11000,"quesId":11004,"quesName":"佛山"}],"pid":1,"quesId":11000,"quesName":"广东"},{"all":243,"children":[{"all":88,"pid":12000,"quesId":12001,"quesName":"杭州"},{"all":100,"pid":12000,"quesId":12002,"quesName":"宁波"},{"all":20,"pid":12000,"quesId":12003,"quesName":"温州"},{"all":35,"pid":12000,"quesId":12004,"quesName":"嘉兴"}],"pid":1,"quesId":12000,"quesName":"浙江"},{"all":285,"children":[{"all":220,"pid":13000,"quesId":13001,"quesName":"成都"},{"all":20,"pid":13000,"quesId":13002,"quesName":"雅安"},{"all":45,"pid":13000,"quesId":13003,"quesName":"绵阳"}],"pid":1,"quesId":13000,"quesName":"四川"},{"all":235,"children":[{"all":75,"pid":14000,"quesId":14001,"quesName":"济南"},{"all":90,"pid":14000,"quesId":14002,"quesName":"青岛"},{"all":40,"pid":14000,"quesId":14003,"quesName":"烟台"},{"all":30,"pid":14000,"quesId":14004,"quesName":"威海"}],"pid":1,"quesId":14000,"quesName":"山东"},{"all":285,"children":[{"all":120,"pid":15000,"quesId":15001,"quesName":"台北"},{"all":60,"pid":15000,"quesId":15002,"quesName":"桃园"},{"all":50,"pid":15000,"quesId":15003,"quesName":"高雄"},{"all":55,"pid":15000,"quesId":15004,"quesName":"新竹"}],"pid":1,"quesId":15000,"quesName":"台湾"},{"all":595,"children":[{"all":220,"pid":16000,"quesId":16001,"quesName":"南京"},{"all":110,"pid":16000,"quesId":16002,"quesName":"无锡"},{"all":150,"pid":16000,"quesId":16003,"quesName":"苏州"},{"all":80,"pid":16000,"quesId":16004,"quesName":"连云港"},{"all":35,"pid":16000,"quesId":16005,"quesName":"盐城"}],"pid":1,"quesId":16000,"quesName":"江苏"},{"all":760,"children":[{"all":150,"pid":17000,"quesId":17001,"quesName":"黄埔"},{"all":120,"pid":17000,"quesId":17002,"quesName":"徐汇"},{"all":100,"pid":17000,"quesId":17003,"quesName":"静安"},{"all":130,"pid":17000,"quesId":17004,"quesName":"普陀"},{"all":100,"pid":17000,"quesId":17005,"quesName":"虹口"},{"all":100,"pid":17000,"quesId":17006,"quesName":"闵行"},{"all":60,"pid":17000,"quesId":17007,"quesName":"嘉定"}],"pid":1,"quesId":17000,"quesName":"上海"},{"all":900,"children":[{"all":240,"pid":18000,"quesId":18001,"quesName":"东城"},{"all":220,"pid":18000,"quesId":18002,"quesName":"西城"},{"all":120,"pid":18000,"quesId":18003,"quesName":"朝阳"},{"all":120,"pid":18000,"quesId":18004,"quesName":"海淀"},{"all":100,"pid":18000,"quesId":18005,"quesName":"通州"}],"pid":1,"quesId":18000,"quesName":"北京"},{"all":840,"children":[{"all":200,"pid":19000,"quesId":19001,"quesName":"渝中"},{"all":120,"pid":19000,"quesId":19002,"quesName":"万州"},{"all":160,"pid":19000,"quesId":19003,"quesName":"陪陵"},{"all":120,"pid":19000,"quesId":19004,"quesName":"江北"},{"all":80,"pid":19000,"quesId":19005,"quesName":"沙坪坝"},{"all":120,"pid":19000,"quesId":19006,"quesName":"九龙坡"},{"all":40,"pid":19000,"quesId":19007,"quesName":"渝北"}],"pid":1,"quesId":19000,"quesName":"重庆"},{"all":1430,"children":[{"all":200,"pid":20000,"quesId":20001,"quesName":"福田"},{"all":220,"pid":20000,"quesId":20002,"quesName":"罗湖"},{"all":360,"pid":20000,"quesId":20003,"quesName":"南山"},{"all":210,"pid":20000,"quesId":20004,"quesName":"盐田"},{"all":120,"pid":20000,"quesId":20005,"quesName":"宝安"},{"all":120,"pid":20000,"quesId":20006,"quesName":"龙岗"},{"all":120,"pid":20000,"quesId":20007,"quesName":"龙华"},{"all":80,"pid":20000,"quesId":20008,"quesName":"坪山"}],"pid":1,"quesId":20000,"quesName":"深圳"},{"all":600,"children":[{"all":600,"pid":21000,"quesId":21001,"quesName":"新加坡"}],"pid":1,"quesId":21000,"quesName":"新加坡"},{"all":100,"children":[{"all":100,"pid":22000,"quesId":22001,"quesName":"东京"}],"pid":1,"quesId":22000,"quesName":"东京"},{"all":600,"children":[{"all":600,"pid":23000,"quesId":23001,"quesName":"莫斯科"}],"pid":1,"quesId":23000,"quesName":"莫斯科"},{"all":550,"children":[{"all":550,"pid":24000,"quesId":24001,"quesName":"梵蒂冈"}],"pid":1,"quesId":24000,"quesName":"梵蒂冈"},{"all":211,"children":[{"all":211,"pid":25000,"quesId":25001,"quesName":"纽约"}],"pid":1,"quesId":25000,"quesName":"纽约"},{"all":163,"children":[{"all":163,"pid":26000,"quesId":26001,"quesName":"尼日利亚"}],"pid":1,"quesId":26000,"quesName":"尼日利亚"}],"message":"请求成功","status":200}
// function getCateData() {
//   return cateData
// }
// const departData = {"data": [{"deptName": "南山","all":360,"done": 300},{"deptName": "东城区","all":240,"done": 200},{"deptName": "渝中","all":200,"done": 200},{"deptName": "黄埔","all":150,"done": 150},{"deptName": "新加坡","all":600,"done": 580},{"deptName": "莫斯科","all":600,"done": 600},{"deptName": "梵蒂冈","all":550,"done": 500},{"deptName": "成都","all":220,"done": 220},{"deptName": "纽约","all":211,"done":211},{"deptName": "罗湖","all":220,"done": 210}],"message":"请求成功","status":200}
// function getDepartTop() {
//   return departData
// }
// export { getCateData, getDepartTop }


// 返回随机个数
const cateData = {
  "data": [{
    "all": 484,
    "children": [{
      "all": 120,
      "pid": 10000,
      "quesId": 10001,
      "quesName": "武汉"
    }, {
      "all": 100,
      "pid": 10000,
      "quesId": 10002,
      "quesName": "鄂州"
    }, {
      "all": 90,
      "pid": 10000,
      "quesId": 10003,
      "quesName": "咸宁"
    }, {
      "all": 66,
      "pid": 10000,
      "quesId": 10004,
      "quesName": "黄冈"
    }, {
      "all": 88,
      "pid": 10000,
      "quesId": 10005,
      "quesName": "荆州"
    }],
    "pid": 1,
    "quesId": 10000,
    "quesName": "湖北"
  }, {
    "all": 450,
    "children": [{
      "all": 100,
      "pid": 11000,
      "quesId": 11001,
      "quesName": "广州"
    }, {
      "all": 200,
      "pid": 11000,
      "quesId": 11002,
      "quesName": "惠州"
    }, {
      "all": 70,
      "pid": 11000,
      "quesId": 11003,
      "quesName": "珠海"
    }, {
      "all": 80,
      "pid": 11000,
      "quesId": 11004,
      "quesName": "佛山"
    }],
    "pid": 1,
    "quesId": 11000,
    "quesName": "广东"
  }],
  "message": "请求成功",
  "status": 200
}
Mock.mock('/api/k', () => {
  return cateData
})

// 返回随机个数折线数据pie1和pie2用的接口
Mock.mock('/api/line', () => {
  return Mock.mock({
    // 'list|10': [{
    //   'id|+1': 1,
    //   'classroom|1': ['精品语文班', '精品作业A班', '英语班', '语文班'],
    //   'from|1': ['到店咨询', '微店', '壹家教', '学习服务平台'],
    //   'status|1': ['意识强烈', '预报名', '意向一般', '暂无意向'],
    // }],
    // 'list:10': [{
    //   'id|+1': 1,
    //   
    // }]
    'list|3': [{
      'id|+1': 1,
      'name|3': ['@cname'], //随机产生一个中文的姓名
      'time|3': ['@DATETIME("yyyy-MM-dd HH:mm:ss")'],
      // 'content': '@cparagraph',
      'num|2': ['@float(1, 300)']
    }],
  })
})

// 返回随机个数折线数据pie1和pie2用的接口
Mock.mock('/api/lineAdd', () => {
  return Mock.mock({
    'list|3': [{ //  list 代表数组名称  后面3代表个数
      'id|+1': 1,
      'name': ['@cname'], //随机产生一个中文的姓名
      'time': ['@DATETIME("yyyy-MM-dd HH:mm:ss")'],
      // 'content': '@cparagraph',
      'num|5': ['@float(1, 300)']
    }],
    'list2|3': [{
      'id|+1': 1,
      'name': ['@cname'], //随机产生一个中文的姓名
      'time': ['@DATETIME("yyyy-MM-dd HH:mm:ss")'],
      // 'content': '@cparagraph',
      'num|5': ['@float(1, 300)']
    }],
    'list3|3': [{
      'id|+1': 1,
      'name': ['@cname'], //随机产生一个中文的姓名
      'time': ['@DATETIME("yyyy-MM-dd HH:mm:ss")'],
      // 'content': '@cparagraph',
      'num|5': ['@float(1, 300)']
    }],
  })
})

3.使用页面组件,随便创建一个，配置路由,代码如下

<template>
  <div>页面</div>
</template>

<script>
import {getCase} from '../api/request'  // 路径要匹配对上!!!
export default {
  mounted(){
    this.getData();
  },
  methods:{
    getData(){        // 也可以用原生的直接写路径请求
      getCase({}).then(res => {
        console.log(res,'res~~~~');
      })
    }
  }
}
</script>

4.效果如下图

在这里插入图片描述

这是单独加案例模拟登录接口
// 用户登录
Mock.mock('/login', 'post', options => {
    const {userName, userPassword} = JSON.parse(options.body)
    const user = users.find(item => {
        return item.username === userName && item.password === userPassword
    })

    return user
})

感觉文章好的话记得点个心心和关注，有错的地方麻烦指正一下，多谢！！！

MFG_666
关注
  • 4
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
Vue+Mock.js模拟登录和表格的增删改查功能
10-18
主要介绍了Vue+Mock.js模拟登录和表格的增删改查功能,需要的朋友可以参考下
vue使用mock模拟接口
【03】的博客
07-23 443
下载依赖 npm i webpack-api-mocker --save-dev 编写 /mocker/index.js，用于定义mock接口 const proxy = { 'GET /mock/get/test': { errMsg: null, code: 200, data: { id: 1, name: '零三', url: 'https://web03.cn' } }, 'POST /mock/post/test'
基于Vue3和Node.js的疫情数据可视化设计源码
最新发布
04-07
本项目是一个基于Vue3和Node.js的疫情数据可视化项目，包含572个文件，主要文件类型包括JavaScript脚本、Markdown文档、JSON配置文件、TypeScript脚本、ESLint配置文件、YAML配置文件、Vue组件、NYC配置文件和NPM忽略文件。系统设计旨在为用户提供一个高效、便捷的疫情数据可视化解决方案，通过点击不同省份展示该省疫情数据，数据来源于网络接口，使用Echarts组件实现图表展示，以满足用户在数据可视化方面的需求。
vue+vuecli+webpack中使用mockjs模拟后端数据的示例
11-30
前言 使用mockjs可以事先模拟数据，前提是和后端约定好了数据接口，怎样的数据。使用mock就可以生成你要的数据了，从而实现开发时前后端分离。 其主要功能是： 基于数据模板生成模拟数据。 基于HTML模板生成模拟数据。 拦截并模拟 ajax 请求。 语法规范 Mock.js 的语法规范包括两部分： 1.数据模板定义规范（Data Template Definition，DTD） 2.数据占位符定义规范（Data Placeholder Definition，DPD） 数据模板定义规范 DTD 数据模板中的每个属性由 3 部分构成：属性名、生成规则、属性值： // 属性名
基于JavaScript和Vue开发的前后端分离的高校运动会管理系统源码()前端Vue+后端Node.js).zip
04-26
基于JavaScript和Vue开发的前后端分离的高校运动会管理系统源码()前端Vue+后端Node.js).zip 【项目说明】 高校运动会管理系统的设计与实现 sportssystem：前端Vue代码 sportSystem:后端Node代码 登录测试账号 admin 123456 基于JavaScript和Vue开发的前后端分离的高校运动会管理系统源码()前端Vue+后端Node.js).zip 【备注】 主要针对计算机相关专业的正在做毕设和大作业的学生与需要项目实战练习的Java学习者。 包含：项目源码、项目文档、数据库脚本等，该项目附带全部源码也可作为毕业设计使用。 项目都经过严格调试，确保可以运行！
前端Vue使用封装Mock.js和api请求模拟数据
是大林的林吖-博客
04-15 734
mock的使用改进，可参考上一篇文章mock的使用 1) mock.js // mock.js 文件 import Mock from 'mockjs' // 引入mockjs const Random = Mock.Random // Mock.Random 是一个工具类，用于生成各种随机数据 const dataList = [] // 用于接受生成数据的数组 for (let i = 0; i < 26; i++) { // 可自定义生成的个数 const template = {
使用mock.js快速搭建一个模拟接口
qq_40999228的博客
03-11 2358
本系列主要是记录我在做前端项目学习到的一些常用组件或功能，方便后面复习时用；同时也是想把我学习到的内容做一个总结，或许能帮到有需要的人，或许能有大佬指出我的错误，让我能能及时更正学习；希望与大家一起共勉！本文并非零基础入门，需要学习例如promise、axios、vue-cli等基础知识以上就是今天要讲的内容，本文介绍了mock.js的使用，算是一个比较基础的使用，目的就是能快速入手模拟接口进行项目开发，更详细的random随机生成数据等之后有时间研究研究再说吧。
vue 项目 前端 模拟后端接口数据（vue2,vue3）
lzfengquan的博客
06-17 4092
项目中或者平常自己创建demo的过程中，往往需要后端配合，但是有时候没有后端，又需要数据，此时就展示了我们前端的强大之处，自己模拟后端接口数据。 如果自定义一个模拟后端数据， 首先创建一个文件夹放置后端数据，（backApp文件夹） 然后再命令终端，执行命令 npm init - y 或者 yarn init -y 初始化文件 之后 继续执行命令 npm i express request -D 下载对应的包 然后再创建新的文件，放置配置的接口数据（app.js文件） 主要的代码 配置 app.js 文
在vue中如何模拟接口
qq_46030141的博客
07-11 347
后面就可以直接调接口使用了。
vue//VUE中mock模拟数据和后台接口同时使用
weixin_37877794的博客
09-08 1939
https://www.jianshu.com/p/5d97d5e4af2c vue.config.js devServer: { port: port, open: true, host: '0.0.0.0', overlay: { warnings: false, errors: true }, before: require('./mock/mock-server.js'), proxy: { [proce
vue+mock.js实现前后端分离
10-16
主要为大家详细介绍了vue+mock.js实现前后端分离，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Vue & Axios & Mock & Axios-Mock-Adapter：在Vue项目中模拟接口、请求以及数据
aozhou9334的博客
08-26 439
0.首先需要会在vue项目中安装mockjs以及简单的mockjs语法 1.目录分为api和mock： 在api.js中封装代理函数 在mock/data/user.js中进行mock，这里模拟的是一组用户数据 在mock/mock.js中配置请求模拟调试器 两个不同的index.js都只是为了在main.js中引入时好看一点？（打扰了，我也不知道其他原因） 2. 先以...
Vue实战044：Mockjs模拟服务器Api接口并返回数据详解
linjingyg的博客
01-25 1450
　　前言 　　现在越来越多项目都采用前后端分离模式开发，这样前后端就可以同时开发，而且互不影响。但是目前项目跟进的很紧，没什么时间写后台，但是前端没接口测试可能会隐藏很多bug，到后面再来排查就麻烦了。所以在后端接口没有开发之前，我打算先用mockjs模拟下后端服务器，生成模拟的假数据，以便于顺利进行前端的开发工作。 　　 　　什么是Mockjs 　　Mockjs 是一款模拟数据生成工具，模拟 Ajax 请求，通过随机生成数据来模拟各种业务场景并返回模拟数据，帮助前端在后台未提供接口时实现独立开
探秘MockAPI：智能模拟接口开发利器
gitblog_00094的博客
03-27 276
探秘MockAPI：智能模拟接口开发利器 项目地址:https://gitcode.com/shanbay/mock-api 项目简介 MockAPI 是一款由扇贝团队开发的强大工具，旨在帮助开发者在项目初期或无真实后端服务的情况下快速构建和测试前端应用。它允许你定义模拟数据及接口行为，提供实时、灵活的API模拟服务。 技术分析 RESTful API 模拟 MockAPI 支持创建符合RESTf...
vue-admin-beautiful 同时使用Api和MockJs
weixin_69518525的博客
04-04 214
把baseURL设置为。
在vue中，你可以使用Axios库来进行RESTful API的请求和代理服务。
asdfUU99的博客
11-03 136
上述示例中，使用axios.get方法发送了一个GET请求到http://api.example.com/data接口，并通过.then 和 .catch 方法处理成功和失败的回调。上述配置将所有以/api/开头的请求代理到http://api.example.com接口。例如，使用axios.get(‘/api/data’)来发起代理请求。如果你希望在组件中使用代理服务器来访问API，可以在Vue项目的根目录中创建一个vue.config.js文件，并配置代理服务。
在Vue项目中使用Mock.js
pink_cz的博客
09-24 1844
随着互联网行业的发展，前后端分离已经成为了行业的主流，也是一种趋势。在这样一种趋势的推动下去开发项目，一定会遇到这样一个问题，后端接口未开发完毕，前端页面如何展示数据呢？这个时候就用到mock.js了。// 属性名 name // 生成规则 rule // 属性值 value 'name|rule' : value属性值是字符串 String// 通过重复 string 生成一个字符串，重复次数大于等于 min，小于等于 max。
vue中mock的使用及mock无侵入解决方案
weixin_44036130的博客
04-19 3331
一、什么是mock？ 看了官网的介绍，对前端来说“前后端分离”这点，大大提高了前端开发的效率 前端开发在商讨完需求、接口及数据格式后，就可以直接利用mock模拟后台返回的数据来进行代码开发 二、为什么要用到mock？ 下面我在画个流程图，帮助大家理解mock在项目中的处理逻辑 由此可以看出，前端可以利用mock服务来模拟请求后台数据，只要接口文档出来，就可以按照接口文档的api和数据...
在vue项目中使用mock.js（详解）
w001yy的博客
04-23 109
https://blog.csdn.net/weixin_44827418/article/details/115248478
vue3使用mock.js的具体步骤是什么？
02-22
使用mock.js的具体步骤是：1.首先，安装Mock.js；2.在Vue项目的根目录下新建一个mock文件夹；3.在mock文件夹中新建一个mock.js文件；4.在mock.js文件中编写模拟数据；5.在main.js中引入mock.js文件；6.最后，使用Mock.js模拟接口数据即可。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值