【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接口进行测试。 插件安装地址：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中

导入完成：

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

输入地址：前端团队在开发时，没有采用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客户端使用。

参考文档：Client发起的数据请求为POST请求，现在实现的GraphQL仅仅实现了GET请求处理

解决：

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

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

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。