玩转【斗鱼直播APP】系列之请求展示推荐数据

来源:互联网 发布:永琪和知画圆房了几次 编辑:程序博客网 时间:2024/05/08 17:11

请求推荐数据

请求方式: AFNetworking&Alamofire?

  • 目前在iOS开发中, 请求网络数据, 我们经常会使用第三方框架. 而比较出名的莫过于AFNetworking
  • 不过AFNetworking是使用OC开发的框架,作者又专门针对Swift开发了另外一个框架就是:Alamofire。
  • 因为我们该项目是Swift版本,所有直接采用Alamofire
    • 注:其实Alamofire非常强大,不过我们这里只是发送请求,使用起来是非常方便的。

集成Alamofire

  • 在iOS开发中,如果我们集成一个第三方框架,通常会使用Cocoapods
  • 因此,我们这里通过Cocoapods进行集成
  • 找到项目所在目录:
  • 打开终端:
    • 进入项目目录,执行:pod init操作
    • 之后会生成Profile文件,打开Profile文件(记事本、Xcode打开即可,推荐Xcode打开)
    • 将下面代码粘贴过去
    • 回到终端,执行pod install --no-repo-update命令
    • 关闭程序,通过工作空间打开项目
  1. platform :ios, '8.0'
  2. use_frameworks!
  3. target 'DYZB' do
  4. pod 'Alamofire'
  5. end

工具类的封装

  • 在实际开发中,为了不过于依赖某一个第三方框架,我们经常会在使用的方式封装到某一个工具类中,以便于某天该框架不更新时不至于很多地方都需要修改。
    • 比如之前的ASIHTTPRequest就出现了不更新的情况
  • 因此,我们在使用之前先封装一个简单的工具类。之后在其它任何地方发送网络请求,都依赖于自己的工具类。如果某一天该框架不再更新,我们希望更换框架,只修改工具类中代码即可。
  • 创建工具类:NetworkTools
    • 为工具类提供类方法,方便调用
    • 请求时,需要传入请求方式、地址(URL)、参数(parameters)、回调闭包
    • 在请求方法中,使用Alamofire发送网络请求
  1. import UIKit
  2. import Alamofire
  3. enum MethodType {
  4. case GET
  5. case POST
  6. }
  7. class NetworkTools {
  8. }
  9. extension NetworkTools {
  10. // 封装请求方法
  11. class func requestData(type : MethodType, urlString : String, parameters : [String : AnyObject], finishedCallback : (result : AnyObject) -> ()) {
  12. // 判断请求范式
  13. let method = type == .GET ? Alamofire.Method.GET : Alamofire.Method.POST
  14. // 发送请求,并且将请求到的数据回调
  15. Alamofire.request(method, urlString, parameters: parameters).responseJSON { (respose) in
  16. guard let result = respose.result.value else {
  17. print(respose.result.error)
  18. return
  19. }
  20. finishedCallback(result: result)
  21. }
  22. }
  23. }

MVVM介绍

  • 前面环境配置完成后,我们要请求首页数据。
  • 数据请求在哪里发送了?

MVC模式

  • Model-View-Controller是一个Apple官方推荐的权威范式。
    • 苹果使用的MVC的定义是这么说的:所有的对象都可以被归类为一个model,一个view,或是一个controller。
  • 那么把网络代码放哪里?
    • 我们知道,因为控制器是一个大管家,那么不知道如何安放的代码就放置在控制器中
    • 是的,传统的MVC方式我们经常这么做。
  • 该做法的弊端在哪里?
    • 由于大量的代码被放进view controller,导致控制器变的相当臃肿。
    • 在iOS开发中有的view controller里绵延成千上万行代码的事并不是前所未见的
    • 厚重的View Controller很难维护(由于其庞大的规模);包含几十个属性,使他们的状态难以管理;遵循许多协议(protocol),导致协议的响应代码和controller的逻辑代码混淆在一起。
  • 那么究竟应该放在哪里?
    • 显然MVC的3大组件根本没有适合放这些代码的地方。

MVVM模式

  • MVVM来自微软。和MVC很像,并且引入新的组件ViewModel
    • view model是一个放置用户输入验证逻辑,视图显示逻辑,发起网络请求和其他各种各样的代码的极好的地方。
    • 由于展示逻辑放在了view model中(比如网络请求、请求后的数据解析等等),视图控制器本身就会不再臃肿。
  • 因此,该项目中的请求数据,统一交给ViewModel管理。每一个控制器对应一个属于自己的ViewModel。

发送网络请求

接口解析

  • 在推荐的数据展示中,有三个请求
    • 最热数据请求
    • 颜值数据请求
    • 其它数据请求
  • 因此我们需要分别发送三个请求,并且当所有的请求数据拿到之后,对数据进行整理分组排序。(因为界面中有用到分组)
  • 因此请求分成五步曲
    • 请求游戏数据,并且转成模型对象
    • 请求颜值数据,并且转成模型对象
    • 请求热门数据,并且转成模型对象
    • 对数据进行整理,并且放入大的数组中
    • 将数据传递给外面控制器,展示数据

接口描述

  • 接口名称:热门数据(后面热门游戏)
  • 接口地址:http://capi.douyucdn.cn/api/v1/getHotCate
  • 请求参数:
参数名称参数说明time获取当前时间的字符串limit获取数据的个数offset偏移的数据量
  • 接口名称:颜值数据(第二组颜值数据)
  • 接口地址:http://capi.douyucdn.cn/api/v1/getVerticalRoom
  • 请求参数:
参数名称参数说明time获取当前时间的字符串limit获取数据的个数offset偏移的数据量
  • 接口名称:大数据数据(第一组热门数据)
  • 接口地址:http://capi.douyucdn.cn/api/v1/getbigDataRoom
  • 请求参数:</br>
参数名称参数说明time获取当前时间的字符串
  1. class RecommendViewModel: NSObject {
  2. lazy var anchorGroups = [AnchorGroup]()
  3. private lazy var hotAnchorGroup = AnchorGroup()
  4. private lazy var prettyAnchorGroup = AnchorGroup()
  5. }
  6. extension RecommendViewModel {
  7. func requestRecommendData(RecommendDataCallback : () -> ()) {
  8. // 0.定义处理闭包
  9. func parserData(result : AnyObject) -> [[String : NSObject]]? {
  10. // 1.将结果转成字典
  11. guard let resultDict = result as? [String : NSObject] else { return nil }
  12. // 2.通过data的key取出对应的数组
  13. return resultDict["data"] as? [[String : NSObject]]
  14. }
  15. // 1.请求热门数据
  16. let group = dispatch_group_create()
  17. dispatch_group_enter(group)
  18. NetworkTools.requestData(.GET, urlString: "http://capi.douyucdn.cn/api/v1/getbigDataRoom", parameters: ["time" : NSDate.getNowTimeString()]) { (result) in
  19. // 1.获取解析的字典数据
  20. guard let dictArray = parserData(result) else { return }
  21. // 2.创建对象
  22. self.hotAnchorGroup.tag_name = "热门"
  23. self.hotAnchorGroup.icon_name = "home_header_hot"
  24. var tempArray = [AnchorModel]()
  25. for dict in dictArray {
  26. tempArray.append(AnchorModel(dict: dict))
  27. }
  28. self.hotAnchorGroup.anchors = tempArray
  29. dispatch_group_leave(group)
  30. }
  31. // 2.请求颜值数据
  32. dispatch_group_enter(group)
  33. NetworkTools.requestData(.GET, urlString: "http://capi.douyucdn.cn/api/v1/getVerticalRoom", parameters: ["limit":"4", "offset" : "0", "time" : NSDate.getNowTimeString()]) { (result) in
  34. // 1.获取解析的字典数据
  35. guard let dictArray = parserData(result) else { return }
  36. // 2.创建对象
  37. self.prettyAnchorGroup.tag_name = "颜值"
  38. self.prettyAnchorGroup.icon_name = "home_header_phone"
  39. var tempArray = [AnchorModel]()
  40. for dict in dictArray {
  41. tempArray.append(AnchorModel(dict: dict))
  42. }
  43. self.prettyAnchorGroup.anchors = tempArray
  44. dispatch_group_leave(group)
  45. }
  46. // 3.请求游戏数据
  47. dispatch_group_enter(group)
  48. NetworkTools.requestData(.GET, urlString: "http://capi.douyucdn.cn/api/v1/getHotCate", parameters: ["limit":"4", "offset" : "0", "time" : NSDate.getNowTimeString()]) { (result) in
  49. // 1.获取解析的字典数据
  50. guard let dictArray = parserData(result) else { return }
  51. // 2.解析数据
  52. for dict in dictArray {
  53. self.anchorGroups.append(AnchorGroup(dict: dict))
  54. }
  55. dispatch_group_leave(group)
  56. }
  57. // 4.所有数据加载完成
  58. dispatch_group_notify(group, dispatch_get_main_queue()) {
  59. self.anchorGroups.insert(self.prettyAnchorGroup, atIndex: 0)
  60. self.anchorGroups.insert(self.hotAnchorGroup, atIndex: 0)
  61. RecommendDataCallback()
  62. }
  63. }
  64. }

展示数据

普通数据展示(文本数据)

  • 将数据回调给控制器后,控制器拿到数据展示数据即可
    • 将Cell中的控件拖入属性
    • 定义模型对象
  • 在控制器中拿到模型,并且将模型传入给Cell进行展示

图片数据展示

  • 在设置网络图片时,OC中经常使用SDWebImage框架。
  • 相同的原因,我们使用的Swift项目,因此这里我使用onevcat, 也就是喵神写的Kingfisher
  • 在Profile中加入框架, 并且执行安装命令
    • pod install —no-repo-update
  1. platform :ios, '8.0'
  2. use_frameworks!
  3. target 'DYZB' do
  4. pod 'Alamofire'
  5. pod 'Kingfisher'
  6. end
  • 使用代码
  1. srcImageView.kf_setImageWithURL(NSURL(string: anchor?.vertical_src ?? "")!)
0 0
原创粉丝点击