标签: 15章

一、什么是WebRTCWebRTC(WebReal-TimeCommunications)是一项实时通讯技术，它允许网络应用或者站点，在不借助中间媒介的情况下，建立浏览器之间点对点（Peer-to-Peer）的连接，实现视频流和（或）音频流或者其他任意数据的传输。WebRTC包含的这些标准使用户在无需安装任何插件或者第三方的软件的情况下，创建点对点（Peer-to-Peer）的数据分享和电话会议成为可能。WebRTC只是一个媒体引擎，上面有一个JavaScriptAPI，所以每个人都知道如何使用它（尽管浏览器实现仍然各不相同），本文对WebRTC（网页实时通信）的相关内容进行简要介绍。二、WebRTC简介WebRTC，名称源自网页实时通信（WebReal-TimeCommunication）的缩写，是一个支持网页浏览器进行实时语音通话或视频聊天的技术，是谷歌2010年以6820万美元收购GlobalIPSolutions公司而获得的一项技术。WebRTC提供了实时音视频的核心技术，包括音视频的采集、编解码、网络传输、显示等功能，并且还支持跨平台：windows，linux，mac，android。虽然WebRTC的目标是实现跨平台的Web端实时音视频通讯，但因为核心层代码的Native、高品质和内聚性，开发者很容易进行除Web平台外的移殖和应用。很长一段时间内WebRTC是业界能免费得到的唯一高品质实时音视频通讯技术。1、webrtc是什么浏览器为音视频获取传输提供的接口2、webrtc可以做什么浏览器端到端的进行音视频聊天、直播、内容传输3、数据传输需要些什么IP、端口、协议客户端、服务端三、如何使用WebRTCWebRTC易于使用，只需极少步骤便可建立媒体会话。有些消息在浏览器和服务器之间流动，有些则直接在两个浏览器（成为对等端）之间流动。建立WebRTC会话建立WebRTC连接需要如下几个步骤：获取本地媒体（getUserMedia()，MediaStreamAPI）在浏览器和对等端（其它浏览器或终端）之间建立对等连接（RTCPeerConnectionAPI）将媒体和数据通道关联至该连接交换会话描述（RTCSessionDescription）四、面向网络的实时通信借助WebRTC，您可以为应用添加基于开放标准运行的实时通信功能。它支持在对等设备之间发送视频、语音和通用数据，使开发者能够构建强大的语音和视频通信解决方案。这项技术适用于所有现代浏览器以及所有主要平台的原生客户端。WebRTC采用的技术是开放网络标准，以常规JavaScriptAPI的形式在所有主流浏览器中提供。对于原生客户端（例如Android和iOS应用），可以使用具备相同功能的库。WebRTC项目属于开源项目，受Apple、Google、Microsoft和Mozilla等公司支持。五、WebRTC使用入门WebRTC标准概括介绍了两种不同的技术：媒体捕获设备和点对点连接。媒体捕获设备包括摄像机和麦克风，还包括屏幕捕获设备。对于摄像头和麦克风，我们使用navigator.mediaDevices.getUserMedia()来捕获MediaStreams。对于屏幕录制，我们改为使用navigator.mediaDevices.getDisplayMedia()。点对点连接由RTCPeerConnection接口处理。这是在WebRTC中两个对等方之间建立和控制连接的中心点。六、使用WebRTC协议进行音视频通信的步骤如下：1、获取本地媒体流：使用navigator.mediaDevices.getUserMedia方法获取本地摄像头或麦克风的媒体流。2、创建PeerConnection：使用newRTCPeerConnection(configuration)方法创建一个PeerConnection实例，其中configuration是PeerConnection的配置参数，例如STUN/TURN服务器地址等。3、添加ICECandidate：通过监听icecandidate事件获取到本地的ICECandidate，然后使用addIceCandidate方法将其添加到PeerConnection中。4、发送SDP：通过createOffer或者createAnswer方法生成本地的SDP（SessionDescriptionProtocol），并使用setLocalDescription方法设置到PeerConnection中5、接收SDP：通过信令服务器将远端的SDP发送给本地，然后使用setRemoteDescription方法设置到PeerConnection中。6、媒体流交换：当PeerConnection连接成功后，可以通过addTrack或者addStream方法将本地的媒体流添加到PeerConnection中，并且通过监听ontrack事件获取到远端的媒体流。7、关闭连接：使用close方法关闭PeerConnection。这些步骤可以使用WebRTC库来简化实现。在实际应用中，还需要考虑网络环境、协议版本兼容性、安全问题等因素。

前端高手特训从0到1带你手写一个微信小程序底层框架，小程序是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或者搜一下即可打开应用。也体现了“用完即走”的理念，用户不用关心是否安装太多应用的问题。应用将无处不在，随时可用，但又无需安装卸载。框架管理了整个小程序的页面路由，可以做到页面间的无缝切换，并给以页面完整的生命周期。开发者需要做的只是将页面的数据、方法、生命周期函数注册到框架中，其他的一切复杂的操作都交由框架处理。wepy支持类似Vue的组件化开发，可以将页面拆分成多个独立的组件，提高代码复用性和开发效率。下面我们通过一个实际的案例来说明组件化开发在wepy中的应用。假设我们有一个小程序项目，其中包含一个商品列表页面和一个商品详情页面。我们可以将商品列表和商品详情抽象成两个组件，并在需要的地方引用它们。首先，我们创建一个名为GoodsList的组件。在src/components目录下创建GoodsList.wpy文件，并编写如下代码：importaxiosfrom'axios'constdefaultConfig={ timeout:5000, baseURL:'/release/'}constaxiosInstance=axios.create(defaultConfig)//添加请求拦截器axiosInstance.interceptors.request.use(config=>{ returnconfig},(err)=>{ //对请求错误做些什么 returnPromise.reject(err)})//请求拦截器，内部根据返回值，重新组装，统一管理。axiosInstance.interceptors.response.use(res=>{ console.log('接口详情：',res) returnres})exportdefault{ //封装get httpGet(url:any,params={}){  returnaxiosInstance.get(url,{params}).then(res=>res.data).catch() }, //封装post httpPost(url:any,params={}){  returnaxiosInstance.get(url,{params}).then(res=>res.data).catch() }}封装一个openStore()，使用indexedDB.open()方法返回一个IDBRequest对象，接着将这个对象上的三个事件分别放置进入：onsuccess、onerror、onupgradeneeded。onsuccess表示打开数据库成功的事件。onerror表示打开数据库失败的事件。onupgradeneeded是数据库升级事件，如果版本号更新，并且大于之前的版本号则进行数据库升级，该事件回调里面，会创建我们所需要的对象仓库，类似于关系型数据库中的表的概念。exportdefaultclassDB{ privatedbName:string//数据库名称 constructor(dbName:string){  this.dbName=dbName } //打开数据库 publicopenStore(storeName:string,keyPath:string,indexs?:Array<string>){  constrequest=window.indexedDB.open(this.dbName,2)  request.onsuccess=(event)=>{   console.log('数据库打开成功')   console.log(event)  }  request.onerror=(event)=>{   console.log('数据库打开失败')   console.log(event)  }  request.onupgradeneeded=(event)=>{   console.log('数据库升级成功')   const{result}:any=event.target   conststore=result.createObjectStore(storeName,{autoIncrement:true,keyPath})   if(indexs&&indexs.length>0){    indexs.map((v:string)=>{     store.createIndex(v,v,{unique:true})    })   }   store.transaction.oncomplete=(event:any)=>{    console.log('创建对象仓库成功')   }   console.log(event)  } }}在子组件headerCommon.vue中切换语言时，调用saveLanguageApi接口，保存当前语言环境到indexedDB中，并将当前语言包zhCn或者en作为参数传递给父组件App.vue，代码片段如下：//commonHeader.vuefunctionhandleSelect(e:any){ if(e==='zh'){  emit('changeLang',zhCn)  saveLanguage('zh') }elseif(e==='en'){  emit('changeLang',en)  saveLanguage('en') } console.log(e)}//Mock接口：保存当前语言环境functionsaveLanguage(language:any){ saveLanguageApi(language).then(res=>{  const{success}=res  if(success){   console.log('保存当前语言包成功')  } })}通过调用getLanguage接口获取到之前调用存储在indexedDB中的语言环境，然后赋值给全局组件，代码片段如下：//headerCommon.vue//Mock接口：保存当前语言环境functiongetLanguage(){ fetchLanguageApi().then(res=>{  const{success,result}=res  const{name}=result  if(success){   if(name==='zh'){    emit('changeLang',zhCn)   }elseif(name==='en'){    emit('changeLang',en)   }   console.log('获取当前语言环境成功')  } })}getLanguage()使用@include指令来引入定义好的样式函数，该函数的三个参数可以根据传入的值来对flex布局进行自定义，默认值为：column、center、right，在footerCommon.scss中我们重新自定义了该样式函数，分别传入row、space-between、flex-start，代码片段如下：//footerCommon.scss.common-footer{  border-top:1pxsolidrgb(235,235,235); .footer{  @includemain-wrapper;  @includelayout(row,space-between,flex-start);  padding:20px0;  li{   @includelayout;   h4{    font-weight:bold;   }   a{    margin-bottom:10px;    color:rgb(72,72,72);    text-decoration:none;    &:hover{     text-decoration:underline;    }   }  } }}订单中心模块会使用到的两个Mock接口为saveOrderApi、fetchOrderApi，一个是立即预定，另一个是查询订单列表，具体代码片段如下//src/api/order/index.tsconststoreName=Object.keys(airbnb.orderObjectStore)[0]//Mock接口：立即预定exportasyncfunctionsaveOrderApi(params:any){ constloading=ElLoading.service({  lock:true,  background:'rgba(0,0,0,0.1)' }) //是否存在相同订单Id consthasOrderId=awaitnewPromise((resolve,reject)=>{  airbnb.airbnbDB.getList(storeName).then((res:any)=>{   setTimeout(()=>{    loading.close()   },200)   res&&res.filter((item:any)=>{    if(item.orderId===params.orderId){//存在相同订单Id     resolve(true)    }   })   resolve(false)  }) }) letresult:IResultOr if(hasOrderId){  result=awaitnewPromise((resolve,reject)=>{   resolve({code:'000001',success:false,message:'数据已存在',result:null})  }) }else{  result=awaitnewPromise((resolve,reject)=>{   airbnb.airbnbDB.updateItem(storeName,params).then(res=>{    setTimeout(()=>{     loading.close()    },200)    resolve({code:'000000',success:true,message:'操作成功',result:null})   })  }) } returnresult}通过应用这些进阶技巧和最佳实践，可以进一步提升小程序的性能和开发效率，同时优化代码质量，为用户提供更好的使用体验。

网络编程概述管道（父子进程）、消息队列（内核经营消息队列）、共享内存（创建一个空间）、信号（通过pid号通信）、信号量（对临界资源，共享内存做P、V控制）。特点：依赖于Linux内核AB两个通信基于内核。缺陷：无法多机通信（不适用与两台不同的电脑）TCP和UDP对比：TCP面向连接（如打电话要先拨号建立连接）;UDP是无连接的，即发送数据之前不需要建立连接TCP提供可靠的服务。也就是说，通过TCP连接传送的数据，无差错，不丢失，不重复，且按序到达;UDP尽最大努力交付，即不保证可靠交付TCP面向字节流，实际上是TCP把数据看成一连串无结构的字节流;UDP是面向报文的UDP没有拥塞控制，因此网络出现拥塞不会使源主机的发送速率降低（对实时应用很有用，如IP电话，实时视频会议等）每一条TCP连接只能是点到点的;UDP支持一对一，一对多，多对一和多对多的交互通信TCP首部开销20字节;UDP的首部开销小，只有8个字节TCP的逻辑通信信道是全双工的可靠信道，UDP则是不可靠信道传统的进程间通信借助内核提供的IPC机制进行，但是只能限于本机通信。若要跨机通信，就必须使用网络通信，这就需要用到内核提供给用户的socketAPI函数库。2.1网络字节序大端字节序：也叫高端字节序(网络字节序)，是高端地址存放低位数据，低端地址存放高位数据小端字节序：也叫低端字节序，是低地址存放低位数据，高地址存放高位数据。在application.yml文件中，填入SaToken的配置信息，如下：sa-token: #HTTP请求头中哪个属性用来上传令牌 token-name:token #过期时间（秒），设置为30天 timeout:2592000 #临时有效期，设置为3天 activity-timeout:259200 #不允许相同账号同时在线，新登陆的账号会挤掉原来登陆的账号 allow-concurrent-login:false #在多人登陆相同账号的时候，是否使用相同的Token is-share:false token-style:uuid #是否读取Cookie中的令牌 isReadCookie:false #同端互斥 isConcurrent:false #SaToken缓存令牌用其他的逻辑库，避免业务数据和令牌数据共用相同的Redis逻辑库 alone-redis:  database:1  host:localhost  port:6379  password:abc123456  timeout:10s  lettuce:   pool:    #连接池最大连接数    max-active:200    #连接池最大阻塞等待时间（使用负值表示没有限制）    max-wait:10s    #连接池中的最大空闲连接    max-idle:16    #连接池中的最小空闲连接    min-idle:8Java语言允许我们自己封装异常类，我们可以自定义各种异常类，比如每种业务一个异常类，或者每个模块一个异常类。我这里不想做的那么复杂，不如我们创建一个通用的异常类，用来封装与业务有关的异常信息。在com.example.his.api.exception包中，创建HisException.java类。packagecom.example.his.api.exception;importlombok.Data;@DatapublicclassHisExceptionextendsRuntimeException{  privateStringmsg;  privateintcode=500;  publicHisException(Exceptione){    super(e);    this.msg="执行异常";  }  publicHisException(Stringmsg){    super(msg);    this.msg=msg;  }  publicHisException(Stringmsg,Throwablee){    super(msg,e);    this.msg=msg;  }  publicHisException(Stringmsg,intcode){    super(msg);    this.msg=msg;    this.code=code;  }  publicHisException(Stringmsg,intcode,Throwablee){    super(msg,e);    this.msg=msg;    this.code=code;  }}SpringBoot提供了全局处理异常的技术，只要我们给某个Java类用上@RestControllerAdvice注解，这个类就能捕获SpringBoot项目中所有的异常，然后统一处理（精简异常信息）再返回给前端项目。在com.example.his.api.config包中，创建ExceptionAdvice.java类。packagecom.example.his.api.config;importcn.dev33.satoken.exception.NotLoginException;importcn.felord.payment.PayException;importcn.hutool.json.JSONObject;importcom.example.his.api.exception.HisException;importlombok.extern.slf4j.Slf4j;importorg.springframework.validation.BindException;importorg.springframework.http.HttpStatus;importorg.springframework.http.converter.HttpMessageNotReadableException;importorg.springframework.web.HttpRequestMethodNotSupportedException;importorg.springframework.web.bind.MethodArgumentNotValidException;importorg.springframework.web.bind.annotation.ExceptionHandler;importorg.springframework.web.bind.annotation.ResponseBody;importorg.springframework.web.bind.annotation.ResponseStatus;importorg.springframework.web.bind.annotation.RestControllerAdvice;importorg.springframework.web.multipart.support.MissingServletRequestPartException;@Slf4j@RestControllerAdvicepublicclassExceptionAdvice{  /*   *捕获异常，并且返回500状态码   */  @ResponseBody  @ResponseStatus(HttpStatus.INTERNAL_SERVER_ERROR)  @ExceptionHandler(Exception.class)  publicStringexceptionHandler(Exceptione){    JSONObjectjson=newJSONObject();    if(einstanceofHttpMessageNotReadableException){      HttpMessageNotReadableExceptionexception=(HttpMessageNotReadableException)e;      log.error("error",exception);      json.set("error","请求未提交数据或者数据有误");    }     elseif(einstanceofMissingServletRequestPartException){      MissingServletRequestPartExceptionexception=(MissingServletRequestPartException)e;      log.error("error",exception);      json.set("error","请求提交数据错误");    }     elseif(einstanceofHttpRequestMethodNotSupportedException){      HttpRequestMethodNotSupportedExceptionexception=(HttpRequestMethodNotSupportedException)e;      log.error("error",exception);      json.set("error","HTTP请求方法类型错误");    }     //Web方法参数数据类型转换异常，比如String[]数组类型的参数，你上传的数据却是String类型    elseif(einstanceofBindException){      BindExceptionexception=(BindException)e;      StringdefaultMessage=exception.getFieldError().getDefaultMessage();      log.error(defaultMessage,exception);      json.set("error",defaultMessage);    }    //没有通过后端验证产生的异常    elseif(einstanceofMethodArgumentNotValidException){      MethodArgumentNotValidExceptionexception=(MethodArgumentNotValidException)e;      json.set("error",exception.getBindingResult().getFieldError().getDefaultMessage());    }    //处理业务异常    elseif(einstanceofHisException){      log.error("执行异常",e);      HisExceptionexception=(HisException)e;      json.set("error",exception.getMsg());    }     //微信支付异常    elseif(einstanceofPayException){      PayExceptionexception=(PayException)e;      log.error("微信支付异常",exception);      json.set("error","微信支付异常");    }    //处理其余的异常    else{      log.error("执行异常",e);      json.set("error","执行异常");    }    returnjson.toString();  }  /*   *捕获异常，并且返回401状态码   */  @ResponseBody  @ResponseStatus(HttpStatus.UNAUTHORIZED)  @ExceptionHandler(NotLoginException.class)  publicStringunLoginHandler(Exceptione){    JSONObjectjson=newJSONObject();    json.set("error",e.getMessage());    returnjson.toString();  }}因为Controller类用上@RestController注解之后，Web方法返回的对象会被自动转换成JSON对象，所以我们只需要声明一个封装类，让所有Web方法返回这个封装类的对象即可。除了公共属性之外，不同的Web方法要返回的业务数据也不尽相同，所以选择动态的结构才是最佳的方案，恰好HashMap允许我们随便添加数据，那就选择HashMap作为父类吧。在com.example.his.api.common包中，创建R.java类。packagecom.example.his.api.common;importorg.apache.http.HttpStatus;importjava.util.HashMap;importjava.util.Map;publicclassRextendsHashMap<String,Object>{  publicR(){    //默认创建的R对象中包含了公共的属性    put("code",HttpStatus.SC_OK);    put("msg","success");  }  /*   *覆盖继承的put函数，添加Key-Value数据   */  publicRput(Stringkey,Objectvalue){    super.put(key,value);    //把自己返回，用于链式调用    returnthis;  }  publicstaticRok(){    returnnewR();  }  publicstaticRok(Stringmsg){    Rr=newR();    r.put("msg",msg);    returnr;  }  publicstaticRok(Map<String,Object>map){    Rr=newR();    r.putAll(map);    returnr;  }  publicstaticRerror(intcode,Stringmsg){    Rr=newR();    r.put("code",code);    r.put("msg",msg);    returnr;  }  publicstaticRerror(Stringmsg){    returnerror(HttpStatus.SC_INTERNAL_SERVER_ERROR,msg);  }  publicstaticRerror(){    returnerror(HttpStatus.SC_INTERNAL_SERVER_ERROR,"未知异常，请联系管理员");  }}

[已完结15章]React18+TS通用后台管理系统解决方案落地实战TS，全称TypeScript，是JavaScript的一个超集，主要提供了类型系统和对ES6+的支持，它由微软开发，代码开源于GitHub上。TS特点1.始于JS，终于JS，最后编译成JS；2.强大的类型系统；3.先进的JavaScript，提供最新的JS特性；随着前端框架的发展，Vue3.0正式更新后也将开始推荐优先使用TypeScript，作为JavaScript的超集，微软的TypScript为JavaScript提供了太多新的开发的内容，虽然本质上最终还是JavaScript，但整体的开发模式将发生很大的变化。TypeScript兼容JavaScript，可以载入JavaScript代码然后运行。TypeScript与JavaScript相比，进步的地方包括：加入注释，让编译器理解所支持的对象和函数，编译器会移除注释，不会增加开销；增加一个完整的类结构，使之成为一个全新的面向对象语言。示例代码：classGreeter{  constructor(publicgreeting:string){}  greet(){    return""+this.greeting+"";  }};vargreeter=newGreeter("Hello,world!");varstr=greeter.greet();document.body.innerHTML=str;[已完结15章]React18+TS通用后台管理系统解决方案落地实战，后台权限管理系统并不是越复杂越好，只有贴合客户实际需求并具备最大弹性的权限系统，并有效控制开发成本的设计就是合理的设计。

React18+TS通用后台管理系统解决方案落地实战2023，已完结15章，附源码+笔记下载！React18提供了许多开箱即用的功能。这些不仅增强了用户体验，而且使开发人员的生活更轻松。其中，有三个主要功能值得大家关注与学习了解。1、自动批处理以减少渲染什么是批处理？批处理是React将多个状态更新分组到单个重新渲染中以获得更好的性能。2、Suspense的SSR支持这基本上是服务器端渲染(SSR)逻辑的扩展。在典型的ReactSSR应用程序中，会发生以下步骤：服务器获取需要在UI上显示的相关数据服务器将整个应用程序呈现为HTML并将其发送给客户端作为响应客户端下载JavaScript包（除了HTML）在最后一步，客户端将javascript逻辑连接到HTML（称为hydration）3、startTransition什么是过渡？我们将状态更新分为两类：紧急更新反映直接交互，如打字、悬停、拖动等。过渡更新将UI从一个视图过渡到另一个视图。由于不同的后台管理系统需求多样化，此处所分享的是通用型，对于大多数的后台管理系统逻辑都已足够使用，主要应用于WEB应用程序，如：网站管理后台、CMS、CRM、OA等等。一背景基于vue+springboot搭建一套通用管理后台主要包括用户管理模块、权限模块、菜单模块二环境信息2.1前端工具版本2.1.1npm版本PSD:\front>npm-v8.5.0PSD:\front>npmconfigget'registry'https://registry.npm.taobao.org/PSD:\front>2.1.2vue版本PSD:\front>npm-v8.5.0三前端搭建3.1初始搭建3.1.1新建vue项目使用vuecli在你想要创建的目录创建项目PSD:\front>vuecreatecommonadmin-frontVueCLIv5.0.8?Pleasepickapreset:Default([Vue2]babel,eslint)

分享课程——《Vue3+ElementPlus+Koa2全栈开发后台系统》，2022升级版15章全，提供配套的源码下载！现如今前端的边界在持续扩大，企业对于工具化、平台化、全栈化能力要求也越来越高。本课程将应用Vite2.0+Vue3+ElementPlus+Koa2+Mongo开发一个通用后台管理系统，带大家掌握全栈开发能力，及真正落地的综合技术能力。课程大纲：第1章项目规划第2章前端架构设计第3章Koa架构设计第4章用户登录前后台实现第5章前台首页实现第6章JWT方案讲解第7章用户管理前后端实现第8章菜单模块前后端实现第9章⻆色管理前后端实现第10章部门管理前后端实现第11章动态路由、导航守卫、按钮权限&工作流介绍第12章休假申请前后端实现第13章待我审批前后端实现第14章造轮子第15章课程总结4个基础组件Home：布局组件BreadCrumb：面包屑组件Exception：异常组件TreeMenu：菜单树组件8个视图组件UserManage：用户管理页面组件RoleManage：角色管理页面组件MenuManage：菜单管理页面组件DeptManage：部门管理页面组件Welcome：欢迎页面组件Login：登录页面组件Approve：审核页面组件Leave：申请页面组件6个JS模块request：请求封装模块api：接口管理模块storage：本地存储模块util：工具库模块config:环境配置模块router：路由封装模块Node后台log4js：日志封装模块util：工具函数模块config：数据库配置模块models：数据库模型封装

这些都是各大名校的电路分析专业课之最大法宝，把这些题目悉心研究几遍，定会考出高分。无论对于即将考研的你，还是即将走向电子工程师岗位的你，都会获益匪浅。希望大家利用好这些历年真题，对于你今后的电子电路设计有所帮助。

电子产品日新月异，不管是硬件工程师还是软件工程师，基本的模电、数电知识也是必备的条件，从二极管到三极管，从单片机到多核MCU，3G网络到5G产品的普及，不管电子产品的集成度怎么高，其产品还是少不了电阻电容电感，每个元器件在电路中必然有其作用，有兴趣了解的网友，下载学习学习吧。

MATLAB培训资料_第15章常微分方程的初值问题

典型题解——第15章 电路方程的矩阵形式

要点、考点与例题——第15章电路方程的矩阵形式

同步习题与详解——第15章 电路方程的矩阵形式

同步习题与详解——第15章 电路方程的矩阵形式

同步习题与详解——第15章 电路方程的矩阵形式.pdf

第15章电路方程的矩阵形式.pdf

要点、考点与例题——第15章电路方程的矩阵形式.pdf

第15章电路方程的矩阵形式.pdf

第15章预测方法.ppt