Vue使用fetch获取本地数据
（1）使用get
test.json文件
{
"list":[111,222,333]
}
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body><div id="box"><button @click="handleClick">click</button>{{list}}</div><script>var obj = {data(){return{list:[]}},methods: {handleClick(){// 基于promisefetch("./test.json").then(// res=>{return res.json()}res=>res.json() // 简写 返回请求头响应头的一些信息).then(res=>{console.log(res,'res')this.list = res.list})// fetch("./test.json")// .then(// res=>res.text() // 不确定是json格式 用text保险// )// .then(res=>{// console.log(res,'res')// })}},}Vue.createApp(obj).mount('#box')</script>
</body>
</html>遇到报错如下
安装插件 Preview on Web Server （使用Open with Live Server会有点小bug）
（2）使用post
1）安装工具 帮助创建接口 npm i json-server -g 允许跨域
2）启动命令 使用json-server --watch .\test2.json 访问文件；中间报错是json文件内容格式不对，修改一下
3）访问http://localhost:3000/list ；如果遇到禁止运行脚本就用管理员身份设置 set-ExecutionPolicy RemoteSigned
4）代码部分
test2.json文件
{
"list": [
{
"name": "seki",
"age": 18,
"id": "1"
}
]
}
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body><div id="box"><button @click="handleClick">click</button>{{list}}</div><script>var obj = {data(){return{list:null}},methods: {handleClick(){// 基于promise// fetch("http://localhost:3000/list")// .then(res=>res.json())// .then(res=>{// console.log(res,'res')// this.list = res// })// 方式2var params ={name:'cj',age:20}fetch("http://localhost:3000/list",{method:"POST", // post POST 都可以 headers:{'Content-Type':'application/json', // 不同请求头入参格式不一样},body:JSON.stringify(params)}).then(res=>res.json()).then(res=>{console.log(res)})// put 更新// fetch("http://localhost:3000/list/2",{// method:"put", // headers:{// 'Content-Type':'application/json',// },// body:JSON.stringify({name:'xiaoxin'})// }).then(res=>res.json())// .then(res=>{// console.log(res)// })// fetch("http://localhost:3000/list/2",{// method:"delete", // headers:{// 'Content-Type':'application/json',// },// }).then(res=>res.json())// .then(res=>{// console.log(res)// })}},}Vue.createApp(obj).mount('#box')</script>
</body>
</html>相关文章：
Vue使用fetch获取本地数据
（1）使用get test.json文件 { "list":[111,222,333] } <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initi…...
《酒饮真经》秘籍4，让你的酒场技巧更上一层楼！
在酒桌这一独特的舞台上，每个人都扮演着不同的角色，或攻或守，尽显智慧与风度。对于不擅长喝酒的人来说，如何在推杯换盏间既保护自己又不失礼节，是值得我们仔细研究的。下面是酱酒亮哥为您整理的一系列实用的酒桌攻防秘…...
回车符与快捷键记录
一.在Windows和Linux操作系统中，回车符（或称为换行符）的处理方式区别 1.Windows下的回车符 在Windows系统中，回车符通常是由两个字符组成的序列：回车符（Carriage Return，简称CR，AS…...
计算机网络-VRRP工作原理
一、VRRP工作原理 前面我们大概了解了VRRP的一些基础概念，现在开始学习VRRP的技术原理。VRRP的选举及工作步骤： 确定网关地址 选举主备 主设备发送VRRP报文通知Backup设备 主设备响应终端ARP并维持在Master状态 终端正常发送报文到网关进行转发 因为我们…...
6.5椒盐噪声
在OpenCV中联合C给一张图片加上椒盐噪声（Salt and Pepper Noise）可以通过随机选择像素点并将其置为黑色（0）或白色（255）来实现。椒盐噪声是一种随机噪声，通常表现为图像中的孤立黑点（…...
CSS样式的引用方式以及选择器使用
1. CSS 引用方式 CSS 可以通过三种方式引用到 HTML 文件中： 行内样式（Inline Styles）：直接在 HTML 元素中定义样式。内部样式表（Internal CSS）：在 HTML 文档的 <head> 部分使用 <sty…...
Python Flask_APScheduler定时任务的正确(最佳)使用
描述 APScheduler基于Quartz的一个Python定时任务框架，实现了Quartz的所有功能。最近使用Flask框架使用Flask_APScheduler来做定时任务，在使用过程当中也遇到很多问题，例如在定时任务调用的方法中需要用到flask的app.app_context()时&#…...
Linux命名管道
通信的前提是让不同的进程看到同一份资源，因为路径是具有唯一性的，所以我们可以使用路径文件名来唯一的让不同进程看到同一份资源，实现没有血缘关系的两个进程进行管道通信 1.指令级 mkfifio（FILENAME,0666） …...
Xinstall助力App全渠道统计，参数传递下载提升用户体验！
在移动互联网时代，App已成为我们日常生活中不可或缺的一部分。然而，对于App开发者来说，如何有效地推广和运营自己的应用，却是一个不小的挑战。尤其是在面对众多渠道、复杂的数据统计和用户需求多样化的情况下，如何精准…...
【时时三省】(C语言基础)指针进阶 例题4
山不在高，有仙则名。水不在深，有龙则灵。 ----CSDN 时时三省 strlen是求字符串长度 这个需要算上＼0 第一个arr 是打印6 因为它加上＼0是有六个元素 第二个arr0 数组名相当于首元素的地址 a的地址加0还是a的地址 所以这个地方还是…...
k8s的配置管理
一、配置管理分为两种： 1. 加密配置：用来保存密码和token密钥对以及其它敏感的k8s资源。 2.应用配置：我们需要定制化的给应用进行配置，我们需要把定制好的配置文件同步到pod当中的容器。 二、加密配置 1.secret三种类型…...
JAVA- 多线程
一，多线程的概念 1.并行与并发 并行：多个任务在同一时刻在cpu 上同时执行并发：多个任务在同一时刻在cpu 上交替执行 2.进程与线程 进程：就是操作系统中正在运行的一个应用程序。所以进程也就是“正在进行的程序”。࿰…...
【Qt】解决设置QPlainTextEdit控件的Tab为4个空格
前言 PyQt5 是一个用于创建跨平台桌面应用程序的 Python 绑定集合，它提供了对 Qt 应用程序框架的访问。用于开发具有图形用户界面（GUI）的应用程序，以及非GUI程序。PyQt5 使得 Python 开发者可以使用 Qt 的丰富功能来构建应用程序。…...
elementUI根据列表id进行列合并@莫成尘
本文章提供了elementUI根据列表id进行列合并的demo，效果如图（可直接复制代码粘贴） <template><div id"app"><el-table border :data"tableList" style"width: 100%" :span-method"objectS…...
基于人工智能的智能安防监控系统
目录 引言项目背景环境准备 硬件要求软件安装与配置系统设计 系统架构关键技术代码示例 数据采集与预处理模型训练与预测实时监控与检测应用场景结论 1. 引言 随着科技的发展，智能安防监控系统逐渐成为家庭、企业和公共场所保障安全的核心工具。通过人工智能和计…...
分享从零开始学习网络设备配置--任务6.3 使用基本ACL限制网络访问
任务描述 某公司构建了互联互通的办公网，为保护公司内网用户数据的安全，该公司实施内网安全防范措施。公司分为经理部、财务部和销售部，分属3个不同的网段，3个部门之间用路由器进行信息传递。为了安全起见，公司领导要求…...
数据结构——线性表（静态链表、循环链表以及双向链表）
1、静态链表 用数组描述的链表叫做静态链表，这种描述方法叫做游标实现法。 静态链表需要对数组的第一个和最后一个元素作为特殊元素处理，不存数据。 最后一个指向第一个有数据的下标地址，第一个游标指向第一个没有数据的下标地址。 我们对…...
vue3_对接腾讯_实时音视频
项目需要对接腾讯的实时音视频产品，我这里选择的是多人会议，选择其他实时音视频产品对接流程也一样，如何对接腾讯实时音视频的多人会议产品，从开通服务到对接完成，一 一讲解。 一、开通腾讯实时音视频 1.腾讯实时音视…...
一台电脑对应一个IP地址吗？探讨两台电脑共用IP的可能性
在当今数字化时代，IP地址作为网络世界中的“门牌号”，扮演着至关重要的角色。它负责在网络上唯一标识每一台设备，使得数据能够在庞大的互联网中准确无误地传输。然而，对于IP地址与电脑之间的对应关系，许…...
XInput手柄输入封装
功能全面地封装了XInput的输入, 1. 普通按钮按下, 按住, 弹起状态检查, 2. 摇杆4个方向的按下, 按住, 弹起检查 3. 按键状态变化检测并且记录按下触发时间, 按住保持时间, 方便用来完全自定义的输入功能 4. 多手柄输入合并 CXinputHelper.h #pragma once #include <win…...
从Simulink模型到神经网络：一个完整的数据驱动建模与验证实践
1. 为什么需要从Simulink模型转向神经网络？ 在控制系统工程领域，Simulink模型一直是建模和仿真的黄金标准。但最近几年，越来越多的工程师开始尝试用神经网络来替代传统模型。这背后有几个关键原因： 首先，传统物理模型在…...
基于S7-300与组态王的智能药片装瓶机控制系统优化设计
1. 智能药片装瓶机控制系统的核心价值 在制药生产线上，药片装瓶环节看似简单却暗藏玄机。传统的人工装瓶方式不仅效率低下，还容易出现计数错误、交叉污染等问题。我曾在某药企亲眼见过工人因疲劳导致装瓶数量出错，最终整批药品不得不报废的案…...
第一次降AIGC率不知道从哪入手？这份保姆级操作手册帮你
第一次操作的话，照着下面的步骤来，15分钟内搞定降AIGC率、降AI工具保姆级测评2026、降AI。 工具选嘎嘎降AI（www.aigcleaner.com），达标率99.26%，有退款保障，操作也不复杂。 准备工作 需要准备的…...
微服务架构的陷阱：我们是如何从拆分成“微”麻烦的
对于软件测试从业者而言，微服务架构的兴起既带来了前所未有的挑战，也揭示了隐藏在水面之下的诸多陷阱。从单体应用向微服务转型，初衷是为了提升系统的灵活性、可维护性和团队的交付效率。然而，在实践中，许多团队却发现…...
Kodi中文插件库终极指南：3分钟打造你的智能家庭影院
Kodi中文插件库终极指南：3分钟打造你的智能家庭影院 【免费下载链接】xbmc-addons-chinese Addon scripts, plugins, and skins for XBMC Media Center. Special for chinese laguage. 项目地址: https://gitcode.com/gh_mirrors/xb/xbmc-addons-chinese 还在…...
天问Block环境下ASRPRO语音芯片实战：语音交互、GPIO控制与PWM调光开发指南
1. 天问Block与ASRPRO芯片开发入门 第一次接触天问Block和ASRPRO语音芯片时，我被它们的组合惊艳到了。这个开发环境就像乐高积木一样，通过拖拽代码块就能完成复杂的功能开发，特别适合像我这样的硬件爱好者。ASRPRO作为一款专为语音交互设计的…...
【可分离架构物理信息神经网络：破解维度灾难的分离变量方法论】第2章 SPINN：可分离物理信息神经网络架构
目录 (Chapter 2: SPINN: Separable Physics-Informed Neural Networks) 2.1 SPINN的架构设计原理 2.1.1 按坐标轴的体网络（Body Networks）设计 2.1.2 特征融合机制与参数效率 2.2 前向模式自动微分与计算优化 2.2.1 前向自动微分在分离架构中的优势 2.2.2 超大规模配…...
大多数团队不是“用不好 PPO”，而是“用错了 PPO”
更多时候，你会听到的是： “PPO 太复杂了，算了”“调了一轮，模型变怪了”“感觉不如再多搞点 SFT 数据” 于是 PPO 很容易被贴上一个标签： “理论上很强，工程上很坑。” 但这个结论，其实并不公…...
如何高效使用猫抓cat-catch：5个关键技巧完全指南
如何高效使用猫抓cat-catch：5个关键技巧完全指南 【免费下载链接】cat-catch 猫抓 浏览器资源嗅探扩展 / cat-catch Browser Resource Sniffing Extension 项目地址: https://gitcode.com/GitHub_Trending/ca/cat-catch 你是否经常遇到这样的情况：…...
Univer：企业级协作平台开发实战
Univer：企业级协作平台开发实战 【免费下载链接】univer Build AI-native spreadsheets. Univer is a full-stack framework for creating and editing spreadsheets on both web and server. With Univer Platform, Univer Spreadsheets is driven directly throug…...