×
13518219792

建站动态

根据您的个性需求进行定制 先人一步 抢占小程序红利时代

微服务框架相关技术整理

微服务整体框架

API Gateway

API Gateway两种方式:

API Gateway的作用

API Gateway的架构

Eureka(服务发现框架)

Eureka的两个组件

RPC框架

RPC定义

客户端在不知道调用细节的情况下，调用存在于远程计算机上的某个对象，就像调用本地应用程序中的对象一样

RPC主要组成部分

不同的RPC框架实现都有一定设计差异。例如生成Stub的方式不一样，IDL描述语言不一样、服务注册的管理方式不一样、运行服务实现的方式不一样、采用的消息格式封装不一样、采用的网络协议不一样。但是基本的思路都是一样的，上图中的所列出的要素也都是具有的

影响RPC框架性能的因素

序列化框架一般会关注以下几点:

  1. Encoding format:是human readable(是否能直观看懂 json)还是binary(二进制)
  2. Schema declaration:也叫作契约声明,基于IDL,比如 Protocol Buffers/Thrift.还是自描述的,比如 JSON、XML.另外还需要看是否是强类型的
  3. 语言平台的中立性:比如Java的Native Serialization就只能自己玩,而Protocol Buffers可以跨各种语言和平台
  4. 新老契约的兼容性:比如IDL加了一个字段,老数据是否还可以反序列化成。
  5. 和压缩算法的契合度 :运行benchmark(基准)和实际应用都会结合各种压缩算法,例如gzip,snappy
  6. 性能 :这是最重要的,序列化,反序列化的时间,序列化后数据的字节大小是考察重点。
  7. 序列化方式非常多,常见的有Protocol Buffers,Avro,Thrift,XML,JSON,MessagePack,Kyro,Hessian,Protostuff,Java Native Serialize,FST

工业界的 RPC 框架

如何选择RPC框架

选择一个rpc框架会基于多方面的考虑: 框架特性、性能、成熟度、技术支持、社区活跃度等 多个方面.最重要一点,这也是往往很多技术人员进入的误区, "对于技术，不要为了使用而使用, 用最简单合适的技术实现解决问题才是正道 " . 架构是服务于业务的,能快速方便的满足业务需求的架构才是好的架构 .没有最好的,只有适合自己的

Dubbo

核心组件

工作原理

Provider:暴露服务方称之为“服务提供者”

Consumer:调用远程服务方称之为“服务消费者”

Registry:服务注册与发现的中心目录服务称之为“服务注册中心”

Monitor:统计服务的调用次数和调用时间的日志服务称之为“服务监控中心”

连通性：

注册中心负责服务地址的注册与查找，相当于目录服务，服务提供者和消费者只在启动时与注册中心交互，注册中心不转发请求，压力较小

监控中心负责统计各服务调用次数，调用时间等，统计先在内存汇总后每分钟一次发送到监控中心服务器，并以报表展示

服务提供者向注册中心注册其提供的服务，并汇报调用时间到监控中心，此时间不包含网络开销

服务消费者向注册中心获取服务提供者地址列表，并根据负载算法直接调用提供者，同时汇报调用时间到监控中心，此时间包含网络开销

注册中心，服务提供者，服务消费者三者之间均为长连接，监控中心除外

注册中心通过长连接感知服务提供者的存在，服务提供者宕机，注册中心将立即推送事件通知消费者

注册中心和监控中心全部宕机，不影响已运行的提供者和消费者，消费者在本地缓存了提供者列表

注册中心和监控中心都是可选的，服务消费者可以直连服务提供者

健壮性：

监控中心宕掉不影响使用，只是丢失部分采样数据

数据库宕掉后，注册中心仍能通过缓存提供服务列表查询，但不能注册新服务

注册中心对等集群，任意一台宕掉后，将自动切换到另一台

注册中心全部宕掉后，服务提供者和服务消费者仍能通过本地缓存通讯

服务提供者无状态，任意一台宕掉后，不影响使用

服务提供者全部宕掉后，服务消费者应用将无法使用，并无限次重连等待服务提供者恢复

伸缩性：

注册中心为对等集群，可动态增加机器部署实例，所有客户端将自动发现新的注册中心

服务提供者无状态，可动态增加机器部署实例，注册中心将推送新的服务提供者信息给消费者

Dubbo特性

使用示例

Zuul

Zuul工作原理

Zuul的作用

Zuul可以通过加载动态过滤机制实现Zuul的功能:

Zuul与应用的集成方式

React前端框架

React定义

React核心

虚拟DOM是React的基石,React的核心是 组件 ,React的精髓是 函数式编程 ,在React中是 单向响应的数据流

组件的设计目的是提高代码复用率,降低测试难度和代码复杂度:

  1. 提高代码复用率：组件将数据和逻辑封装，类似面向对象中的类
  2. 降低测试难度：组件高内聚低耦合，很容易对单个组件进行测试
  3. 降低代码复杂度：直观的语法可以极大提高可读性

React特点

1.虚拟(virtual)DOM, 不总是直接操作DOM，减少页面更新次数；
2.高效的DOM Diff算法, 最小化页面重绘；

React的虚拟DOM

虚拟DOM
DOM操作非常昂贵.我们都知道在前端开发中,性能消耗最大的就是DOM操作,而且这部分代码会让整体项目的代码变得难以维护.React把真实DOM树转换成JavaScript对象树,也就是Virtual DOM

可以类比CPU和硬盘,既然硬盘这么慢,我们就在它们之间加个缓存:既然 DOM 这么慢,
我们就在它们JS和DOM之间加个缓存.CPU(JS)只操作内存(Virtual DOM,最后的时候再
把变更写入硬盘（DOM）

 
 
 
 
      
  
  
  
  1. //创建的就是一个简单的虚拟DOM对象 
    2.   
  
  
  
  2. var element = React.createElement('h1', {id:'myTitle'}, 'hello'); 
    3.  
 
 

 
 
 
 
      
  
  
  
  1. //  jsx方式创建虚拟dom元素对象 
    2.   
  
  
  
  2. const vDOM2 = {msg.toLowerCase()} 
    3.

还有一种是纯JS,一般不使用:

 
 
 
 
      
  
  
  
  1. //  纯JS方式 
    2.   
  
  
  
  2. const msg = 'I like you'; 
    3.   
  
  
  
  3. const myId = 'atguigu'; 
    4.   
  
  
  
  4. const vDOM1 = React.createElement('h2',{id:myId},msg); 
    5.  
 
 

 
 
 
 
      
  
  
  
  1. //  渲染到真实的页面中 
    2.   
  
  
  
  2.  ReactDOM.render(vDOM1,document.getElementById('example1')); 
    3.   
  
  
  
  3.  ReactDOM.render(vDOM2,document.getElementById('example2')); 
    4.

使用示例:

 
 
 
 
      
  
  
  
  1.  
    2.   
  
  
  
  2.  
    3.   
  
  
  
  3.  
    4.   
  
  
  
  4.  
    5.   
  
  
  
  5. 02_JSX_DEMO 
    6.   
  
  
  
  6.  
    7.   
  
  
  
  7.  
    8.   
  
  
  
    8.    
  
  
  
    • A
      •    
  
  
  
    • B
      •    
  
  
  
    • C
      •    
  
  
  
     
    9.   
  
  
  
  9.  
    10.   
  
  
  
  10.  
    11.
 
    •  
  •  
  •  
  •  
  •  
  •  
  •  
  • /* 
  •  功能: 动态展示列表数据 
  •  */ 
  • /* 
  •  技术点: 
  •  1). 使用JSX创建虚拟DOM 
  •  2). React能自动遍历显示数组中所有的元素 
  •  3). array.map()的使用 
  •  */ 
  • //数据的数组 
  • var names = ['Tom2', 'Jack2', 'Bob2']; 
  • //数据的数组——>标签数组 
  • var lis = []; 
  • names.forEach((item,index)=>lis.push({item}
    • )); 
  • //创建虚拟的DOM 
  • const ul=; 
  • //  将虚拟的Dom渲染到页面中的某个DOM元素中 
  • ReactDOM.render(ul,document.getElementById('example1')) 
  • const ul2 =  
  • ReactDOM.render(ul2, document.getElementById('example2')) 
  •  
  •  
  •  
  •  

    • React的组件

     
 
 
 
        
  
  
  
    1. 1.工厂(无状态)函数(简单组件，推荐使用) 
      2.   
  
  
  
    2.     
      3.   
  
  
  
    3.     //  方式一：工厂函数，推荐使用 
      4.   
  
  
  
    4.   function MyComponent() { 
      5.   
  
  
  
    5.   return 
      工厂函数
       
      6.   
  
  
  
    6.   } 
      7.   
  
  
  
    7.  
      8.   
  
  
  
    8. 2.ES6类语法 
      9.   
  
  
  
    9. //  方式二:ES6类语法（复杂组件，推荐使用） 
      10.   
  
  
  
    10. class MyComponent2 extends React.Component{ 
      11.   
  
  
  
    11.      render(){ 
      12.   
  
  
  
    12.          return 
      ES6的语法
       
      13.   
  
  
  
    13.      } 
      14.   
  
  
  
    14.  } 
      15.

    2. 渲染组件标签

     
 
 
 
        
  
  
  
    1. //语法规则 
      2.   
  
  
  
    2. ReactDOM.render(, document.getElementById('example')); 
      3.  
 
 

     
 
 
 
        
  
  
  
    1. 1.React内部会创建组件实例对象； 
      2.   
  
  
  
    2. 2.得到包含的虚拟DOM并解析为真实DOM； 
      3.   
  
  
  
    3. 3.插入到指定的页面元素内部； 
      4.

    组件的三大属性

    props属性

    1.每个组件对象都会有props(properties的简写)属性

    2.组件标签的所有属性都保存在props中

    3.内部读取某个属性值:this.props.propertyName

    4. 作用: 通过标签属性从组件外向组件内传递数据(只读)

    5.对props中的属性值进行类型限制和必要性限制:

     
 
 
 
        
  
  
  
    1. //  对标签属性进行限制 
      2.   
  
  
  
    2. Person.propTypes = { 
      3.   
  
  
  
    3.     name:React.PropTypes.string.isRequired, 
      4.   
  
  
  
    4.     sex:React.PropTypes.string, 
      5.   
  
  
  
    5.     age:React.PropTypes.number 
      6.   
  
  
  
    6. } 
      7.

    6. 扩展属性: 将对象的所有属性通过props传递

     
 
 
 
        
  
  
  
    1.  
      2.   
  
  
  
    2.  //具体如下： 
      3.   
  
  
  
    3.  ReactDOM.render(,document.getElementById('example')) 
      4.

    7.默认属性值

     
 
 
 
        
  
  
  
    1. //  指定属性的默认值 
      2.   
  
  
  
    2. Person.defaultProps = { 
      3.   
  
  
  
    3.      sex:'男', 
      4.   
  
  
  
    4.      age:18 
      5.   
  
  
  
    5.  } 
      6.

    8.组件类的构造函数

     
 
 
 
        
  
  
  
    1. constructor (props) { 
      2.   
  
  
  
    2.   super(props) 
      3.   
  
  
  
    3.   console.log(props) // 查看所有属性 
      4.   
  
  
  
    4. } 
      5.

    refs属性

    1.组件内的标签都可以定义ref属性来标识本身

    2.在组件中可以通过this.refs.refName来得到对应的真实DOM对象

    3. 作用: 用于操作指定的ref属性的dom元素对象(表单标签居多)

     
 
 
 
        
  
  
  
    1.  
      2.   
  
  
  
    2.       handleFocus(event) { 
      3.   
  
  
  
    3.  event.target  //返回input对象 
      4.   
  
  
  
    4.       } 
      5.  
 
 

     
 
 
 
        
  
  
  
    1. this.change = this.change.bind(this); 
      2.

    箭头函数(ES6模块化编码时才能使用)

    state属性

     
 
 
 
        
  
  
  
    1. constructor (props) { 
      2.   
  
  
  
    2.    super(props) 
      3.   
  
  
  
    3.    this.state = { 
      4.   
  
  
  
    4.      stateProp1 : value1, 
      5.   
  
  
  
    5.      stateProp2 : value2 
      6.   
  
  
  
    6.    } 
      7.   
  
  
  
    7. } 
      8.  
 
 

     
 
 
 
        
  
  
  
    1. this.state.statePropertyName 
      2.  
 
 

     
 
 
 
        
  
  
  
    1. this.setState({ 
      2.   
  
  
  
    2. stateProp1 : value1, 
      3.   
  
  
  
    3. stateProp2 : value2 
      4.   
  
  
  
    4. }) 
      5.

    组件的生命周期

    React的函数式编程

     
 
 
 
        
  
  
  
    1. var arr = [1, 3, 5, 7] 
      2.   
  
  
  
    2. // 需求: 得到一个新的数组, 数组中每个元素都比arr中对应的元素大10: [11, 13, 15, 17] 
      3.   
  
  
  
    3. // 命令式编程 
      4.   
  
  
  
    4. var arr2 = [] 
      5.   
  
  
  
    5. for(var i =0;i  
  
  
  
    6.     arr2.push(arr[i]+10) 
      7.   
  
  
  
    7. } 
      8.   
  
  
  
    8. console.log(arr2) 
      9.   
  
  
  
    9. // 声明式编程 
      10.   
  
  
  
    10. var arr3 = arr.map(function(item){ 
      11.   
  
  
  
    11.     return item +10 
      12.   
  
  
  
    12. }) 
      13.   
  
  
  
    13. // 声明式编程是建立命令式编程的基础上 
      14.

    React的JSX

     
 
 
 
        
  
  
  
    1. var liArr = dataArr.map(function(item, index){ 
      2.   
  
  
  
    2.               return {item}
      3.    
  
  
  
    3.           }) 
      4.

    React的其它操作

    双向绑定

     
 
 
 
        
  
  
  
    1.  
      2.   
  
  
  
    2.  class Control extends React.Component{ 
      3.   
  
  
  
    3.      constructor(props){ 
      4.   
  
  
  
    4.          super(props) 
      5.   
  
  
  
    5.          //初始化状态 
      6.   
  
  
  
    6.          this.state = { 
      7.   
  
  
  
    7.              msg:'ATGUIGU' 
      8.   
  
  
  
    8.          } 
      9.   
  
  
  
    9.          this.handleChange = this.handleChange.bind(this) 
      10.   
  
  
  
    10.  
      11.   
  
  
  
    11.      } 
      12.   
  
  
  
    12.  
      13.   
  
  
  
    13.      handleChange(event){ 
      14.   
  
  
  
    14.          //得到最新的state的值 
      15.   
  
  
  
    15.          const msg=event.target.value; 
      16.   
  
  
  
    16. //          console.log(event.target) 
      17.   
  
  
  
    17. //          console.log(event.target.value) 
      18.   
  
  
  
    18.          //更新状态 
      19.   
  
  
  
    19.          this.setState({msg}) 
      20.   
  
  
  
    20.      } 
      21.   
  
  
  
    21.      render(){ 
      22.   
  
  
  
    22.          const {msg} = this.state 
      23.   
  
  
  
    23.          return( 
      24.   
  
  
  
    24.              
       
      25.   
  
  
  
    25.                 
      26.   
  
  
  
    26.                
      {msg}
       
      27.   
  
  
  
    27.               
      28.   
  
  
  
    28.          ) 
      29.   
  
  
  
    29.      } 
      30.   
  
  
  
    30.  } 
      31.   
  
  
  
    31.  ReactDOM.render(,document.getElementById('example')) 
      32.   
  
  
  
    32.  
      33.

    React发送ajax请求

     
 
 
 
        
  
  
  
    1. //做一个跳转页面 
      2.   
  
  
  
    2.  
      3.   
  
  
  
    3.  
      4.   
  
  
  
    4.  
      5.   
  
  
  
    5.  
      6.   
  
  
  
    6.  
      7.   
  
  
  
    7. class UserLastGist extends React.Component { 
      8.   
  
  
  
    8.     constructor (props) { 
      9.   
  
  
  
    9.         super(props) 
      10.   
  
  
  
    10.         this.state = { 
      11.   
  
  
  
    11.             url: null 
      12.   
  
  
  
    12.         } 
      13.   
  
  
  
    13.     } 
      14.   
  
  
  
    14.     componentDidMount () { 
      15.   
  
  
  
    15.         // 发送ajax请求 
      16.   
  
  
  
    16.         const url = `https://api.github.com/users/${this.props.username}/gists` 
      17.   
  
  
  
    17.         axios.get(url) 
      18.   
  
  
  
    18.             .then(response => { 
      19.   
  
  
  
    19.                 console.log(response) 
      20.   
  
  
  
    20.                 // 读取响应数据 
      21.   
  
  
  
    21.                 //0索引位代表最后更新的网页内容 
      22.   
  
  
  
    22.                 const url = response.data[0].html_url 
      23.   
  
  
  
    23.                 // 更新状态 
      24.   
  
  
  
    24.                 this.setState({url}) 
      25.   
  
  
  
    25.             }) 
      26.   
  
  
  
    26.             .catch(function (error) { 
      27.   
  
  
  
    27.  
      28.   
  
  
  
    28.                 console.log('----', error); 
      29.   
  
  
  
    29.             }) 
      30.   
  
  
  
    30.     } 
      31.   
  
  
  
    31.     render () { 
      32.   
  
  
  
    32.         const {url} = this.state 
      33.   
  
  
  
    33.         if(!url) { 
      34.   
  
  
  
    34.             return 
      loading...
       
      35.   
  
  
  
    35.         } else { 
      36.   
  
  
  
    36.             return 
      {this.props.username}'s last gist is here 
       
      37.   
  
  
  
    37.         } 
      38.   
  
  
  
    38.     } 
      39.   
  
  
  
    39. } 
      40.   
  
  
  
    40. UserLastGist.propTypes = { 
      41.   
  
  
  
    41.     username: React.PropTypes.string.isRequired 
      42.   
  
  
  
    42. } 
      43.   
  
  
  
    43. ReactDOM.render(, document.getElementById('example')) 
      44.   
  
  
  
    44.  
      45.

    RESTful

    RESTful的关键

    RESTful与 RPC

    RESTful Web 服务的Java框架

    RESTful API

    URL定位资源,用HTTP动词（GET,POST,PUT,DELETE)描述操作

    RESTful API设计原则