vue请求本地JSON文件(注意路径 否则会404)

npm i axios

// main.js

import axios from "axios";

Vue.prototype.$axios = axios; //全局注册,使用方法为:this.$axios...

vue/cli 2

json文件存放目录为  根目录下static/json/aaa.json 

// 使用
    getVideoData() {
      this.$axios
        .create({
          baseURL: "",
          timeout: 5000,
          headers: { "Content-type": "multipart/form-data" }
        })
        .get("../../../../static/json/videoData.json")
        .then(res => {
          console.log(res);
        });
    },

高版本的cli

json文件存放目录为 public/aaa.json

// 使用


           /**
             * @Interface 接口
             * @description: 模拟数据请求(请求本地JSON文件)
             * */
            getFunctionBox() {
                console.log(this.functionBox)
                console.log(this.functionBox1)
                this.$axios
                    .create({
                        baseURL: "",
                        timeout: 5000,
                        headers: {"Content-type": "multipart/form-data"}
                    })
                    .get("/functionBox.json")
                    .then(res => {
                        console.log(res);
                    });

                // 或
                // this.$axios.get("/functionBox.json").then(res => {
                //     console.log(res)
                // })
            }

效果

 

注意: json文件路径必须与上文保持一致!!!否则会404

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

springboot 部署k8s(二)

系列文章目录 目录 系列文章目录 前言 操作步骤 1.springboot.yaml文件 2.查看deployment 3.查看service服务 4.验证服务 总结 前言 springboot 部署到k8s 上。里面涉及了deployment, Service, NodePort. 操作步骤 1.springboot.yaml文件 apiVersion: apps/v1 kind: …

codeblocks20.3配置wxWidget3.2.2.1

codeblocks20.3 # 英文版自带gcc810,不汉化 wxWidget3.2.2.1 github下载源码 win11专业版 1.下载wxWidget3.2.2.1 源码 2.下载后解压到一个目录中,不要含中文和空格。我放在:d:\wxWidget3.2.2.1 3.打开终端cd build/msw 4.编译wxWidgets 为 …

本行卡转账基本流程说明

1、业务大致流程 2、基本业务描述 大概流程说明:(牵涉到调用硬件、不便多说) 用户插卡后、选择转账交易、依次输入转入账户卡号和转账金额后,用户确定转账信息;转账交易发送前:需要根据插卡账户信息和转账…

Java基础(四)数组

1. 数组的概述 1.1 为什么需要数组 需求分析1: 需要统计某公司50个员工的工资情况,例如计算平均工资、找到最高工资等。用之前知识,首先需要声明50个变量来分别记录每位员工的工资,这样会很麻烦。因此我们可以将所有的数据全部存…

TCP报文 Flood攻击原理与防御方式

TCP交互过程中包含SYN、SYN-ACK、ACK、FIN和RST报文,这几类报文也可能会被攻击者利用,海量的攻击报文会导致被攻击目标系统资源耗尽、网络拥塞,无法正常提供服务。接下来我们介绍几种常见的Flood攻击的原理和防御方式。 SYN Flood攻击与防御…

【Qt】项目开发遇到问题及解决总结

1.控件的触发:toggle()、triggered()、clicked() 区别: 都是按钮点击后发射的信号 clicked():用于Button发射的信号triggered():用于QAction发射的信号, trigger是一次性的。 点击后,无法改变状态。 要么…

【案例教程】基于RWEQ模型的土壤风蚀模数估算及其变化归因分析实践技术

土壤风蚀是一个全球性的环境问题。中国是世界上受土壤风蚀危害最严重的国家之一,土壤风蚀是中国干旱、半干旱及部分湿润地区土地荒漠化的首要过程。中国风蚀荒漠化面积达160.74104km2,占国土总面积的16.7%,严重影响这些地区的资源开发和社会经…

论文笔记|ECCV2022:Self-Promoted Supervision for Few-Shot Transformer

论文地址:https://arxiv.org/abs/2203.07057 代码链接:https://github.com/DongSky/few-shot-vit 这篇论文在2022年发表在ECCV上,论文的题目是用于小样本Transformer的self-promoted supervision(自我推荐监督) 1 Mot…

求给定集合中好数对的个数

已知一个集合A,对A中任意两个不同的元素求和,若求得的和仍在A内,则称其为好数对。例如,集合A{1 2 3 4},123,134,则1,2和1,3 是两个好数对。 编写程序求给定集合中好数对的个数。 注:…

java设计模式(1) 适配器模式、装饰器模式

适配器模式 适配器就是一种适配中间件,它存在于不匹配的了两者之间,用于连接两者,使不匹配变得匹配。 手机充电需要将220V的交流电转化为手机锂电池需要的5V直流电 知识补充:手机充电器输入的电流是交流,通过变压整流…

XML复习

目录什么是XMLXML中的内容可以干什么XML文件的创建以及其格式XML的文档约束-DTD约数XML的文档约束-schema约束Dom4J 解析XML 文档什么是XML XML 全称(extensible Markup Lanage) 可扩展标记语言它是一种数据的表示形式, 可以存储复杂的数据格式以及我们自己定义的格式.XML经常…

windows安装ubuntu时错误WslRegisterDistribution failed with error: 0x8007023e的解决方法

cmd或者powershell安装,或者打开linux时 莫名的出现了如下错误: Installing, this may take a few minutes... WslRegisterDistribution failed with error: 0x8007023e Error: 0x8007023e {Application Error} The exception s (0x尝试了很多的方法都不…

Qt图片显示有波纹

现象 Qt中当渲染显示的分辨率比原图片分辨率小时,就会有波纹。如下图所示,左边是正常显示,右边衬衫那里产生严重的波纹。这种波纹在计算机图形学叫摩尔纹,这是纹理贴图采样出现走样的现象,纹理分辨率过大时就会出现这…

解决Windows微信和 PowerToys 的键盘管理器冲突

Windows开机之后PowerToys能正常使用, 但是打开微信之后设置好的快捷键映射就全部失效了 打开微信 -> 左下角三条杠 -> 设置 -> 快捷键 首先我把微信的快捷键全部清空了,发现还是没用 然后发现了设置里默认勾选了检测快捷键,我在想程序肯定是一直在后台检测,而powerTo…

可以计算“如何把程序写好”吗?

其实简单理解这个问题就是“可不可以用机器来判断人的程序写得好不好? 后面我查阅了资料,历史上有一个对计算机领域影响颇深的可计算理论,“计算”应该就来源于这里。其实继续深挖还能找出很多涉及计算机本源的有趣的知识,比如图…

异构计算给我们带来了哪些思考?

虽然异构计算的快速发展给企业创新带来了更加强大的算力支撑,但真正推动异构计算的高速发展和应用落地,笔者认为还需要在以下三个方面做好功课。 从2022年火爆全球的元宇宙,到今年的ChatGPT,以人工智能为代表的科学技术正在创造出…

Unity Animation -- 改进动画效果

使用曲线(Curves)改善动画 在上一篇笔记中(Unity Animation -- Overview_亦枫Leonlew的博客-CSDN博客),我们制作了简单的小球弹跳的动画,但这个动画看起来很不自然,小球的弹跳看起来就像是不受…

Vue3信息提示(Modal)

Vue2信息提示(Modal) 可自定义设置以下属性: 标题描述(title),类型:string,默认 Title 内容描述(content),类型:string,…

盲盒经济下与社交电商结合,打造电商卖货新模式

如今,盲盒经济正在从线下延伸到线上,从潮流玩具扩展到美妆、食品、服装、数码等领域,形成了一种新的电商生态。 什么是盲盒电商? 盲盒电商是一种电商行业的营销模式,通过发起盲盒活动或拆盲盒,让参与者不…

MongoDB 查询文档(3)

我们之前讲解过,查询文档的语法: db.collection.find(query, projection, options) 其中 query 代表的是查询过滤器,projection 代表的是文档返回的字段,options 代表的是用于查询的其他选项; 我们已经对query进行了…
最新文章