Vue3学习宝典
1.ref函数调用的方式生成响应式数据,可以传复杂和简单数据类型
<script setup>
// reactive接收一个对象类型的数据
import { reactive } from 'vue';// ref用函数调用的方式生成响应式数据,可以传复杂和简单数据类型
import { ref } from 'vue'
// 简单数据类型
const count = ref(0)// 复杂数据类型
const user = ref({name: '小夏',age: 18
})const subCount = () => {count.value--
}function addCount() {count.value++
}</script><style></style><template><!-- ref --><div>{{ count }}</div><br><button @click="subCount">-1</button><button @click="addCount">+1</button><div>{{ user.name + user.age }}</div><br>
</template>
2.computed计算属性(依赖的数据发生变化时实时更新)
<script setup>
import { ref } from 'vue'
const list = ref([1, 2, 3, 4, 5, 6])//计算属性
import { computed } from 'vue';
const computedList = computed(() => {return list.value.filter(item => item > 2)
})const addFn = () => {list.value.push(4)
}
console.log(list.value)
</script><style></style><template><div>{{ computedList }}</div><button @click="addFn">添加</button>
</template>
3.watch监视单个数据的变化(相当于操作日志)
<script setup>
import { ref, watch } from 'vue'const num = ref(1)
const name = ref('李四')const changeNum = () => {num.value++
}
const changeName = () => {name.value = name.value + 1
}const obj = ref({name:'老夏',age:18
})
const changeObjName = ()=>{obj.value.name = '小夏'
}//监视单个数据的变化
// 1.watch默认浅层监视,不会监视对象里的属性的值的改变
watch(obj,(newValue,laoValue)=>{console.log('监视单个数据的变化')console.log(newValue,laoValue)
},{// 2.深层监视,可以监视对象里的属性的值的改变deep:true
}
)//监视多个数据的变化
watch([num,name], (newArr, oldArr) => {console.log('监视多个数据的变化')console.log('新数据:' + newArr, '老数据:' + oldArr)
},// 3.immediate一进页面就立即刷新一次{immediate: true,}
)//监视单个对象属性的变化
watch(()=>obj.value.name,(newValue,oldValue)=>{console.log('监视单个对象属性的变化')console.log(newValue,oldValue)
})
</script><style></style><template><div>{{ num }}</div><button @click="changeNum">+++</button><div>{{ name }}</div><button @click="changeName">改名字</button><div>{{ obj.name }}</div><button @click="changeObjName">改对象里面属性的值</button>
</template>
4.Props-Emits组件相互传数据
父组件
<script setup>
import son from '@/components/04-son.vue'
import { ref } from 'vue'const money = ref(1000)
// ele就是子组件传来的属性值
const changeMoney = (attributeValue) => {console.log('子组件花了' +attributeValue)
}
</script><style></style><template><div><!-- car,money里面的属性值直接传给了子组件 --><!-- layOut是子组件向父组件传的值 --><son car="车车" :money="money" @layOut="changeMoney"></son></div>
</template>
子组件
<script setup>
//子组件
// defineProps是固定的写法,定义接收数据的属性名,和属性值类型
const props = defineProps({car: String,money: Number
})//defineEmits([自定义一个属性名])
const emit = defineEmits(['layOut'])// 通过emit向父组件发送数据
const buy = () => {emit('layOut', 100)
}
console.log(props.car)
console.log(props.money)
</script>
<style scoped>
.son {width: 100px;height: 100px;border: 1px solid;
}
</style>
<template><div class="son">子组件</div><div>父组件给了{{ props.money }}</div><button @click="buy">花钱</button>
</template>
5.defineExpose开放属性和方法
父组件
<script setup>
import { ref,onMounted } from 'vue'
import son05 from '@/components/05-son.vue'const input = ref()// 生命周期钩子 onMounted ,一进页面输入框就聚焦
onMounted(() =>{// input.value.focus()
})//绑定事件聚焦
const onClick = ()=>{input.value.focus()
}const getSonData = ref()
const putSonData = ()=>{const fatherName = getSonData.value.nameconsole.log(getSonData.value.greeting())console.log(fatherName)
}</script><style></style><template>
<input type="text" ref="input">
<button @click="onClick">聚焦</button>
<son05 ref="getSonData"></son05>
<button @click="putSonData">获取儿子组件中的数据</button>
</template>
子组件
<script setup>
const name = "儿子的数据"
const greeting = () => {console.log('hello儿子的数据')return '默认rturn未定义'
}// setup语法糖下的组件内部的属性和方法不供外部组件访问
// 可以通过defineExpose编译宏指定哪些属性和方法允许访问
defineExpose({name,greeting
})</script>
<template></template>
6.provide-inject提供和注入数据
父组件
<script setup>
import inject from '@/components/06-inject.vue'
import { provide,ref } from 'vue';//1.提供普通数据给其他组件
provide('commonData',"这是我提供的普通数据哦")//2.提供响应数据给其他组件
const responseData = ref({msg:'这是我提供的响应数据哦',
})
provide('responseData',responseData)//3.提供给数据调用者修改数据的权力
provide('setResponseData',(newResponseData)=>{responseData.value.msg = newResponseData
})
</script><style></style><template>
<inject></inject>
</template>
子组件
<script setup>
import {inject,ref} from 'vue'
//注入数据
const getResponseData = inject('responseData')
const getCommonData = inject('commonData')//注入修改数据的set方法
const setData = inject('setResponseData')
const changeData = ()=>{setData('这是调用者修改后的数据')
}
</script>
<template><div> {{getResponseData.msg}}</div><div>{{getCommonData}}</div><button @click="changeData">点击按钮修改数据</button>
</template>
7.defineModel数据双向绑定 ,其他组件使用v-model就可以获取此属性数据
父组件
<script setup>
import sonDefineMOdel from '@/components/07-defineModel.vue'
import { ref } from 'vue';// 其他组件传来的数据也可以修改
const getSonData = ref('')
</script><style></style><template>
<sonDefineMOdel v-model="getSonData"></sonDefineMOdel>
<div>{{ getSonData }}
</div>
</template>
子组件
<script setup>
import { defineModel } from 'vue';// 数据双向绑定 ,其他组件使用v-model就可以获取此属性数据
const modelValue = defineModel()</script>
<template><!-- @input事件用于实时监控输入框的变化,每次用户输入都会触发该事件。 --><input type="text" :value="modelValue"@input="e => modelValue = e.target.value"><!-- 箭头函数 e => modelValue 的意思是:当事件触发时,将事件对象 e 作为参数传递给箭头函数,并将输入框的新值(即 e.target.value)赋给 modelValue。 -->
</template>
8.pinia管理自己创建的store.js仓库
自己创建的仓库
// store的作用类似于Java的父类,被子类继承数据和方法
import {defineStore
} from 'pinia'
import {ref,computed
} from 'vue'// 声明一个store
export const useStore = defineStore('myStore', {state: () => {const name = ref('小夏')// 声明数据 statelet age = ref(17)// 声明操作数据的方法 action(普通函数)const func = () => {console.log('我是方法')}const addAge = () => {age.value++}// 声明基于数据派生的计算属性const judge = computed(()=>{if (age.value>=18){return "已成年"}else{return "未成年"}})return {name,age,func,addAge,judge}}
})
在组件中引入自己创建的仓库
<script setup>
import Pinia08 from '@/components/08-pinia.vue'
// 引入自己创建的store
import { useStore } from '@/store/myStore'
const getStoreData = useStore()
</script><template><div>{{ getStoreData.name }}</div><Pinia08></Pinia08><div>{{ getStoreData.func() }}</div><div>{{ getStoreData.judge}}</div><button @click="getStoreData.addAge">加年龄</button>
</template><style scoped></style>
相关文章:
Vue3学习宝典
1.ref函数调用的方式生成响应式数据,可以传复杂和简单数据类型 <script setup> // reactive接收一个对象类型的数据 import { reactive } from vue;// ref用函数调用的方式生成响应式数据,可以传复杂和简单数据类型 import { ref } from vue // 简…...
Unity开发FPS游戏之完结篇
这个系列的前几篇文章介绍了如何从头开始用Unity开发一个FPS游戏,感兴趣的朋友可以回顾一下。这个系列的文章如下: Unity开发一个FPS游戏_unity 模仿开发fps 游戏-CSDN博客 Unity开发一个FPS游戏之二_unity 模仿开发fps 游戏-CSDN博客 Unity开发一个F…...
基于BM1684的AI边缘服务器-模型转换,大模型一体机(二)
目标追踪 注:所有模型转换都是在docker环境中的 先进入docker 这里我们是要在docker环境里编译的,所以先进入docker :~/tpu-nntc# docker run -v $PWD/:/workspace -it sophgo/tpuc_dev:latest初始化环境 root2bb02a2e27d5:/workspace/tpu-nntc# s…...
IDEA连接Apifox客户端
IDEA连接Apifox客户端 一、下载Apifox安装包二、IDEA配置三、配置Apifox和IDEA项目同步 一、下载Apifox安装包 Apifox官网,根据自己的操作系统下载对应的Apifox安装包,我是windows系统所以下载的是windows版。 下载 默认仅为我安装,点击下一…...
vue中引用svg图标
要在 Vue 项目中引用 SVG 图标,有几种常见的方法。这里我将介绍两种方法:一种是直接在组件中内联 SVG 代码,另一种是将 SVG 作为单独的文件引用。 方法一:内联 SVG 代码 你可以直接在 Vue 组件的模板中嵌入 SVG 代码。这种方法适…...
【Laravel】模型封装属性基础
文章目录 概要什么是封装模型属性?使用访问器和修改器封装属性访问器(Accessor)修改器(Mutator)测试业务实现 运行结果小结 概要 随着项目规模的扩大,模型中的属性和方法可能会变得越来越复杂,这…...
【ROS编译未来时间戳报错修正】一种无需重零编译的文件时间戳更新方法分享
问题描述 无论在ROS1还是ROS2使用catkin_make或者colcon build指令后,有时候会出现文件时间戳的问题,通常报错的内容大致如下文件的修改时间在未来XX秒后,警告:检测到时钟错误。您的构建版本可能是不完整的。 解决方法 不完美的…...
tauri使用github action打包编译多个平台arm架构和inter架构包踩坑记录
这些error的坑,肯定是很多人不想看到的,我的开源软件PakePlus是使用tauri开发的,PakePlus是一个界面化将任何网站打包为轻量级跨平台软件的程序,利用Tauri轻松构建轻量级多端桌面应用和多端手机应用,为了实现发布的时候…...
事务常见分类
目录 1.扁平事务 2.带有保存点的扁平事务 3.链事务 4.嵌套事务 5.分布式事务 从事务理论的角度来看,可以把事务分为以下几种类型: 扁平事务(Flat Transactions) 带有保存点的扁平事务(Flat Transactions with Sa…...
深度学习案例:ResNet50模型+SE-Net
本文为为🔗365天深度学习训练营内部文章 原作者:K同学啊 一 回顾ResNet模型 ResNet,即残差网络,是由微软研究院的Kaiming He及其合作者于2015年提出的一种深度卷积神经网络架构。该网络架构的核心创新在于引入了“残差连接”&…...
第三方Cookie的消亡与Google服务器端标记的崛起
随着互联网用户对隐私保护的关注日益增强,各大浏览器正在逐步淘汰第三方Cookie。这一变革深刻影响了广告商和数字营销人员的用户跟踪和数据分析方式。然而,Google推出的服务器端标记技术为这一挑战提供了新的解决方案。 什么是第三方Cookie? …...
arkTS:使用ArkUI实现用户信息的持久化管理与自动填充(PersistentStorage)
arkUI:使用ArkUI实现用户信息的持久化管理与自动填充(PersistentStorage) 1 主要内容说明2 例子2.1 登录页2.1.1登陆页的相关说明2.1.1.1 持久化存储的初始化2.1.1.2 输入框2.1.1.3 记住密码选项2.1.1.4 登录按钮的逻辑2.1.1.5 注册跳转 2.1.…...
01-Zabbix监控快速入门
01-Zabbix监控快速入门 1、监控知识基本概述1.1 什么是监控1.2 为何需要监控1.3 如何进行监控 2、单机时代如何监控2.1 监控CPU2.2 监控内存2.3 监控磁盘2.4 监控⽹络2.5 监控TCP2.6 监控脚本示例 3、常⻅的监控⽅案3.1 Cacti3.2 Nagios3.3 Zabbix3.4 Prometheus3.5 商业监控⽅…...
docker 怎么启动nginx
在Docker中启动Nginx容器是一个简单的过程。以下是启动Nginx容器的步骤: 拉取Nginx镜像: 首先,你需要从Docker Hub拉取Nginx的官方镜像。使用以下命令: docker pull nginx运行Nginx容器: 使用docker run命令来启动一个…...
1-1 Gerrit实用指南
注:学习gerrit需要拥有git相关知识,如果没有学习过git请先回顾git相关知识点 黑马程序员git教程 一小时学会git git参考博客 git 实操博客 1.0 定义 Gerrit 是一个基于 Web 的代码审查系统,它使用 Git 作为底层版本控制系统。Gerrit 的主要功…...
数据库深入(学习笔记)
多表查询 概述: 多表查询:指从多张表中查询数据笛卡尔积:笛卡尔积是指在数学中,两个集合(A集合,B集合)的所有组合情况。 分类: 连接查询 内连接:相当于查询A、B交集部分数据 隐式内连接:sele…...
PostgreSQL17.x创建数据库及数据库信息查看命令
PostgreSQL17.x创建数据库及数据库信息查看命令 文章目录 PostgreSQL17.x创建数据库及数据库信息查看命令1.创建数据库1. 使用 SQL 命令创建数据库2. 创建数据库并指定字符集3. 验证数据库是否创建成功3. 远程连接1. 修改 PostgreSQL 配置文件2. 修改客户端认证配置4. 指定某个…...
Canal mysql数据库同步到es
Canal与Elasticsearch集成指南 [可视化工具](https://knife.blog.csdn.net/article/details/126348055)下载Canal 1.1.5版本 (alpha-2) 请从GitHub Releases下载Canal 1.1.5版本中间版本alpha-2。仅需下载canal.deployer和canal.adapter组件。 安装Elasticsearch 确保已安装…...
React 前端框架1
一、React 简介 (一)什么是 React React 是一个用于构建用户界面的 JavaScript 库,由 Facebook 开源并维护。它采用了组件化的开发思想,允许开发者将复杂的 UI 拆分成一个个独立、可复用的小组件,就如同搭积木一般&am…...
什么是Batch Normalization?
一、概念 Batch Normalization是在2015年提出的数据归一化方法,主要用在深度神经网络中激活层之前。它的主要作用是加快模型训练时的收敛速度,使模型训练过程更加稳定,避免梯度爆炸或消失,并起到一定的正则化作用,有时…...
rtc-pcf8563 0-0051: low voltage detected, date/time is not reliable
解决方法: 1、先测量pcf8563电源电压,是否满足要求。 2、pcf8563首次操作。第一次读取pcf8563的时间,未初始化,非法,芯片门槛电压检测配置不合理。使用hwclock命令写入一次,即可解决。 hwclock -f /dev/…...
tauri下的两个常用rust web框架:Leptos和Trunk
tauri下有两个常用rust web框架,就是Leptos和Trunk Leptos Leptos 是一个基于 Rust 的 Web 框架。您可以在他们的官方网站上了解更多关于 Leptos 的信息。本指南适用于 Leptos 的 0.6 版本。 Leptos Leptos 是一个用 Rust 编写的现代、高效且安全的 Web 框架。它…...
vscode + conda + qt联合开发
安装vscode 安装conda 清华大学开源软件镜像(Anaconda下载)_清华大学镜像-CSDN博客 conda create新建一个环境,激活这个环境,然后安装pyside6 pip install pyside6 -i https://pypi.tuna.tsinghua.edu.cn/simple 安装成功后输入 pip list查看是否安装…...
mac终端自定义命令打开vscode
1.打开终端配置文件 open -e ~/.bash_profile终端安装了zsh,那么配置文件是.zshrc(打开zsh配置,这里举🌰使用zsh) sudo open -e ~/.zshrc 2.在zshrc配置文件中添加新的脚本(这里的code就是快捷命令可以进…...
关于单片机的原理与应用!
成长路上不孤单😊😊😊😊😊😊 【14后😊///计算机爱好者😊///目前正在学习C😊///持续分享所学😊///如有需要欢迎收藏转发///😊】 今日分享关于单片…...
【手术显微镜】市场高度集中,由于高端手术显微镜的制造技术主要掌握于欧美企业
摘要 HengCe (恒策咨询)是全球知名的大型咨询机构,长期专注于各行业细分市场的调研。行业层面,重点关注可能存在“卡脖子”的高科技细分领域。企业层面,重点关注在国际和国内市场在规模和技术等层面具有代表性的企业,…...
速盾高防cdn支持移动端独立缓存
随着移动互联网的快速发展,移动端网页访问量也越来越大。然而,移动端的网络环境相对不稳定,用户体验可能会受到影响。因此,使用高防CDN来加速移动端网页访问,成为越来越多网站运营者的首选。 速盾高防CDN是一种分布式…...
java中的运算符
大家好,今天来看看java中运算符的一些知识点,理解好运算符是我们在写代码的一大重点,那么我们就来看看吧。 运算符:对操作数进行操作时的符号.,不同运算筹操作的含义不同. 一、算术算片. 1、基本四则运算符:加减乘除模(一*/%) 注意:都是二元…...
视频流媒体服务解决方案之Liveweb视频汇聚平台
一,Liveweb视频汇聚平台简介: LiveWeb是深圳市好游科技有限公司开发的一套综合视频汇聚管理平台,可提供多协议(RTSP/RTMP/GB28181/海康Ehome/大华,海康SDK等)的视频设备接入,支持GB/T28181上下级联…...
什么是六边形图?
什么是六边形图?) 为什么用六边形图?六边形图的构造原理如何绘制六边形图?(代码示例)结果解读总结 六边形图是一种特殊的二维数据可视化方法,用来展示两个变量之间的关系。它用许多小的六边形&a…...
淘宝天猫API接口探索:店铺商品全览与拍立淘图片搜索实战
在当今的电商时代,淘宝和天猫作为两大巨头,为开发者提供了丰富的API接口,以实现与平台的数据交互。本文将带您探索如何使用淘宝天猫的API接口来获取店铺所有商品列表,以及如何通过拍立淘(图片搜索)功能找到…...
.net6.0 mvc 传递 model 实体参数(无法对 null 引用执行运行时绑定)
说一下情况: 代码没问题,能成功从数据库里查到数据,能将数据丢给ViewBag.XXXX, 在View页面也能获取到 ViewBag.XXXX的值,但是发布到线上后报这个错: Microsoft.CSharp.RuntimeBinder.RuntimeBinderException: 无法对 …...
电子电气架构 --- 面向服务的汽车诊断架构
我是穿拖鞋的汉子,魔都中坚持长期主义的汽车电子工程师。 老规矩,分享一段喜欢的文字,避免自己成为高知识低文化的工程师: 所有人的看法和评价都是暂时的,只有自己的经历是伴随一生的,几乎所有的担忧和畏惧,都是来源于自己的想象,只有你真的去做了,才会发现有多快乐。…...
困扰解决:mfc140u.dll丢失的解决方法,多种有效解决方法全解析
当电脑提示“mfc140u.dll丢失”时,这可能会导致某些程序无法正常运行,给用户带来不便。不过,有多种方法可以尝试解决这个问题。这篇文章将以“mfc140u.dll丢失的解决方法”为主题,教大家有效解决mfc140u.dll丢失。 判断是否是“mf…...
OpenCV_Code_LOG
孔洞填充 void fillHole(const Mat srcBw, Mat &dstBw) {Size m_Size srcBw.size();Mat TempMat::zeros(m_Size.height2,m_Size.width2,srcBw.type());//延展图像srcBw.copyTo(Temp(Range(1, m_Size.height 1), Range(1, m_Size.width 1)));cv::floodFill(Temp, Point(…...
【python】OpenCV—Tracking(10.5)—dlib
文章目录 1、功能描述2、代码实现3、效果展示4、完整代码5、涉及到的库函数dlib.correlation_tracker() 6、参考 1、功能描述 基于 dlib 库,实现指定类别的目标检测和单目标跟踪 2、代码实现 caffe 模型 https://github.com/MediosZ/MobileNet-SSD/tree/master/…...
音视频入门基础:MPEG2-TS专题(9)——FFmpeg源码中,解码TS Header的实现
一、引言 FFmpeg源码对MPEG2-TS传输流/TS文件解复用时,在通过read_packet函数读取出一个transport packet后,会调用handle_packet函数来处理该transport packet: static int handle_packets(MpegTSContext *ts, int64_t nb_packets) { //..…...
React 自定义钩子:useOnlineStatus
我们今天的重点是 “useOnlineStatus” 钩子,这是 React 自定义钩子集合中众多精心制作的钩子之一。 Github 的:https://github.com/sergeyleschev/react-custom-hooks import { useState } from "react" import useEventListener from &quo…...
【C++】vector
vector 是一种容器,广泛存在于多种编程语言中,如 C、Rust、Java 等。它是一种动态数组,可以存储任意类型的元素,并且可以根据需要自动调整大小。下面我将详细介绍 vector 的概念和使用方法,主要以 C 中的 std::vector …...
海外centos服务器如何更换yum镜像源
今天遇到一个海外服务器,需要更新yum源,发现使用国内的(阿里云,腾讯云,华为云等),都无法实现,正常更新,主要问题还是服务器的网络无法访问国内的,所以,本章教程,记录一下,我验证过的方法。 1、备份或删除 源已经停止维护了,也可以将其直接删除,也不会有影响。如…...
go和python的遍历对比
Go 和 Python 都有强大的循环控制结构,但它们在实现和行为上有所不同,特别是关于索引变量的管理、迭代器的使用以及如何在循环中修改循环变量。以下是 Go 和 Python 循环的详细差异分析: 1. 循环类型: Go: Go 使用 …...
ML 系列:第 37 节 — 统计中的估计
文章目录 一、说明二、统计学中估计的目的三、统计学中的估计类型四、什么是点估计量?4.1 基本概念4.2 点估计量的性质4.3 点估计与区间估计4.4 寻找点估计的常用方法 五、区间估计5.1 什么是区间估计?5.1.1 置信区间5.1.2 预测区间5.1.3 容差区间Tolera…...
四、初识C语言(4)
一、作业:static修饰局部变量 #define _CRT_SECURE_NO_WARNINGS 1 #include <stdio.h> #include <string.h> //作业:static修饰局部变量 int sum (int a) {int c 0;static int b 3;c 1;b 2;return (abc); } int main() {int i 0;int a …...
不同云计算网络安全等级
导读云计算的本质是服务,如果不能将计算资源规模化/大范围的进行共享,如果不能真正以服务的形式提供,就根本算不上云计算。 等级保护定级流程 定级是开展网络安全等级保护工作的 “基本出发点”,虚拟化技术使得传统的网络边界变…...
基于深度学习的甲状腺结节影像自动化诊断系统(PyQt5界面+数据集+训练代码)
随着医学影像技术的发展,计算机辅助诊断在甲状腺结节的早期筛查中发挥着重要作用。甲状腺结节的良恶性鉴别对临床治疗具有重要意义,但传统的诊断方法依赖于医生的经验和影像学特征,存在一定的主观性和局限性。为了解决这一问题,本…...
Codigger Desktop:多样 Look 设计,全新 Game Look 带来趣味体验
Codigger Desktop提供了多种不同的Look设计,以满足用户的不同需求和偏好。包括Keyboard Look、Value Look、Game Look、Location Look、Size Look、Stage Look和Tile Look。 Keyboard Look:提供类似键盘布局的界面设计,方便用户快速访问常用功…...
redis下载、基础数据类型、操作讲解说明,持久化、springboot整合等
1 Redis是什么 官网:https://redis.io 开发者:Antirez Redis诞生于2009年全称是Remote Dictionary Server 远程词典服务器,是一个基于内存的键值型NoSQL数据库。 Redis是一个开源的、高性能的键值对存储系统,它支持多种数据结构&…...
原生js上传图片
无样式上传图片 创建一个 FormData 对象:这个对象可以用于存储数据。 将文件添加到 FormData 对象:通过 append() 方法,将用户选择的文件添加到 formData 对象中。 使用 fetch 发送请求:使用 fetch API 或者其他方法将 FormDat…...
【SpringBoot+Vue】x-admin管理系统跟做
技术栈 前端技术说明Vue前端框架Vuex全局状态管理框架ElementUI前端UI框架Axios前端HTTP框架vue-element-admin项目脚手架 后端技术说明SpringBoot容器MVC框架MyBatisORM框架MyBatis-plusMyBatis增强工具Redis非关系型数据库 数据库准备 SET NAMES utf8mb4; SET FOREIGN_KE…...
计算机网络 —— HTTP 协议(详解)
前一篇文章:网页版五子棋—— WebSocket 协议_网页可以实现websocket吗-CSDN博客 目录 前言 一、HTTP 协议简介 二、HTTP 协议格式 1.抓包工具的使用 2.抓包工具的原理 3.抓包结果 4.HTTP协议格式总结 三、HTTP 请求 1. URL (1)UR…...