【ReactJs+springBoot项目——租房】第4章：GraphQL开发房源接口+搭建前台系统+首页轮播广告功能GraphQ+Apollo Client

使用GraphQL开发房源接口
实现房源列表查询的接口
搭建前台系统
实现首页轮播广告功能
改造轮播广告接口方式为GraphQL
 学习使用Apollo Client的使用

1、使用GraphQL开发房源接口

下面我们基于GraphQL实现查询房源的接口服务。将涉及到GraphQL与SpringBoot整合的知识点。
1.1、实现根据id查询房源的dubbo服务
1.1.1、定义接口方法
在itcast-haoke-manage-dubbo-server-house-resources-dubbo-interface中：

1.1.2、实现接口
在itcast-haoke-manage-dubbo-server-house-resources-dubbo-service中：

1.1.3、业务Service实现

1.2、引入graphql-java依赖

1.3、编写haoke.graphqls文件
在resources目录下创建haoke.graphqls文件：

1.4、编写GraphQLController

1.5、编写GraphQLProvider
在GraphQLProvider中，需要与Spring整合，并且将GraphQL对象载入到Spring容器。

1.6、chrome安装GraphQL client插件
为chrome浏览器安装Altair GraphQL Client插件，方便对GraphQL接口进行测试。
插件安装地址：https://chrome.google.com/webstore/detail/altair-graphql-client/flnheeellpciglgpaodhkhmap eljopja?hl=zh-CN

安装完成后进行测试：

1.7、优化改进GraphQLProvider逻辑
问题：

以后每当增加查询时，都需要修改该方法，如果查询方法很多的话，那么这个方法将变得非常难以维护，所以需要 进改进。
改进思路：
1.编写接口
2.所有实现查询的逻辑都实现该接口
3.在GraphQLProvider中使用该接口的实现类进行处理
4.以后需要新增查询逻辑只需要增加实现类即可
1.7.1、编写MyDataFetcher接口

1.7.2、编写实现类HouseResourcesDataFetcher

1.7.3、修改GraphQLProvider逻辑

重启服务进行测试，测试结果和之前一致。
1.8、实现查询房源列表接口
1.8.1、修改haoke.graphqls文件

1.8.2、新增HouseResourcesListDataFetcher实现

1.8.3、测试
查询：

2、搭建前台系统

好客租房项目是采用前后端分离开发模式，前端系统由前端团队进行开发，接下来我们需要整合前端，前端是使用
React+semantic-ui实现移动端web展示，后期可以将web打包成app进行发布。
前台系统效果：

2.1、搭建工程
第一步，将资料中的haoke-web.zip解压到项目目录，我的是：F:\code\itcast-haoke\itcast-haoke-web

第二步，导入到idea中

导入完成：

第三步，执行命令进行初始化和导入相关依赖包

输入地址：http://localhost:9000/

2.2、搭建api工程
前端团队在开发时，没有采用mock的方式，而是采用了使用node.js开发服务端的方式进行了demo化开发。 所以，我们也需要将该服务搭建起来，以便进行开发。
第一步，将资料中的haoke-web-api.zip解压到项目目录，我的是：F:\code\itcast-haoke\itcast-haoke-web- api

第二步，创建数据库
创建myhome数据库，并且执行资料中的myhome.sql脚本。

第三步，修改配置文件

修改成自己的mysql配置：

第四步，输入命令进行初始化和启动服务

2.3、登录系统进行测试
在users系统中查询到用户的信息如下：

可以看到首页了。
2.4、前台系统实现分析
2.4.1、目录结构

2.4.2、加载数据流程
以首页为例，查看数据加载流程。
打开home.js文件可以看到，在组件加载完成后进行加载数据：

通过axios进行加载数据，在App.js中对axios进行了全局的配置：

在common.js中进行配置：

2.4.3、加载到数据后的处理

从代码中可以看出，通过Promise.all()方法获取到所有的异步处理的结果，并且将结果保存到this.state中。 然后，在render中进行渲染：

也就是说，我们只需要按照前端的请求以及响应数据的结构进行开发接口，即可完成前后端的整合。
3、首页轮播广告

在首页中，有轮播广告，需要实现在后台更新数据，前台将数据显示出来。效果：

3.1、查看数据结构
请求地址：

响应：

从数据结果中可以看出，数据只需要返回图片链接即可。
3.2、数据库表设计

构造数据：

3.3、实现查询接口（dubbo服务）
3.3.1、分析
首页的轮播广告，属于网站广告，不能只是开发一个功能而是要开发全站广告功能 实现独立的dubbo服务，便于后期的扩展和维护
多个dubbo服务，需要抽取公共的类、方法到common工程中
3.3.2、创建common工程
创建itcast-haoke-manage-dubbo-server-common工程，将BasePojo、BaseServiceImpl移动至该工程。

其他工程，如itcast-haoke-manage-dubbo-server-house-resources，需要依赖此工程，并且将自己工程中的相关类删除。
导入公用依赖：

3.3.3、创建工程

itcast-haoke-manage-dubbo-server-ad的pom.xml文件：

itcast-haoke-manage-dubbo-server-ad-service的pom.xml文件

3.3.4、编写pojo
itcast-haoke-manage-dubbo-server-ad-interface

3.3.5、定义dubbo接口
itcast-haoke-manage-dubbo-server-ad-interface

3.3.6、实现dubbo服务

itcast-haoke-manage-dubbo-server-ad-service

3.3.7、实现AdService
定义接口：

编写实现类：

3.3.8、创建AdMapper接口
itcast-haoke-manage-dubbo-server-ad-service

3.3.9、编写MybatisConfig
itcast-haoke-manage-dubbo-server-ad-service

3.3.10、编写application.properties配置文件

注意：端口号不要和其他的服务冲突了。
3.3.11、编写启动类

启动进行测试：

已经完成了注册。
3.4、实现api接口服务（RESTful接口）
3.4.1、引入依赖

3.4.2、编写Controller

3.4.3、编写Service

3.4.4、编写WebResult
WebResult用于和前端系统交互的数据结构定义。

3.4.5、测试

4.5、整合前端系统
修改home.js文件中请求地址：

进行测试：

发现，没有对CORS进行支持，所以需要在服务端进行配置：

添加@CrossOrigin注解的支持，表明该请求地址下都支持跨域。


可以看到，成功的获取到数据。
4、广告服务的GraphQL接口

4.1、数据结构优化
之前的数据结构是这样的：

结合轮播图组件的需求，只需要返回list数组，并且每个对象包含original字段即可。
优化后的结构为：

4.2、编写haoke.graphqls


4.3、根据GraphQL结构编写vo

4.4、编写IndexAdDataFetcher
编写IndexAdDataFetcher用于广告数据的查询。

4.5、测试
测试：

4.6、GraphQL客户端

我们选用Apollo Client作为前端使用的GraphQL客户端使用。
参考文档：https://www.apollographql.com/docs/react/essentials/get-started.html
4.6.1、安装依赖

4.6.2、创建客户端

4.6.3、创建查询

4.6.4、测试

发现有2个问题：
1.GraphQL服务没有支持cross
2.Apollo Client发起的数据请求为POST请求，现在实现的GraphQL仅仅实现了GET请求处理
解决：

成功获取到数据，页面效果也实现了：

4.6.5、查询的其他的用法
具体参见：https://www.apollographql.com/docs/react/essentials/queries.html