需要先添加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)!
}
}
~~~