当前位置: 首页 > news >正文

vue3 使用Mock

在这里插入图片描述

官网: http://mockjs.com/

安装  npm  install  mockjs -D

steps1: main.js 文件引入

import '@/api/mock.js'

steps2: src/api/mock.js

import Mock from 'mockjs'
import homeApi from './mockData/home'
/*** 1.拦截的路径:mock拦截了正常NetWork/网络请求,数据正常响应* 2.方法* 3.制造假数据*/
Mock.mock(/api\/home\/getTableData/, 'get', homeApi.getTableData)

steps3: 编造数据

src/api/mockData/home.js
export default {getTableData: () => {return {code: 200,data: {tableData: [{name: 'oppo',todayBuy: 500,monthBuy: 3500,totalBuy: 22000}]}}}
}

steps4: 页面发起请求

import axios from 'axios'
axios({url: '/api/home/getTableData',method: 'get'
}).then((res) => {const data = res.data.getTableDataif (data.code == 200) {tableData.value = data.data.tableData}
})

相关文章:

  • 【深度学习】yolov8-seg分割训练,拼接图的分割复原
  • 使用 Windows 应用程序 SDK 构建下一代应用程序
  • Godot入门 02玩家1.0版
  • 数据结构【没头单链表】
  • bug诞生记——动态库加载错乱导致程序执行异常
  • 典型二进制翻译系统---用户级翻译
  • NAND Flash 的 SDR、ONFI、DDR 接口
  • deepseek-vl 论文阅读笔记
  • ubuntu在命令行输出里查找内容,dmesg
  • OSPF概述
  • 【cuda】在老服务器上配置CUDA+cmake开发环境
  • 内网渗透—内网穿透工具NgrokFRPNPSSPP
  • Linux进程——环境变量之二
  • 【计算机网络】WireShark和简单http抓包实验
  • 软考:软件设计师 — 5.计算机网络
  • [deviceone开发]-do_Webview的基本示例
  • electron原来这么简单----打包你的react、VUE桌面应用程序
  • Invalidate和postInvalidate的区别
  • PV统计优化设计
  • Vue--数据传输
  • 关于Flux,Vuex,Redux的思考
  • 互联网大裁员:Java程序员失工作,焉知不能进ali?
  • 简单基于spring的redis配置(单机和集群模式)
  • 嵌入式文件系统
  • 微信支付JSAPI,实测!终极方案
  • UI设计初学者应该如何入门?
  • ​软考-高级-信息系统项目管理师教程 第四版【第23章-组织通用管理-思维导图】​
  • ​学习一下,什么是预包装食品?​
  • ‌前端列表展示1000条大量数据时,后端通常需要进行一定的处理。‌
  • # Redis 入门到精通(七)-- redis 删除策略
  • #ifdef 的技巧用法
  • #Ubuntu(修改root信息)
  • ${factoryList }后面有空格不影响
  • (笔试题)分解质因式
  • (待修改)PyG安装步骤
  • (二)hibernate配置管理
  • (二)换源+apt-get基础配置+搜狗拼音
  • (附源码)spring boot校园拼车微信小程序 毕业设计 091617
  • (一)spring cloud微服务分布式云架构 - Spring Cloud简介
  • *算法训练(leetcode)第四十七天 | 并查集理论基础、107. 寻找存在的路径
  • .NET CF命令行调试器MDbg入门(一)
  • .net core Redis 使用有序集合实现延迟队列
  • .net core 调用c dll_用C++生成一个简单的DLL文件VS2008
  • .Net Remoting(分离服务程序实现) - Part.3
  • .NET Windows:删除文件夹后立即判断,有可能依然存在
  • .Net8 Blazor 尝鲜
  • /usr/lib/mysql/plugin权限_给数据库增加密码策略遇到的权限问题
  • @CacheInvalidate(name = “xxx“, key = “#results.![a+b]“,multi = true)是什么意思
  • @requestBody写与不写的情况
  • [Angular 基础] - 自定义指令,深入学习 directive
  • [bzoj1912]异象石(set)
  • [C#][DevPress]事件委托的使用
  • [C++][数据结构][算法]单链式结构的深拷贝
  • [C++]类和对象【上篇】
  • [C++初阶]vector的初步理解