Vue基知识五

news2024/9/23 9:24:12

一 vue配置代理

1.1 跨域

JQuery大多数封装的是对DOM的操作，而VUE是要减少对DOM的操作，所以VUE里很少用JQuery，而是用axios发送请求；JQuery与axios都是对xhr进行的封装；

下载并引入axios

npm i axios

在这里插入图片描述

点击按钮请求后台数据，发生了跨域的问题
在这里插入图片描述

跨域：违背了同源策略
同源策略：协议名（http\https）、主机名（ip）、端口这三者必须一致

跨域请求：请求已经发送了，并且对方（一般是后台系统）也接收了，而且对方还返回数据了，只不过浏览器发现是跨域请求后，就不把得到的数据展示出来了；

解决跨域方式一：cros
后台人员在返回的消息里加特殊响应头；
存在的缺点：以后任何请求都能从后台请求到数据了；

解决跨域方式二：jsonp
几乎不用，需要前端与后端一起配合，并且只能解决get请求跨域，post解决不了；

解决跨域方式三：配置一个代理服务器

前端A(端口是8080)向后端B(端口5000)请求数据（存在跨域），在中间加一个服务器C，C的端口也设置为8080，此时A没有直接向B请求数据，而是先向C请求，C再向B请求，由于AC之间符合同源策略，所以不存在跨域；CB之间都是服务器，没有ajax请求，只需要http请求即可，所以也不存在跨域
在这里插入图片描述
开启代理服务器：
1、可以使用nginx
2、借助vue-cli

1.1 配置代理方式一

在这里插入图片描述
在这里插入图片描述
复制上边的代码到项目里的vue.config.js，切记这里的端口是后台5000而不是前端的8080，默认这个代理的端口就是当前前端项目的端口8080了
在这里插入图片描述

在这里插入图片描述
​总结：
在vue.config.js中添加如下配置：

devServer:{
  //后台地址（端口后不需要再加任何后缀了）
  proxy:"http://localhost:5000"
}

说明：

  1. 优点：配置简单，请求资源时直接发给前端（8080）即可。
  2. 缺点：不能配置多个代理，不能灵活的控制请求是否走代理。
  3. 工作方式：若按照上述配置代理，当请求了前端不存在的资源时，那么该请求会转发给服务器 （优先匹配前端资源）

1.2 配置代理方式二

还是在官网复制
在这里插入图片描述
vue.config.js:
在这里插入图片描述

module.exports = {
  pages: {
    index: {
      //入口
      entry: 'src/main.js',
    },
  },
	lintOnSave:false, //关闭语法检查
	//开启代理服务器（方式一）
	/* devServer: {
    proxy: 'http://localhost:5000'
  }, */
	//开启代理服务器（方式二）
	devServer: {
    proxy: {
      //atguigu:请求前缀是atguigu的话，就走这个代理
      '/atguigu': {
        target: 'http://localhost:5000',
				pathRewrite:{'^/atguigu':''},//代理服务器访问后台时，访问地址里不包含atguigu（默认包含）
        // ws: true, //用于支持websocket
        // changeOrigin: true //用于控制请求头中的host值（用来控制代理服务器告诉后台服务器，自己的host地址是不是真实的）
      },
      //demo:请求前缀是demo的话，就走这个代理
      '/demo': {
        target: 'http://localhost:5001',
				pathRewrite:{'^/demo':''},//代理服务器访问后台时，访问地址里不包含demo
        // ws: true, //用于支持websocket
        // changeOrigin: true //用于控制请求头中的host值
      }
    }
  }
}

App.vue
在这里插入图片描述

<template>
	<div>
		<button @click="getStudents">获取学生信息</button>
		<button @click="getCars">获取汽车信息</button>
	</div>
</template>

<script>
	import axios from 'axios'
	export default {
		name:'App',
		methods: {
			getStudents(){
				axios.get('http://localhost:8080/atguigu/students').then(
					response => {
						console.log('请求成功了',response.data)
					},
					error => {
						console.log('请求失败了',error.message)
					}
				)
			},
			getCars(){
				axios.get('http://localhost:8080/demo/cars').then(
					response => {
						console.log('请求成功了',response.data)
					},
					error => {
						console.log('请求失败了',error.message)
					}
				)
			}
		},
	}
</script>

总结
编写vue.config.js配置具体代理规则：

module.exports = {
	devServer: {
      proxy: {
      '/api1': {// 匹配所有以 '/api1'开头的请求路径
        target: 'http://localhost:5000',// 代理目标的基础路径
        changeOrigin: true,
        pathRewrite: {'^/api1': ''}
      },
      '/api2': {// 匹配所有以 '/api2'开头的请求路径
        target: 'http://localhost:5001',// 代理目标的基础路径
        changeOrigin: true,
        pathRewrite: {'^/api2': ''}
      }
    }
  }
}
/*
   changeOrigin设置为true时，服务器收到的请求头中的host为：localhost:5000
   changeOrigin设置为false时，服务器收到的请求头中的host为：localhost:8080
   changeOrigin默认值为true
*/

说明：

  1. 优点：可以配置多个代理，且可以灵活的控制请求是否走代理。
  2. 缺点：配置略微繁琐，请求资源时必须加前缀。

二 gitHub案例

案例：搜索框里输入关键字后，向github网站发起请求，得到的用户列表数据是真实从github上获取的用户数据；github官网提供的接口地址：https://api.github.com/search/users?q=xxx
这里不需要我们考虑跨域的问题，因为github后台代码已经通过cros解决了这个问题；
在这里插入图片描述
先拆分组件，我们这里拆分为两个组件，search与list组件(这里不写样式的代码了，主要关注组件的代码)，查出的数据要从search组件流转到list组件，可以通过全局事件总线或者消息订阅与发布实现这个通信，这里使用全局事件总线实现；
在这里插入图片描述
main.js里安装全局事件总线
在这里插入图片描述

App.vue

<template>
	<div class="container">
		<Search/>
		<List/>
	</div>
</template>

<script>
	import Search from './components/Search'
	import List from './components/List'
	export default {
		name:'App',
		components:{Search,List}
	}
</script>

search.vue

<template>
	<section class="jumbotron">
		<h3 class="jumbotron-heading">Search Github Users</h3>
		<div>
			<input type="text" placeholder="enter the name you search" v-model="keyWord"/>&nbsp;
			<button @click="searchUsers">Search</button>
		</div>
	</section>
</template>

<script>
//使用axios发送请求
	import axios from 'axios'
	export default {
		name:'Search',
		data() {
			return {
				keyWord:''
			}
		},
		methods: {
			searchUsers(){
				//全局事件总线，请求前更新List的数据
				this.$bus.$emit('updateListData',{isLoading:true,errMsg:'',users:[],isFirst:false})
				axios.get(`https://api.github.com/search/users?q=${this.keyWord}`).then(
					response => {
						console.log('请求成功了')
						//请求成功后更新List的数据
						this.$bus.$emit('updateListData',{isLoading:false,errMsg:'',users:response.data.items})
					},
					error => {
						//请求后更新List的数据
						this.$bus.$emit('updateListData',{isLoading:false,errMsg:error.message,users:[]})
					}
				)
			}
		},
	}
</script>

list.vue

<template>
	<div class="row">
		<!-- 展示用户列表 -->
		<div v-show="info.users.length" class="card" v-for="user in info.users" :key="user.login">
			<a :href="user.html_url" target="_blank">
				<img :src="user.avatar_url" style='width: 100px'/>
			</a>
			<p class="card-text">{{user.login}}</p>
		</div>
		<!-- 展示欢迎词 -->
		<h1 v-show="info.isFirst">欢迎使用！</h1>
		<!-- 展示加载中 -->
		<h1 v-show="info.isLoading">加载中....</h1>
		<!-- 展示错误信息 -->
		<h1 v-show="info.errMsg">{{info.errMsg}}</h1>
	</div>
</template>

<script>
	export default {
		name:'List',
		data() {
			return {
				info:{
					isFirst:true,//是否为初次展示
					isLoading:false,//是否处于加载中（点了搜索按钮后是加载中）
					errMsg:'',//错误信息
					users:[]
				}
			}
		},
		mounted() {
			//全局事件总线
			this.$bus.$on('updateListData',(dataObj)=>{
			//对比info与dataObj的属性，一样的属性的话，就把dataObj的值赋值给info，不一样的属性话就是info自己的默认值
				this.info = {...this.info,...dataObj}
			})
		},
	}
</script>

<style scoped>
	.album {
		min-height: 50rem; /* Can be removed; just added for demo purposes */
		padding-top: 3rem;
		padding-bottom: 3rem;
		background-color: #f7f7f7;
	}

	.card {
		float: left;
		width: 33.333%;
		padding: .75rem;
		margin-bottom: 2rem;
		border: 1px solid #efefef;
		text-align: center;
	}

	.card > img {
		margin-bottom: .75rem;
		border-radius: 100px;
	}

	.card-text {
		font-size: 85%;
	}
</style>

三 vue-resource

本章介绍一种发送ajax请求的库，之前我们都知道发送ajax请求的方式有如下几种：

  1. 基于xhr的jQuery
  2. 基于xhr的axios
  3. 与xhr平级的fetch（几乎不用，因为只能发get请求）

这里再介绍一种发送ajax的方式：vue-resource；vue1.0版本的时候用的比较多，现在用的比较少了，但是我们最好也了解一下；是vue里的一个插件库，所以应该这样使用：
Vue.use(xxxx);

安装：
在这里插入图片描述
main.js引入这个插件

在这里插入图片描述
组件里使用这个插件发请求
在这里插入图片描述

一旦代码里使用了这个插件，则项目里所有的vm与vc里都多了下边这个东西
在这里插入图片描述

四 插槽

4.1 默认插槽

使用默认插槽实现如下
在这里插入图片描述

App.vue

<template>
	<div class="container">
		<Category title="美食" >
		<!--组件标签里的标签体，最后放在组件里的slot插槽里展示-->
			<img src="https://s3.ax1x.com/2021/01/16/srJlq0.jpg" alt="">
		</Category>

		<Category title="游戏" >
		<!--组件标签里的标签体，最后放在组件里的slot里-->
			<ul>
				<li v-for="(g,index) in games" :key="index">{{g}}</li>
			</ul>
		</Category>

		<Category title="电影">
		<!--组件标签里的标签体，最后放在组件里的slot里-->
		<!--controls ：加上这个才可以播放，否则只是展示一张图片-->
			<video controls src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"></video>
		</Category>
	</div>
</template>

<script>
	import Category from './components/Category'
	export default {
		name:'App',
		components:{Category},
		data() {
			return {
				foods:['火锅','烧烤','小龙虾','牛排'],
				games:['红色警戒','穿越火线','劲舞团','超级玛丽'],
				films:['《教父》','《拆弹专家》','《你好，李焕英》','《尚硅谷》']
			}
		},
	}
</script>

<style scoped>
	.container{
		display: flex;//横向排列
		justify-content: space-around;
	}
</style>

Category.vue

<template>
	<div class="category">
		<h3>{{title}}分类</h3>
		<!-- 定义一个插槽（挖个坑，等着组件的使用者进行填充，即等着App.vue往这里放东西） -->
		<slot>我是一些默认值，当使用者没有传递具体结构时，我会出现</slot>
	</div>
</template>

<script>
	export default {
		name:'Category',
		props:['title']
	}
</script>

<style scoped>
	.category{
		background-color: skyblue;
		width: 200px;
		height: 300px;
	}
	h3{
		text-align: center;
		background-color: orange;
	}
	video{
		width: 100%;
	}
	img{
		width: 100%;
	}
</style>

4.2 具名插槽

具有名字的插槽，4.1章节里的插槽没有名字
效果如下
在这里插入图片描述
App.vue

<template>
	<div class="container">
		<Category title="美食" >
			<img slot="center" src="https://s3.ax1x.com/2021/01/16/srJlq0.jpg" alt="">
			<a slot="footer" href="http://www.atguigu.com">更多美食</a>
		</Category>

		<Category title="游戏" >
			<ul slot="center">
				<li v-for="(g,index) in games" :key="index">{{g}}</li>
			</ul>
			<div class="foot" slot="footer">
				<a href="http://www.atguigu.com">单机游戏</a>
				<a href="http://www.atguigu.com">网络游戏</a>
			</div>
		</Category>

		<Category title="电影">
			<video slot="center" controls src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"></video>
			<!--当出现template 时，就可以这样写插槽：v-slot:footer -->
			<template v-slot:footer>
				<div class="foot">
					<a href="http://www.atguigu.com">经典</a>
					<a href="http://www.atguigu.com">热门</a>
					<a href="http://www.atguigu.com">推荐</a>
				</div>
				<h4>欢迎前来观影</h4>
			</template>
		</Category>
	</div>
</template>

<script>
	import Category from './components/Category'
	export default {
		name:'App',
		components:{Category},
		data() {
			return {
				foods:['火锅','烧烤','小龙虾','牛排'],
				games:['红色警戒','穿越火线','劲舞团','超级玛丽'],
				films:['《教父》','《拆弹专家》','《你好，李焕英》','《尚硅谷》']
			}
		},
	}
</script>

<style scoped>
	.container,.foot{
		display: flex;
		justify-content: space-around;
	}
	h4{
		text-align: center;
	}
</style>

在这里插入图片描述

Category.vue

<template>
	<div class="category">
		<h3>{{title}}分类</h3>
		<!-- 定义一个插槽（挖个坑，等着组件的使用者进行填充） -->
		<slot name="center">我是一些默认值，当使用者没有传递具体结构时，我会出现1</slot>
		<slot name="footer">我是一些默认值，当使用者没有传递具体结构时，我会出现2</slot>
	</div>
</template>

<script>
	export default {
		name:'Category',
		props:['title']
	}
</script>

<style scoped>
	.category{
		background-color: skyblue;
		width: 200px;
		height: 300px;
	}
	h3{
		text-align: center;
		background-color: orange;
	}
	video{
		width: 100%;
	}
	img{
		width: 100%;
	}
</style>

4.3 作用域插槽

数据一样，但是展示出来的结构不一样
在这里插入图片描述

Category.vue

<template>
	<div class="category">
		<h3>{{title}}分类</h3>
		<!--把games这个数据传递给了插槽的使用者App.vue-->
		<slot :games="games" msg="hello">我是默认的一些内容</slot>
	</div>
</template>

<script>
	export default {
		name:'Category',
		props:['title'],
		data() {
			return {
				games:['红色警戒','穿越火线','劲舞团','超级玛丽'],
			}
		},
	}
</script>

<style scoped>
	.category{
		background-color: skyblue;
		width: 200px;
		height: 300px;
	}
	h3{
		text-align: center;
		background-color: orange;
	}
	video{
		width: 100%;
	}
	img{
		width: 100%;
	}
</style>

App.vue

<template>
	<div class="container">

		<Category title="游戏">
		
			<template scope="atguigu">
				<ul>
					<li v-for="(g,index) in atguigu.games" :key="index">{{g}}</li>
				</ul>
			</template>
		</Category>

		<Category title="游戏">
		<!--必须使用template 来接收Category组件里的插槽里的games数据-->
			<template scope="{games}">
				<ol>
					<li style="color:red" v-for="(g,index) in games" :key="index">{{g}}</li>
				</ol>
			</template>
		</Category>

		<Category title="游戏">
			<template slot-scope="{games}">
				<h4 v-for="(g,index) in games" :key="index">{{g}}</h4>
			</template>
		</Category>

	</div>
</template>

<script>
	import Category from './components/Category'
	export default {
		name:'App',
		components:{Category},
	}
</script>

<style scoped>
	.container,.foot{
		display: flex;
		justify-content: space-around;
	}
	h4{
		text-align: center;
	}
</style>

4.4 插槽总结

  1. 作用：让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式，适用于 父组件 ===> 子组件 。

  2. 分类：默认插槽、具名插槽、作用域插槽

  3. 使用方式：

    1. 默认插槽：

      父组件中：
        <Category>
           <div>html结构1</div>
        </Category>
子组件中：
        <template>
            <div>
               <!-- 定义插槽 -->
               <slot>插槽默认内容...</slot>
            </div>
        </template>

    2. 具名插槽：

      父组件中：
        <Category>
            <template slot="center">
              <div>html结构1</div>
            </template>

            <template v-slot:footer>
               <div>html结构2</div>
            </template>
        </Category>
子组件中：
        <template>
            <div>
               <!-- 定义插槽 -->
               <slot name="center">插槽默认内容...</slot>
               <slot name="footer">插槽默认内容...</slot>
            </div>
        </template>

    3. 作用域插槽：

      1. 理解：数据在组件的自身，但根据数据生成的结构需要组件的使用者来决定。（games数据在Category组件中，但使用数据所遍历出来的结构由App组件决定）

      2. 具体编码：

        父组件中：
		<Category>
			<template scope="scopeData">
				<!-- 生成的是ul列表 -->
				<ul>
					<li v-for="g in scopeData.games" :key="g">{{g}}</li>
				</ul>
			</template>
		</Category>

		<Category>
			<template slot-scope="scopeData">
				<!-- 生成的是h4标题 -->
				<h4 v-for="g in scopeData.games" :key="g">{{g}}</h4>
			</template>
		</Category>
子组件中：
        <template>
            <div>
                <slot :games="games"></slot>
            </div>
        </template>
		
        <script>
            export default {
                name:'Category',
                props:['title'],
                //数据在子组件自身
                data() {
                    return {
                        games:['红色警戒','穿越火线','劲舞团','超级玛丽']
                    }
                },
            }
        </script>

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

tx2开发板升级JetPack至最新

tx2开发板升级JetPack至最新

最近一个项目用到了tx2, 上面的jetpack太老了需要更新&#xff0c;很久没和开发板打交道了&#xff0c;记录一下。中间没怎么截图&#xff0c;所以可能文字居多。 准备工作 Ubuntu 18.04的机器&#xff0c;避免有坑&#xff0c;不要使用虚拟机&#xff0c;一定要是物理机&…
阅读更多...
学习笔记应用——创建用户账户并且拥有自己的信息

学习笔记应用——创建用户账户并且拥有自己的信息

一、创建用户账户 将建立一个用户注册和身份验证系统&#xff0c;让用户能够注册账户&#xff0c;进而登录和注销。我们将创建一个新的应用程序&#xff0c;其中包含与处理用户账户相关的所有功能。 创建user 我们首先使用命令 startapp 来创建一个名为 users 的应用程序&…
阅读更多...
【无标题】Spring Boot整合MyBatis-Plus，并通过AutoGenerator生成编程喵项目骨架代码**

【无标题】Spring Boot整合MyBatis-Plus，并通过AutoGenerator生成编程喵项目骨架代码**

​ 作为一名 Java 后端开发&#xff0c;日常工作中免不了要生成数据库表对应的持久化对象 PO&#xff0c;操作数据库的接口 DAO&#xff0c;以及 CRUD 的 XML&#xff0c;也就是 mapper。 Mybatis Generator 是 MyBatis 官方提供的一个代码生成工具&#xff0c;完全可以胜任这…
阅读更多...
AI学习(2): PyTorch2.x环境安装

AI学习(2): PyTorch2.x环境安装

1.介绍 注:下面是对PyTorch进行了简单的介绍&#xff0c;不喜欢可直接跳过。 1.1 什么是PyTorch PyTorch是一个由Facebook人工智能研究团队开发的开源机器学习库&#xff0c;用于开发人工智能和深度学习的应用程序。PyTorch支持广泛的机器学习和深度学习算法&#xff0c;并基于…
阅读更多...
鸿蒙开发系列教程（五）--ArkTS语言：组件开发

鸿蒙开发系列教程（五）--ArkTS语言：组件开发

1、基础组件 组件API文档&#xff1a;https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V2/84_u58f0_u660e_u5f0f_u5f00_u53d1_u8303_u5f0f_uff09-0000001427744776-V2 查看组件API 外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传 容…
阅读更多...
gdip-yolo项目解读：gdip模块 |mdgip模块 |GDIP regularizer模块的使用分析

gdip-yolo项目解读：gdip模块 |mdgip模块 |GDIP regularizer模块的使用分析

gdip-yolo是2022年提出了一个端到端的图像自适应目标检测框架&#xff0c;其论文中的效果展示了良好的图像增强效果。其提出了gdip模块 |mdgip模块 |GDIP regularizer模块等模块&#xff0c;并表明这是效果提升的关键。为此对gdip-yolo的项目进行深入分析。 gdip-yolo的论文可以…
阅读更多...
Linux网络命令

Linux网络命令

一、网络配置命令 查看linux基础的网络设置&#xff1a; 网关&#xff1a;route -nIP地址&#xff1a;ifconfig ip aDNS服务器&#xff1a;cat /etc/resolv.conf主机名&#xff1a;hostname路由&#xff1a;route -n网络连接状态&#xff1a;ss 或 netstat域名解析nslookup ho…
阅读更多...
【ARMv8M Cortex-M33 系列 7.2 -- HardFault 问题定位 1】

【ARMv8M Cortex-M33 系列 7.2 -- HardFault 问题定位 1】

请阅读【嵌入式开发学习必备专栏 之 ARM Cortex-Mx专栏】 文章目录 问题背景堆栈对齐要求Cortex-M33 的 FPU 功能 问题背景 rt-thread 在PendSV_Handler退出的时候发生了HardFault_Handler是什么原因&#xff1f;且 LR 的值为0xfffffffd 堆栈对齐要求 在 ARM Cortex-M 架构中…
阅读更多...
【已解决】Qt Creator设计模式被禁用不能点的原因及解决方案

【已解决】Qt Creator设计模式被禁用不能点的原因及解决方案

Qt Creator 下载地址&#xff08;含历史版本&#xff09;&#xff1a;https://download.qt.io/official_releases/qtcreator/ 症状 Qt Creator 目前最新版为12.0.1&#xff0c;安装后打开.qml文件发现设计工具图标为禁用状态。 原因及解决方案 根据官网材料&#xff08;Qt C…
阅读更多...
air001研究笔记.基于arduino快速开发简单项目

air001研究笔记.基于arduino快速开发简单项目

一、air001芯片简介 air001是厂商合宙推出的一款tssop封装的mcu芯片。支持swd与串口烧录&#xff0c;多面向简单的功能简单类别的电子产品&#xff0c;因为官方文档齐全上手简易&#xff0c;所以也特别适合非专业爱好者乃至于幼儿编程。芯片内置资源&#xff1a;AIR001芯片数据…
阅读更多...
蓝桥杯-最少刷题数

蓝桥杯-最少刷题数

&#x1f4d1;前言 本文主要是【算法】——最少刷题数的文章&#xff0c;如果有什么需要改进的地方还请大佬指出⛺️ &#x1f3ac;作者简介&#xff1a;大家好&#xff0c;我是听风与他&#x1f947; ☁️博客首页&#xff1a;CSDN主页听风与他 &#x1f304;每日一句&#x…
阅读更多...
微前端-无界wujie

微前端-无界wujie

无界微前端方案基于 webcomponent 容器 iframe 沙箱&#xff0c;能够完善的解决适配成本、样式隔离、运行性能、页面白屏、子应用通信、子应用保活、多应用激活、vite 框架支持、应用共享等用户的核心诉求。 主项目安装无界 vue2项目&#xff1a;npm i wujie-vue2 -S vue3项目…
阅读更多...
从零开始配置vim（Windows版）

从零开始配置vim（Windows版）

事情是这样的&#xff0c;之前linux下vim用习惯了...然后就给自己win下vscode也装了个vim插件&#xff0c;用下来还是感觉不顺手&#xff0c;并且处理太多文本时有明显卡顿&#xff0c;于是乎自己配了下win版的vim。 不过好像也并不是从零开始的...初始基础版的.vimrc有copy他们…
阅读更多...
【正点原子STM32连载】 第四十五章 内存管理实验 摘自【正点原子】APM32E103最小系统板使用指南

【正点原子STM32连载】 第四十五章 内存管理实验 摘自【正点原子】APM32E103最小系统板使用指南

1&#xff09;实验平台&#xff1a;正点原子APM32E103最小系统板 2&#xff09;平台购买地址&#xff1a;https://detail.tmall.com/item.htm?id609294757420 3&#xff09;全套实验源码手册视频下载地址&#xff1a; http://www.openedv.com/docs/boards/xiaoxitongban 第四…
阅读更多...
近期学习文章

近期学习文章

DNSlog在渗透测试中的实战技巧 - 网安隐藏源IP&#xff0c;提高溯源难度的几种方案 - 网安FreeBuf网络安全行业门户 【漏洞公告】某平台一个有意思的CSRF // SecTrain安全博客 浅谈Web源码泄漏-安全客 - 安全资讯平台 红队-C2 Server基础构建 - 先知社区FreeBuf网络安全行业…
阅读更多...
erlang （OS 操作模块）学习笔记

erlang （OS 操作模块）学习笔记

cmd: env: 返回所有环境变量的列表。 每个环境变量都表示为元组 {VarName&#xff0c;Value}&#xff0c;其中 VarName 是 变量和 Value 其值。 例: {VarName&#xff0c;Value} {"ERLANG_HOME","C:\\Program Files\\erl-24.3.4.2\\bin\\erl-24.3.4.2"}…
阅读更多...
C语言第三弹---数据类型和变量

C语言第三弹---数据类型和变量

✨个人主页&#xff1a; 熬夜学编程的小林 &#x1f497;系列专栏&#xff1a; 【C语言详解】 【数据结构详解】 数据类型和变量 1、数据类型介绍1.1、整型1.2、浮点型1.3、字符型1.4、布尔类型1.5、各种数据类型的长度1.5.1、sizeof操作符1.5.2、数据类型的长度1.5.3、sizeo…
阅读更多...
无/自监督去噪(1)——一个变迁：N2N→N2V→HQ-SSL

无/自监督去噪(1)——一个变迁：N2N→N2V→HQ-SSL

目录 1. 前沿2. N2N3. N2V——盲点网络&#xff08;BSNs&#xff0c;Blind Spot Networks&#xff09;开创者3.1. N2V实际是如何训练的&#xff1f; 4. HQ-SSL——认为N2V效率不够高4.1. HQ-SSL的理论架构4.1.1. 对卷积的改进4.1.2. 对下采样的改进4.1.3. 比N2V好在哪&#xff…
阅读更多...
旅游项目day08

旅游项目day08

1. 旅游日记&#xff08;游记&#xff09; 后端&#xff1a;实体类&#xff0c;列表&#xff0c;查看&#xff0c;审核 前端&#xff1a;目的地明细中-游记->带范围条件查询&#xff0c;游记首页&#xff0c;【扩展】游记添加/编辑&#xff0c;【扩展】添加游记时间没登录时…
阅读更多...
计算机安全学习笔记(V)：UDP和网络扫描

计算机安全学习笔记(V)：UDP和网络扫描

User Datagram Protocol (UDP) UDP是最简单的传输协议。多个程序&#xff08;服务&#xff09;可以在主机上侦听&#xff0c;因此操作系统需要知道将流量发送到哪个程序。 在传输协议中&#xff0c;每个程序都与源和目标处的端口相关联&#xff0c;该端口显示为程序的套接字。…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023