网络数据的展示

需要先添加Kingfisher和MJRefresh第三方数据库。

1.在Main视图控制器上添加cell和网络数据请求、刷新控件

//MARK: - 属性

    1.当前页面的数据地址
    let requestUrl = "http://0.0.0.0:tuicool@api.tuicool.com/api/articles/hot.json"
    2.数据源数组
    lazy var datatArray:[ArticleModel] = {
    
        return [ArticleModel]()
    }()
    //MARK: - 生命周期
    override func viewDidLoad() {
        super.viewDidLoad()
        
       
        //1.下载数据
        self.getData()
        //2.注册cell
        self.tableView.registerNib(UINib.init(nibName: "ArticleCell", bundle: nil), forCellReuseIdentifier: "cell")
        //3.设置cell的高度
        self.tableView.rowHeight = 120
        //4.添加刷新控件
        self.addRefView()

        
    }

}
//MARK: - 添加刷新控件
extension MainController{

    func addRefView() {
        
        //1.添加下拉刷新
        self.tableView.mj_header = MJRefreshNormalHeader.init(refreshingBlock: { 
            print("刷新数据")
            //重新请求数据
            self.getData()
            
        })
        
        //2.添加上拉加载
        self.tableView.mj_footer = MJRefreshAutoNormalFooter.init(refreshingBlock: { 
            print("加载更多")
            //请求更多的数据
            self.getData()
        })
    
        
        
    }
}
//MARK: - 获取网络数据
extension MainController{

    func getData() {
        
        //判断是否是下拉刷新
        if self.tableView.mj_header.isRefreshing() {
            
            self.datatArray.removeAll()
        }
        ```


 1.异步请求数据
    Alamofire.request(.GET, self.requestUrl, parameters: ["pn":self.datatArray.count/20,"size":20], encoding: .URL, headers: nil).responseJSON(options: .MutableContainers) { (data) in
        print("获取到数据")
        
        //获取最外层的字典
        let json = data.result.value
        
        //获取articles对应的数组
        if let tarry = json?.objectForKey("articles"){
            //强制转换成数组
            let array = tarry as! [NSDictionary]
            
            //遍历数组拿到字典
            for dict in array{
            
                //根据字典创建数据模型
                let model = ArticleModel.init(dict: dict)
                
                //将模型存储到数据源数组中
                self.datatArray.append(model)
            }
            
            //让刷新控件停止刷新
            self.tableView.mj_footer.endRefreshing()
            self.tableView.mj_header.endRefreshing()
            
            //刷新tableView
            self.tableView.reloadData()
            
        }
    }
}

}

MARK: - tableView 协议方法
extension MainController{

1.设置cell的个数
override func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {

    print(self.datatArray.count)
    return self.datatArray.count
}

2.创建cell
override func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
    //创建cell
    let cell = tableView.dequeueReusableCellWithIdentifier("cell", forIndexPath: indexPath) as! ArticleCell
    //刷新数据
    cell.model = self.datatArray[indexPath.row]
    
    //返回cell
    return cell
    
}


3.cell被点击
override func tableView(tableView: UITableView, didSelectRowAtIndexPath indexPath: NSIndexPath) {
    
    //跳转到详情页
    let detailC = DetailViewController()
    //传值(将被点击的cell对应的数据模型的id属性传到下一个界面)
    detailC.id = self.datatArray[indexPath.row].id
    
    self.navigationController?.pushViewController(detailC, animated: true)
}

}

####2.设置属性、拼接地址和异步请求

//MARK: - 属性
var id:String? = nil
let webView = UIWebView()

   
override func viewDidLoad() {
    super.viewDidLoad()
    //设置背景颜色
    self.view.backgroundColor = UIColor.whiteColor()
    
    //创建webView
    self.webView.frame = self.view.bounds
    self.view.addSubview(self.webView)
    
    self.getData()
}

}

extension DetailViewController{

func getData() {
    
    1.拼接请求地址
    let urlStr = "http://0.0.0.0:tuicool@api.tuicool.com/api/articles/\(self.id!).json?ispad=1&needimage_meta=1"
    print(urlStr)
        
 2.异步请求
    Alamofire.request(.GET, urlStr).responseJSON(options: .MutableContainers) { (data) in
        //拿到请求结果的值
        let json = data.result.value
        
        if let tdict = json?.objectForKey("article"){
        
            //强制转换成字典
            let dict = tdict as! NSDictionary
            
            //a.获取到html代码对应的字符串
            let content = dict["content"] as! String
            //b.获取网页地址
            let urlstr2 = dict["url"] as! String
            let url = NSURL.init(string: urlstr2)
            
            //将网页加载到webView上
            //加载代码
            //self.webView.loadHTMLString(content, baseURL: url)
            self.webView.loadRequest(NSURLRequest.init(URL: url!))
          
        }
        
    }
    
}

}

####3.添加Model数据
~~~
 var id = ""
    var feed_title = ""
    var img:String? = nil
    var time = ""
    var title = ""
    
    
    init(dict:NSDictionary) {
        self.id = dict["id"] as! String
        self.feed_title = dict["feed_title"] as! String
        self.img = dict["img"] as? String
        self.time = dict["time"] as! String
        self.title = dict["title"] as! String
    }
~~~
    

####4.展示数据
~~~
var model:ArticleModel? = nil{
        didSet{
        
            //1.通过Kingfisher去异步加载网络图片
            //参数1:图片的网络地址
            if let imageurl = model?.img {
                
                self.coverImageView.kf_setImageWithURL(NSURL.init(string: imageurl)!, placeholderImage: nil)
            }
            
            titleLabel.text = model?.title
            
            subTitleLabel.text = (model?.feed_title)! + "   " + (model?.time)!
            
            
        }
    }
~~~
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容