前言

更多技術整理，歡迎關注本人博客www.tomtwos.com

參考資料：

Displaying a List with SwiftUI from a remote JSON file

SwiftUI+mysql 相關概念

• iPhone應用程序將無法直接連接到我們的MySQL數據庫。我們需要創建一個可以促進數據庫操作的中間人。這就是PHP Web服務的來源。Web服務將位于我們的Web服務器上，當iPhone應用向其發送請求時，它將在數據庫中查詢所請求的數據，然后將其返回給iPhone應用。以它可以理解的格式。
• 用PHP編寫您的Web服務，而且PHP和MySQL通常并駕齊驅
• 我們使用PHP服務時，我們將結果作為JSON返回。

SwiftUI顯示mysql的數據前的準備

在開始本教程學習前需要了解MySQLi，知道mysql通過php將表數據轉為json格式的步驟。SwiftUI實際處理的是mysql的json格式的數據。

三個鏈接

TOM教程：什么是MySQLi？

TOM教程：在 ubuntu 上運行 php 腳本文件

TOM教程：php獲取mysql表數據，并編碼為json

SwiftUI顯示mysql的數據的具體步驟

step1 為json定義Model

為json的數據定義一個模型，該模型是具有Decodable和Identifiable協議的struct。

• Decodable能夠從JSON文件中對其進行解碼
• Identifiable能夠與List一起列出。

比如我顯示holiday，代碼如下，CodingKeys能夠將JSON key名稱與您創建的Model的變量名稱進行映射。（可以將description映射為festival，在Model中可以自定義名稱，可以和數據庫中的名稱不同。此處不做演示）

struct Holiday: Decodable, Identifiable {
    public var id: String
    public var year: String
    public var month: String
    public var day: String
    public var description: String
    
    enum CodingKeys: String, CodingKey {
        case id = "id"
        case year = "year"
        case month = "month"
        case day = "day"
        case description = "description"
    }
}

step2 讀取并解碼json

Combine框架提供了一個聲明性的Swift API，用于隨時間處理值。這些值可以表示多種異步事件。 Combine聲明發布者公開隨時間變化的值，訂閱者從發布者那里接收這些值。

@ObervableObject：具有發布者功能的一種對象，該對象在對象更改之前發出。默認情況下，@ObservableObject會合成一個objectWillChange發布者，該發布者會在其@Published屬性中的任何一個發生更改之前發出更改的值。
@Published修飾holidays數組后，當movies發生改變是將通知所有的ObserableObject。

load()方法從網絡異步獲取JSON數據，一旦數據加載完畢，我們便將其分配給movie數組。movie數組更改時，它將向訂戶發送事件。

public class HolidayFetcher: ObservableObject {
    @Published var holidays = [Holiday]()
    init(){
        load()
    }
    func load() {
        let url = URL(string: "http://120.77.34.180/holidays.php")!
        URLSession.shared.dataTask(with: url) {(data,response,error) in
            do {
                if let d = data {
                    let decodedLists = try JSONDecoder().decode([Holiday].self, from: d)
                    DispatchQueue.main.async {
                        self.holidays = decodedLists
                    }
                }else {
                    print("No Data")
                }
            } catch {
                print ("Error")
            }
        }.resume()
    }
}

step3 顯示json數據

struct ListJsonView: View {
    @ObservedObject var fetcher = HolidayFetcher()
    var body: some View {
        VStack {
            List(fetcher.holidays) { holiday in
                HStack {
                    Text(holiday.year)
                    Text(holiday.month)
                    Text(holiday.day)
                    Text(holiday.description)
                        .font(.system(size: 20))
                        .foregroundColor(Color.gray)
                }
            }
        }
    }
}

step4 測試驗證

編譯通過后預覽，屏幕出現數據與數據庫的Holiday表數據一致，測試成功。

step5 設置外部來源提取權限（選做）

如果前面測試正常，則無需step5，如果顯示異常，按照下面步驟操作一遍。

Info.plist→App Transport Security Settings→Allows Arbitrary Loads→yes，通過以上設置允許外部數據載入

完整代碼

//
//  ListJsonView.swift
//  mysql_test
//
//  Created by Tom on 31/3/2020.
//  Copyright  2020 Tom. All rights reserved.
//

import Foundation
import SwiftUI
import Combine

struct ListJsonView: View {
    @ObservedObject var fetcher = HolidayFetcher()
    var body: some View {
        VStack {
            List(fetcher.holidays) { holiday in
                HStack {
                    Text(holiday.year)
                    Text(holiday.month)
                    Text(holiday.day)
                    Text(holiday.description)
                        .font(.system(size: 20))
                        .foregroundColor(Color.gray)
                }
            }
        }
    }
}

struct ListJsonView_Previews: PreviewProvider {
    static var previews: some View {
        ListJsonView()
    }
}

public class HolidayFetcher: ObservableObject {
    @Published var holidays = [Holiday]()
    init(){
        load()
    }
    func load() {
        let url = URL(string: "http://120.77.34.180/holidays.php")!
        URLSession.shared.dataTask(with: url) {(data,response,error) in
            do {
                if let d = data {
                    let decodedLists = try JSONDecoder().decode([Holiday].self, from: d)
                    DispatchQueue.main.async {
                        self.holidays = decodedLists
                    }
                }else {
                    print("No Data")
                }
            } catch {
                print ("Error")
            }
        }.resume()
    }
}

struct Holiday: Decodable, Identifiable {
    public var id: String
    public var year: String
    public var month: String
    public var day: String
    public var description: String
    
    enum CodingKeys: String, CodingKey {
        case id = "id"
        case year = "year"
        case month = "month"
        case day = "day"
        case description = "description"
    }
}