本節主題（簡單的網路部分）
- 原始碼地址在文章末尾
- 達成效果
注：本文API使用HaoService資料平臺
前言
- 廢話不說了，簡單來說，行動網路很重要，下面讓我們來實現一個簡單的Demo：對網路資料的請求，並接收與展示吧。注意：是簡單的！很簡單的！
準備工作
1.檔案目錄結構示圖（按照MVC分層）
- Controller: CYXOneViewController
- Model: CYXMenu
- View: CYXCell
2.使用cocoapods整合第三方框架
注：這裡就直接使用cocoapods外掛安裝第三方框架了
- 這裡要使用到的三方框架包括AFNetworking、MJExtension、SDWebImage
框架用途簡介
- AFNetworking：用於傳送網路請求
- MJExtension：用於把網路返回的JSON格式資料轉換為模型屬性
- SDWebImage：用於下載網路圖片
基本思路簡述
1.在CYXOneViewController中使用AFNetworking傳送GET請求,得到伺服器返回的JSON格式的資料
2.使用MJExtension把JSON格式的資料轉為模型CYXMenu對應的屬性
3.在- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath;方法內根據索引indexPath.row把每一行Cell的Model屬性傳遞給自定義Cell(CYXCell)
4.在自定義Cell(CYXCell)內接收模型資料並初始化Cell的內部控制元件
5.不要忘記在AFN框架內的GET請求成功呼叫的block中重新整理TableView的資料
詳細實現 上程式碼
第一步：設計模型屬性（CYXMenu.h），這裡的屬性名根據API文件設計，本Demo只是使用了其中幾個簡單的
|
1 2 3 4 5 6 7 8 9 10 11 12 |
#import <Foundation/Foundation.h> @interface CYXMenu : NSObject /** 圖片 */ @property (copy, nonatomic) NSString * albums; /** 標題 */ @property (nonatomic,copy) NSString *title; /** 材料 */ @property (nonatomic,copy) NSString *ingredients; @end |
第二步：自定義cell（這裡使用Xib了）
2.1 拖控制元件到Xib中（見檔案目錄結構圖）
2.2 在CYXCell.h中定義一個模型屬性，用於供外界（CYXOneViewController）訪問並傳遞模型進來。
|
1 2 3 4 5 6 7 8 9 10 |
#import <UIKit/UIKit.h> @class CYXMenu; @interface CYXCell : UITableViewCell /** 選單模型 */ @property (strong, nonatomic) CYXMenu * menu; @end |
2.3 在CYXCell.m中實現menu屬性的- (void)setMenu:(CYXMenu *)menu方法，將取到的menu模型值給cell自身的控制元件賦值
由於這裡需要通過URL下載網路圖片，使用到了SDWebImage框架
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
#import "CYXCell.h" #import "CYXMenu.h" #import <UIImageView+WebCache.h> @interface CYXCell () @property (weak, nonatomic) IBOutlet UIImageView *albumsImageView; @property (weak, nonatomic) IBOutlet UILabel *titleLable; @property (weak, nonatomic) IBOutlet UILabel *ingredientsLabel; @end @implementation CYXCell - (void)setMenu:(CYXMenu *)menu{ _menu = menu; // 利用SDWebImage框架載入圖片資源 [self.albumsImageView sd_setImageWithURL:[NSURL URLWithString:menu.albums]]; // 設定標題 self.titleLable.text = menu.title; // 設定材料資料 self.ingredientsLabel.text = menu.ingredients; } @end |
第三步，到這裡我們需要在CYXOneViewController.m內實現 網路資料請求/JSON資料轉模型/給自定義cell傳遞模型資料 的操作
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 |
#import "CYXOneViewController.h" #import "CYXCell.h" #import "CYXMenu.h" #import <AFNetworking.h> #import <MJExtension.h> @interface CYXOneViewController () /** 存放資料模型的陣列 */ @property (strong, nonatomic) NSMutableArray * menus; @end @implementation CYXOneViewController #pragma mark - 全域性常量 // 傳送請求URL static NSString * const CYXRequestURL = @"http://apis.haoservice.com/lifeservice/cook/query?"; // 重用cell識別符號 static NSString * const CYXCellID = @"cell"; #pragma mark - life cycle 生命週期方法 - (void)viewDidLoad { [super viewDidLoad]; self.tableView.rowHeight = 90; // 註冊重用Cell [self.tableView registerNib:[UINib nibWithNibName:NSStringFromClass([CYXCell class]) bundle:nil] forCellReuseIdentifier:CYXCellID]; // 呼叫載入資料方法 [self loadData]; self.view.backgroundColor = [UIColor whiteColor]; } #pragma mark - private methods 私有方法 /** * 傳送請求並獲取資料方法 */ - (void)loadData{ // 請求引數（根據介面文件編寫） NSMutableDictionary *params = [NSMutableDictionary dictionary]; params[@"menu"] = @"蕃茄"; params[@"pn"] = @"1"; params[@"rn"] = @"20"; params[@"key"] = @"2ba215a3f83b4b898d0f6fdca4e16c7c"; // 在AFN的block內使用，防止造成迴圈引用 __weak typeof(self) weakSelf = self; [[AFHTTPSessionManager manager] GET:CYXRequestURL parameters:params success:^(NSURLSessionDataTask * _Nonnull task, id _Nonnull responseObject) { NSLog(@"請求成功"); // 利用MJExtension框架進行字典轉模型 weakSelf.menus = [CYXMenu objectArrayWithKeyValuesArray:responseObject[@"result"]]; // 重新整理資料（若不重新整理資料會顯示不出） [weakSelf.tableView reloadData]; } failure:^(NSURLSessionDataTask * _Nonnull task, NSError * _Nonnull error) { NSLog(@"請求失敗 原因：%@",error); }]; } #pragma mark - UITableviewDatasource 資料來源方法 - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{ return self.menus.count; } - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{ CYXCell *cell = [tableView dequeueReusableCellWithIdentifier:@"cell"]; cell.menu = self.menus[indexPath.row]; return cell; } #pragma mark - UITableviewDelegate 代理方法 - (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath{ // 點選了第indexPath.row行Cell所做的操作 } @end |
到這裡只是簡單實現了網路資料的請求，還有很多細節，例如下拉/上拉重新整理，、cell的點選事件等等，有時間再討論了。