其他分享
首页 > 其他分享> > 微服务项目框架技术整理

微服务项目框架技术整理

作者：互联网


微服务框架相关技术


微服务整体框架

API Gateway

API Gateway两种方式:
API Gateway的作用
API Gateway的架构

在这里插入图片描述

Eureka(服务发现框架)

Eureka的两个组件

RPC框架

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

RPC主要组成部分

在这里插入图片描述

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

影响RPC框架性能的因素

在这里插入图片描述

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

序列化方式非常多,常见的有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中是单向响应的数据流

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

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

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

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

 //  jsx方式创建虚拟dom元素对象const vDOM2 = <h3 id={myId.toUpperCase()}>{msg.toLowerCase()}</h3>

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

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

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

使用示例:

<html><head><meta charset="UTF-8"><title>02_JSX_DEMOtitle>head><body><ul><li>Ali><li>Bli><li>Cli>ul><hr><div id="example1">div><div id="example2">div><script src="../js/react.js">script><script src="../js/react-dom.js">script><script src="../js/babel.min.js">script><script type="text/babel">/*
 功能: 动态展示列表数据
 *//*
 技术点:
 1). 使用JSX创建虚拟DOM
 2). React能自动遍历显示数组中所有的元素
 3). array.map()的使用
 *///数据的数组var names = ['Tom2', 'Jack2', 'Bob2'];//数据的数组——>标签数组var lis = [];names.forEach((item,index)=>lis.push(<li key={index}>{item}</li>));//创建虚拟的DOMconst ul=<ul>{lis}</ul>;//  将虚拟的Dom渲染到页面中的某个DOM元素中ReactDOM.render(ul,document.getElementById('example1'))const ul2 = <ul>{names.map((name,index)=><li key={index}>{name}</li>)}</ul>ReactDOM.render(ul2, document.getElementById('example2'))script>body>html>

React的组件
1.工厂(无状态)函数(简单组件，推荐使用)
   
    //  方式一：工厂函数，推荐使用
  function MyComponent() {
  return工厂函数}

2.ES6类语法
//  方式二:ES6类语法（复杂组件，推荐使用）
class MyComponent2 extends React.Component{
     render(){
         returnES6的语法}
 }

2. 渲染组件标签

//语法规则
ReactDOM.render(<MyComponent/>, document.getElementById('example'));

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

组件的三大属性
props属性

1.每个组件对象都会有props(properties的简写)属性
2.组件标签的所有属性都保存在props中
3.内部读取某个属性值:this.props.propertyName
4.作用: 通过标签属性从组件外向组件内传递数据(只读)
5.对props中的属性值进行类型限制和必要性限制:

 //  对标签属性进行限制
Person.propTypes = {
    name:React.PropTypes.string.isRequired,
    sex:React.PropTypes.string,
    age:React.PropTypes.number
}

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

 <Person {...person}/>
 //具体如下：
 ReactDOM.render(<Person {...person}/>,document.getElementById('example'))

7.默认属性值

//  指定属性的默认值
Person.defaultProps = {
     sex:'男',
     age:18
 }

8.组件类的构造函数

constructor (props) {
  super(props)
  console.log(props) // 查看所有属性
}

refs属性

1.组件内的标签都可以定义ref属性来标识本身
2.在组件中可以通过this.refs.refName来得到对应的真实DOM对象
3.作用: 用于操作指定的ref属性的dom元素对象(表单标签居多)

state属性
constructor (props) {
   super(props)
   this.state = {
     stateProp1 : value1,
     stateProp2 : value2
   }
}

this.state.statePropertyName

this.setState({
stateProp1 : value1,
stateProp2 : value2
})

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

React的JSX
var ele = <h1>Hello JSX!h1>;

React的其它操作
双向绑定
<script type="text/babel">
 class Control extends React.Component{
     constructor(props){
         super(props)
         //初始化状态
         this.state = {
             msg:'ATGUIGU'
         }
         this.handleChange = this.handleChange.bind(this)

     }

     handleChange(event){
         //得到最新的state的值
         const msg=event.target.value;//          console.log(event.target)//          console.log(event.target.value)
         //更新状态
         this.setState({msg})
     }
     render(){
         const {msg} = this.state         return(
             <div>
               <input type="text" value={msg} onChange={this.handleChange}/>
               <p>{msg}</p>
             </div>
         )
     }
 }
 ReactDOM.render(<Control/>,document.getElementById('example'))script>

React发送ajax请求
//做一个跳转页面<script src="../js/react.js">script><script src="../js/react-dom.js">script><script src="../js/babel.min.js">script><script src="https://cdn.bootcss.com/axios/0.16.2/axios.js">script><script type="text/babel">class UserLastGist extends React.Component {
    constructor (props) {
        super(props)
        this.state = {
            url: null
        }
    }
    componentDidMount () {
        // 发送ajax请求
        const url = `https://api.github.com/users/${this.props.username}/gists`
        axios.get(url)
            .then(response => {
                console.log(response)
                // 读取响应数据
                //0索引位代表最后更新的网页内容
                const url = response.data[0].html_url                // 更新状态
                this.setState({url})
            })
            .catch(function (error) {

                console.log('----', error);
            })
    }
    render () {
        const {url} = this.state        if(!url) {
            return <h2>loading...</h2>
        } else {
            return <p>{this.props.username}'s last gist is <a href={url}>here</a> </p>
        }
    }}UserLastGist.propTypes = {
    username: React.PropTypes.string.isRequired}ReactDOM.render(<UserLastGist username="octocat"/>, document.getElementById('example'))script>

RESTful

RESTful的关键
RESTful与 RPC
RESTful Web 服务的Java框架

RESTful API

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

RESTful API设计原则
有状态和无状态的区别:
例如要查询员工工资的步骤
第一步：登录系统。
第二步：进入查询工资的页面。
第三步：搜索该员工。
第四步：点击姓名查看工资。
这样的操作流程就是有状态的，查询工资的每一个步骤都依赖于前一个步骤，只要前置操作不成功，
后续操作就无法执行。如果输入一个URL就可以得到指定员工的工资，则这种情况就是无状态的，
因为获取工资不依赖于其他资源或状态，且这种情况下，员工工资是一个资源，由一个URL与之
对应可以通过HTTP中的GET方法得到资源，这就是典型的RESTful风格。

RESTful API设计规范
URI=scheme"://"authority"/"path["?"query]["#"fragment]

- scheme:指底层用的协议:http,https,ftp
- host:服务器的IP地址或者域名
- port:端口,http中默认80
- path:访问资源的路径,就是各种web 框架中定义的route路由
- query:为发送给服务器的参数
- fragment:锚点,定位到页面的资源,锚点为资源id

RESTful API对资源的操作
例如指定前10行数据:
http://api.user.com/schools/grades/classes/boys?page=1&page-size=10

200 OK 服务器返回用户请求的数据，该操作是幂等的
201 CREATED 新建或者修改数据成功
204 NOT CONTENT 删除数据成功
400 BAD REQUEST 用户发出的请求有问题，该操作是幂等的
401 Unauthoried 表示用户没有认证，无法进行操作
403 Forbidden 用户访问是被禁止的
422 Unprocesable Entity 当创建一个对象时，发生一个验证错误
500 INTERNAL SERVER ERROR 服务器内部错误，用户将无法判断发出的请求是否成功
503 Service Unavailable 服务不可用状态，多半是因为服务器问题，例如CPU占用率大，等等







萌新小号主在线求关注同名公众号！分享技术干货，面试题和攻城狮故事。
您的关注支持是我持续进步的最大动力！一起学习，共同进步。
在这里插入图片描述

标签：服务,框架,DOM,服务项目,React,组件,RPC,整理,客户端
来源： https://blog.51cto.com/u_15185289/2783900