前后端交互

1-前后端交互概述

1.1接口调用方式

  • 原生ajax

  • 基于jQuery的ajax

  • fetch（ajax的升级版）

  • axios （第三方的库）

1.2 url 地址格式有哪些

  • 传统的url

    • http://host:port/path?query#fragment

    • http协议----https，ftp

    • host----域名或者IP地址

    • port----端口，http默认是80，可以省略

    • path----路径/比如/abc/a/b/c---虚拟的路径(并不是服务器中一定有个真实的目录，作用就是区分不同的资源)

    • query---查询参数，例如?name=zhangsan&age=14

    • Fragment:锚点（哈希hash），表示定位到页面的某个位置

  • Restful形式的url

    • 新型的url地址，与提交方式密切相关

    • http请求的方式

    • GET 查询 -----http://www.hello.com/books GET

    • POST 添加 -----http://www.hello.com/books POST （1.2虽然地址相同，但是表示含义是不一样的）

    • PUT 修改 -----http://www.hello.com/books/1 PUT 表示去修改id为1的这本书的信息

    • DELETE 删除 -----http://www.hello.com/books/1 DELETE 表示去删除id为1的这本书的信息

  • 关于在请求头中指定 Content-Type 属性的的说明：

  • Content-Type: application/x-www-form-urlencoded;charset=utf-8
---传统表单形式
比如：name=zhangsan&age=20&sex=男
Content-Type:application/json		
----json形式
比如：{name: 'zhangsan', age: '20', sex: '男'}
注意：get请求是不能提交json对象数据格式的，传统网站的表单提交也是不支持json对象数据格式的。

  • 传统url地址通过?传参，Restful风格url地址通过/传参

2-异步编程问题与Promise概述

2.1 异步

Promise实例生成以后，可以用then方法指定resolved状态和reject状态的回调函数

2.3-Promise基本用法

一个 Promise 对象代表一个在这个 promise 被创建出来时不一定已知的值。它让你能够把异步操作最终的成功返回值或者失败原因和相应的处理程序关联起来。 这样使得异步方法可以像同步方法那样返回值：异步方法并不会立即返回最终的值，而是会返回一个 promise，以便在未来某个时候把值交给使用者。

2.4 如何定义一个promise实例

我们使用new来构建一个Promise ,Promise的构造函数接收一个参数，是函数，并且传入两个参数： resolve，reject， 分别表示异步操作执行成功后的回调函数和异步操作执行失败后的回调函数

  • JavaScript的执行环境是「单线程」

  • 所谓单线程，是指JS引擎中负责解释和执行JavaScript代码的线程只有一个，也就是一次只能完成一项任务，这个任务执行完后才能执行下一个，它会「阻塞」其他任务。这个任务可称为主线程

  • 异步模式可以一起执行多个任务

  • JS中常见的异步调用

    • 定时任务

    • ajax

    • 事件函数

  • 案例演示:异步编程----对应服务器01.api

  • <script type="text/javascript">/*前后端交互-异步编程与Promise概述*/var ret = null$.ajax({url: 'http://localhost:3004/data',success: function (data) {ret = data;}});console.log(ret)// ----------------------------// $.ajax({//   url: 'http://localhost:3004/data',//   success: function (data) {//     console.log(data)//   }// });// $.ajax({//   url: 'http://localhost:3004/data1',//   success: function (data) {//     console.log(data)//   }// });// $.ajax({//   url: 'http://localhost:3004/data2',//   success: function (data) {//     console.log(data)//   }// });// -----------------------------------</script>

    2.2 promise

  • 主要解决异步深层嵌套的问题(回调地狱)

  • promise 提供了简洁的API 使得异步操作更加容易--注意：promise可以让我们的写法看起来更清晰。

2.3-Promise基本用法

一个 Promise 对象代表一个在这个 promise 被创建出来时不一定已知的值。它让你能够把异步操作最终的成功返回值或者失败原因和相应的处理程序关联起来。 这样使得异步方法可以像同步方法那样返回值：异步方法并不会立即返回最终的值，而是会返回一个 promise，以便在未来某个时候把值交给使用者。

2.4 如何定义一个promise实例

我们使用new来构建一个Promise ,Promise的构造函数接收一个参数，是函数，并且传入两个参数： resolve，reject， 分别表示异步操作执行成功后的回调函数和异步操作执行失败后的回调函数

Promise实例生成以后，可以用then方法指定resolved状态和reject状态的回调函数

//02.promise基本使用---
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><script type="text/javascript">/*Promise基本使用1. Promise基本使用*/// console.log(typeof Promise)// console.dir(Promise);//  我们使用new来构建一个Promise  Promise的构造函数接收一个参数，是函数，并且传入两个参						数:resolve，reject， 分别表示异步操作执行成功后的回调函数和异步操作执行失败后的								回调函数，并通过p.then()var p = new Promise(function(resolve, reject){// 这里用于实现异步任务setTimeout(function(){var flag = true;if(flag) {// 正常情况resolve('hello');}else{// 异常情况reject('出错了');}}, 100);});p.then(function(data){console.log(data) //对应正常的情况},function(data){console.log(data+"error")//对应异常的情况});</script>
</body>
</html>

待定状态（pending）的 Promise 对象要么会通过一个值被兑现（fulfilled），要么会通过一个原因（错误）被拒绝（rejected）。当这些情况之一发生时，我们用 promise 的 then 方法排列起来的相关处理程序就会被调用。如果 promise 在一个相应的处理程序被绑定时就已经被兑现或被拒绝了，那么这个处理程序就会被调用，因此在完成异步操作和绑定处理方法之间不会存在竞争状态。

  • 一个 Promise 必然处于以下几种状态之一：

    • 待定（pending）: 初始状态，既没有被兑现，也没有被拒绝。

    • 已兑现（fulfilled）: 意味着操作成功完成。resolve()修改

    • 已拒绝（rejected）: 意味着操作失败。 reject()修改

2.5 基于Promise发送Ajax请求,并解决地狱回调问题

  • 提前封装好的一段数据请求的代码：

  • var xhr = new XMLHttpRequest();xhr.open('get', url);xhr.send(null);xhr.onreadystatechange = function () {if (xhr.readyState != 4) return;if (xhr.readyState == 4 && xhr.status == 200) {// 正常接收---处理正常的情况} else {// 处理异常情况}};

  • 完整代码

  • <!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Document</title>
</head><body><script type="text/javascript">/*基于Promise发送Ajax请求*/function queryData(url) {var p = new Promise(function (resolve, reject) {var xhr = new XMLHttpRequest();xhr.open('get', url);xhr.send(null);xhr.onreadystatechange = function () {if (xhr.readyState != 4) return;if (xhr.readyState == 4 && xhr.status == 200) {// 处理正常的情况resolve(xhr.responseText);} else {// 处理异常情况reject('服务器错误');}};});return p; //这里必须返回一个promise对象}queryData('http://localhost:3004/data1').then(function (data) {console.log(data);}, function (error) {console.log(error)});// ============================// 发送多个ajax请求并且保证顺序// queryData('http://localhost:3004/data')//   .then(function (data) {//     console.log(data)//     return queryData('http://localhost:3004/data1');//   })//   .then(function (data) {//     console.log(data);//     return queryData('http://localhost:3004/data2');//   })//   .then(function (data) {//     console.log(data)//   });//  对于发送多个ajax请求，通过then的方式变成线性关系，//  这里的 return出来的是一个新的promise对象，//  下一个then的调用者，就是上一个return出来的实例对象，//  并且then当中函数的参数data用与接收上一个异步任务的结果</script>
</body></html>
使用服务器是01.api

    2.6-Promise的then方法参数中的函数的返回值

  • then参数中的函数返回值

  • then方法指定resolved状态和reject状态的回调函数

  • then返回值有几种

    • 可以返回一个promise对象 该实例对象会调用下一个then

    • 可以返回一个非promise对象 （普通值）下一个then会接收我们传过来的普通值

    • <!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Document</title>
</head><body><script type="text/javascript">/*then参数中的函数返回值*/function queryData(url) {return new Promise(function (resolve, reject) {var xhr = new XMLHttpRequest();xhr.open('get', url);xhr.send(null);xhr.onreadystatechange = function () {if (xhr.readyState != 4) return;if (xhr.readyState == 4 && xhr.status == 200) {// 处理正常的情况resolve(xhr.responseText);} else {// 处理异常情况reject('服务器错误');}};});}queryData('http://localhost:3004/data').then(function (data) {console.log(data)// return queryData('http://localhost:3004/data1');//这里的返回值是一个新的promise实例对象，这样下一个then就可以得到这个异步任务的结果})// .then(function (data) {//   console.log(data)//   return new Promise(function (resolve, reject) {//     setTimeout(function () {//       resolve("我是一个异步调用函数");//     }, 2000)//   });// })// .then(function (data) { //这里的then是由谁来调用呢？//   console.log(data) // 上一个then返回一个promise实例对象，//   //下一个then的参数就是上一个异步参数的结果//   return '普通字符串'; //retrun一个普通的字符串// })//问题来了 ，上一个then返回的是一个具体的值，下一个then是谁来调用呢？// .then(function (data) {//   console.log(data) //得到这个字符串，这里表明，//   //如果上一个then我们return一个具体的值而不是promise对象，//   //那么 下一个then就可以直接得到具体的值， // })//如果上一个then返回的是一个具体的值，那么他会产生一个默认的promise对象//从而来调用下一个then</script>
</body></html>使用服务器是01.api

      2.7 -Promise 实例方法

    • prototype中的方法

      • .then()

        • 得到异步任务正确的结果

      • .catch()

        • 获取异常信息

      • finally()

        • 成功与否都会执行（不是正式标准）

        • <!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Document</title>
</head><body><script type="text/javascript">/*Promise常用API-实例方法*/console.dir(Promise);function foo() {return new Promise(function (resolve, reject) {setTimeout(function () {resolve("success");// reject('error'); // 注意：promise的状态是不可逆的}, 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>
</body></html>

2.8 -Promise静态方法 --对象方法

  • .all()

Promise.all()并发处理多个异步任务，所有异步任务都执行完才能得到结果

  • Promise.all方法接受一个数组作参数，数组中的对象（p1、p2、p3）均为promise实例（如果不是一个promise，该项会被用Promise.resolve`转换为一个promise)。它的状态由这三个promise实例决定

  • <!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Document</title>
</head><body><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:3005/a1');var p2 = queryData('http://localhost:3005/a2');var p3 = queryData('http://localhost:3005/a3');Promise.all([p1, p2, p3]).then(function (result) {console.log(result) //所有的条件完成才有结果})</script>
</body></html>
//使用服务器 06.api

  • 应用场景比如：

  • 用户点击按钮，会弹出一个弹出对话框，对话框中有两部分数据呈现，这两部分数据分别是不同的后端接口获取的数据。

    弹框弹出后的初始情况下，就让这个弹出框处于数据加载中的状态，当这两部分数据都从接口获取到的时候，才让这个数据加载中状态消失。让用户看到这两部分的数据。

    那么此时，我们就需求这两个异步接口请求任务都完成的时候做处理，所以此时，使用Promise.all方法，就可以轻松的实现

  • .race()

  • Promise.race方法同样接受一个数组作参数。当p1, p2, p3中有一个实例的状态发生改变（变为fulfilled或rejected），p的状态就跟着改变。并把第一个改变状态的promise的返回值，传给p的回调函数

  • 首先我们知道race的用法是多个Promise实例谁先返回就输出谁, 用这个特性我们可以测试接口的响应速度(造一个n秒执行的定时器, 超过n秒就resolve的promise).

    又或者, 超过2秒给用户一个提醒网络状况不佳等, 那我们就可以做一个2秒的定时器reject即可

  • Promise.race()并发处理多个异步任务，只要有一个异步任务完成就能得到结果

  • <!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Document</title>
</head><body><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:3005/a1');var p2 = queryData('http://localhost:3005/a2');var p3 = queryData('http://localhost:3005/a3');// var p3 = new Promise((resolve ,reject) => {//       setTimeout(function () {//         reject("请求太慢了！")//       },500)// })Promise.race([p1, p2, p3]).then(function (result) {console.log(result) //最先返回就有结果}).catch((result) => {console.log(result); // 捕获错误})// 脚下留心// p1.then( res => {//   console.log(res)// })// p2.then( res => {//   console.log(res)// })</script>
</body></html>
//使用服务器 06.api

  • 脚下留心：

  • all和race传入的数组中如果有会抛出异常的异步任务，那么只有最先抛出的错误会被捕获，并且是被then的第二个参数或者后面的catch`捕获；但并不会影响数组中其它的异步任务的执行。

3 -axios概述与基本用法

3.1 axios 概述

  • 基于promise用于浏览器和node.js的http客户端

  • 支持浏览器和node.js

  • 支持promise

  • 能拦截请求和响应

  • 自动转换JSON数据

  • 能转换请求和响应数据

3.2 axios基础用法

demo 07
使用服务器api10 <script type="text/javascript" src="js/axios.js"></script><script type="text/javascript">axios.get('http://localhost:3007/adata').then(function (res) {// 注意data属性是固定的用法，用于获取后台的实际数据console.log(res)console.log(res.data)})</script>

3.3 axios传递参数

  • get和 delete请求传递参数

    • 通过传统的url 以 ? 的形式传递参数

    • restful 形式传递参数 /

    • 通过params 形式传递参数 注意前端使用params传递参数，服务器用query接收

  • post 和 put 请求传递参数

    • 通过选项传递参数

    • 通过 URLSearchParams 传递参数

    • //使用服务器10.api//demo11# 1-1 发送get 请求   <script type="text/javascript" src="js/axios.js"></script><script type="text/javascript">//1.1传统方式---通过传统的url  以 ? 的形式传递参axios.get('http://localhost:3007/axios?id=123').then(function (res) {console.log(res.data)})</script># 1-2  restful 形式传递参数 //1.2restful风格axios.get('http://localhost:3007/axios/123').then(function (res) {console.log(res.data)})# 1-3  通过params  形式传递参数 axios.get('http://localhost:3007/axios', {params: { //axios专门提供的，服务器接口它使用的传统url的接口（query形式获取参数）id: 789  //这种是比较方便的}}).then(function (res) {console.log(res.data)})# 2.axios delete 请求传参     传参的形式和 get 请求一样,同样可以使用get的三种方式axios.delete('http://localhost:3007/axios', {params: {id: 111}}).then(function (res) {console.log(res.data)})# 3  axios 的 post 请求# 3.1  通过选项传递参数--post方式请求传参--json格式的axios.post('http://localhost:3007/axios', {uname: 'lisi',pwd: 123}).then(function (res) {console.log(res.data)})# 3.2  通过 URLSearchParams  传递参数  post方式请求传参 --表单字符串格式的var params = new URLSearchParams(); //表单形式的参数 params.append('uname', 'zhangsan');params.append('pwd', '123456');axios.post('http://localhost:3007/axios', params).then(function (res) {console.log(res.data)})#4.1 axios put 请求传参   和 post 请求一样  请求传参---json格式axios.put('http://localhost:3007/axios/123', {uname: 'lisi',pwd: 123456}).then(function (res) {console.log(res.data)})#4.2 axios put 请求传参   和 post 请求一样  请求传参---表单字符串格式var params = new URLSearchParams(); //表单形式的参数 params.append('uname', 'zhangsan');params.append('pwd', '1234567890');axios.put('http://localhost:3007/axios/123', params).then(function (res) {console.log(res.data)})

      3.4 -axios响应结果与全局配置

    • //demo09  //使用服务器10.api<script type="text/javascript" src="js/axios.js"></script><script type="text/javascript">/*axios 响应结果与全局配置*/// axios.get('http://localhost:3007/axios-json').then(function (res) {//   console.log(res);//   console.log(res.data.uname); //json不需要转换了，axios自动帮我们转化// });// axios全局配置// 配置请求的基准URL地址---发送请求时只写路径就可以了// axios.defaults.baseURL = 'http://localhost:3007/';// 配置超时时间// axios.defaults.timeout = 2500;// 配置请求头信息 注意：跨域是需要后台配置，允许携带mytoken// axios.defaults.headers['mytoken'] = 'helloworld';// axios.get('axios-json').then(function (res) {//   console.log(res.data.uname);// });</script>

      3.5 -axios 拦截器

    • 请求拦截器

      • 请求拦截器的作用是在请求发送前进行一些操作

      • 例如在每个请求体里加上token，统一做了处理如果以后要改也非常容易

    • 响应拦截器

      • 响应拦截器的作用是在接收到响应后进行一些操作

      • 例如在服务器返回登录状态失效，需要重新登录的时候，跳转到登录页

      • // demo10
//使用服务器10.api
<script type="text/javascript" src="js/axios.js"></script><script type="text/javascript">/*axios拦截器*///请求拦截器axios.interceptors.request.use(function (config) {console.log(config)//配置一个请求头，mytoken，类似于我们前面使用全局配置的方法配置请求头//只不过使用拦截器更加灵活，比入我们可以通过config获取url,给特定的url配置请求头config.headers.mytoken = 'hello';return config; //必须返回config}, function (err) { //用来处理错误信息console.log(err)})//响应拦截器// axios.interceptors.response.use(function (res) {//   // 设置res接收我们返回的数据res.data//   var res = res.data;//   return res; //返回data// }, function (err) {//   console.log(err) //对请求错误做点什么    // })axios.get('http://localhost:3007/adata').then(function (data) {// console.log(data)console.log(data.data)})</script>

4-async 和 await

4.1 概述

  • async/await是ES7引入的新语法，可以更加方便的进行异步操作

  • async作为一个关键字放到函数前面

    • 任何一个async函数都会隐式返回一个promise

  • await关键字只能在使用async定义的函数中使用

    • await后面可以直接跟一个 Promise实例对象

    • await函数不能单独使用

  • async/await 让异步代码看起来、表现起来更像同步代码

  • async await基础用法：

  1. 下方代码的运行结果是什么？

  2.  <script>function a() {return 'a 已经OK!';}function b() {setTimeout(() => {return 'b 已经OK!';}, 1000);}function c() {return 'c 已经OK!';}function run() {console.log(a());console.log(b());console.log(c());}run();</script>

  3. 将b()方法按照下列方式进行改造：

  4. function b () {return new Promise((resolve, reject)  =>{setTimeout(() => {resolve("b 已经Ok!")}, 1000);})}此时发现打印结果不再是undefine而是一个Promise对象,

    使用async await 方法进行修饰

  5.  async function run () {console.log(a());console.log(await b());console.log(c());}run ()

    4.2 配合axios共同使用：

//服务器10.api
// demo11
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>Document</title></head><body><script type="text/javascript" src="js/axios.js"></script><script type="text/javascript">axios.defaults.baseURL = 'http://localhost:3007';// //传统方法axios.get('adata').then(function (res) {console.log(res.data);});// 核心：async await如何处理异步任务// 首先封装一个函数，这个函数的前写上async关键字// 其次在函数的内部通过await的方式处理异步的任务// await后面可以跟一个promise实例对象，所以在promise当中我们可以处理具体的异步任务，// awit前面通过通过返回值的形式得到异步的结果，这样就不在需要then和回调函数// 此外，还有一个细节，async返回值是一个新的promise对象// 任何一个async函数都会隐式返回一个promise   我们可以使用then 进行链式编程// 注意细节，await后面要跟一个promise实例对象async function queryData() {var res = await axios.get('adata'); //await后面是一个实例对象，//此时就不需要then了//console.log(ret) //得到请求结果return res.data; //返回数据 ,返回之后，在调用函数的时候在通过then得到这个返回值}// queryData()queryData().then(function (data) {console.log(data); //这里的值是通过queryData函数return来的结果});</script></body>
</html>

4.3 async await处理多个请求的用法

  • 对于多个请求有时需要保证请求的顺序，比入第一个请求的结果作为第二个请求的参数来进行传递

  • //使用服务器15.api
// demo12
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><script type="text/javascript" src="js/axios.js"></script><script type="text/javascript">/*async/await处理多个异步任务*/axios.defaults.baseURL = 'http://localhost:3008';async function queryData() {var info = await axios.get('async1');var ret = await axios.get('async2?info=' + info.data);return ret.data;}queryData().then(function(data){console.log(data)})</script>
</body>
</html>

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

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

相关文章

被鹅厂最新开源AI绘画工具PhotoMaker圈粉了，多风格头像生成器就靠它了！

被鹅厂最新开源AI绘画工具PhotoMaker圈粉了，多风格头像生成器就靠它了！

要说本周AIGC开源爆火项目&#xff0c;腾讯的PhotoMaker 可以入选其一。而 PhotoMaker 是腾讯Arc于4天前开源上线到GitHub的&#xff0c;更有一众互联网科技领域大V体验推荐&#xff0c;当前Star已经有4.7k了&#xff01; 相信小编这篇文章发布时star预测可能达到5k了。而 Pho…
阅读更多...
js打地鼠

js打地鼠

文章目录 1实现效果2代码实现 1实现效果 游戏难度&#xff1a;简单&#xff0c;一般&#xff0c;困难&#xff0c;噩梦&#xff08;控制setInterval的time参数&#xff09; 按钮功能&#xff1a;结束&#xff08;可以通过修改gameScore的值来修改判定结束的分数&#xff09;&am…
阅读更多...
SpringBoot AOP应用（公共字段填充）

SpringBoot AOP应用（公共字段填充）

背景 在很多场景下&#xff0c;我们对需要对一些公共字段进行赋值操作&#xff0c;如果我们每一个公共字段都进行代码赋值那无疑会增加很多重复无用代码&#xff0c;都会导致我们的 代码臃肿&#xff0c;所以我们使用AOP切面编程&#xff0c;实现功能增强&#xff0c;来完成公…
阅读更多...
3个精美的wordpress律师网站模板

3个精美的wordpress律师网站模板

暗红色WordPress律师事务所网站模板 演示 https://www.zhanyes.com/qiye/23.html 暗橙色WordPress律师网站模板 演示 https://www.zhanyes.com/qiye/18.html 红色WordPress律所网站模板 演示 https://www.zhanyes.com/qiye/22.html
阅读更多...
2023 IoTDB Summit：Dr. Feinauer《Apache IoTDB在德国工业和关键基础设施中的应用》

2023 IoTDB Summit：Dr. Feinauer《Apache IoTDB在德国工业和关键基础设施中的应用》

12 月 3 日&#xff0c;2023 IoTDB 用户大会在北京成功举行&#xff0c;收获强烈反响。本次峰会汇集了超 20 位大咖嘉宾带来工业互联网行业、技术、应用方向的精彩议题&#xff0c;多位学术泰斗、企业代表、开发者&#xff0c;深度分享了工业物联网时序数据库 IoTDB 的技术创新…
阅读更多...
Biotin-PEG4-TSA，生物素-PEG4-酪胺，用于标记蛋白质、核酸等生物分子

Biotin-PEG4-TSA，生物素-PEG4-酪胺，用于标记蛋白质、核酸等生物分子

您好&#xff0c;欢迎来到新研之家 文章关键词&#xff1a;Biotin-PEG4-Tyramide&#xff0c;Biotin-PEG4-TSA&#xff0c;生物素-PEG4-酪胺&#xff0c;Biotin PEG4 Tyramide&#xff0c;Biotin PEG4 TSA 一、基本信息 产品简介&#xff1a;Biotin PEG4 Tyramide is compos…
阅读更多...
React 中条件渲染的 N 种方法

React 中条件渲染的 N 种方法

本文作者系360奇舞团前端开发工程师 条件渲染在React开发中非常重要的功能&#xff0c;它允许开发人员根据条件控制渲染的内容&#xff0c;在创建动态和交互式用户界面方面发挥着至关重要的作用&#xff0c;本文总结了常用的的条件渲染方法。 1.If-else if-else是一种控制流程…
阅读更多...
mac 10.15.7 Unity 2021.3.14 XCode 12.4 -＞ Unity IOS 自动安装 Cocoapods 失败解决方法

mac 10.15.7 Unity 2021.3.14 XCode 12.4 -＞ Unity IOS 自动安装 Cocoapods 失败解决方法

自己这两天在用Unity开发IOS时&#xff0c;遇到了安装Cocoapods失败的问题&#xff0c;记录一下问题及解决方法&#xff0c;便于自己后续查看&#xff0c;以及有相同遭遇的人查看 发生场景&#xff1a;打开 unity&#xff0c;触发自动安装 Cocoapods -> 安装失败&#xff08…
阅读更多...
基于Micropython利用ESP32-C3驱动墨水屏显示图片

基于Micropython利用ESP32-C3驱动墨水屏显示图片

从咸鱼上淘了两块2.9寸的墨水屏价签&#xff0c;可以结合ESP32-C3做个低功耗的时钟温湿度计。 1、所需硬件 合宙的ESP32-C3&#xff1a; 电子价签拆出来的2.9寸墨水屏&#xff1a; ——电子价签型号为&#xff1a;Stellar-L&#xff0c;墨水屏型号为&#xff1a;E029A01。电子…
阅读更多...
vue3之echarts3D环柱图

vue3之echarts3D环柱图

vue3之echarts3D环柱图 效果&#xff1a; 核心代码&#xff1a; <template><div class"container"><div ref"chartRef" class"charts"></div></div> </template><script lang"ts" setup&g…
阅读更多...
3. SQL 语言

3. SQL 语言

重点&#xff1a; MySQL 的 三种安装方式&#xff1a;包安装&#xff0c;二进制安装&#xff0c;源码编译安装。 MySQL 的 基本使用 MySQL 多实例 DDLcreate alter drop DML insert update delete DQL select 3&#xff09;SQL 语言 3.1&#xff09;关系型数据库的常见…
阅读更多...
探索Pyecharts关系图绘制技巧：炫酷效果与创意呈现【第42篇—python：Pyecharts水球图】

探索Pyecharts关系图绘制技巧：炫酷效果与创意呈现【第42篇—python：Pyecharts水球图】

文章目录 Pyecharts绘制多种炫酷关系网图引言准备工作代码实战1. 基本关系网图2. 自定义节点样式和边样式3. 关系网图的层级结构4. 添加标签和工具提示5. 动态关系网图6. 高级关系网图 - Les Miserables 示例7. 自定义关系网图布局8. 添加背景图9. 3D 关系网图10. 热力关系网图…
阅读更多...
同为科技（TOWE）自动控制循环定时插座

同为科技（TOWE）自动控制循环定时插座

随着科技的发展&#xff0c;智能化家居已成为我们生活的重要组成部分。作为国内领先的智能家居品牌&#xff0c;同为科技&#xff08;TOWE&#xff09;推出的自动控制循环定时插座&#xff0c;无疑将科技与生活完美地结合在一起。 1.外观设计 同为科技&#xff08;TOWE&#x…
阅读更多...
java中aes加密解密工具类

java中aes加密解密工具类

java中aes加密解密工具类 字符串&#xff1a;{“DATA”:{“SJH”:“17600024168”,“DLZH”:“91510104MA67FPXR5T”,“DLMM”:“jhdz123456”,“DLSF”:“5”,“NSRSBH”:“91510104MA67FPXR5T”},“JRSF”:“23”} 加密后&#xff1a;y4mzmi3jta22aXeIPfEdzu8sgA9uy3OevaIY…
阅读更多...
Tomcat10安装报错Unknown module: java.rmi specified to --add-opens

Tomcat10安装报错Unknown module: java.rmi specified to --add-opens

错误原因需要根据自己的tomcat的版本查看 需要根据自己的tomcat找到对应安装的java版本(查看版本网址)https://tomcat.apache.org/whichversion.html 将电脑当中的环境变量JRE_HOME变量删除即可&#xff08;具体如下图&#xff09;
阅读更多...
vmware-VCSA6.0部署

vmware-VCSA6.0部署

下载vcsa的iso包&#xff0c;解压后首先安装VMware-ClientIntegrationPlugin-6.0.0-6823256.exe 如果不配置域名配置成ip地址也可以 https://172.16.51.202/
阅读更多...
阶段项目中的添加图片和打乱图片

阶段项目中的添加图片和打乱图片

package Puzzlegame.com.wxj.ui; import javax.swing.*; import java.util.Random; public class GameJframe extends JFrame { //游戏主界面 //创建一个二维数组 //目的&#xff1a;管理数据 //加载图片的时候&#xff0c;会根据二维数组中的数据进行加载 int [][] …
阅读更多...
使用大模型检索增强 Rerank 模型，检索效果提升太明显了！

使用大模型检索增强 Rerank 模型，检索效果提升太明显了！

Rerank 在 RAG&#xff08;Retrieval-Augmented Generation&#xff09;过程中扮演了一个非常重要的角色&#xff0c;普通的 RAG 可能会检索到大量的文档&#xff0c;但这些文档可能并不是所有的都跟问题相关&#xff0c;而 Rerank 可以对文档进行重新排序和筛选&#xff0c;让…
阅读更多...
分布式事务解决方案Saga模式

分布式事务解决方案Saga模式

由于这个场景需要深入详细的解释&#xff0c;我将采用分布式事务中的一个常见模式——补偿事务&#xff08;Saga模式&#xff09;——来进行解释&#xff0c;并提供一个具体的Java源码示例。请注意&#xff0c;这个示例是为了演示目的&#xff0c;并不代表一个生产级别的解决方…
阅读更多...
Linux ping命令详解

Linux ping命令详解

目录 一、简介二、ping命令三、简单示例3.1 ping -c 3 www.baidu.com3.2 ping -c 3 -i 2 www.baidu.com 一、简介 PING &#xff08;Packet Internet Groper&#xff09;&#xff0c; 因特网包探索器&#xff0c;用于测试网络连接量的程序 。Ping是工作在 TCP/IP 网络体系结构…
阅读更多...
最新文章

Copyright @ 2022~2023