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…...
MPNet：旋转机械轻量化故障诊断模型详解python代码复现
目录 一、问题背景与挑战 二、MPNet核心架构 2.1 多分支特征融合模块（MBFM） 2.2 残差注意力金字塔模块（RAPM） 2.2.1 空间金字塔注意力（SPA） 2.2.2 金字塔残差块（PRBlock） 2.3 分类器设计 三、关键技术突破 3.1 多尺度特征融合 3.2 轻量化设计策略 3.3 抗噪声…...
使用VSCode开发Django指南
使用VSCode开发Django指南 一、概述 Django 是一个高级 Python 框架，专为快速、安全和可扩展的 Web 开发而设计。Django 包含对 URL 路由、页面模板和数据处理的丰富支持。 本文将创建一个简单的 Django 应用，其中包含三个使用通用基本模板的页面。在此…...
VB.net复制Ntag213卡写入UID
本示例使用的发卡器：https://item.taobao.com/item.htm?ftt&id615391857885 一、读取旧Ntag卡的UID和数据 Private Sub Button15_Click(sender As Object, e As EventArgs) Handles Button15.Click轻松读卡技术支持:网站:Dim i, j As IntegerDim cardidhex, …...
Cesium1.95中高性能加载1500个点
一、基本方式： 图标使用.png比.svg性能要好 <template><div id"cesiumContainer"></div><div class"toolbar"><button id"resetButton">重新生成点</button><span id"countDisplay&qu…...
基于uniapp+WebSocket实现聊天对话、消息监听、消息推送、聊天室等功能，多端兼容
基于 UniApp + WebSocket实现多端兼容的实时通讯系统，涵盖WebSocket连接建立、消息收发机制、多端兼容性配置、消息实时监听等功能，适配微信小程序、H5、Android、iOS等终端 目录 技术选型分析WebSocket协议优势UniApp跨平台特性WebSocket 基础实现连接管理消息收发连接…...
大数据零基础学习day1之环境准备和大数据初步理解
学习大数据会使用到多台Linux服务器。 一、环境准备 1、VMware 基于VMware构建Linux虚拟机 是大数据从业者或者IT从业者的必备技能之一也是成本低廉的方案 所以VMware虚拟机方案是必须要学习的。 （1）设置网关 打开VMware虚拟机，点击编辑…...
sqlserver 根据指定字符 解析拼接字符串
DECLARE LotNo NVARCHAR(50)A,B,C DECLARE xml XML ( SELECT <x> REPLACE(LotNo, ,, </x><x>) </x> ) DECLARE ErrorCode NVARCHAR(50) -- 提取 XML 中的值 SELECT value x.value(., VARCHAR(MAX))…...
三体问题详解
从物理学角度，三体问题之所以不稳定，是因为三个天体在万有引力作用下相互作用，形成一个非线性耦合系统。我们可以从牛顿经典力学出发，列出具体的运动方程，并说明为何这个系统本质上是混沌的，无法得到一般解…...
【C语言练习】080. 使用C语言实现简单的数据库操作
080. 使用C语言实现简单的数据库操作 080. 使用C语言实现简单的数据库操作使用原生APIODBC接口第三方库ORM框架文件模拟1. 安装SQLite2. 示例代码：使用SQLite创建数据库、表和插入数据3. 编译和运行4. 示例运行输出：5. 注意事项6. 总结080. 使用C语言实现简单的数据库操作 在…...
CMake 从 GitHub 下载第三方库并使用
有时我们希望直接使用 GitHub 上的开源库，而不想手动下载、编译和安装。 可以利用 CMake 提供的 FetchContent 模块来实现自动下载、构建和链接第三方库。 FetchContent 命令官方文档✅ 示例代码 我们将以 fmt 这个流行的格式化库为例，演示如何： 使用 FetchContent 从 GitH…...