【ReactJs+springBoot项目——租房】第1章:前端系统搭建+微服务架构+Apache Dubbo

项目介绍
后台系统的前端系统搭建
以及讲解后台系统的微服务架构讲解
Apache Dubbo 快速入门

1、好客租房

1.1、项目背景
近几年,我国经济的跨越性发展速度大家有目共睹,农村都在向城市化发展,农民都踊跃走出家乡投身城市的建设 中,因此也推动城市房地产和租赁行业的新发展时机。房屋租赁行业的发展离不开房屋租赁政策的支持。
财政部、国家发改委曾发布通知称,自2015年11月1日起,在全国统一取消和暂停征收包括房屋租赁手续费等在内的37项行政事业性收费,以及自2016年1月1日起,取消人力资源社会保障等部门所属公共就业和人才服务机构收 取的人才集体户口管理服务费。取消和暂停征收上述收费后,有关部门及所属事业单位依法履行管理职能资金投入 量,安排合理中央在房屋租赁方面的财政预算,保证工作顺利完成,各级政府相关价格管理部门要加强对房地产市 场的价格监控,消除不合理乱收费现象,坚决取缔多于的政府公共事业单位,升级改革行政人员体系使其精英化, 严厉杜绝各种乱收费现象。
北上广地区的城市外来人口众多,租房问题急需解决,租房供不应求,根据数据分析,国内的一线都市每年对房屋 的需求高达650套,我国在进行第六次人口普及调查中,在北上广和珠三角发达区域,外来人口户数占据成熟人口 接近一半的比重。2015年北京和上海平均家庭规模约为2.42人。基于房产网站搜索的出租房源数据,北京出租房 平均合租户数为2.04。如果按照一线城市标准,我国房屋租赁市场有着极大的发展前景。
1.2、项目介绍
好客租房是直接促成房东与租户对接的生活服务平台,它包含房东发布房源,租户多维度寻找房源,智能匹配房 源,近期行情查询等功能。减少中间环节产生的费用,提高房东与租户匹配的成功率。
《好客租房项目》采用SOA架构思想进行设计,采用SpringBoot、SpringMVC、Mybaits、Dubbo等技术框架实 现,好客租房是直接促成房东与租户对接的生活服务平台,他包含房东发布房源,租户多维度寻找房源,智能匹配 房源,近期行情查询等功能。减少中间环节产生的费用,提高房东与租户匹配的成功率。
《好客租房项目》融合了RPC、大数据等相技术,如SpringBoot、SpringMVC、Mybaits、Dubbo、React.js、
GraphQL、RocketMQ、Flume、ELK等技术,实现了移动web应用、微信小程序应用、后台管理应用等功能。
1.3、技术架构
后端架构:SpringBoot+StringMVC+Dubbo+Mybatis+ELK+区块链前端架构:React.js+html5+百度地图+微信小程序
1.4、系统架构
在这里插入图片描述
2、后台系统搭建

后台系统采用的是前后端分离开发模式,前端使用Ant Design Pro系统作为模板进行改造,后端采用的是SpringBoot+StringMVC+Dubbo+Mybatis的架构进行开发。

2.1、前端搭建
根据前面的pro的入门知识,参考《好客租房 PRD 文档 V1.0.0beat.docx》、《好客租房后台V1.0.0.rp》,将系统的菜单、页面等做改造。

在这里插入图片描述

2.1.1、创建工程
第一步,将资料文件中的itcast-haoke-manage-web.zip解压到指定目录(我的是F:\code\itcast-haoke);
在这里插入图片描述
第二步,导入到Idea中
在这里插入图片描述
在这里插入图片描述
第三步,执行命令导入相关的依赖:
在这里插入图片描述
在这里插入图片描述
2.1.2、修改logo以及版权信息
将logo部分修改为:
在这里插入图片描述
全局的布局文件在这:
在这里插入图片描述
打开看代码,发现,左侧的菜单是自定义组件:
在这里插入图片描述
打开/components/SiderMenu文件:
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
2.1.3、编写左侧菜单
根据需求,修改左侧的菜单:

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在src/pages目录下创建haoke文件夹,项目中的页面代码均放在此目录中:
在这里插入图片描述
在这里插入图片描述
修改,进入系统后,默认打开房源管理页面:
在这里插入图片描述
2.2、新增房源
2.2.1、数据结构
参考资料中的《前后端开发接口文档.md》文档:
在这里插入图片描述
在这里插入图片描述
2.2.2、编写页面
根据需求文档以及数据结构,进行编写页面。页面效果如下:
在这里插入图片描述
2.2.2.1、form组件
form组件官方文档:https://ant.design/components/form-cn/

在页面中,通过@Form.create()对页面进行了包装,包装之后,会在this.props中增加form对象,该对象将包含有 丰富的功能,如下:
在这里插入图片描述
在from表单中,需要通过getFieldDecorator(表单数据双向绑定)方法进行包装注册,才能获取到其值。
用法:
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
校验:
在getFieldDecorator的参数中可以增加校验规则:
在这里插入图片描述
其它的校验规则如下:
在这里插入图片描述
表单的提交通过submit按钮完成,通过onSubmit方法进行拦截处理。
在这里插入图片描述
在这里插入图片描述
提交方法:
在这里插入图片描述
在这里插入图片描述
通过form.validateFieldsAndScroll()对表单进行校验,通过values获取表单中输入的值。通过dispatch()调用
model中定义的方法。

2.2.2.3、自动完成
文档:https://ant.design/components/auto-complete-cn/ 楼盘的数据通过自动完成实现:
在这里插入图片描述
在这里插入图片描述
实现代码:
在这里插入图片描述
在这里插入图片描述
2.2.2.4、图片上传
图片上传通过自定义组件PicturesWall完成,在PicturesWall中,通过Upload组件实现。效果:
在这里插入图片描述
在这里插入图片描述
在代码实现中,需要解决的问题是:父组件如何获取子组件中的数据。
解决思路:父组件通过属性的方式进行引用子组件,在bind方法中改变this的引用为父组件,在子组件中,通过
this.props获取传入的函数,进行调用,即可把数据传递到父组件中。

父组件:
在这里插入图片描述
子组件:
在这里插入图片描述
父组件中的方法,获取数据:
在这里插入图片描述

3、后台系统服务
前端系统已经搭建完成,需要后台系统为其提供接口服务。如:新增房源、房源列表、房东列表等。

3.1、架构
在这里插入图片描述
说明:
在后台服务的架构中,采用了RPC+微服务的架构思想,RPC采用dubbo框架作为服务治理框架,对外接口采用
RESTful和GraphQL接口方式。

3.2、dubbo快速入门

3.2.1、什么是dubbo?
Apache Dubbo™ (incubating)是一款高性能Java RPC框架。官网:http://dubbo.apache.org/zh-cn/index.html
在这里插入图片描述
dubbo是由阿里团队开发的一款优秀的RPC框架。 目前dubbo在Apache中孵化,预计很快会毕业。
早期的介绍:
DUBBO是一个分布式服务框架,致力于提供高性能和透明化的RPC远程服务调用方案,是阿里巴巴SOA服务化治理方案的核心框架,每天为2,000+个服务提供3,000,000,000+次访问量支持,并被广泛应用于阿里巴巴 集团的各成员站点。
Dubbo是Alibaba开源的分布式服务框架,它最大的特点是按照分层的方式来架构,使用这种方式可以使各个层之间解耦合(或者最大限度地松耦合)。从服务模型的角度来看,Dubbo采用的是一种非常简单的模型, 要么是提供方提供服务,要么是消费方消费服务,所以基于这一点可以抽象出服务提供方(Provider)和服 务消费方(Consumer)两个角色。关于注册中心、协议支持、服务监控等内容。

什么是RPC?
在这里插入图片描述
3.2.2、框架说明
3.2.2.1、背景
随着互联网的发展,网站应用的规模不断扩大,常规的垂直应用架构已无法应对,分布式服务架构以及流动计算架 构势在必行,亟需一个治理系统确保架构有条不紊的演进。
在这里插入图片描述
单一应用架构
当网站流量很小时,只需一个应用,将所有功能都部署在一起,以减少部署节点和成本。此时,用于简化增删改查 工作量的数据访问框架(ORM)是关键。
垂直应用架构
当访问量逐渐增大,单一应用增加机器带来的加速度越来越小,将应用拆成互不相干的几个应用,以提升效率。此 时,用于加速前端页面开发的Web框架(MVC)是关键。
分布式服务架构
当垂直应用越来越多,应用之间交互不可避免,将核心业务抽取出来,作为独立的服务,逐渐形成稳定的服务中 心,使前端应用能更快速的响应多变的市场需求。此时,用于提高业务复用及整合的分布式服务框架(RPC)是关 键。
流动计算架构
当服务越来越多,容量的评估,小服务资源的浪费等问题逐渐显现,此时需增加一个调度中心基于访问压力实时管 理集群容量,提高集群利用率。此时,用于提高机器利用率的资源调度和治理中心(SOA)是关键。

3.2.2.2、需求
在这里插入图片描述
在大规模服务化之前,应用可能只是通过 RMI 或 Hessian 等工具,简单的暴露和引用远程服务,通过配置服务的
URL地址进行调用,通过 F5 等硬件进行负载均衡。
当服务越来越多时,服务 URL 配置管理变得非常困难,F5 硬件负载均衡器的单点压力也越来越大。 此时需要一个服务注册中心,动态的注册和发现服务,使服务的位置透明。并通过在消费方获取服务提供方地址列表,实现软负 载均衡和 Failover,降低对 F5 硬件负载均衡器的依赖,也能减少部分成本。
当进一步发展,服务间依赖关系变得错踪复杂,甚至分不清哪个应用要在哪个应用之前启动,架构师都不能完整的 描述应用的架构关系。 这时,需要自动画出应用间的依赖关系图,以帮助架构师理清理关系。
接着,服务的调用量越来越大,服务的容量问题就暴露出来,这个服务需要多少机器支撑?什么时候该加机器? 为了解决这些问题,第一步,要将服务现在每天的调用量,响应时间,都统计出来,作为容量规划的参考指标。其 次,要可以动态调整权重,在线上,将某台机器的权重一直加大,并在加大的过程中记录响应时间的变化,直到响 应时间到达阈值,记录此时的访问量,再以此访问量乘以机器数反推总容量。
以上是 Dubbo 最基本的几个需求。

3.2.2.3、架构
在这里插入图片描述
节点角色说明:
在这里插入图片描述
调用关系说明
1.服务容器负责启动,加载,运行服务提供者。
2.服务提供者在启动时,向注册中心注册自己提供的服务。
3.服务消费者在启动时,向注册中心订阅自己所需的服务。
4.注册中心返回服务提供者地址列表给消费者,如果有变更,注册中心将基于长连接推送变更数据给消费者。
5.服务消费者,从提供者地址列表中,基于软负载均衡算法,选一台提供者进行调用,如果调用失败,再选另 一台调用。
6.服务消费者和提供者,在内存中累计调用次数和调用时间,定时每分钟发送一次统计数据到监控中心。

Dubbo 架构具有以下几个特点,分别是连通性、健壮性、伸缩性、以及向未来架构的升级性。更 多 介 绍 参 见 :http://dubbo.apache.org/zh-cn/docs/user/preface/architecture.html 3.2.3、注册中心
dubbo支持多种注册中心,推荐使用ZooKeeper。http://dubbo.apache.org/zh-cn/docs/user/references/registr
y/introduction.html
在这里插入图片描述
Zookeeper 是 Apacahe Hadoop 的子项目,是一个树型的目录服务,支持变更推送,适合作为 Dubbo 服务的注册中心,工业强度较高,可用于生产环境,并推荐使用。
在这里插入图片描述
在这里插入图片描述

使用docker部署ZooKeeper

在本套课程中,使用docker容器化技术进行部署和开发,如果对docker不熟悉的同学可以采用传统的部署方式, 效果是一样的。
之所以采用docker部署的形式,是考虑到微服务节点的部署,以及后续的集群扩展的便捷性。
环境:ubuntu-16.04.3 + docker 17.03.2-ce
参考资料中的《VMware Workstation 中安装 Ubuntu16.04 虚拟机.docx》文档进行安装,统一环境。

在这里插入图片描述
测试:
在这里插入图片描述
3.2.4、编写服务提供方
3.2.4.1、创建工程
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
3.2.4.2、导入依赖
在itcast-dubbo工程中编写pom.xml文件:
在这里插入图片描述
在这里插入图片描述
itcast-dubbo-service依赖:
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
3.2.4.3、创建User对象
在这里插入图片描述
在这里插入图片描述
3.2.4.4、创建UserService(接口)提供查询服务
在这里插入图片描述
3.2.4.5、创建UserServiceImpl实现类
在这里插入图片描述
在这里插入图片描述
3.2.4.6、编写application.properties配置文件
在这里插入图片描述
3.2.4.7、编写启动类
在这里插入图片描述
在这里插入图片描述
启动后查看zk信息:
在这里插入图片描述
发现,UserService服务已经注册到zk中了。

3.2.5、编写服务消费方

3.2.5.1、创建工程
在这里插入图片描述
3.2.5.2、导入依赖
在这里插入图片描述
在这里插入图片描述
3.2.5.3、编写测试用例
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
3.2.5.4、编写application.properties配置文件
在这里插入图片描述
3.2.5.5、进行测试
在这里插入图片描述
测试结果,发现可以获取到数据,说明,已经成功调用了service中提供的接口。

3.2.6、dubbo Admin
Dubbo提供了可视化的界面管理工具,方便我们对服务进行管理,它就是dubbo admin,代码地址: https://github.com/apache/incubator-dubbo-ops

部署安装:
第一步,下载并且解压:
在这里插入图片描述
第二步,修改配置文件:
在这里插入图片描述
在这里插入图片描述
第三步,使用maven进行构建项目:
在这里插入图片描述
配置阿里源:
在这里插入图片描述
在这里插入图片描述
还需安装nodeJs模块

方式一:
参数链接:https://blog.csdn.net/qq_31748587/article/details/84766551?depth_1-utm_source=distribute.pc_relevant.none-task&utm_source=distribute.pc_relevant.none-task

方式二:
构建命令:
在这里插入图片描述
第四步,通过mavn插件启动程序:
在这里插入图片描述
注:
在这里插入图片描述

第五步,访问系统
打开浏览器,进行访问:http://172.16.55.185:8080/#/
在这里插入图片描述
搜索服务:
在这里插入图片描述
查看服务提供者的详情:
在这里插入图片描述
查看服务消费者的详情:
在这里插入图片描述
3.2.7、服务的负载均衡
在集群负载均衡时,Dubbo 提供了多种均衡策略,缺省为
org/zh-cn/docs/user/demos/loadbalance.html
负载均衡的策略:
在这里插入图片描述
下面,我们测试下轮询:
设置消费方的代码:
在这里插入图片描述
在这里插入图片描述
测试方法: 启动多个提供方,进行测试,观察提供方的输出,会发现会有轮询的效果出现。

3.2.8、dubbo:// 协议
dubbo提供的协议:
在这里插入图片描述

Dubbo 缺省协议采用单一长连接和 NIO 异步通讯,适合于小数据量大并发的服务调用,以及服务消费者机器数远大于服务提供者机器数的情况。
反之,Dubbo 缺省协议不适合传送大数据量的服务,比如传文件,传视频等,除非请求量很低。
在这里插入图片描述
在这里插入图片描述
特性
在这里插入图片描述
在这里插入图片描述

  • 1
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值