当前位置: 首页 > news >正文

【Vue】Part4 接口调用

接口调用方式

  • 原生ajax
  • 基于jQuery的ajax
  • fetch
  • axios

异步

  • JavaScript的执行环境是「单线程」
  • 所谓单线程,是指JS引擎中负责解释和执行JavaScript代码的线程只有一个,也就是一次只能完成一项任务,这个任务执行完后才能执行下一个,它会「阻塞」其他任务。这个任务可称为主线程
  • 异步模式可以一起执行多个任务
  • JS中常见的异步调用
    • 定时任何
    • ajax
    • 事件函数

promise

  • 主要解决异步深层嵌套的问题
  • promise 提供了简洁的API 使得异步操作更加容易
 <script type="text/javascript">/*1. Promise基本使用我们使用new来构建一个Promise  Promise的构造函数接收一个参数,是函数,并且传入两个参数:		   resolve,reject, 分别表示异步操作执行成功后的回调函数和异步操作执行失败后的回调函数*/var p = new Promise(function(resolve, reject){//2. 这里用于实现异步任务  setTimeoutsetTimeout(function(){var flag = false;if(flag) {//3. 正常情况resolve('hello');}else{//4. 异常情况reject('出错了');}}, 100);});//  5 Promise实例生成以后,可以用then方法指定resolved状态和reject状态的回调函数 //  在then方法中,你也可以直接return数据而不是Promise对象,在后面的then中就可以接收到数据了  p.then(function(data){console.log(data)},function(info){console.log(info)});</script>

基于Promise发送Ajax请求

 <script type="text/javascript">/*基于Promise发送Ajax请求*/function queryData(url) {#   1.1 创建一个Promise实例var p = new Promise(function(resolve, reject){var xhr = new XMLHttpRequest();xhr.onreadystatechange = function(){if(xhr.readyState != 4) return;if(xhr.readyState == 4 && xhr.status == 200) {# 1.2 处理正常的情况resolve(xhr.responseText);}else{# 1.3 处理异常情况reject('服务器错误');}};xhr.open('get', url);xhr.send(null);});return p;}# 注意:  这里需要开启一个服务 # 在then方法中,你也可以直接return数据而不是Promise对象,在后面的then中就可以接收到数据了queryData('http://localhost:3000/data').then(function(data){console.log(data)#  1.4 想要继续链式编程下去 需要 return  return queryData('http://localhost:3000/data1');}).then(function(data){console.log(data);return queryData('http://localhost:3000/data2');}).then(function(data){console.log(data)});</script>

Promise 基本API

实例方法
.then()
  • 得到异步任务正确的结果
.catch()
  • 获取异常信息
.finally()
  • 成功与否都会执行(不是正式标准)
  <script type="text/javascript">/*Promise常用API-实例方法*/// console.dir(Promise);function foo() {return new Promise(function(resolve, reject){setTimeout(function(){// resolve(123);reject('error');}, 100);})}// foo()//   .then(function(data){//     console.log(data)//   })//   .catch(function(data){//     console.log(data)//   })//   .finally(function(){//     console.log('finished')//   });// --------------------------// 两种写法是等效的foo().then(function(data){# 得到异步任务正确的结果console.log(data)},function(data){# 获取异常信息console.log(data)})# 成功与否都会执行(不是正式标准) .finally(function(){console.log('finished')});</script>
静态方法
.all()
  • Promise.all方法接受一个数组作参数,数组中的对象(p1、p2、p3)均为promise实例(如果不是一个promise,该项会被用Promise.resolve转换为一个promise)。它的状态由这三个promise实例决定
.race()
  • Promise.race方法同样接受一个数组作参数。当p1, p2, p3中有一个实例的状态发生改变(变为fulfilledrejected),p的状态就跟着改变。并把第一个改变状态的promise的返回值,传给p的回调函数

  <script type="text/javascript">/*Promise常用API-对象方法*/// console.dir(Promise)function queryData(url) {return new Promise(function(resolve, reject){var xhr = new XMLHttpRequest();xhr.onreadystatechange = function(){if(xhr.readyState != 4) return;if(xhr.readyState == 4 && xhr.status == 200) {// 处理正常的情况resolve(xhr.responseText);}else{// 处理异常情况reject('服务器错误');}};xhr.open('get', url);xhr.send(null);});}var p1 = queryData('http://localhost:3000/a1');var p2 = queryData('http://localhost:3000/a2');var p3 = queryData('http://localhost:3000/a3');Promise.all([p1,p2,p3]).then(function(result){//   all 中的参数  [p1,p2,p3]   和 返回的结果一 一对应["HELLO TOM", "HELLO JERRY", "HELLO SPIKE"]console.log(result) //["HELLO TOM", "HELLO JERRY", "HELLO SPIKE"]})Promise.race([p1,p2,p3]).then(function(result){// 由于p1执行较快,Promise的then()将获得结果'P1'。p2,p3仍在继续执行,但执行结果将被丢弃。console.log(result) // "HELLO TOM"})</script>

fetch

  • Fetch API是新的ajax解决方案 Fetch会返回Promise
  • fetch不是ajax的进一步封装,而是原生js,没有使用XMLHttpRequest对象
  • fetch(url, options).then()
  <script type="text/javascript">/*Fetch API 基本用法fetch(url).then()第一个参数请求的路径   Fetch会返回Promise   所以我们可以使用then 拿到请求成功的结果 */fetch('http://localhost:3000/fdata').then(function(data){// text()方法属于fetchAPI的一部分,它返回一个Promise实例对象,用于获取后台返回的数据return data.text();}).then(function(data){//   在这个then里面我们能拿到最终的数据  console.log(data);})</script>
fetch API 中的 HTTP 请求
  • fetch(url, options).then()
  • HTTP协议,它给我们提供了很多的方法,如POST,GET,DELETE,UPDATE,PATCH和PUT
    • 默认的是 GET 请求
    • 需要在 options 对象中 指定对应的 method method:请求使用的方法
    • post 和 普通 请求的时候 需要在options 中 设置 请求头 headers 和 body
   <script type="text/javascript">/*Fetch API 调用接口传递参数*/#1.1 GET参数传递 - 传统URL  通过url  ? 的形式传参 fetch('http://localhost:3000/books?id=123', {# get 请求可以省略不写 默认的是GET method: 'get'}).then(function(data) {# 它返回一个Promise实例对象,用于获取后台返回的数据return data.text();}).then(function(data) {# 在这个then里面我们能拿到最终的数据  console.log(data)});#1.2  GET参数传递  restful形式的URL  通过/ 的形式传递参数  即  id = 456 和id后台的配置有关   fetch('http://localhost:3000/books/456', {# get 请求可以省略不写 默认的是GET method: 'get'}).then(function(data) {return data.text();}).then(function(data) {console.log(data)});#2.1  DELETE请求方式参数传递      删除id  是  id=789fetch('http://localhost:3000/books/789', {method: 'delete'}).then(function(data) {return data.text();}).then(function(data) {console.log(data)});#3 POST请求传参fetch('http://localhost:3000/books', {method: 'post',# 3.1  传递数据 body: 'uname=lisi&pwd=123',#  3.2  设置请求头 headers: {'Content-Type': 'application/x-www-form-urlencoded'}}).then(function(data) {return data.text();}).then(function(data) {console.log(data)});# POST请求传参fetch('http://localhost:3000/books', {method: 'post',body: JSON.stringify({uname: '张三',pwd: '456'}),headers: {'Content-Type': 'application/json'}}).then(function(data) {return data.text();}).then(function(data) {console.log(data)});# PUT请求传参     修改id 是 123fetch('http://localhost:3000/books/123', {method: 'put',body: JSON.stringify({uname: '张三',pwd: '789'}),headers: {'Content-Type': 'application/json'}}).then(function(data) {return data.text();}).then(function(data) {console.log(data)});</script>
fetchAPI 中 响应格式
  • 用fetch来获取数据,如果响应正常返回,我们首先看到的是一个response对象,其中包括返回的一堆原始字节,这些字节需要在收到后,需要我们通过调用方法将其转换为相应格式的数据,比如JSONBLOB或者TEXT等等
/*Fetch响应结果的数据格式*/fetch('http://localhost:3000/json').then(function(data){// return data.json();   //  将获取到的数据使用 json 转换对象return data.text(); //  //  将获取到的数据 转换成字符串 }).then(function(data){// console.log(data.uname)// console.log(typeof data)var obj = JSON.parse(data);console.log(obj.uname,obj.age,obj.gender)})

axios

  • 基于promise用于浏览器和node.js的http客户端
  • 支持浏览器和node.js
  • 支持promise
  • 能拦截请求和响应
  • 自动转换JSON数据
  • 能转换请求和响应数据
axios基础用法
  • get和 delete请求传递参数
    • 通过传统的url 以 ? 的形式传递参数
    • restful 形式传递参数
    • 通过params 形式传递参数
  • post 和 put 请求传递参数
    • 通过选项传递参数
    • 通过 URLSearchParams 传递参数
    # 1. 发送get 请求 axios.get('http://localhost:3000/adata').then(function(ret){ #  拿到 ret 是一个对象      所有的对象都存在 ret 的data 属性里面// 注意data属性是固定的用法,用于获取后台的实际数据// console.log(ret.data)console.log(ret)})# 2.  get 请求传递参数# 2.1  通过传统的url  以 ? 的形式传递参数axios.get('http://localhost:3000/axios?id=123').then(function(ret){console.log(ret.data)})# 2.2  restful 形式传递参数 axios.get('http://localhost:3000/axios/123').then(function(ret){console.log(ret.data)})# 2.3  通过params  形式传递参数 axios.get('http://localhost:3000/axios', {params: {id: 789}}).then(function(ret){console.log(ret.data)})#3 axios delete 请求传参     传参的形式和 get 请求一样axios.delete('http://localhost:3000/axios', {params: {id: 111}}).then(function(ret){console.log(ret.data)})# 4  axios 的 post 请求# 4.1  通过选项传递参数axios.post('http://localhost:3000/axios', {uname: 'lisi',pwd: 123}).then(function(ret){console.log(ret.data)})# 4.2  通过 URLSearchParams  传递参数 var params = new URLSearchParams();params.append('uname', 'zhangsan');params.append('pwd', '111');axios.post('http://localhost:3000/axios', params).then(function(ret){console.log(ret.data)})#5  axios put 请求传参   和 post 请求一样 axios.put('http://localhost:3000/axios/123', {uname: 'lisi',pwd: 123}).then(function(ret){console.log(ret.data)})
axios 全局配置
#  配置公共的请求头 
axios.defaults.baseURL = 'https://api.example.com';
#  配置 超时时间
axios.defaults.timeout = 2500;
#  配置公共的请求头
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
# 配置公共的 post 的 Content-Type
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
axios 拦截器
  • 请求拦截器
    • 请求拦截器的作用是在请求发送前进行一些操作
      • 例如在每个请求体里加上token,统一做了处理如果以后要改也非常容易
  • 响应拦截器
    • 响应拦截器的作用是在接收到响应后进行一些操作
      • 例如在服务器返回登录状态失效,需要重新登录的时候,跳转到登录页
	# 1. 请求拦截器 axios.interceptors.request.use(function(config) {console.log(config.url)# 1.1  任何请求都会经过这一步   在发送请求之前做些什么   config.headers.mytoken = 'nihao';# 1.2  这里一定要return   否则配置不成功  return config;}, function(err){#1.3 对请求错误做点什么    console.log(err)})#2. 响应拦截器 axios.interceptors.response.use(function(res) {#2.1  在接收响应做些什么  var data = res.data;return data;}, function(err){#2.2 对响应错误做点什么  console.log(err)})

async 和 await

  • async作为一个关键字放到函数前面
    • 任何一个async函数都会隐式返回一个promise
  • await关键字只能在使用async定义的函数中使用
    • ​ await后面可以直接跟一个 Promise实例对象
    • ​ await函数不能单独使用
  • async/await 让异步代码看起来、表现起来更像同步代码
 	# 1.  async 基础用法# 1.1 async作为一个关键字放到函数前面async function queryData() {# 1.2 await关键字只能在使用async定义的函数中使用      await后面可以直接跟一个 Promise实例对象var ret = await new Promise(function(resolve, reject){setTimeout(function(){resolve('nihao')},1000);})// console.log(ret.data)return ret;}# 1.3 任何一个async函数都会隐式返回一个promise   我们可以使用then 进行链式编程queryData().then(function(data){console.log(data)})#2.  async    函数处理多个异步函数axios.defaults.baseURL = 'http://localhost:3000';async function queryData() {# 2.1  添加await之后 当前的await 返回结果之后才会执行后面的代码   var info = await axios.get('async1');#2.2  让异步代码看起来、表现起来更像同步代码var ret = await axios.get('async2?info=' + info.data);return ret.data;}queryData().then(function(data){console.log(data)})

图书列表案例

1. 基于接口案例-获取图书列表
  • 导入axios 用来发送ajax
  • 把获取到的数据渲染到页面上
  <div id="app"><div class="grid"><table><thead><tr><th>编号</th><th>名称</th><th>时间</th><th>操作</th></tr></thead><tbody><!-- 5.  把books  中的数据渲染到页面上   --><tr :key='item.id' v-for='item in books'><td>{{item.id}}</td><td>{{item.name}}</td><td>{{item.date }}</td><td><a href="">修改</a><span>|</span><a href="">删除</a></td></tr></tbody></table></div></div><script type="text/javascript" src="js/vue.js"></script>1.  导入axios   <script type="text/javascript" src="js/axios.js"></script><script type="text/javascript">/*图书管理-添加图书*/# 2   配置公共的url地址  简化后面的调用方式axios.defaults.baseURL = 'http://localhost:3000/';axios.interceptors.response.use(function(res) {return res.data;}, function(error) {console.log(error)});var vm = new Vue({el: '#app',data: {flag: false,submitFlag: false,id: '',name: '',books: []},methods: {# 3 定义一个方法 用来发送 ajax # 3.1  使用 async  来 让异步的代码  以同步的形式书写 queryData: async function() {// 调用后台接口获取图书列表数据// var ret = await axios.get('books');// this.books = ret.data;# 3.2  发送ajax请求  把拿到的数据放在books 里面   this.books = await axios.get('books');}},mounted: function() {#  4 mounted  里面 DOM已经加载完毕  在这里调用函数  this.queryData();}});</script>
2 添加图书
  • 获取用户输入的数据 发送到后台
  • 渲染最新的数据到页面上
 methods: {handle: async function(){if(this.flag) {// 编辑图书// 就是根据当前的ID去更新数组中对应的数据this.books.some((item) => {if(item.id == this.id) {item.name = this.name;// 完成更新操作之后,需要终止循环return true;}});this.flag = false;}else{# 1.1  在前面封装好的 handle 方法中  发送ajax请求  # 1.2  使用asyncawait 简化操作 需要在 function 前面添加 async   var ret = await axios.post('books', {name: this.name})# 1.3  根据后台返回的状态码判断是否加载数据 if(ret.status == 200) {# 1.4  调用 queryData 这个方法  渲染最新的数据 this.queryData();}}// 清空表单this.id = '';this.name = '';},        }         
3 验证图书名称是否存在
  • 添加图书之前发送请求验证图示是否已经存在
  • 如果不存在 往后台里面添加图书名称
    • 图书存在与否只需要修改submitFlag的值即可
 watch: {name: async function(val) {// 验证图书名称是否已经存在// var flag = this.books.some(function(item){//   return item.name == val;// });var ret = await axios.get('/books/book/' + this.name);if(ret.status == 1) {// 图书名称存在this.submitFlag = true;}else{// 图书名称不存在this.submitFlag = false;}}
},
4. 编辑图书
  • 根据当前书的id 查询需要编辑的书籍
  • 需要根据状态位判断是添加还是编辑
 methods: {handle: async function(){if(this.flag) {#4.3 编辑图书   把用户输入的信息提交到后台var ret = await axios.put('books/' + this.id, {name: this.name});if(ret.status == 200){#4.4  完成添加后 重新加载列表数据this.queryData();}this.flag = false;}else{// 添加图书var ret = await axios.post('books', {name: this.name})if(ret.status == 200) {// 重新加载列表数据this.queryData();}}// 清空表单this.id = '';this.name = '';},toEdit: async function(id){#4.1  flag状态位用于区分编辑和添加操作this.flag = true;#4.2  根据id查询出对应的图书信息  页面中可以加载出来最新的信息# 调用接口发送ajax 请求  var ret = await axios.get('books/' + id);this.id = ret.id;this.name = ret.name;},
5 删除图书
  • 把需要删除的id书籍 通过参数的形式传递到后台
   deleteBook: async function(id){// 删除图书var ret = await axios.delete('books/' + id);if(ret.status == 200) {// 重新加载列表数据this.queryData();}}

相关文章:

【Vue】Part4 接口调用

接口调用方式 原生ajax基于jQuery的ajaxfetchaxios 异步 JavaScript的执行环境是「单线程」所谓单线程&#xff0c;是指JS引擎中负责解释和执行JavaScript代码的线程只有一个&#xff0c;也就是一次只能完成一项任务&#xff0c;这个任务执行完后才能执行下一个&#xff0c;…...

管理系统前端框架开发案例学习

一、 需求分析 本案例的主要目标是开发一个智能学习辅助系统的前端界面&#xff0c;涵盖以下功能模块&#xff1a; 首页&#xff1a;显示系统的总体概览和关键功能介绍。 班级学员管理&#xff1a;实现班级管理和学员管理。 系统信息管理&#xff1a;管理部门和员工信息。 …...

协程设计原理与实现

协程设计原理与汇编实现 同步与异步 对于任何一个事情&#xff0c;都可以划分为不同的步骤。所谓同步&#xff0c;就先做第一个事情&#xff0c;按照这件事的步骤完成这件事之后&#xff0c;再去做第二件事。再去做第三件事&#xff0c;以此类推。 异步就是&#xff0c;可以…...

c++广播通讯的实现

概念大家都很清楚&#xff0c;不赘述。 广播必然用UDP这套东西。 setsockopt() 函数及其在广播中的应用&#xff1a; 在 C 网络编程中&#xff0c;setsockopt() 函数用于设置套接字选项&#xff0c;这些选项可以控制套接字的各种行为。对于广播通信&#xff0c;我们特别关心…...

Leetcode 3377. Digit Operations to Make Two Integers Equal

Leetcode 3377. Digit Operations to Make Two Integers Equal 1. 解题思路2. 代码实现 题目链接&#xff1a;3377. Digit Operations to Make Two Integers Equal 1. 解题思路 这一题的核心思路属于路径遍历问题&#xff0c;我们使用一个堆排来控制最优路径的选择。 我们首…...

高项 - 项目管理原则与项目绩效域

个人总结&#xff0c;仅供参考&#xff0c;欢迎加好友一起讨论 博文更新参考时间点&#xff1a;2024-12 高项 - 章节与知识点汇总&#xff1a;点击跳转 文章目录 高项 - 项目管理原则与项目绩效域项目管理12条原则原则1&#xff1a;成为勤勉、尊重和关心他人的管家 (p202)原则…...

【开源】A065—基于SpringBoot的库存管理系统的设计与实现

&#x1f64a;作者简介&#xff1a;在校研究生&#xff0c;拥有计算机专业的研究生开发团队&#xff0c;分享技术代码帮助学生学习&#xff0c;独立完成自己的网站项目。 代码可以查看项目链接获取⬇️&#xff0c;记得注明来意哦~&#x1f339; 赠送计算机毕业设计600个选题ex…...

LeetCode—189. 轮转数组(中等)

题目描述&#xff1a; 给定一个整数数组 nums&#xff0c;将数组中的元素向右轮转 k 个位置&#xff0c;其中 k 是非负数。 示例1&#xff1a; 输入: nums [1,2,3,4,5,6,7], k 3输出:[5,6,7,1,2,3,4] 解释: 向右轮转 1 步:[7,1,2,3,4,5,6] 向右轮转 2 步:[6,7,1,2,3,4,5] 向…...

fastadmin框架同时使用 阿里云oss和阿里云点播

背景 项目的实际需求中既要用到阿里云oss产品又用到阿里云点播系统&#xff0c;实现完美的统一。设置两个地址downUrl&#xff0c;thirdCode。分别代表阿里云oss上传路径和阿里云点播系统vId。 实现 默认框架你已经集成好阿里云oss集成工作&#xff0c;前端html页面实现 <…...

MySQL-DML之数据表操作

文章目录 一. 插入表记录1. 向表中插入部分字段2. 向表中插入所有字段,字段的顺序为创建表时的顺序3. 一次添加多条数据信息 二. 更新表记录1. 更新所有记录的指定字段 更新符号条件记录的指定字段2. 更新符号条件记录的指定字段 三. 删除表记录1. 按条件删除记录2. 清空记录 四…...

Android 逆向/反编译/Hook修改应用行为 基础实现

前言&#xff1a;本文通过一个简单的情景案例实现安卓逆向的基本操作 一、情景描述 本文通过一个简单的情景案例来实现安卓逆向的基本操作。在这个案例中所使用的项目程序是我自己的Demo程序&#xff0c;不会造成任何的财产侵害&#xff0c;本文仅作为日常记录及案例分享。实…...

【前端】理解 JavaScript 对象属性访问的复杂性

博客主页&#xff1a; [小ᶻ☡꙳ᵃⁱᵍᶜ꙳] 本文专栏: 前端 文章目录 &#x1f4af;前言&#x1f4af;理论基础&#xff1a;JavaScript 对象属性的访问模式1. 点符号访问&#xff08;Dot Notation&#xff09;2. 方括号访问&#xff08;Bracket Notation&#xff09;点符号…...

进入 Dystopia:第九周游戏指南

本指南将为大家详细说明在第八周的每个体验中可以获得的奖励。 在杂草丛生的反乌托邦废墟中生存&#xff0c;随着大自然重新开垦这片土地&#xff0c;文明已陷入绝望。穿越高耸入云、摇摇欲坠的摩天大楼&#xff0c;抵御末世社会的各种危险。适应这个文明与荒野之间的界限已经消…...

Helm安装Mysql8主从复制集群

目录 一、Helm安装 二、安装mysql 1、拉取镜像 2、修改配置文件 3、创建mysql-secret 4、安装 一、Helm安装 这里不再赘叙&#xff0c;具体安装请参考官网 Helm | 快速入门指南 二、安装mysql 1、拉取镜像 #添加仓库 helm repo add bitnami https://charts.bitnami.c…...

[小白系列]GPU-nvidia-smi指令

‌nvidia-smi&#xff08;NVIDIA System Management Interface&#xff09;是一种命令行实用程序&#xff0c;用于监控和管理NVIDIA GPU&#xff08;图形处理器&#xff09;的状态和性能‌。它提供了一种简单而强大的方式来获取有关GPU的实时信息&#xff0c;并且可以用于诊断、…...

Flutter 图片编辑板(一) 事件路由

一个图片编辑板&#xff0c;有两部分组成。编辑板和内容项。每一个内容项是被InteractiveViewer修饰的widget&#xff0c;具有缩放偏移的功能。 在图片编辑板上&#xff0c; 会有多个内容相&#xff0c;图片或文字&#xff08;添加文字目前还没做过&#xff09;。 当要编辑其中…...

Cherno C++学习笔记 P33 字符串的字面量

在这篇文章当中我们介绍一下有关于字符串更加深入的知识&#xff0c;也就是字符串的字面量。 首先什么是字面量&#xff1f;其实也很简单&#xff0c;就是双引号里面的那一坨&#xff0c;其实就是字面量&#xff0c;我们举一个最简单的例子&#xff1a; #include<iostream…...

数据结构 (36)各种排序方法的综合比较

一、常见排序方法分类 插入排序类 直接插入排序&#xff1a;通过构建有序序列&#xff0c;对于未排序数据&#xff0c;在已排序序列中从后向前扫描&#xff0c;找到相应位置并插入。希尔排序&#xff1a;是插入排序的一种改进版本&#xff0c;先将整个待排序的记录序列分割成为…...

Master EDI 项目需求分析

Master Electronics 通过其全球分销网络&#xff0c;支持多种采购需求&#xff0c;确保能够为客户提供可靠的元件供应链解决方案&#xff0c;同时为快速高效的与全球伙伴建立合作&#xff0c;Master 选择通过EDI来实现与交易伙伴间的数据传输。 EDI为交易伙伴之间建立了一个安…...

java+ssm+mysql计算机等级考试网

项目介绍&#xff1a; 使用javassmmysql开发的计算机等级考试信息网&#xff0c;系统包含前后台&#xff0c;包含超级管理员&#xff0c;系统管理员角色&#xff0c;功能如下&#xff1a; 前台&#xff1a;首页&#xff1b;考试动态&#xff1b;相关资源下载&#xff1b;考试…...

MitelMiCollab 身份绕过导致任意文件读取漏洞复现(CVE-2024-41713)

0x01 产品描述: Mitel MiCollab 是一个企业协作平台,它将各种通信工具整合到一个应用程序中,提供语音和视频通话、消息传递、状态信息、音频会议、移动支持和团队协作功能。0x02 漏洞描述: Mitel MiCollab 的 NuPoint 统一消息 (NPM) 组件中存在身份验证绕过漏洞,由于输入…...

【Python]深入Python日志管理:从logging到分布式日志追踪的完整指南

《Python OpenCV从菜鸟到高手》带你进入图像处理与计算机视觉的大门! 日志是软件开发中的核心部分,尤其在分布式系统中,日志对于调试和问题定位至关重要。本篇文章将从Python标准库的logging模块出发,逐步探讨日志管理的最佳实践,涵盖日志配置、日志分层、日志格式化等基…...

python rstrip 的迷惑行为

在项目中&#xff0c;我需要把字符串末尾的一部分去掉&#xff0c;类似截断&#xff0c;我用ide的随笔提示&#xff0c;发现了rstrip这个方法&#xff0c;然后我试了下&#xff0c;满足我的需求&#xff0c;但在测试过程中&#xff0c;我发现了rstrip的一些行为很让我迷惑。 开…...

SPI通信协议

SPI通信协议 简介通信原理通信原理SPI数据通信的流程可以分为以下几步&#xff1a;通信特性设备时钟时钟速率时钟极性跟相位SPI协议层通讯流程详解优点&#xff1a;缺点&#xff1a; DS1302 时钟实验控制寄存器日历、时钟寄存器寄存器说明 DS1302 读写时序软件功能实现 简介 SP…...

vue中如何实现商品多规格添加(后台商城管理系统)

在制作商城类的后台管理系统中会遇到多规格商品的添加&#xff0c;需要向固定的数组内添加&#xff0c;通过查看数据结构正确的向数组中添加数据。 如图&#xff1a; 功能需求&#xff1a;1.每次点击添加新规格时&#xff0c;批量设置会多出来一行表格和一个标题输入框。 最…...

智创 AI 新视界 -- AIGC 重塑广告行业的创新力量(16 - 7)

&#x1f496;&#x1f496;&#x1f496;亲爱的朋友们&#xff0c;热烈欢迎你们来到 青云交的博客&#xff01;能与你们在此邂逅&#xff0c;我满心欢喜&#xff0c;深感无比荣幸。在这个瞬息万变的时代&#xff0c;我们每个人都在苦苦追寻一处能让心灵安然栖息的港湾。而 我的…...

Runloop

假设你的项目中有关tableView&#xff0c;然后还有一个定时器timer在执行&#xff0c;定时器代码如下&#xff1a; var num 0override func viewDidLoad() {super.viewDidLoad()let timer Timer(timeInterval: 1,target: self,selector: #selector(self.run),userInfo: nil,r…...

代码随想录第40天

121. 买卖股票的最佳时机 class Solution:def maxProfit(self, prices: List[int]) -> int:cost, profit float(inf), 0for price in prices:cost min(cost, price)profit max(profit, price - cost)return profit122.买卖股票的最佳时机II class Solution:def maxPr…...

element plus table组件多选获取数据id

首先给table加上 selection-change"handleSelectionChange"事件 示例 <el-table selection-change"handleSelectionChange" stripe:data"data?.slice((currentPage3 - 1) * pageSize3, currentPage3 * pageSize3)" style"width: 100%…...

自动驾驶:百年演进

亲爱的小伙伴们&#x1f618;&#xff0c;在求知的漫漫旅途中&#xff0c;若你对深度学习的奥秘、JAVA 、PYTHON与SAP 的奇妙世界&#xff0c;亦或是读研论文的撰写攻略有所探寻&#x1f9d0;&#xff0c;那不妨给我一个小小的关注吧&#x1f970;。我会精心筹备&#xff0c;在…...

STM32 了解OLED

内容扩展 调试方式串口调试&#xff1a;通过串口调试&#xff0c;将调试信息发送到电脑端&#xff0c;电脑使用串口助手显示调试信息 显示屏调试&#xff1a;直接将显示屏连接到单片机&#xff0c;将调试信息打印到显示屏上 keil调试模式&#xff1a;借助Keil软件的调试模式&a…...

NanoLog起步笔记-7-log解压过程初探

nonolog起步笔记-6-log解压过程初探 再看解压过程建立调试工程修改makefile添加新的launch项 注&#xff1a;重新学习nanolog的README.mdPost-Execution Log Decompressor 下面我们尝试了解&#xff0c;解压的过程&#xff0c;是如何得到文件头部的meta信息的。 再看解压过程 …...

python连接redis详细步骤

1.下载并安装windows python Window 平台安装 Python: 以下为在 Window 平台上安装 Python 的简单步骤。 打开 WEB 浏览器访问 Python Releases for Windows | Python.org &#xff1a; 记得勾选 Add Python 3.6 to PATH。 在cmd 执行pip install redis 2.编辑python代码…...

使用redis 的stream 做消息中间件 多线程消费消息

1.redis stream 特点 1.支持消息持久化 2.消费者组模式 3.消息确认机制 4. 消息重试机制 5. 死信队列2. 消息生产者服务 2.1 如下代码Service Slf4j public class StreamMessageProducer {Autowiredprivate StringRedisTemplate redisTemplate;private static final String S…...

《操作系统 - 清华大学》6 -5:局部页面置换算法:最不常用置换算法 (LFU, Least Frequently Used)

文章目录 1. 最不常用算法的工作原理2.最不常用算法特征3. 示例 1. 最不常用算法的工作原理 最不常用算法&#xff1a;注意并不是表示算法本身不常用&#xff0c;而是采取最不常使用页面的策略&#xff0c;Least Frequently Used&#xff0c; LFU。LRU 是最久未被访问的页&…...

GWAS分析先做后学

大家好&#xff0c;我是邓飞。 GWAS分析是生物信息和统计学的交叉学科&#xff0c;上可以学习编程&#xff0c;下可以学习统计。对于Linux系统&#xff0c;R语言&#xff0c;作图&#xff0c;统计学&#xff0c;机器学习等方向&#xff0c;都是一个极好的入门项目。生物信息如…...

【threejs】创建FPS相机

原理说明 控制器是一个很麻烦的东西&#xff0c;需要创建更多的类来管理相机行为&#xff0c;并且可自定义性差&#xff0c;所以将部分控制器的功能绑定到相机上&#xff0c;可以解决这些问题&#xff0c;所以我以 FlyControls为例&#xff0c;将控制器功能绑定到相机上&#…...

路径规划之启发式算法之十一:布谷鸟搜索算法(Cuckoo Search,CS)

布谷鸟搜索算法&#xff08;Cuckoo Search&#xff0c;CS&#xff09;是一种新兴的自然启发式算法&#xff0c;由剑桥大学的杨新社教授和S.戴布&#xff08;Xin-She Yang和Suash Deb&#xff09;于2009年提出。该算法基于布谷鸟的寄生性育雏&#xff08;巢寄生&#xff09;行为…...

Mitel MiCollab企业协作平台存在任意文件读取漏洞(CVE-2024-41713)

免责声明: 本文旨在提供有关特定漏洞的深入信息,帮助用户充分了解潜在的安全风险。发布此信息的目的在于提升网络安全意识和推动技术进步,未经授权访问系统、网络或应用程序,可能会导致法律责任或严重后果。因此,作者不对读者基于本文内容所采取的任何行为承担责任。读者在…...

java+springboot+mysql党务(党员)管理系统

项目介绍&#xff1a; 使用javaspringbootmysql开发的党务管理系统&#xff0c;系统包含管理员、用户角色&#xff0c;功能如下&#xff1a; 管理员&#xff1a;用户管理&#xff1b;党支部管理&#xff1b;党员管理&#xff08;入党申请、积极分子、发展对象、预备党员、正式…...

gozero项目迁移与新服务器环境配置,包含服务器安装包括go版本,Nginx,项目配置包括Mysql,redis,rabbit,域名

迁移 **GoZero** 项目到新服务器并配置相关环境涉及多个步骤。以下是一个系统化的指南&#xff0c;涵盖服务器环境安装、数据库和缓存配置、项目部署以及域名绑定。 ### 步骤概述 1. **服务器环境配置** - 安装 Go 语言环境 - 安装 Nginx - 安装 MySQL 和 Redis -…...

使用WebDAV来上传和下载文件

WebDAV是什么 基于Web的分布式编写和版本控制&#xff08;WebDAV&#xff09;是超文本传输协议&#xff08;HTTP&#xff09;的扩展&#xff0c;有利于用户间协同编辑和管理存储在万维网服务器文档。WebDAV 由互联网工程任务组的工作组在 RFC 4918 中定义。许多现代操作系统为 …...

集成运算放大电路反馈判断

集成运算放大电路 一种具有很高放大倍数的多级直接耦合放大电路&#xff0c;因最初用于信号运算而得名&#xff0c;简称集成运放或运放 模拟集成电路中的典型组件&#xff0c;是发展最快、品种最多、应用最广的一种 反馈 将放大电路输出信号的一部分或全部通过某种电路引回到输…...

什么是绩效文化?

绩效文化是一种组织文化&#xff0c;它将绩效视为核心价值观&#xff0c;贯穿于组织的各个层面和活动之中。 一、绩效文化的内涵 目标导向 绩效文化强调组织成员都朝着共同的目标努力。这个目标通常是明确、可衡量的&#xff0c;如企业的年度利润目标、市场份额增长目标等。例…...

【力扣】409.最长回文串

问题描述 思路解析 因为同时包含大小写字母&#xff0c;直接创建个ASCII表大小的桶来标记又因为是要回文子串&#xff0c;所以偶数个数的一定可以那么同时&#xff0c;对于出现奇数次数的&#xff0c;我没需要他们的次数-1&#xff0c;变为偶数&#xff0c;并且可以标记出现过…...

android studio创建虚拟机注意事项

emulator 启动模拟器的时候&#xff0c;可以用 AVD 界面&#xff0c;也可以用命令行启动&#xff0c;但命令行启 动的时候要注意&#xff0c;系统有两个 emulator.exe &#xff0c;建议使用 emulator 目录下的那个&#xff01;&#xff01; 创建类型为google APIs的虚拟机可从…...

DP协议:缩略词

缩写代表的含义ACT分配更改触发&#xff08;Allocation Change Trigger&#xff09;API应用程序编程接口&#xff08;Application Programming Interface&#xff09;AUX辅助&#xff08;Auxiliary&#xff09;BER比特错误率&#xff08;Bit Error Rate&#xff09;bpc每色比特…...

【Rive】事件回调

1 前言 Android 中可以通过 RiveAnimationView 的 addEventListener 方法添加动画监听器&#xff0c;用于监听状态动画和过渡动画的开始和结束时机&#xff0c;实现动画开始和结束时的事件回调&#xff1b;也可以监听 Rive 事件触发的时机&#xff0c;在事件触发时响应回调。 …...

YOLOv8-ultralytics-8.2.103部分代码阅读笔记-tuner.py

tuner.py ultralytics\engine\tuner.py 目录 tuner.py 1.所需的库和模块 2.class Tuner: 1.所需的库和模块 # Ultralytics YOLO &#x1f680;, AGPL-3.0 license# 模块提供用于对象检测、实例分割、图像分类、姿势估计和多对象跟踪的 Ultralytics YOLO 模型的超参数调整…...

【数据结构】堆的概念、结构、模拟实现以及应用

本篇我们来介绍一下数据结构中的堆。 1.堆的概念及结构 1&#xff09;堆是一颗完全二叉树。 2&#xff09;堆又分为大堆和小堆&#xff0c;大堆就是树里面任何一个父节点都大于子节点&#xff0c;所以根节点是最大值&#xff1b;小堆就是树里面任何一个父节点都小于子节点&am…...