【ReactJs+springBoot项目——租房】第3章：OSS存储图片+本地存储+ 房源列表查询+GraphQL入门

【Reactjs+springBoot项目——租房】第3章：OSS存储图片+本地存储+ 房源列表查询+GraphQL入门

图片存储解决方案的分析阿里云OSS存储方案的实现本地存储方案的实现整合前端系统实现图片上传功能实 现 房 源 列 表 查 询 功 能GraphQL的入门

1、图片存储解决方案

在新增房源中，需要上传图片，其实，不只是新增房源，在整个项目中上传图片的需求有很多的，所以，我们需要 开发一个上传图片的服务，来提供服务。 开发一个图片上传服务，需要有存储的支持，那么我们的解决方案将以下几种： 1.直接将图片保存到服务的硬盘 1.优点：开发便捷，成本低 2.缺点：扩容困难 2.使用分布式文件系统进行存储 1.优点：容易实现扩容 2.缺点：开发复杂度稍大（尤其是开发复杂的功能） 3.使用nfs做存储 1.优点：开发较为便捷 2.缺点：需要有一定的运维知识进行部署和维护 4.使用第三方的存储服务 1.优点：开发简单，拥有强大功能，免维护 2.缺点：付费 在本套课程中采用第一、四解决方案，第三方服务选用阿里云的OSS服务。 2、阿里云OSS存储

2.1、什么是OSS服务？

地址：API 可以在互联网任何位置存储和访问，容量和处理能力弹性扩展，多种存储类型供选择全面优化存储成本。 2.2、购买服务 使用第三方服务最大的缺点就是需要付费，下面，我们看下如何购买开通服务。

购买下行流量包：

说明：OSS的上行流量是免费的，但是下行流量是需要购买的，一般我们的使用购买最低的流量以及存储，就可以 了，以目前的价格来看，是需要65元人民币。 2.3、开始使用OSS 2.3.1、创建Bucket 使用OSS，首先需要创建Bucket，Bucket翻译成中文是水桶的意思，把存储的图片资源看做是水，想要盛水必须得 有桶，就是这个意思了。 进入控制台，具体的上传逻辑实现，在该类中调用了OSS客户端的API。

2.4.6、编写PicUploadController

2.5、测试

访问图片：

查看OSS中的图片信息：

2.6、添加水印

OSS提供了在线添加水印功能，下面我们来体验下该功能：

自定义规则：

访 问 地 址 ：uiyin

可以看到水印已经添加到图片中了。

3、本地文件系统存储3.1、编写PicUploadFileSystemService

3.2、修改Controller中的引用

3.3、测试

3.4、搭建nginx进行访问图片

将资料中的nginx-1.5.1.zip进行解压，修改配置文件，启动nginx。

修改本机hosts文件：

测试：

4、整合前端进行图片上传

4.1、修改PicturesWall.js

改为正确的上传地址：

4.2、修改AddResource.js

修改图片上传完成的变更方法：

修改表单提交逻辑中的图片数据的处理：

4.3、测试

新增房源的测试：

数据库中的数据：

5、房源列表服务

前面我们实现了新增房源服务，接下来，我们来实现房源列表服务。 5.1、定义dubbo服务 itcast-haoke-manage-dubbo-server-house-resources-dubbo-interface工程：

编写PageInfo对象：

5.2、实现dubbo服务 在itcast-haoke-manage-dubbo-server-house-resources-dubbo-service中：

编写具体实现：

在BaseService中新增queryPageList方法：

5.3、启动服务

5.4、实现RESTful接口

在itcast-haoke-manage-api-server工程中： 导入依赖：

编写Controller：

编写TableResult：

Service实现：

测试：

结果：

5.5、整合前端进行开发

5.5.1、修改请求数据地址

注意：这个地址会被代理处理。

5.5.2、修改字段结构

效果：

5.5.3、图片显示 效果（使用Antd的走马灯效果）：

ShowPics.js的实现：

6、GraphQL入门6.1、什么是GraphQL?

GraphQL 是由 Facebook 创造的用于描述复杂数据模型的一种查询语言。这里查询语言所指的并不是常规意义上的类似 sql 语句的查询语言，而是一种用于前后端数据查询方式的规范。

官网（中文）：规范地址：一下，如果查询信息有10个，是不是要发起10次请求才能完成？ 6.3、进一步了解GraphQL

GraphQL很好的解决了RESTful在使用过程中的不足，接下来，我们进一步了解下它。

6.3.1、按需索取数据，避免浪费

、

演示地址：中就会返回appearsIn的值。

6.3.2、一次查询多个数据

可以看到，一次请求，不仅查询到了hero数据，而且还查询到了friends数据。节省了网络请求次数。

6.3.3、API的演进无需划分版本

查看官网的动画演示：户端和服务端的耦合度。

6.4、GraphQL查询的规范

GraphQL定义了一套规范，用来描述语法定义，具体参考：和类型规范

Schema 是用于定义数据结构的，比如说，User对象中有哪些属性，对象与对象之间是什么关系等。参考官网文档：Types）

GraphQL规范中，默认定义了5种类型：

：有符号 32 位整数。

：有符号双精度浮点值。

：UTF‐8 字符序列。

： 或者 。

ID ：ID 标量类型表示一个唯一标识符，通常用以重新获取对象或者作为缓存中的键。

规范中定义的这5种类型，显然是不能满足需求的，所以在各种语言实现中，都有对类型进行了扩充，也就是

GraphQL支持自定义类型，比如在graphql-java实现中增加了：Long、Byte等。

6.5.3、枚举类型

枚举类型是一种特殊的标量，它限制在一个特殊的可选值集合内。

6.5.4、接口（interface） 跟许多类型系统一样，GraphQL 支持接口。一个接口是一个抽象类型，它包含某些字段，而对象类型必须包含这些字段，才能算实现了这个接口。

例如，你可以用一个 接口用以表示《星球大战》三部曲中的任何角色：

7、GraphQL的Java实现通过前面的讲解，我们对GraphQL有了解，官方只是定义了规范并没有做实现，就需要有第三方来进行实现了，关于GraphQL的java实现有几种，我们选择使用官方推荐的实现：graphql-java，我们通过该实现就可以编写GraphQL的服务端了。

官 网 ：github：在setting.xml文件里进行配置：

nexus nexus true true nexus true true nexus-aliyun nexus-aliyun true true nexus true true bintray bintray true false bintray true false nexus nexus-aliyun bintray

7.1.2、创建User对象

7.1.3、编写查询User对象实现

Java实现：

运行结果：

7.1.4、设置查询参数 修改createUserDefinition()方法：

测试：

7.2、使用SDL构建schema graphql-java 提供了两种不同的方式来定义模式：以编程方式作为Java代码或通过特殊的graphql dsl（称为SDL）。

推荐使用：SDL方法。

7.2.1、创建user.graphqls文件

在resources目录下创建user.graphqls文件：

安装GraphQL插件：

测试：

7.2.3、对象嵌套 下面，我们创建一个Card对象，User和Card对象为一对一的关系。

创建Card对象：

修改User对象：

修改user.graphqls文件：

修改GraphQLSDLDemo逻辑：

说明：GraphQL并不实现关联查询，需要自己实现。

测试：

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