Vue入门三(表单控制|购物车案例|v-model进阶|与后端交互|计算属性|监听属性|Vue生命周期)

文章目录

  • 一、表单控制
  • 二、购物车案例
  • 三、v-model进阶
  • 四、与后端交互
    • 跨域问题解决,三种交互方法
    • 跨域问题详解
      • 1-CORS:后端代码控制,上面案例采用的方式
        • 1) 方式一:后端添加请求头
        • 2) 方式二:编写中间件
        • 3) 方式三:第三方模块django-cors-headers
      • 2-Nginx反向代理 (常用)
      • 3-JSONP:很老不会用了,它只能发get请求
      • 4-搭建Node代理服务器
  • 五、计算属性
    • 1) 重写过滤案例
  • 六、监听属性
  • 七、Vue生命周期
    • 八个生命周期钩子函数
    • 实操案例

一、表单控制

	<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><script src="../js/vue.js"></script></head><body><div id="div"><h1>表单控制</h1><hr><p>用户名:<input type="text" v-model="username"></p><p>密码:<input type="password" v-model="password"></p><p>性别:<br>男:<input type="radio" v-model="gender" value="1">&nbsp;&nbsp;女:<input type="radio" v-model="gender" value="2"></p><p>记住密码:<input type="checkbox" v-model="set_pwd"></p><p>爱好:<br>运动:<input type="checkbox" v-model="hobby" value="运动">&nbsp;&nbsp;健身:<input type="checkbox" v-model="hobby" value="健身">&nbsp;&nbsp;旅游:<input type="checkbox" v-model="hobby" value="旅游"></p><button @click="handleSubmit">提交</button></div>    <script>var vm = new Vue({el:'#div',data:{username:'',password:'',gender:'',// radio单选,多个radio绑定同一个变量,选中某个,就对应value值set_pwd:false,// checkbox 单选是true或falsehobby:[],// checkbox 多选是数组类型,必须一开始定义就是数组,多个checkbox绑定一个变量},methods:{handleSubmit(){console.log(this.username,this.password,this.gender,this.set_pwd,this.hobby)}}})</script></body></html>

在这里插入图片描述


二、购物车案例

	<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script><script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script><link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"><script src="../js/vue.js"></script><style>#table{margin-top:50px;margin-bottom:30px;}input[type='checkbox']{cursor:pointer;}.btn{border:1px solid rgb(138, 138, 138);}</style></head><body><div id="div" class="container"><div class="row"><div class="col-md-10 col-md-offset-1"><h1 class="text-center" id="table">购物车商品结算清单</h1><table class="table table-hover table-bordered"><thead><tr><th class="text-center">商品id</th><th class="text-center">商品名</th><th class="text-center">商品价格</th><th class="text-center">商品数量</th><th class="text-center">全选or全不选&nbsp;&nbsp;<input type="checkbox" v-model="xuan" @change="CheckAll"></th><th class="text-center">删除加购</th></tr></thead><tbody><tr v-for="data in shoplist"><td class="text-center">{{data.id}}</td><td class="text-center">{{data.name}}</td><td class="text-center">{{data.price}}</td><td class="text-center"><span @click="CheckRemove(data)" class="btn">-</span><span v-if="nm_count==true" @click="qieh">{{data.count}}</span><input v-else type="number" class="form-control-static" @change="number(data)" v-model="data.count" @blur="qieh"><span @click="CheckAdd(data)" class="btn">+</span></td><td class="text-center"><input type="checkbox" @change="Checkxuan"  v-model="Bymore" :value="data"></td><td class="text-center"><button class="btn btn-danger" @click="CheckDel(data)">删除</button></td></tr></tbody></table><h5>当前选中商品:{{Bymore}}</h5><h3>购物车结算金额为:¥{{CountPrice()}}</h3></div></div></div><script>var vm = new Vue({el:'#div',data:{xuan:false,shoplist:[{id:1,name:'巧克力',price:66,count:5},{id:2,name:'奶糖',price:3,count:8},{id:3,name:'辣条',price:6,count:4},{id:4,name:'果汁',price:9,count:55},{id:5,name:'薯片',price:12,count:33},],Bymore:[],nm_count:true,},methods:{CountPrice(){ //对勾选物品进行实时总价格计算var total = 0for(var item of this.Bymore){total += item.price*item.count}return total},CheckAll(){ //全选或全不选状态监控if(this.xuan==true){this.Bymore=this.shoplist}else{this.Bymore=[]}},number(data){  //对coun数量设置最少不能小于1if(data.count<1){data.count=1}},Checkxuan(){ //对单选进行监控,商品全勾选自动给全选勾上,否则不勾if(this.Bymore.length==this.shoplist.length){this.xuan=true}else{this.xuan=false}},CheckAdd(data){ //点击事件,添加商品数量data.count++},CheckRemove(data){ //点击事件,减去商品数量,限制大于1if (data.count>1){data.count--}},CheckDel(data){ //点击对商品列表进行删除if(this.shoplist.indexOf(data)>0){console.log(this.shoplist.splice(this.shoplist.indexOf(data),1))}},qieh(){ //对商品数量进行自选添加数量this.nm_count=!this.nm_count//console.log(this.nm_count)}}})</script></body></html>

在这里插入图片描述


三、v-model进阶

v-model双向数据绑定,还可以对输入框数据进行一定的限定。

v-modle释义
lazy等待input框的数据绑定时区焦点之后再变化
number以数字开头并只保留后面的数字,不保留字母;字母开头都保留
trim去除首位的空格
	<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><script src="../js/vue.js"></script></head><body><div id="div"><h1>v-model进阶用法</h1><p/>默认v-model----><input type="text" v-model="name">------->{{name}}<p/>lazy----><input type="text" v-model.lazy="name1">------->{{name1}}<p/>number----><input type="text" v-model.number="name2">------->{{name2}}<p/>trim----><input type="text" v-model.trim="name3">------->{{name3}}</div><script>var vm = new Vue({el:'#div',data:{name:'',name1:'',name2:'',name3:'',},methods:{}})</script></body></html>

在这里插入图片描述


四、与后端交互

跨域问题解决,三种交互方法

与后端交互统一使用json编码格式

与后端交互涉及到跨域问题后,该如何解决跨域问题?

  • 当前端发送请求,后端响应了,但是前端还是报错,这是因为:跨域问题的存在,浏览器检测到前端与后端不是来自同一个,所以认为这是不安全的,最终也就拦截了该资源的传递
  • 想要解决这个问题,就要实现:CORS,也就是跨域资源共享
    • 浏览器的原因,只要不是向地址栏中的【域:地址和端口】发送请求,拿到的数据,浏览器就会拦截
      • 拦截例子:跨域问题
    • 解决:在后端响应头中添加headers={'Access-Control-Allow-Origin':'*'}
	<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script><script src="../js/vue.js"></script><script src="https://unpkg.com/axios/dist/axios.min.js"></script><title>Document</title></head><body><div id="div"><h1>jquery的ajax与后端交互</h1><p/> <!--一般不会在vue中使用jQuery的ajax发送请求,很多功能用不到--><h4>username: {{username}}</h4><h4>age:{{age}}</h4><button @click="clicksubmit1">点击获取数据</button><p/><hr><h1>JS的fetch与后端交互</h1><!--提供了一个 JavaScript 接口,用于访问和操纵 HTTP 管道的一些具体部分--><h4>username: {{username}}</h4><h4>age:{{age}}</h4><button @click="clicksubmit2">点击获取数据</button><p/><hr><h1>axios与后端交互</h1><!--第三方ajax,只有ajax没有别的功能,很小,底层基于XMLHttprequest--><h4>username: {{username}}</h4><h4>age:{{age}}</h4><button @click="clicksubmit3">点击获取数据</button></div><script>var vm = new Vue({el:'#div',data:{username:'',age:'',},methods:{//方式1:jQuery的ajax方式clicksubmit1(){//向后端发送请求,拿到数据,赋值给username、age$.ajax({url:'http://127.0.0.1:8000/submit/',method:'get',success:data=>{console.log(typeof data)this.username=data.usernamethis.age=data.age}})},//方式2:原生js(fetch)发送请求clicksubmit2(){//向后端发送请求,拿到数据,赋值给username、age// fetch('http://127.0.0.1:8000/submit/')//     .then(function(response){//         return response.json();//     })//     .then(function(data){//         console.log(data);//     });//箭头函数fetch('http://127.0.0.1:8000/submit/').then(response=>{return response.json();}).then(data=>{this.username=data.usernamethis.age=data.age});},//方式3:axiosclicksubmit3(){//向后端发送请求,拿到数据,赋值给username、ageaxios.get('http://127.0.0.1:8000/submit/').then(result => {console.log(result.data);this.username=result.data.usernamethis.age=result.data.age}).catch(error => {console.log(error);});}}})</script></body></html>

在这里插入图片描述


跨域问题详解

前端发送ajax请求,后端会有跨域的拦截,原因是:同源策略。同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的,浏览器只是针对同源策略的一种实现。

	-请求的url地址,必须与浏览器上的url地址处于同域上,也就是域名,端口,协议相同.-发送ajax请求的地址,必须跟浏览器上的url地址处于同域上 域[域名,地址,端口,协议]-请求成功,数据库返回,但是浏览器拦截# 补充:浏览器中输入域名,没有加端口-www.baidu.com---->dns--->解析成地址  192.168.2.3----》没有加端口,默认是80-dns解析,先找本地的host文件-可以修改本地的host做映射

如何解决跨域问题?

1-CORS:后端代码控制,上面案例采用的方式

	# cors:    #xss,csrf---跨站请求伪造跨域资源共享:后端技术,就是在响应头中加入 固定的头,就会运行前端访问了'CORS基本流程'1.浏览器发出CORS简单请求只需要在头信息之中增加一个Origin字段。2.浏览器发出CORS非简单请求会在正式通信之前,增加一次HTTP查询请求,称为”预检”请求(preflight)。浏览器先询问服务器,当前网页所在的域名是否在服务器的许可名单之中,以及可以使用哪些HTTP动词和头信息字段。只有得到肯定答复,浏览器才会发出正式的XMLHttpRequest请求,否则就报错。'什么是简单请求,什么是非简单请求'# 符合如下条件,就是简单请求1) 请求方法是以下三种方法之一:HEADGETPOST(2)HTTP的头信息不超出以下几种字段:AcceptAccept-LanguageContent-LanguageLast-Event-IDContent-Type:只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain'演示简单和非简单请求'-如果是简单,直接发送真正的请求-如果是非简单,先发送options,如果运行,再发真正的
1) 方式一:后端添加请求头
	# 前端发送axios不添加请求头---简单请求created() {this.$axios.get(this.$settings.BASE_URL+ '/home/banner/').then(res=>{console.log(res)})},# 允许的前端地址return APIResponse(data=res.data, headers={"Access-Control-Allow-Origin": "http://192.168.1.47:8080"})  # {code:100,msg:成功,data=[{},{}]}# 允许所有前端地址return APIResponse(data=res.data,headers={'Access-Control-Allow-Origin':'*'})  # {code:100,msg:成功,data=[{},{}]}
2) 方式二:编写中间件

解决跨域问题和请求头携带数据

	# 1.重写process_response方法from django.utils.deprecation import MiddlewareMixinclass CorsMiddleWare(MiddlewareMixin):def process_response(self, request, response):if request.method == 'OPTIONS':  # 解决非简单请求的请求头response["Access-Control-Allow-Headers"] = "*"# 允许前端的地址,所有请求头允许response["Access-Control-Allow-Origin"] = "*"return response# 2. 注册中间件MIDDLEWARE = ['utils.common_middle.CorsMiddleWare']
3) 方式三:第三方模块django-cors-headers
	# 第一步:安装pip install django-cors-headers# 第二步:配置appINSTALLED_APPS = ['corsheaders']# 第三步:配置中间件MIDDLEWARE = ['corsheaders.middleware.CorsMiddleware',]# 第四步:在配置文件配置# 允许所有域CORS_ORIGIN_ALLOW_ALL = True# 允许的请求方式CORS_ALLOW_METHODS = ('DELETE','GET','OPTIONS','PATCH','POST','PUT','VIEW',)# 允许请求头中加的东西CORS_ALLOW_HEADERS = ('XMLHttpRequest','X_FILENAME','accept-encoding','authorization','content-type','dnt','origin','user-agent','x-csrftoken','x-requested-with','Pragma','token',)

2-Nginx反向代理 (常用)

3-JSONP:很老不会用了,它只能发get请求

4-搭建Node代理服务器


五、计算属性

	<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><script src="https://unpkg.com/axios/dist/axios.min.js"></script><script src="../js/vue.js"></script></head><body><div id="div"><h1>计算属性普通函数方式------>函数会重写计算</h1>姓名:<input type="text" v-model="name">------>{{getName()}} <p/><br><hr><p><h1>计算属性Computed</h1>年龄:<input type="text" v-model="age">------> {{NewAge}}<p/><br></div><script>var vm = new Vue({el:'#div',data:{name:'',age:'',},methods:{//只要页面刷新(加载页面),函数就会执行,无论跟函数是否有关系getName(){console.log('名字首字母大写了!')return this.name.substring(0,1).toUpperCase()+this.name.substring(1)}},computed:{//方法当属性来用,不加括号,只要computed里面的方法才能不加括号,一定要有返回值NewAge(){console.log('计算属性----执行了')return Number(this.age)+20}}})</script></body></html>

在这里插入图片描述


1) 重写过滤案例

	<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><script src="../js/vue.js"></script></head><body><div id="div"><h1>过滤案例重写使用computed</h1><input type="text" v-model="search" ><ul><li v-for="item in NewDatelist">{{item}}</li></ul></div>    <script>var vm = new Vue({el:'#div',data:{search:'',datelist:['a', 'at', 'atom', 'be', 'beyond', 'bee', 'c', 'cs', 'csrf'],},computed:{NewDatelist(){return this.datelist.filter(item => item.indexOf(this.search) >= 0)}}})</script></body></html>

在这里插入图片描述


六、监听属性

监听一个属性的变化 只要它发生变化 就执行一个函数

	<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><script src="../js/vue.js"></script></head><body><div id="div"><h1>监听属性</h1><button @click="type='Python'">Python</button>&nbsp;&nbsp;|<button @click="type='Java'">Java</button><br><hr>{{type}}</div>    <script>var vm = new Vue({el:'#div',data:{type:'',},watch:{type(){console.log('向后端发送请求')console.log(this.type)}}})</script></body></html>

在这里插入图片描述


七、Vue生命周期

对官网的生命周期进行理解注解的
在这里插入图片描述

八个生命周期钩子函数

函数释义
beforeCreate创建Vue实例之前调用
created创建Vue实例成功后调用(可以在此处发送异步请求后端数据)
beforeMount渲染DOM之前调用
mounted渲染DOM之后调用
beforeUpdate重新渲染之前调用(数据更新等操作时,控制DOM重新渲染)
updated重新渲染完成之后调用
beforeDestroy销毁之前调用
destroyed销毁之后调用

从vue实例创建开始直到实例被销毁,总共经历了8个生命周期钩子【只要写了就会执行】函数

	钩子:反序列化验证---》钩子函数学名[专门名字]---》面向切面编程(AOP)OOP:面向对象编程'用途'1 页面加载完成,向后端发请求拿数据写在created中  发送ajax请求----》有的人放在mounted中加载2 组件中有定时任务,组件销毁,要销毁定时任务beforeDestroy-组件一创建,created中启动一个定时器    -组件被销毁,beforeDestroy销毁定时器'补充延时器和定时器'-定时器setInterval(()=>{console.log('每隔3s执行')},3000)-延时器setTimeout( ()=>{console.log('延时器,3s后执行')},3000)   	

实操案例

	<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><script src="../js/vue.js"></script></head><body><div id="div"><h1>vue生命周期</h1><button @click="doubleShow">点击显示组件或消失</button><hr><!--全局组件,自定义--><child v-if="show==true"></child></div>    <script>//全局组件Vue.component('child',{// 里面写html内容,必须包在一个标签中template:` <div><button @click="onClick">点击更新</button><br>{{title}}</div>`,data(){ // data必须是方法,返回对象return {title:'vue生命周期',t:null,}},methods:{onClick(){this.title='新的vue生命周期'}},beforeCreate(){ //组件创建前执行,html,js都是空的console.group('当前状态:beforeCreate')console.log(this.$el)console.log(this.$data)},Created(){ // 组件创建完毕执行,js有值了,但是html还是空的console.group('当前状态:Created')console.log(this.$el)console.log(this.$data)//创建定时器,每隔3秒打印hello worldthis.t=setInterval(()=>{console.log('hello world')},3000)},beforeMount(){ //挂载模版之前执行,js有值了,但是html还是空的console.group('当前状态:beforeMount')console.log(this.$el)console.log(this.$data)},mounted(){ //挂载模版完毕执行,js有值,html也有了console.group('当前状态:mounted')console.log(this.$el)console.log(this.$data)},beforeUpdate(){ //重新渲染之前执行,只要页面发生变化或js变化就会执行console.group('当前状态:beforeUpdate')console.log(this.$el)console.log(this.$data)},updated(){ //重新渲染完毕执行,console.group('当前状态:updated')console.log(this.$el)console.log(this.$data)},beforeDestroy(){ //销毁之前执行,资源清理工作console.group('当前状态:beforeDestory')console.log(this.$el)console.log(this.$data)},destroyed(){ //销毁之后执行,console.group('当前状态:destroyed')console.log(this.$el)console.log(this.$data)//销毁定时器clearInterval(this.t)this.t=null}})//根组件var vm = new Vue({el:'#div',data:{show:false,},methods:{doubleShow(){this.show=!this.show}}})</script></body></html>

在这里插入图片描述

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

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

相关文章

代理IP连接不上?网速过慢?自查与解决方法

当您使用代理时&#xff0c;您可能会遇到不同的代理错误代码显示代理IP连不通、访问失败、网速过慢等种种问题。 在本文中中&#xff0c;我们将讨论您在使用代理IP时可能遇到的常见错误、发生这些错误的原因以及解决方法。 一、常见代理服务器错误 当您尝试访问网站时&#…

Mysql系列-1.Mysql基本使用

&#x1f44f;作者简介&#xff1a;大家好&#xff0c;我是爱吃芝士的土豆倪&#xff0c;24届校招生Java选手&#xff0c;很高兴认识大家&#x1f4d5;系列专栏&#xff1a;Spring源码、JUC源码、Kafka原理、分布式技术原理、数据库技术&#x1f525;如果感觉博主的文章还不错的…

RT-Thread基于AT32单片机的485应用开发(二)

在上篇RT-Thread基于AT32单片机的485应用开发&#xff08;一&#xff09;中实现了RS485收发&#xff0c;但总觉得效率不高&#xff0c;函数封装也不完善。考虑到RS485总线应用都是主从式结构&#xff0c;比如工业领域常用的Modbus协议&#xff0c;都是以帧为单位进行收发&#…

【python】内存管理和数据类型问题

一、内存管理 Python有一个自动内存管理机制&#xff0c;但它并不总是按照期望的方式工作。例如&#xff0c;如果创建了一个大的列表或字典&#xff0c;并且没有删除它&#xff0c;那么这个对象就会一直占用内存&#xff0c;直到Python的垃圾回收器决定清理它。为了避免这种情…

【Verilog】运算符

系列文章 数值&#xff08;整数&#xff0c;实数&#xff0c;字符串&#xff09;与数据类型&#xff08;wire、reg、mem、parameter&#xff09; 系列文章算术运算符关系运算符相等关系运算符逻辑运算符按位运算符归约运算符移位运算符条件运算符连接和复制运算符 算术运算符 …

全志T113开发板Qt远程调试

1引言 通常情况下工程师在调试Qt程序时&#xff0c;需要频繁制作镜像烧录到核心板来测试Qt程序是否完善&#xff0c;这样的操作既费时又费力。这时我们可以通过QtCreator设备功能&#xff0c;定义设备后&#xff0c;在x86_64虚拟机上交叉编译qt程序&#xff0c;将程序远程部署到…

【机器学习前置知识】狄利克雷分布

在阅读本文前&#xff0c;建议先食用以下几篇文章以能更好地理解狄利克雷分布&#xff1a; 二项分布 Beta分布 多项分布 共轭分布 狄利克雷分布 狄利克雷分布(Dirichlet distribution)是Beta分布的扩展&#xff0c;把Beta分布从二元扩展到多元形式就是狄利克雷分布&#…

你Go代码写的像“鸭子”吗???

概 述 Go 语言也提供了接口类型&#xff0c;使得我们可以面向接口编程&#xff0c;将实现和接口分离。在我看来&#xff0c;软件的抽象之美也应该以此来表达&#xff0c;和 Java 语言不同的是 Go 并不是那么 “强制”&#xff0c;它使用了一种 鸭子类型 的方式让动态类型成为可…

three.js : tweenjs创建threejs动画

效果&#xff1a; 代码 <template><div><el-container><el-main><div class"box-card-left"><div id"threejs" style"border: 1px solid red"></div> <div class"box-right"><…

超凡脱俗的 sudo

文章目录 超凡脱俗的 sudo语法 没有sudo权限的用户指定用户执行命令列出目前sudo的权限使用sudo快速统计家目录的使用情况更多信息 超凡脱俗的 sudo Linux sudo命令以系统管理者的身份执行指令&#xff0c;也就是说&#xff0c;经由 sudo 所执行的指令就好像是 root 亲自执行。…

认识SpringBoot中的条件注解

✅作者简介&#xff1a;大家好&#xff0c;我是Leo&#xff0c;热爱Java后端开发者&#xff0c;一个想要与大家共同进步的男人&#x1f609;&#x1f609; &#x1f34e;个人主页&#xff1a;Leo的博客 &#x1f49e;当前专栏&#xff1a; 循序渐进学SpringBoot ✨特色专栏&…

虚幻引擎:开创视觉与创意的新纪元

先看看据说虚幻5做出来的东西吧&#xff1a; 虚幻引擎5&#xff01;&#xff01;&#xff01;4K画质PS5实机演示&#xff01; 好了&#xff0c;用文字认识一下吧&#xff1a; 虚幻引擎5.3对UE5的核心工具集作了进一步优化&#xff0c;涉及渲染、世界构建、程序化内容生成&…

【解刊】Elsevier旗下,1区CCF-B,超快审稿:2个月22天录用!

计算机类 • 升区期刊 本次带来Elsevier旗下高分快刊&#xff0c;入选CCF-B类推荐&#xff0c;如有相关领域作者意向投稿&#xff0c;可重点关注&#xff01;更多领域期刊&#xff0c;可移步公众号【Unionpub学术】了解详情~ 01 期刊简介 Computer Networks ✅出版社&#x…

14:00面试,14:07就出来了,问的问题有点变态。。。

前言 刚从小厂出来&#xff0c;没想到在另一家公司我又寄了。 在这家公司上班&#xff0c;每天都要加班&#xff0c;但看在钱给的比较多的份上&#xff0c;也就不太计较了。但万万没想到一纸通知&#xff0c;所有人不准加班了&#xff0c;不仅加班费没有了&#xff0c;薪资还…

回顾基础--HTML篇

HTML语法规范 <html></html> 开始标签与结束标签 <br /> 单标签 包含关系 <head><title></title> </head>并列关系 <head></head> <body></body> 1、 标题标签 标题标签 【双标签】【不同标题字体大小…

计算机网络-各层协议

大家在搞嵌入式开发的时候基本都了解过七层网络协议、五层网络协议、四层网络协议&#xff0c;那么今天让我们更加的深入了解一下&#xff1a; 历史发展介绍 OSI七层模型由ISO国际标准化组织提出的通信标准。TCP/IP四层模型是OSI七层模型的简化版&#xff0c;OSI在它被官方完…

论文阅读1---OpenCalib论文阅读之factory calibration模块

前言 该论文的标定间比较高端&#xff0c;一旦四轮定位后&#xff0c;可确定标定板与车辆姿态。以下为本人理解&#xff0c;仅供参考。 工厂标定&#xff0c;可理解为车辆相关的标定&#xff0c;不涉及传感器间标定 该标定工具不依赖opencv&#xff1b;产线长度一般2.5米 Fa…

浅谈WAF——守护网络安全的无形之盾

随着信息化时代的到来&#xff0c;网络已逐渐融入我们日常生活的方方面面。然而&#xff0c;与此同时&#xff0c;网络安全问题却也如影随形。为此&#xff0c;一种名为“Web应用防火墙”的工具应运而生&#xff0c;简称”WAF”。 WAF是什么&#xff1f; WAF&#xff08;Web …

实现LCM在docker之间的通信

目录 1.docker容器互联 新建网络 连接容器 2.设置环境变量 3.在两个docker之间实现通信 1.docker容器互联 新建网络 $ docker network create -d bridge test-net 连接容器 运行一个容器并连接到新建的 test-net 网络: $ docker run -itd --name lcm_1 --network tes…