学习笔记之Vue中的Ajax（四）

news2024/11/19 1:22:21

Vue中的Ajax

    • （四）Vue中的ajax
      • 一、解决开发环境Ajax跨越问题
      • 二、github 用户搜索案例
        • 2.1 准备工作
        • 2.2 静态页面
        • 2.3 实现动态组件
        • 2.4 注意细节
      • 三、vue 项目中常用的 2 个 Ajax 库
        • 3.1 axios
        • 3.2 vue-resource
      • 四、slot插槽

（四）Vue中的ajax

一、解决开发环境Ajax跨越问题

使用代理服务器，vue脚手架配置代理：

使用axios第三方库，配置代理服务器：

安装：npm i axios

（1）方法一：

在vue.config.js中添加如下配置:

devServer:{
	proxy:"http://localhost:5000"
}

说明：

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

（2）方法二：

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

module.exports = {
	devServer: {
	  proxy: {
	    '/api1': {//匹配所有以 '/apil'开头的请 求路径
		 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
change0rigin默认值为true
*/

说明：

  • **优点：**可以配多个代理，且可以灵活的控制请求是否走代理。

  • **缺点：**配置略微繁琐，请求资源时必须加前缀。

二、github 用户搜索案例

2.1 准备工作

先对界面进行拆分：

image-20230217010825196

2.2 静态页面

index.html：

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <!-- 针对IE浏览器的一个特殊配置，含义是让IE浏览器以最高的渲染级别渲染页面 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 开启移动端的理想视口 -->
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <!-- 配置页签图片  <%= BASE_URL %>就代表的是./（public路径下）-->
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <!-- 引入第三方样式 -->
    <link rel="stylesheet" href="<%= BASE_URL %>css/bootstrap.css">
    <!-- 配置网页标题 -->
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <!-- 当浏览器不支持js时noscript中的元素就会被渲染 -->
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <!-- 容器 -->
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

App.vue：

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

<script>
    //引入组件
    import Search from './components/Search.vue'
    import List from './components/List.vue'
    
    
export default {
    name:'App',
    components:{Search,List}
}
</script>

<style>
   
</style>

List.vue：

<template>
  <div>
    <div class="row">
      <!-- 展示用户列表 -->
      <div class="card">
      <a href="https://github.com/reactjs" target="_blank">
        <img
          src="https://avatars.githubusercontent.com/u/6412038?v=3"
          style="width: 100px"
        />
      </a>
      <p class="card-text">reactjs</p>
    </div>
    <div class="card">
      <a href="https://github.com/reactjs" target="_blank">
        <img
          src="https://avatars.githubusercontent.com/u/6412038?v=3"
          style="width: 100px"
        />
      </a>
      <p class="card-text">reactjs</p>
    </div>
    <div class="card">
      <a href="https://github.com/reactjs" target="_blank">
        <img
          src="https://avatars.githubusercontent.com/u/6412038?v=3"
          style="width: 100px"
        />
      </a>
      <p class="card-text">reactjs</p>
    </div>
    <div class="card">
      <a href="https://github.com/reactjs" target="_blank">
        <img
          src="https://avatars.githubusercontent.com/u/6412038?v=3"
          style="width: 100px"
        />
      </a>
      <p class="card-text">reactjs</p>
    </div>
    <div class="card">
      <a href="https://github.com/reactjs" target="_blank">
        <img
          src="https://avatars.githubusercontent.com/u/6412038?v=3"
          style="width: 100px"
        />
      </a>
      <p class="card-text">reactjs</p>
    </div>
  </div>
</template>

<script>
export default {
  name: 'List',
}
</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>

Search.vue：

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

<script>
import axios from 'axios'
export default {
  name: 'Search',
}
</script>

<style scoped>
  
</style>

2.3 实现动态组件

接口地址：https://api.github.com/search/users?q=xxx

Search.vue：

<template>
  <div>
    <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>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: 'Search',
  data() {
    return {
      keyword: ''
    }
  },
  methods: {
    searchUsers() {
      // 请求前更新List的数据
      this.$bus.$emit('updateListData', {
        isFirst: false,
        isLoading: true,
        errMsg: '',
        users: []
      })
      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 => {
          console.log('请求失败',error.message)
          // 请求失败后更新List的数据
          this.$bus.$emit('updateListData', {
            errMsg: error,
            users: []
          })
        }
      )
    }
  }
}
</script>

<style scoped>
  
</style>

List.vue：

这里只使用数组中的三个属性：login、html_url、avatar_url。

在显示页面的时候，List其实有四种方式的呈现效果：

  • 欢迎界面（welcome）
  • 加载界面（loading…）
  • 搜索用户数据结果界面
  • 错误信息界面

在使用全局事件总线传递数据的时候，使用数据对象dataObj传递，然后在Search.vue中传递一个这样的对象 {isFirst: false,isLoading: true,errMsg: '',users: []}。

<template>
  <div>
    <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">welcome</h1>
      <!-- 展示加载中 -->
      <h1 v-show="info.isLoading">loading...</h1>
      <!-- 展示错误信息 -->
      <h1 v-show="info.errMsg">{{info.errMsg}}</h1>
    </div>
  </div>
</template>

<script>
export default {
  name: 'List',
  data() {
    return {
      info: {
        isFirst: true,
        isLoading: false,
        errMsg: '',
        users: []
      }
    }
  },
  //全局事件总线
  mounted() {
    this.$bus.$on('updateListData', (dataObj) => {
      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>

2.4 注意细节

（1）bootstrap.css

这里使用了第三方样式bootstrap.css，如个直接放在assets静态资源目录下，然后使用import ’./assets/css/bootstrap.css‘引入，运行会出现解析不到的错误，因为vue会进行非常严格的检测。

为了避免这样的错误，可以在public公共目录下引入样式：

image-20230217020750750

然后在index.html中引入第三方样式，就可以生效了：

<!-- 引入第三方样式 -->
    <link rel="stylesheet" href="<%= BASE_URL %>css/bootstrap.css">

（2）全局事件总线传递数据

为了是编码简洁，在接收数据的时候，使用数据对象，在传递数据的时候将对象中的属性写完整即可，因为请求后更新List的数据，不再需要isFirst属性，所以可以不用写：

image-20230217023433409

image-20230217023620332

（3）批量替换

在最终接收数据的时候，需要重新赋值，也就是批量替换；注意vc实例对象this获取不到data，不能直接使用this.data，可以再写一个对象属性info，将所有属性放进去即可：

image-20230217024258127

（4）属性丢失

因为请求后更新List的数据，不再需要isFirst属性，所以对象属性中并没有写：

image-20230217024446537

但是为了防止组件中的属性丢失，使用es6语法，在接收数据时对数据二次赋值覆盖，先将this.info中的属性都赋值进去，然后再将dataObj对于需要改的属性进行重新赋值即可，这样属性就不会丢失：

image-20230217024550701

三、vue 项目中常用的 2 个 Ajax 库

3.1 axios

通用的 Ajax 请求库，官方推荐，使用广泛。

安装：npm i axios

引入：import axios from 'axios'

使用axios.get()进行访问请求。

3.2 vue-resource

vue 插件库，vue1.x 使用广泛，官方已不维护。

安装：npm i vue-resource

引入：在main.js中引入插件并使用插件

//引入插件
import VueResource from 'vue-resource'
//使用插件
Vue.use(VueResource)

只有引入插件并使用插件，vc实例对象中才会出现$http，然后就可以直接使用this.$http.get()进行访问请问。

四、slot插槽

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

2.理解：父组件向子组件传递带数据的标签，当一个组件有不确定的结构时, 就需要使用 slot 技术。

注意：插槽内容是在父组件中编译后, 再传递给子组件的。

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

4.使用方式：

（1）默认插槽：

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

在使用插槽的时候，会先在父组件中编译后, 再传递给子组件的，所以对于组件中的样式在哪写都可以，只不过是先编译和后编译的问题：

父组件中编码：

<template>
    <div class="container">
        <Category title="美食">
            <img src="https://img2.baidu.com/it/u=1119797231,1724730465&fm=253&fmt=auto&app=138&f=JPEG?w=781&h=500" alt="">
        </Category>

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

        <Category title="电影">
            <video controls src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"></video>
        </Category>
    </div>
</template>

<script>
    //引入组件
    import Category from './components/Category.vue'
    
    
export default {
    name:'App',
    components:{Category},
    data(){
        return{
            foods:['火锅','烧烤','小龙虾','牛排'],
            games:['王者荣耀','云顶之弈','QQ飞车','穿越火线'],
            films:['《流浪地球》','《教父》','《满江红》','《复仇者联盟》'],
        }
    }
}
</script>

<style>
   .container{
    display: flex;
    justify-content: space-around;
   }
   video{
    width: 100%;
   }
   img{
    width: 100%
   }
</style>

子组件中编码：

<template>
    <div class="category">
        <h3>{{title}}分类</h3>
        <slot>我是一下默认值，当使用者没有传递具体结构时，我会出现</slot>
    </div>
</template>

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

<style>
    .category{
        background-color: rgb(59, 209, 239);
        width: 200px;
        height: 300px;
    }
    h3{
        text-align: center;
        background-color: orange;
    }
</style>

运行结果：

image-20230218203713073

（2）具名插槽：

有两种不同的具名插槽方法，在包裹结构的时候，最好使用<template></template>标签，这样就会在前端页面显示源码的时候就会少一层结构，使结构不会杂乱。

父组件中:
	<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>

父组件中编码：

<template>
    <div class="container">
        <Category title="美食">
            <img slot="center" src="https://img2.baidu.com/it/u=1119797231,1724730465&fm=253&fmt=auto&app=138&f=JPEG?w=781&h=500" alt="">
            <a slot="footer" href="http://www.baidu.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.baidu.com">单机游戏</a>
                <a href="http://www.baidu.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>
                <div class="foot">
                <a href="http://www.baidu.com">经典</a>
                <a href="http://www.baidu.com">热门</a>
                <a href="http://www.baidu.com">推荐</a>
            </div>
            <h4>欢迎前来观影</h4>
            </template>
        </Category>
    </div>
</template>

<script>
    //引入组件
    import Category from './components/Category.vue'
    
    
export default {
    name:'App',
    components:{Category},
    data(){
        return{
            foods:['火锅','烧烤','小龙虾','牛排'],
            games:['王者荣耀','云顶之弈','QQ飞车','穿越火线'],
            films:['《流浪地球》','《教父》','《满江红》','《复仇者联盟》'],
        }
    }
}
</script>

<style>
   .container,.foot{
    display: flex;
    justify-content: space-around;
   }
   video{
    width: 100%;
   }
   img{
    width: 100%
   }
   h4{
    text-align: center;
   }
</style>

子组件中编码：

<template>
    <div class="category">
        <h3>{{title}}分类</h3>
        <slot name="center">我是一下默认值，当使用者没有传递具体结构时，我会出现</slot>
        <slot name="footer">我是一下默认值，当使用者没有传递具体结构时，我会出现</slot>
    </div>
</template>

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

<style>
    .category{
        background-color: rgb(59, 209, 239);
        width: 200px;
        height: 300px;
    }
    h3{
        text-align: center;
        background-color: orange;
    }
</style>

前端页面显示结果：

image-20230218205211703

（3）作用域插槽：

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

具体编码：

父组件中:
	<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>

父组件中编码：

<template>
    <div class="container">
        <Category>
            <template scope="scopeData">
			    <!--生成的是ul列表-->
                <ul>
                    <li v-for="(g,index) in scopeData.games" :key="index">{{g}}</li>
                </ul>
		    </template>
        </Category>

         <Category>
            <!-- ES6结构赋值语法 -->
            <template scope="{games}">
			    <!--生成的是ul列表-->
                <ol>
                    <li style="color:red" v-for="(g,index) in games" :key="index">{{g}}</li>
                </ol>
		    </template>
        </Category>

        <Category>
            <!-- ES6结构赋值语法 -->
            <template scope="{games}">
			    <!--生成的是ul列表-->
                   <h4 v-for="(g,index) in games" :key="index">{{g}}</h4> 
		    </template>
        </Category>
    </div>
</template>

<script>
    //引入组件
    import Category from './components/Category.vue'
    
    
export default {
    name:'App',
    components:{Category},
}
</script>

<style>
   .container,.foot{
    display: flex;
    justify-content: space-around;
   }
   video{
    width: 100%;
   }
   img{
    width: 100%
   }
   h4{
    text-align: center;
   }
</style>

子组件中编码：

<template>
    <div class="category">
        <h3>{{title}}分类</h3>
        <!--将数据传入到父组件中的插槽使用者中-->
        <slot :games="games"></slot>
    </div>
</template>

<script>
export default {
    name:'Category',
    props:['title'],
    //数据在子组件自身
    data(){
        return{
            games:['王者荣耀','云顶之弈','QQ飞车','穿越火线'],
        }
    }
}
</script>

<style>
    .category{
        background-color: rgb(59, 209, 239);
        width: 200px;
        height: 300px;
    }
    h3{
        text-align: center;
        background-color: orange;
    }
</style>

前端页面显示结果：

image-20230218210214637

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

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

相关文章

计算结构体大小

计算结构体大小

计算结构体大小 目录计算结构体大小一. 结构体内存对齐1. 简介2. 嵌套结构体二. offsetof三. 内存对齐的意义四. 修改默认对齐数一. 结构体内存对齐 以字节&#xff08;bety&#xff09;为单位 1. 简介 对于结构体成员在内存里的存储&#xff0c;存在结构体的对齐规则&#…
阅读更多...
代码随想录算法训练营day44 | 动态规划之完全背包 518. 零钱兑换 II 377. 组合总和 Ⅳ

代码随想录算法训练营day44 | 动态规划之完全背包 518. 零钱兑换 II 377. 组合总和 Ⅳ

day44完全背包基础知识问题描述举个栗子518. 零钱兑换 II1.确定dp数组以及下标的含义2.确定递推公式3.dp数组如何初始化4.确定遍历顺序5.举例推导dp数组377. 组合总和 Ⅳ1.确定dp数组以及下标的含义2.确定递推公式3.dp数组如何初始化4.确定遍历顺序5.举例来推导dp数组完全背包基…
阅读更多...
安全合规之CVE-2016-2183

安全合规之CVE-2016-2183

文章目录概述分析解决补充信息概述 安全部门脆弱性扫描到如下的风险漏洞要求系统上线必须要修复完毕。 不过我仔细的看了安全部门返回的报告&#xff0c;它是针对Windows Server 2019远程桌面端口进行风险报告…这是刷存在感了吗&#xff1f;哎&#xff0c;没有办法先做调查确…
阅读更多...
高压放大器在声波谐振电小天线收发测试系统中的应用

高压放大器在声波谐振电小天线收发测试系统中的应用

实验名称&#xff1a;高压放大器在声波谐振电小天线收发测试系统中的应用研究方向&#xff1a;信号传输测试目的&#xff1a;声波谐振电小天线颠覆了传统电小天线以电磁波谐振作为理论基础的天线发射和接收模式&#xff0c;它借助声波谐振实现电磁信号的辐射或接收。因为同频的…
阅读更多...
Spring Batch 综合案例实战-项目准备

Spring Batch 综合案例实战-项目准备

目录 案例需求 分析 项目准备 步骤1&#xff1a;新开spring-batch-example 步骤2&#xff1a;导入依赖 步骤3&#xff1a;配置文件 步骤4&#xff1a;建立employee表与employe_temp表 步骤5&#xff1a;建立基本代码体系-domain-mapper-service-controller-mapper.xml …
阅读更多...
YMatrix + PLPython替代Spark实现车联网算法

YMatrix + PLPython替代Spark实现车联网算法

PySpark算法开发实战 一、PySpark介绍 Spark是一种快速、通用、可扩展的大数据分析引擎&#xff0c;PySpark是Spark为Python开发者提供的API。在有非常多可视化和机器学习算法需求的应用场景&#xff0c;使用PySpark比Spark-Scala可以更好地和python中丰富的库配合使用。 使…
阅读更多...
监听页面滚动,给页面中的节点添加动态过渡效果

监听页面滚动,给页面中的节点添加动态过渡效果

效果示例图 示例代码 <template><div class"animation-wrap"><!-- header-start --><div class"animation-header">头部</div><!-- header-end --><div class"animation-subtitle animation-show">标…
阅读更多...
工人搬砖-课后程序(JAVA基础案例教程-黑马程序员编著-第八章-课后作业)

工人搬砖-课后程序(JAVA基础案例教程-黑马程序员编著-第八章-课后作业)

【案例8-4】 工人搬砖 【案例介绍】 1.任务描述 在某个工地&#xff0c;需要把100块砖搬运到二楼&#xff0c;现在有工人张三和李四&#xff0c;张三每次搬运3块砖&#xff0c;每趟需要10分钟&#xff0c;李四每次搬运5块砖&#xff0c;每趟需要12分钟。本案例要求编写程序分…
阅读更多...
收集分享一些AI工具第三期（网站篇）

收集分享一些AI工具第三期（网站篇）

感谢大家对于内容的喜欢&#xff0c;目前已经来到了AI工具分享的最后一期了&#xff0c;目前为止大部分好用的AI工具都已经介绍给大家了&#xff0c;希望大家可以喜欢。 image-to-sound-fx (https://huggingface.co/spaces/fffiloni/image-to-sound-fx) 图片转换为相对应的声音…
阅读更多...
【unity3d】unity即时战略游戏开发2 rts engine

【unity3d】unity即时战略游戏开发2 rts engine

A 背景 经过寻找发现有unity3d的[rts engine]&#xff0c;ue4的[template 4]等rts引擎/模板。 没有搜到相关教程&#xff0c;倒是有几个老外的ue从零开发长篇教程。 rts engine有几个试玩视频&#xff0c;尝试找了一下。那就不用虚幻了。 距离[原坤争霸 genshin craft]近了…
阅读更多...
【ChatGPT整活大赏】写论文后自动生成视频

【ChatGPT整活大赏】写论文后自动生成视频

ChatGPT国内又火了一把&#xff0c;功能很强大&#xff0c;接下来就带大家感受一下它的强大之处&#xff0c;通过ChatGPT写一篇论文并自动生成视频&#xff0c;增加内容的可读性。 话不多说&#xff0c;先上成果&#xff1a; …
阅读更多...
MySQL管理表

MySQL管理表

在创建表时需要提前了解mysql里面的数据类型 常见的数据类型 创建表 创建表方式1&#xff1a; 格式&#xff1a; CREATE TABLE [IF NOT EXISTS] 表名( 字段1, 数据类型 [约束条件] [默认值], 字段2, 数据类型 [约束条件] [默认值], 字段3, 数据类型 [约束条件] [默认值], ………
阅读更多...
以FGSM算法为例的对抗训练的实现(基于Pytorch)

以FGSM算法为例的对抗训练的实现(基于Pytorch)

1. 前言 深度学习虽然发展迅速,但是由于其线性的特性,受到了对抗样本的影响,很容易造成系统功能的失效。 以图像分类为例子&#xff0c;对抗样本很容易使得在测试集上精度很高的模型在对抗样本上的识别精度很低。 对抗样本指的是在合法数据上添加了特定的小的扰动&#xff0c;…
阅读更多...
聚类算法（下）：10个聚类算法的评价指标

聚类算法（下）：10个聚类算法的评价指标

上篇文章我们已经介绍了一些常见的聚类算法&#xff0c;下面我们将要介绍评估聚类算法的指标 1、Rand Index Rand Index&#xff08;兰德指数&#xff09;是一种衡量聚类算法性能的指标。它衡量的是聚类算法将数据点分配到聚类中的准确程度。兰德指数的范围从0到1,1的值表示两…
阅读更多...
Python-GEE遥感云大数据分析、管理与可视化技术及多领域案例实践应用

Python-GEE遥感云大数据分析、管理与可视化技术及多领域案例实践应用

随着航空、航天、近地空间等多个遥感平台的不断发展&#xff0c;近年来遥感技术突飞猛进。由此&#xff0c;遥感数据的空间、时间、光谱分辨率不断提高&#xff0c;数据量也大幅增长&#xff0c;使其越来越具有大数据特征。对于相关研究而言&#xff0c;遥感大数据的出现为其提…
阅读更多...
【阿旭机器学习实战】【37】电影推荐系统---基于矩阵分解

【阿旭机器学习实战】【37】电影推荐系统---基于矩阵分解

【阿旭机器学习实战】系列文章主要介绍机器学习的各种算法模型及其实战案例&#xff0c;欢迎点赞&#xff0c;关注共同学习交流。 电影推荐系统 目录电影推荐系统1. 问题介绍1.1推荐系统矩阵分解方法介绍1.2 数据集&#xff1a;ml-100k2. 推荐系统实现2.1 定义矩阵分解函数2.2 …
阅读更多...
什么牌子的蓝牙耳机便宜好用？四款高品质蓝牙耳机推荐

什么牌子的蓝牙耳机便宜好用？四款高品质蓝牙耳机推荐

随着时代的发展&#xff0c;蓝牙耳机的使用频率越来越高&#xff0c;不少人外出时除了带手机外&#xff0c;蓝牙耳机也成为了外出必备的数码产品之一。现在的蓝牙耳机品牌众多&#xff0c;什么牌子的蓝牙耳机便宜好用&#xff1f;下面&#xff0c;我来给大家推荐四款高品质的蓝…
阅读更多...
ZigBee组网原理详解

ZigBee组网原理详解

关键词&#xff1a;RFD FFD ZigBee 1. 组网概述 组建一个完整的zigbee网状网络包括两个步骤&#xff1a;网络初始化、节点加入网络。其中节点加入网络又包括两个步骤&#xff1a;通过与协调器连接入网和通过已有父节点入网。 ZigBee网络中的节点主要包含三个&#xff1a;终端…
阅读更多...
一文3000字从0到1实现基于Selenium+Python的web自动化测试框架 (建议收藏)

一文3000字从0到1实现基于Selenium+Python的web自动化测试框架 (建议收藏)

一、什么是Selenium&#xff1f; Selenium是一个基于浏览器的自动化测试工具&#xff0c;它提供了一种跨平台、跨浏览器的端到端的web自动化解决方案。Selenium主要包括三部分&#xff1a;Selenium IDE、Selenium WebDriver 和Selenium Grid。 Selenium IDE&#xff1a;Firefo…
阅读更多...
阿里云服务器宝塔phpstudyIIS建站

阿里云服务器宝塔phpstudyIIS建站

P1 建站准备工作 1.购买云服务器 &#xff08;新用户登录阿里云有阿里云服务器一个月的试用权限&#xff0c;但是试用期的云服务器有地区限制&#xff08;不可自己选择地区&#xff09;&#xff0c;我的显示的是杭州&#xff0c;内地的服务器进行域名绑定的话&#xff0c;需要…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023