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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/385774.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

货架管理a

路由->vue的el标签->Api->call方法里calljs的api接口->数据声明const xxxData-> 编辑按钮:点击跳出页面并把这一行的数据给到表单formDataba2 保存按钮:formDataba2改过的数据->xxApi发送->查询Api 跳转仓库:把tableData.value数据清空->callXxxAp…

传输层协议——TCP

TCP协议 TCP全称为“传输控制协议”,要对数据的传输进行一个详细的控制。 特点 面向连接的可靠性字节流 TCP的协议段格式 源/目的端口:表示数据从哪个进程来,到哪个进程4位首部长度:表示该TCP头部有多少字节(注意它…

前后端分离项目部署,vue--nagix发布部署,.net--API发布部署。

目录 Nginx免安装部署文件包准备一、vue前端部署1、修改http.js2、npm run build 编译项目3、解压Nginx免安装,修改nginx.conf二、.net后端发布部署1、编辑appsetting.json,配置跨域请求2、配置WebApi,点击发布3、配置文件发布到那个文件夹4、配置发布相关选项5、点击保存,…

搭建自己的金融数据源和量化分析平台(三):读取深交所股票列表

深交所的股票信息读取比较简单: 看上图,爬虫读取到下载按钮的链接之后发起请求,得到XLS文件后直接解析就可以了。 这里放出深交所爬虫模块的代码: # -*- coding: utf-8 -*- # 深圳交易所爬虫 import osimport pandas as pd imp…

Python代码格式化工具库之black使用详解

概要 在软件开发过程中,代码风格和一致性对于提高代码可读性和可维护性至关重要。Python 作为一种高度可读的语言,有多种代码风格指南,但手动保持代码风格的一致性可能会非常耗时且容易出错。black 是一个 Python 代码格式化工具,旨在通过自动格式化代码,使其符合 PEP 8 …

深入浅出mediasoup—WebRtcTransport

mediasoup 提供了多种 transport,包括 WebRtcTransport、PipeTransport、DirectTransport、PlainTransport 等,用来实现不同目的和场景的媒体通信。WebRtcTransport 是 mediasoup 实现与 WebRTC 客户端进行媒体通信的对象,是 mediasoup 最重要…

Clickhouse 生产集群部署(Centos 环境)

文章目录 机器环境配置安装 JDK 8安装 zookeeperClickhouse 集群安装rpm 包离线安装修改全局配置zookeeper配置Shard和Replica设置image.png添加macros配置启动 clickhouse启动 10.82.46.135 clickhouse server启动 10.82.46.163 clickhouse server启动 10.82.46.218 clickhous…

[网络通信原理]——TCP/IP模型—网络层

网络层 网络层概述 网络层位于OSI模型的第三层,它定义网络设备的逻辑地址,也就是我们说的IP地址,能够在不同的网段之间选择最佳数据转发路径。在网络层中有许多协议,其中主要的协议是IP协议。 IP数据包格式 IP数据报是可变长度…

汽车长翅膀:GPU 是如何加速深度学习模型的训练和推理过程的?

编者按:深度学习的飞速发展离不开硬件技术的突破,而 GPU 的崛起无疑是其中最大的推力之一。但你是否曾好奇过,为何一行简单的“.to(‘cuda’)”代码就能让模型的训练速度突飞猛进?本文正是为解答这个疑问而作。 作者以独特的视角&…

如何使用代理IP进行电子邮件保护?

🎬 鸽芷咕:个人主页 🔥 个人专栏: 《C干货基地》《粉丝福利》 ⛺️生活的理想,就是为了理想的生活! 前言 随着企业信息化的深入发展,电子邮件在私人生活和商业运营中起到越来越重要的作用,随之而来电子邮件…

【编程工具使用技巧】VS如何显示行号

💓 博客主页:倔强的石头的CSDN主页 📝Gitee主页:倔强的石头的gitee主页 ⏩ 文章专栏:《编程工具与技巧探索》 期待您的关注 目录 引言 一、VS编译器行号显示的基本步骤 1.打开VS与项目 2.进入选项设置 3.找到并…

LeetCode 637, 67, 399

文章目录 637. 二叉树的层平均值题目链接标签思路代码 67. 二进制求和题目链接标签思路代码 399. 除法求值题目链接标签思路导入value 属性find() 方法union() 方法query() 方法 代码 637. 二叉树的层平均值 题目链接 637. 二叉树的层平均值 标签 树 深度优先搜索 广度优先…

SQL语句(以MySQL为例)——单表、多表查询

笛卡尔积(或交叉连接): 笛卡尔乘积是一个数学运算。假设我有两个集合 X 和 Y,那么 X 和 Y 的笛卡尔积就是 X 和 Y 的所有可能组合,也就是第一个对象来自于 X,第二个对象来自于 Y 的所有可能。组合的个数即为两个集合中…

开源监控 - 夜莺项目 v7 正式发版了

前言 上周五去参加了第二届 CCF夜莺开发者创新论坛,在会上,夜莺 v7 LTS 版本正式发布,另有多名嘉宾分享了自己公司的可观测性实践经验,挺有收获。 夜莺 v7 新功能 夜莺 v7 版本更多的着眼在提升用户体验,开箱即用方面…

在WPF中使用WebView2详解

Microsoft Edge WebView2 Microsoft Edge WebView2 控件允许在本机应用中嵌入 web 技术(HTML、CSS 以及 JavaScript)。 WebView2 控件使用 Microsoft Edge 作为绘制引擎,以在本机应用中显示 web 内容。 使用 WebView2 可以在本机应用的不同部分嵌入 Web 代码&…

apache2和httpd web服务器

apache2和httpd web服务器 apache2和httpd web服务器是啥apache是软件基金会apache2是一个web服务httpd和apache2是同一个东西,但是不同linux发行版中叫法不一样。就是同一个东西,但是看上去有一些不一样。 apache2和httpd web服务器是啥 apache是软件基…

AI学习记录 -使用react开发一个网页,对接chatgpt接口,附带一些英语的学习prompt

实现了如下功能(使用react实现,原创) 实现功能: 1、对接gpt35模型问答,并实现了流式传输(在java端) 2、在实际使用中,我们的问答历史会经常分享给他人,所以下图的 copy …

Hive多维分析函数——With cube、Grouping sets、With rollup

有些指标涉及【多维度】的聚合,大的汇总维度,小的明细维度,需要精细化的下钻。 grouping sets: 多维度组合,组合维度自定义;with cube: 多维度组合,程序自由组合,组合为…

日拱一卒 | JVM

文章目录 什么是JVM?JVM的组成JVM的大致工作流程JVM的内存模型 什么是JVM? 我们知道Java面试,只要你的简历上写了了解JVM,那么你就必然会被问到以下问题: 什么是JVM?简单说一下JVM的内存模型?…

大疆创新2025校招内推

大疆2025校招-内推 一、我们是谁? 大疆研发软件团队,致力于把大疆的硬件设备和大疆用户紧密连接在一起,我们的使命是“让机器有温度,让数据会说话”。 在消费和手持团队,我们的温度来自于激发用户灵感并助力用户创作…