为前端系统提供mock服务
前端系统中通过graphql查询房源列表
实现后台系统的更新房源数据功能
为接口服务添加Redis缓存
WebSocket入门
1、伪mock服务
前面完成了首页的轮播广告服务的支持，为力方便后面的项目开发，需要对前端所有的请求都都进行支持。 暂时不实现的，先模拟数据返回。
1.1、构造数据
mock-data.properties：
1mock.indexMenu={"data":{"list":[{"id":1,"menu_name":"二手
房","menu_logo":"home","menu_path":"/home","menu_status":1,"menu_style":null},
{"id":2,"menu_name":"新
房","menu_logo":null,"menu_path":null,"menu_status":null,"menu_style":null},
{"id":3,"menu_name":"租
房","menu_logo":null,"menu_path":null,"menu_status":null,"menu_style":null},
{"id":4,"menu_name":"海
外","menu_logo":null,"menu_path":null,"menu_status":null,"menu_style":null},
{"id":5,"menu_name":"地图找
房","menu_logo":null,"menu_path":null,"menu_status":null,"menu_style":null},
{"id":6,"menu_name":"查公
交","menu_logo":null,"menu_path":null,"menu_status":null,"menu_style":null},
{"id":7,"menu_name":"计算
器","menu_logo":null,"menu_path":null,"menu_status":null,"menu_style":null},
{"id":8,"menu_name":"问
答","menu_logo":null,"menu_path":null,"menu_status":null,"menu_style":null}]},"meta":
{"status":200,"msg":"测试数据"}}
2mock.indexInfo={"data":{"list":[{"id":1,"info_title":"房企半年销售业绩
继 ","info_thumb":null,"info_time":null,"info_content":null,"user_id":null,"info_statu s":null,"info_type":1},{"id":2,"info_title":"上半年土地市场两重天：一线降温三四线量价齐
升 ","info_thumb":null,"info_time":null,"info_content":null,"user_id":null,"info_statu s":null,"info_type":1}]},"meta":{"status":200,"msg":"测试数据"}}
3mock.indexFaq={"data":{"list":[{"question_name":"在北京买房，需要支付的税费有哪 些？","question_tag":"学区,海淀","answer_content":"各种费
用","atime":33,"question_id":1,"qnum":2},{"question_name":"一般首付之后，贷款多久可以下 来？","question_tag":"学区,昌平","answer_content":"大概1个
月","atime":22,"question_id":2,"qnum":2}]},"meta":{"status":200,"msg":"测试数据"}}
4mock.indexHouse={"data":{"list":[{"id":1,"home_name":"安贞西里123","home_price":"4511","home_desc":"72.32㎡/南 北/低楼
层","home_infos":null,"home_type":1,"home_tags":"海淀,昌
平","home_address":null,"user_id":null,"home_status":null,"home_time":12,"group_id":1
},{"id":8,"home_name":"安贞西里 三室一厅","home_price":"4500","home_desc":"72.32㎡/南北/低楼层","home_infos":null,"home_type":1,"home_tags":"海
淀","home_address":null,"user_id":null,"home_status":null,"home_time":23,"group_id":2
},{"id":3,"home_name":"安贞西里 三室一厅","home_price":"4220","home_desc":"72.32㎡/南北/低楼层","home_infos":null,"home_type":2,"home_tags":"海
淀","home_address":null,"user_id":null,"home_status":null,"home_time":1,"group_id":1}
,{"id":4,"home_name":"安贞西里 三室一厅","home_price":"4500","home_desc":"72.32㎡/南 北/ 低楼层","home_infos":"4500","home_type":2,"home_tags":"海
淀","home_address":"","user_id":null,"home_status":null,"home_time":12,"group_id":2},
{"id":5,"home_name":"安贞西里 三室一厅","home_price":"4522","home_desc":"72.32㎡/南 北/低楼层","home_infos":null,"home_type":3,"home_tags":"海
淀","home_address":null,"user_id":null,"home_status":null,"home_time":23,"group_id":1
},{"id":6,"home_name":"安贞西里 三室一厅","home_price":"4500","home_desc":"72.32㎡/南北/低楼层","home_infos":null,"home_type":3,"home_tags":"海
淀","home_address":null,"user_id":null,"home_status":null,"home_time":1221,"group_id"
:2},{"id":9,"home_name":"安贞西里 三室一厅","home_price":"4500","home_desc":"72.32㎡/南北/低楼层","home_infos":null,"home_type":4,"home_tags":"海
淀","home_address":null,"user_id":null,"home_status":null,"home_time":23,"group_id":1
}]},"meta":{"status":200,"msg":"测试数据"}}
5mock.infosList1={"data":{"list":{"total":8,"data": [{"id":13,"info_title":"wwwwwwwwwwwww","info_thumb":null,"info_time":null,"info_conte nt":null,"user_id":null,"info_status":null,"info_type":1},{"id":12,"info_title":" 房 企 半年销售业绩
继 ","info_thumb":null,"info_time":null,"info_content":null,"user_id":null,"info_statu s":null,"info_type":1}]}},"meta":{"status":200,"msg":"获取数据成功"}}
6mock.infosList2={"data":{"list":{"total":4,"data":[{"id":9,"info_title":"房企半年销售业 绩继续冲高三巨头销售额过
亿 ","info_thumb":null,"info_time":null,"info_content":null,"user_id":null,"info_statu s":null,"info_type":2},{"id":7,"info_title":"房企半年销售业绩继续冲高三巨头销售额过
亿 ","info_thumb":null,"info_time":null,"info_content":null,"user_id":null,"info_statu s":null,"info_type":2}]}},"meta":{"status":200,"msg":"获取数据成功"}}
7mock.infosList3={"data":{"list":{"total":10,"data": [{"username":"tom","question_name":"在北京买房，需要支付的税费有哪些？","question_tag":"学 区,海淀","answer_content":"各种费用","atime":33,"question_id":1,"qnum":2},
{"username":"tom","question_name":"一般首付之后，贷款多久可以下来？","question_tag":"学区,
昌平","answer_content":"大概1个月","atime":22,"question_id":2,"qnum":2}]}},"meta":
{"status":200,"msg":"获取数据成功"}}
8mock.my={"data":
{"id":1,"username":"tom","password":"123","mobile":"123","type":null,"status":null,"a vatar":"public/icon.png"},"meta":{"status":200,"msg":"获取数据成功"}}
1.2、创建MockConfig
用于读取配置文件中的内容。
1.3、创建MockController
1.4、测试
1.5、整合前端系统
实现效果一样。
2、GraphQL中的参数
在GraphQL查询中，往往是需要设置参数的，像这样：
其中，id : 8 就是在传递参数，但是这是静态参数，如果动态传递参数呢？ 在GraphQL规范中，对参数的传递是有定义的：
2.1、查询时传递参数
说明：
hk -> 表示操作名称，这个名称随意。
$id: Long -> 定义参数以及参数类型
(id: $id) -> 通过变量使用参数
2.2、设置参数值
2.3、服务端处理参数
2.4、测试
3、实现房源列表查询
3.1、编写查询字符串
查询参数:
3.2、改造list.js页面
3.3、测试
4、实现更新房源数据
前面已经将房源数据进行了展示，为了功能的相对完整，所以下面将实现房源数据的更新功能，在前端进行展示更 新后的数据。
4.1、新增更新接口（RESTful）
4.1.1、修改Controller
itcast-haoke-manage-api-server
4.1.2、修改service
itcast-haoke-manage-api-server/HouseResourcesService
4.1.3、修改dubbo服务
修改接口 ApiHouseResourcesService：
修改实现类ApiHouseResourcesServiceImpl：
修改业务Service：HouseResourcesServiceImpl
4.2、编写EditResource.js 
4.3、修改房源列表页
效果：
4.4、修改提交逻辑
4.5、修改service逻辑
4.6、测试
实现了更新功能。
5、为接口添加缓存功能
在接口服务中，如果每一次都进行数据库查询，那么必然会给数据库造成很大的并发压力。所以需要为接口添加缓 存，缓存技术选用Redis，并且使用Redis的集群，Api使用Spring-Data-Redis。
思考：缓存逻辑是加在api处还是dubbo服务处？
5.1、使用Docker搭建Redis集群
出现连接不到redis节点的问题：
尝试使用容器的ip地址（172.17.0.1这个地址是docker容器分配给主机的地址）：
发现，搭建成功：
查看集群信息：
可以看到，集群中节点的ip地址是docker分配的地址，那么在客户端（spring-data-redis）是没有办法访问的？如 何解决？
5.2、docker的网络类型
docker的网络类型有：
None:不为容器配置任何网络功能，没有网络 --net=none
Container:与另一个运行中的容器共享Network Namespace，–net=container:containerID Host:与主机共享Network Namespace，–net=host
Bridge:Docker设计的NAT网络模型（默认类型）
重点关注下Host类型：
host模式创建的容器没有自己独立的网络命名空间，是和物理机共享一个Network Namespace，并且共享物理机的所有端口与IP。但是它将容器直接暴露在公共网络中，是有安全隐患的。
5.3、使用host网络进行搭建集群
搭建成功：
查看集群信息：
5.4、编写代码进行测试集群
5.4.1、导入依赖
5.4.2、编写配置文件
5.4.3、编写配置类
ClusterConfigurationProperties：
5.4.4、注册Redis连接工厂
RedisClusterConfig：
5.4.5、编写测试用例
测试结果：可以打印出结果，说明集群搭建成功！
5.5、添加缓存逻辑
实现缓存逻辑有2种方式：
1.每个接口单独控制缓存逻辑
2.统一控制缓存逻辑
我们采用第2种方式。
5.5.1、采用拦截器进行缓存命中
编写拦截器：RedisCacheInterceptor。
注册拦截器到Spring容器：
5.5.2、测试拦截器
发起请求：
出现了错误：
错误分析：由于在拦截器中读取了输入流的数据，在request中的输入流只能读取一次，请求进去Controller时，输 入流中已经没有数据了，导致获取不到数据。
如何解决？
5.5.3、通过包装request解决
编写HttpServletRequest的包装类：
通过过滤器进行包装request对象：
5.5.4、测试
可以看到，request对象已经经过了包装。
并且在Controller中也可以获取到数据，问题解决。
5.6、响应结果写入到缓存
前面已经完成了缓存命中的逻辑，那么在查询到数据后，如果将结果写入到缓存呢？ 思考：通过拦截器可以实现吗？
通过ResponseBodyAdvice进行实现。
ResponseBodyAdvice是Spring提供的高级用法，会在结果被处理前进行拦截，拦截的逻辑自己实现，这样就可以 实现拿到结果数据进行写入缓存的操作了。
具体实现：
测试：
数据已经写入到redis：
测试命中：
可以看到，数据已经从Redis中命中，进行返回，就不再由Controller处理了。从而达到了缓存的目的。
5.7、增加CORS的支持
整合前端系统测试会发现，前面实现的拦截器中并没有对跨域进行支持，需要对CORS跨域支持： 
6、WebSocket
6.1、网站中的消息功能如何实现？
思考：像这样的消息功能怎么实现？ 如果网页不刷新，服务端有新消息如何推送到浏览器？
解决方案，采用轮询的方式。即：通过js不断的请求服务器，查看是否有新数据，如果有，就获取到新数据。 这种解决方法是否存在问题呢？
当然是有的，如果服务端一直没有新的数据，那么js也是需要一直的轮询查询数据，这就是一种资源的浪费。 那么，有没有更好的解决方案？ 有！那就是采用WebSocket技术来解决。
6.1、什么是WebSocket？
WebSocket 是HTML5一种新的协议。它实现了浏览器与服务器全双工通信(full-duplex)。一开始的握手需要借助HTTP请求完成。 WebSocket是真正实现了全双工通信的服务器向客户端推的互联网技术。 它是一种在单个TCP连接上进行全双工通讯协议。Websocket通信协议与2011年倍IETF定为标准RFC 6455，Websocket API被W3C定为标准。
全双工和单工的区别？
全双工（Full Duplex）是通讯传输的一个术语。通信允许数据在两个方向上同时传输，它在能力上相当于两个单工通信方式的结合。全双工指可以同时（瞬时）进行信号的双向传输（A→B且B→A）。指 A→B的同时B→A，是瞬时同步的。
单工、半双工（Half Duplex），所谓半双工就是指一个时间段内只有一个动作发生，举个简单例子， 一条窄窄的马路，同时只能有一辆车通过，当目前有两辆车对开，这种情况下就只能一辆先过，等到头 儿后另一辆再开，这个例子就形象的说明了半双工的原理。早期的对讲机、以及早期集线器等设备都是 基于半双工的产品。随着技术的不断进步，半双工会逐渐退出历史舞台。
6.2、http与websocket的区别
6.2.1、http
http协议是短连接，因为请求之后，都会关闭连接，下次重新请求数据，需要再次打开链接。
6.2.2、websocket
WebSocket协议是一种长链接，只需要通过一次请求来初始化链接，然后所有的请求和响应都是通过这个TCP链接 进行通讯。
6.3、浏览器支持情况
查看：https://caniuse.com/#search=websocket
服务器支持情况：Tomcat 7.0.47+以上才支持。
6.4、快速入门
6.4.1、创建itcast-websocket工程
pom.xml
6.4.2、websocket的相关注解说明
@ServerEndpoint("/websocket/{uid}")
申明这是一个websocket服务
需要指定访问该服务的地址，在地址中可以指定参数，需要通过{}进行占位
@OnOpen
用法：public void onOpen(Session session, @PathParam("uid") String uid) throws IOException{}
该方法将在建立连接后执行，会传入session对象，就是客户端与服务端建立的长连接通道 通过@PathParam获取url申明中的参数
@OnClose
用法：public void onClose() {}
该方法是在连接关闭后执行
@OnMessage
用法：public void onMessage(String message, Session session) throws IOException {}
该方法用于接收客户端发来的消息message：发来的消息数据session：会话对象（也是通道）
发送消息到客户端
用法：session.getBasicRemote().sendText("你好"); 通过session进行发送。
6.4.3、实现websocket服务
编写完成后，无需进额外的配置，直接启动tomcat即可。
6.4.4、测试
可以通过安装chrome插件或者通过在线工具进行测试：
chrome插件，Simple WebSocket Client：
https://chrome.google.com/webstore/detail/simple-websocket-client/pfdhoblngboilpfeibdedpjgfnlcodoo
在线工具：https://easyswoole.com/wstool.html
6.4.4、编写js客户端
测试：
6.5、SpringBoot整合WebSocket
Spring对WebSocket做了支持，下面我们看下在springboot中如何使用。
6.5.1、导入依赖
6.5.2、编写WebSocketHandler
在Spring中，处理消息的具体业务逻辑需要实现WebSocketHandler接口。
6.5.3、编写配置类
6.5.4、编写启动类
6.5.5、测试
6.6、websocket拦截器
在Spring中提供了websocket拦截器，可以在建立连接之前写些业务逻辑，比如校验登录等。
实现：
将拦截器添加到websocket服务中：
获取uid：
测试：
扫一扫
248
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
