实战教程·元宇宙来了,准备好你的电子名片了吗?(五)

语言: CN / TW / HK

theme: smartblue

前提回顾

在前几个章节中,我们已经完成了Linkworld的基本功能,但要达到最小MVP产品还有些距离。完成的功能目前只能在模拟器中使用,缺少本地化存储、网络请求和编辑、删除等功能,这尚未达到最小MVP的要求。

MVP是最小的可用产品,其核心在于最小和可用。“最小”代表着该产品可以反复迭代且迭代周期短,“可用”代表该产品是可以满足用户预期的可以交付的产品,而不仅仅是demo。

因此我们继续深入完善Linkworld这款产品,实现最小MVP产品。

MVVM架构模式:Model-View-ViewModel

通常在SwiftUi开发过程中,开发者们会使用MVVM开发架构模式进行项目搭建。MVVM全称为Model-View-ViewModel,即模型-视图-视图模型。在该架构模式中,我们建立数据模型将数据进行抽象和分离,然后单独创建视图,最后使用ViewModel进行双向绑定链接数据和视图。

在本项目中,我们创建的Model文件便是Model模型部分,而ContentView、NewView、HomePageView是View视图部分,而我们实现的单独抽离ViewModel模型视图部分内容,因此在视图与视图之间,视图与模型之间都建立了多次的变量声明和双向绑定,示例:indexURL。

下面我们来创建ViewModel视图模型并在该项目中使用它,创建一个新的Swift文件,命名为ViewModel,如下图所示:

为了便于文件管理,我们可以创建对应的文件夹用于存放不同内容的文件,使得文件目录更加清晰明了,如下图所示:

ViewModel模型视图文件作为链接数据模型和视图之前的“联络官”,需要给视图传递来自于Model的数据,因此我们可以创建一个结构体,遵循ObservableObject协议,ObservableObject协议可以在数据更新时通知视图更新内容。

然后在ViewModel模型视图内,我们使用建立发布器来创建来自Model的数组结构,如下代码所示:

``` import Foundation import SwiftUI

class ViewModel:ObservableObject { @Published var models = Model

} ```

URLSession实例:创建网络请求

创建好ViewModel模型视图后,我们来学习使用URLSession创建一个网络请求,在学习之前我们先来了解一个JSON文件的相关知识。

JSON是一种文件格式,和TXT文本一样,JSON使用带有固定格式的纯文本创建数据集。我们在搭建NewView添加身份卡视图时曾实现了新增身份卡的方法,即赋值给符合Model格式的变量,然后将Model格式的数据添加到个人主页的List中。

JSON文件则是包含了所有符合Model格式的数据的数组集合,我们可以创建好一个JSON文件及其内容,并通过网络请求将JSON文件请求到本地并解析加载到List中。

我们先来看看JSON文件的格式,如下图所示:

[ { "platformIcon": "icon_juejin", "title": "掘金签约作者", "platformName": "稀土掘金技术社区", "indexURL": "juejin.cn/user/3897092103223517" }, { "platformIcon": "icon_aliyun", "title": "专家博主", "platformName": "阿里云社区", "indexURL": "developer.aliyun.com/profile/expert/376pj7xeqgqjy" } ]

上述JSON文件是通过一个在线JSON文件生成器(如npoint.io、fastmock.site等等)生成的准备代码,其中由“[]”包裹的是数组,而“{}”包裹的是数组中的对象,我们创建了2个对象,且数据模型格式都符合Model数据模型定义的参数。

通过第三方网站可以生成一个API接口的链接地址,我们声明一个常量参数存储它,如下代码所示:

let JsonURL = "https://api.npoint.io/c51968c99a2a087dac5e"

当然,我们也可以使用测试工具测试创建的JSON文件地址返回的结果是否正确,可以使用postman或者apifox测试软件进行测试,避免在项目开发时请求数据失败而导致开发卡点的问题,如下图所示:

上图中,使用的测试工具是apifox。使用方法也很简单,创建一个接口并将刚刚生成的地输入进去,并设置好对应的Query参数,点击运行,便可查看该接口返回状态及结果。熟练使用接口测试工具,可以帮助我们节省开发时间。

回归正题,我们在ViewModel视图模型中使用URLSession实例创建一个网络请求的方法,如下代码所示:

//网络请求 func getData() { let session = URLSession(configuration: .default) session.dataTask(with: URL(string: JsonURL)!) { data, _, _ in guard let jsonData = data else { return } do { let data = try JSONDecoder().decode([Model].self, from: jsonData) self.models = data } catch { print(error) } } .resume() }

上述代码中,我们创建了一个网络请求方法getData,在方法里,我们使用URLSession创建网络请求,声明了常量session来使用URLSession API,然后加载的目标地址为声明的JsonURL,并执行下载数据,当下载成功后,将按照Model数据模型格式的数组加载到models数组里,若加载失败则打印错误信息。

然后我们可以在初始化时调用getData获得数据方法来加载数据,如下代码所示:

init(){ getData() }

由于使用JSONDecoder编码器,因此Model数据模型还需要设置遵循可编码性 Codable 协议,才能避免报错。又因为id在JSON文件中不存在,因此需要告诉编译器使用某些CodingKeys,不包括id。如下代码所示:

enum CodingKeys : String, CodingKey { case platformIcon, title, platformName, indexURL }

上述代码中,我们使用枚举类CodingKeys,用来指定Model数据模型中应该接收哪些数据,用于排除请求JSON时缺少ID的问题。另外CodingKey也可以作为关键字替换的方法,当实际开发过程中后端与前端定义的字段名称不一样时,也可是使用该方法进行字段对照映射,这点后面有时间会讲到。

ViewModel模型视图创建完成后,我们来到ContentView视图,要使用ViewModel模型视图链接Model和View,我们需要使用新增一个状态变量,如下代码所示:

@StateObject var viewModel = ViewModel()

声明状态变量viewModel作用是初始化ViewModel并交由SwiftUI进行管理存储,这样我们就可以在View视图中使用ViewModel模式视图中的所有方法和变量。

紧接着,我们将原来在List使用的用@State声明的models数组替换成viewModel中的数组models,如下图所示:

如此,通过URLSession API,我们从网络请求了JSON文件数据,并把它解析到了LIst中并展示出来了。如下图所示:

方法优化:优化“添加身份卡”方法

接下来我们来优化添加身份卡的方法,在ViewModel模型视图中,我们使用@Published声明了数据模型数组models,并在ContentView页面中替换了使用@State声明的models数组。

因此我们可以将所有网络请求、新增、编辑、删除的方法都放在ViewModel模型视图里,然后在所有页面建立链接,新增方法如下代码所示:

// 创建身份卡 func addCard(newItem: Model) { models.append(newItem) }

上述代码中,我们创建了一个方法addCard,通过传入符合Model数据模型格式的常量newItem中,然后将newItem添加到数组models中,完成添加数据的动作。

接下来回到 NewView中,我们引用ViewModel视图模型,并替换原来使用@Binding双向绑定声明的数组models,如下代码所示:

var viewModel:ViewModel

这时候可能会报错,没有关系,这是因为原来@Binding双向绑定声明的数组models建立的关系被破坏掉了,而为什么不像ContentView那样使用@StateObject var viewModel = ViewModel()声明,这是因为在添加页面,添加的数据要加载到ContentView的List列表中,进行数据之间的传递。

添加身份卡的方法需要替换原有的models,换成viewModel视图模型中的addCard方法,如下代码所示:

self.viewModel.addCard(newItem: newItem)

并且NewView页面预览时,需要赋予变量viewModel值,如下代码所示:

NewView(viewModel: ViewModel())

上述代码中,我们使用ViewModel视图模型代替纯Model数据模型的数组,并将原来的添加身份卡方法替换为ViewModel创建好的addCard方法,为了预览当前NewView页面,还需要给NewView声明的viewModel变量赋予默认值ViewModel()。

在NewView页面调整后,由于之前我们还在引用NewView视图的相关页面进行了绑定,这时候要回到ContentView视图中,解除之前的绑定,如下图所示:

NewView(viewModel: viewModel)

如此,我们便实现了使用Model-View-ViewModel架构模式调整原有项目代码,并实现引用ViewModel视图模型中的方法来创建视图,做到将页面和数据分隔开,使得代码进一步精炼。

方法新增:增加“删除身份卡”的方法

调整完“添加身份卡”方法后,我们来补充“删除身份卡”方法。删除身份卡的方法和添加身份卡方法一样,我们可以在ViewModel视图模型中创建,如下代码所示:

// 删除身份卡片 func deleteItem(itemId: UUID) { models.removeAll(where: {$0.id == itemId}) }

上述代码中,我们创建了一个删除身份卡片的方法deleteItem,传入身份卡片数据的UUID,作为索引找到对应的身份卡片,然后调用removeAll方法,删除models数组中对应UUID对传入的UUID的数据,实现删除数据的操作。

回到ContentView页面,我们创建一个简单的删除身份卡的交互,使用contextMenu上下文菜单按钮搭建删除交互,如下代码所示:

// 卡片视图 CardView(platformIcon: item.platformIcon, title: item.title, platformName: item.platformName, indexURL: item.indexURL) // 长按唤起删除 .contextMenu { Button(action: { self.viewModel.deleteItem(itemId: item.id) }, label: { Text("删除") }) }

上述代码中,我们给CardView卡片视图添加了一个上下文菜单的交互操作,当点击CardView卡片时,唤起上下文菜单,点击菜单按钮调用viewModel视图模型的deleteItem删除方法,指定删除的卡片id为点击卡片的UUID。

我们长按点击卡片预览下效果,如下图所示:

上面的方法是使用contextMenu上下文菜单实现身份卡片的方法,比较简单。

项目预览

完成后,我们在模拟器中预览下效果,如下图所示:

e50ac57a-bdfb-4c7a-9163-cc77edd21d4d.gif

项目小结

在本章中,我们学习了Model-View-ViewModel模型-视图-模型视图架构模式进行项目的开发,将使用URLSession API实现网络请求,将JSON数据文件从云端请求到本地渲染,其中对于JSON文件缺少UUID的处理至关重要。

功能方法方面,我们在ViewModel视图模型中创建了addCard添加身份卡方法替换了原有在View视图中实现的操作逻辑,进一步地,我们创建了deleteItem删除身份卡方法,通过识别当前卡片的UUID,指定卡片进行删除操作。

自此,Linkworld项目的功能越来越完善了,但还不够好。接下来的章节,我们介绍另一种删除数据项的交互,以及编辑页面、排序等功能的实现,请保持期待吧~

版权声明

本文为稀土掘金技术社区首发签约文章,14天内禁止转载,14天后未获授权禁止转载,侵权必究!

「其他文章」