图片存储解决方案的分析
阿里云OSS存储方案的实现
本地存储方案的实现
整合前端系统实现图片上传功能
实 现 房 源 列 表 查 询 功 能
GraphQL的入门
1、图片存储解决方案
在新增房源中，需要上传图片，其实，不只是新增房源，在整个项目中上传图片的需求有很多的，所以，我们需要 开发一个上传图片的服务，来提供服务。
开发一个图片上传服务，需要有存储的支持，那么我们的解决方案将以下几种：
1.直接将图片保存到服务的硬盘
1.优点：开发便捷，成本低
2.缺点：扩容困难
2.使用分布式文件系统进行存储
1.优点：容易实现扩容
2.缺点：开发复杂度稍大（尤其是开发复杂的功能）
3.使用nfs做存储
1.优点：开发较为便捷
2.缺点：需要有一定的运维知识进行部署和维护
4.使用第三方的存储服务
1.优点：开发简单，拥有强大功能，免维护
2.缺点：付费
在本套课程中采用第一、四解决方案，第三方服务选用阿里云的OSS服务。
2、阿里云OSS存储
2.1、什么是OSS服务？
地址：https://www.aliyun.com/product/oss?spm=a2c4g.11186623.cloudEssentials.19.60f81c62VrnDMR
海量、安全、低成本、高可靠的云存储服务，提供99.999999999%的数据可靠性。使用RESTful API 可以在互联网任何位置存储和访问，容量和处理能力弹性扩展，多种存储类型供选择全面优化存储成本。
2.2、购买服务
使用第三方服务最大的缺点就是需要付费，下面，我们看下如何购买开通服务。
购买下行流量包：
说明：OSS的上行流量是免费的，但是下行流量是需要购买的，一般我们的使用购买最低的流量以及存储，就可以 了，以目前的价格来看，是需要65元人民币。
2.3、开始使用OSS
2.3.1、创建Bucket
使用OSS，首先需要创建Bucket，Bucket翻译成中文是水桶的意思，把存储的图片资源看做是水，想要盛水必须得 有桶，就是这个意思了。
进入控制台，https://oss.console.aliyun.com/overview
创建完成后，在左侧可以看到已经创建好的Bucket：
选择Bucket后，即可看到对应的信息，如：url、消耗流量等
2.3.2、管理文件
可以通过在线的方式进行管理文件：
2.4、实现图片上传
在itcast-haoke-manage-api-server中实现图片上传功能，以供其他服务使用。
2.4.1、导入依赖
2.4.2、编写aliyun.properties配置文件
accessKeyId以及accessKeySecret获取参考官方文档: https://help.aliyun.com/knowledge_detail/48699.html
2.4.3、编写AliyunConfig
2.4.4、编写PicUploadResult
该类用于返回给前端的数据结构定义。
2.4.5、编写PicUploadService
具体的上传逻辑实现，在该类中调用了OSS客户端的API。
2.4.6、编写PicUploadController
2.5、测试
访问图片：
查看OSS中的图片信息：
2.6、添加水印
OSS提供了在线添加水印功能，下面我们来体验下该功能：
自定义规则：
访 问 地 址 ：https://itcast-haoke.oss-cn-qingdao.aliyuncs.com/images/2018/11/17/15423895180629907.jpg!sh 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 语句的查询语言，而是一种用于前后端数据查询方式的规范。
官网（中文）：https://graphql.cn/ 规范地址：http://spec.graphql.cn/
6.2、分析RESTful存在的问题
RESTful是我们已经很熟悉的用于api通信的规范，如这样：
在查询的时候，往往是这样：
这样似乎是没有问题的，如果，对于这次请求，我只需要id和name属性，其他的属性我都不需要，如果我依然拿到的是全部的属性，这是不是一种资源浪费？
还有这样的一种场景，就是一次请求不能满足需求，需要有多次请求才能完成，像这样：
查询用户以及他的身份证信息，需要进行2次查询才能够完成，这样对于前端等接口的使用方是很不友好的，试想 一下，如果查询信息有10个，是不是要发起10次请求才能完成？
6.3、进一步了解GraphQL
GraphQL很好的解决了RESTful在使用过程中的不足，接下来，我们进一步了解下它。
6.3.1、按需索取数据，避免浪费
、
演示地址：http://graphql.cn/learn/schema/#type-system
可以看出，当请求中只有name属性时，响应结果中只包含name属性，如果请求中添加appearsIn属性，那么结果 中就会返回appearsIn的值。
6.3.2、一次查询多个数据
可以看到，一次请求，不仅查询到了hero数据，而且还查询到了friends数据。节省了网络请求次数。
6.3.3、API的演进无需划分版本
查看官网的动画演示：http://graphql.cn/
从这些图中可以看出，当API进行升级时，客户端可以不进行升级，可以等到后期一起升级，这样就大大减少了客 户端和服务端的耦合度。
6.4、GraphQL查询的规范
GraphQL定义了一套规范，用来描述语法定义，具体参考：http://graphql.cn/learn/queries/
说明：仅仅是规范，并不是具体实现，需要各种语言进行实现。
下面我们会讲一些基本的规范，更多的规范查看：http://graphql.cn/learn/queries/
6.4.1、字段（Fields）
在GraphQL的查询中，请求结构中包含了所预期结果的结构，这个就是字段。并且响应的结构和请求结构基本一致，这是GraphQL的一个特性，这样就可以让请求发起者很清楚的知道自己想要什么。
6.4.2、参数（Arguments）
在查询数据时，离不开传递参数，在GraphQL的查询中，也是可以传递参数的，语法：(参数名:参数值)
6.4.3、别名（Aliases）
如果一次查询多个相同对象，但是值不同，这个时候就需要起别名了，否则json的语法就不能通过了。比如这样：
6.4.4、片段（Fragments）
查询对的属相如果相同，可以采用片段的方式进行简化定义。
6.5、GraphQL的Schema 和类型规范
Schema 是用于定义数据结构的，比如说，User对象中有哪些属性，对象与对象之间是什么关系等。
参考官网文档：http://graphql.cn/learn/schema/
6.5.1、Schema定义结构
6.5.2、标量类型（Scalar 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的服务端了。
官 网 ：https://www.graphql-java.com/ github：https://github.com/graphql-java/graphql-java
7.1、开始使用
7.1.1、创建工程
工程名：itcast-graphql-java
导入依赖：
说明：graphql-java包并没有发布到maven中央仓库，需要配置第三方仓库才能使用。
在setting.xml文件里进行配置：
<profiles>
<profile>
<id>nexus</id>
<repositories>
<repository>
<id>nexus</id>
<url>http://127.0.0.1:8888/nexus/content/groups/public/</url>
<releases>
<enabled>true</enabled>
</releases>
<snapshots>
<enabled>true</enabled>
</snapshots>
</repository>
</repositories>
<pluginRepositories>
<pluginRepository>
<id>nexus</id>
<url>http://127.0.0.1:8888/nexus/content/groups/public/</url>
<releases>
<enabled>true</enabled>
</releases>
<snapshots>
<enabled>true</enabled>
</snapshots>
</pluginRepository>
</pluginRepositories>
</profile>
<profile>
<id>nexus-aliyun</id>
<repositories>
<repository>
<id>nexus-aliyun</id>
<url>http://maven.aliyun.com/nexus/content/groups/public/</url>
<releases>
<enabled>true</enabled>
</releases>
<snapshots>
<enabled>true</enabled>
</snapshots>
</repository>
</repositories>
<pluginRepositories>
<pluginRepository>
<id>nexus</id>
<url>http://maven.aliyun.com/nexus/content/groups/public/</url>
<releases>
<enabled>true</enabled>
</releases>
<snapshots>
<enabled>true</enabled>
</snapshots>
</pluginRepository>
</pluginRepositories>
</profile>
<profile>
<id>bintray</id>
<repositories>
<repository>
<id>bintray</id>
<url>http://dl.bintray.com/andimarek/graphql-java</url>
<releases>
<enabled>true</enabled>
</releases>
<snapshots>
<enabled>false</enabled>
</snapshots>
</repository>
</repositories>
<pluginRepositories>
<pluginRepository>
<id>bintray</id>
<url>http://dl.bintray.com/andimarek/graphql-java</url>
<releases>
<enabled>true</enabled>
</releases>
<snapshots>
<enabled>false</enabled>
</snapshots>
</pluginRepository>
</pluginRepositories>
</profile>
</profiles>
<activeProfiles>
<activeProfile>nexus</activeProfile>
<activeProfile>nexus-aliyun</activeProfile>
<activeProfile>bintray</activeProfile>
</activeProfiles>
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并不实现关联查询，需要自己实现。
测试：
扫一扫
2978
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
