《仿盒马》app开发技术分享-- 地址管理页（端云一体）

开发准备

上一节我们实现了个人信息页面的信息展示和页面修改，并且实现了数据的同步修改，这一节我们来实现电商应用里比较重要的模块，地址模块。首先我们来实现地址的展示。

功能分析

地址列表的展示相对来说是比较简单的，首先我们要新增对应的表，然后在云端先添加几条测试数据，然后在页面中实现当前用户对应的地址查询，在列表组件中进行展示

代码实现

首先我们创建对应的表
{
“objectTypeName”: “address_list”,
“fields”: [
{“fieldName”: “id”, “fieldType”: “Integer”, “notNull”: true, “belongPrimaryKey”: true},
{“fieldName”: “user_id”, “fieldType”: “Integer”, “notNull”: true, “defaultValue”: 0},
{“fieldName”: “administrativeArea”, “fieldType”: “String”},
{“fieldName”: “locality”, “fieldType”: “String”},
{“fieldName”: “subLocality”, “fieldType”: “String”},
{“fieldName”: “placeName”, “fieldType”: “String”},
{“fieldName”: “latitude”, “fieldType”: “String”},
{“fieldName”: “longitude”, “fieldType”: “String”},
{“fieldName”: “nikeName”, “fieldType”: “String”},
{“fieldName”: “phone”, “fieldType”: “String”},
{“fieldName”: “address”, “fieldType”: “String”}
],
“indexes”: [
{“indexName”: “field1IndexId”, “indexList”: [{“fieldName”:“id”,“sortType”:“ASC”}]}
],
“permissions”: [
{“role”: “World”, “rights”: [“Read”, “Upsert”, “Delete”]},
{“role”: “Authenticated”, “rights”: [“Read”, “Upsert”, “Delete”]},
{“role”: “Creator”, “rights”: [“Read”, “Upsert”, “Delete”]},
{“role”: “Administrator”, “rights”: [“Read”, “Upsert”, “Delete”]}
]
}
然后我们生成对应的实体类，和db类

db
import { cloudDatabase } from ‘@kit.CloudFoundationKit’;

class address_list extends cloudDatabase.DatabaseObject {
public id: number;
public user_id = 0;
public administrativeArea: string;
public locality: string;
public subLocality: string;
public placeName: string;
public latitude: string;
public longitude: string;
public nikeName: string;
public phone: string;
public address: string;

public naturalbase_ClassName(): string {
return ‘address_list’;
}
}

export { address_list };
实体类

class AddressList {
id: number;
user_id: number = 0;
administrativeArea: string;
locality: string;
subLocality: string;
placeName: string;
latitude: string;
longitude: string;
nikeName: string;
phone: string;
address: string;

constructor() {
}getFieldTypeMap():  Map<string, string> {let fieldTypeMap = new Map<string, string>();fieldTypeMap.set('id', 'Integer');fieldTypeMap.set('user_id', 'Integer');fieldTypeMap.set('administrativeArea', 'String');fieldTypeMap.set('locality', 'String');fieldTypeMap.set('subLocality', 'String');fieldTypeMap.set('placeName', 'String');fieldTypeMap.set('latitude', 'String');fieldTypeMap.set('longitude', 'String');fieldTypeMap.set('nikeName', 'String');fieldTypeMap.set('phone', 'String');fieldTypeMap.set('address', 'String');return fieldTypeMap;
}getClassName(): string {return 'address_list';
}getPrimaryKeyList(): string[] {let primaryKeyList: string[] = [];primaryKeyList.push('id');return primaryKeyList;
}getIndexList(): string[] {let indexList: string[] = [];indexList.push('id');return indexList;
}getEncryptedFieldList(): string[] {let encryptedFieldList: string[] = [];return encryptedFieldList;
}setId(id: number): void {this.id = id;
}getId(): number  {return this.id;
}setUser_id(user_id: number): void {this.user_id = user_id;
}getUser_id(): number  {return this.user_id;
}setAdministrativeArea(administrativeArea: string): void {this.administrativeArea = administrativeArea;
}getAdministrativeArea(): string  {return this.administrativeArea;
}setLocality(locality: string): void {this.locality = locality;
}getLocality(): string  {return this.locality;
}setSubLocality(subLocality: string): void {this.subLocality = subLocality;
}getSubLocality(): string  {return this.subLocality;
}setPlaceName(placeName: string): void {this.placeName = placeName;
}getPlaceName(): string  {return this.placeName;
}setLatitude(latitude: string): void {this.latitude = latitude;
}getLatitude(): string  {return this.latitude;
}setLongitude(longitude: string): void {this.longitude = longitude;
}getLongitude(): string  {return this.longitude;
}setNikeName(nikeName: string): void {this.nikeName = nikeName;
}getNikeName(): string  {return this.nikeName;
}setPhone(phone: string): void {this.phone = phone;
}getPhone(): string  {return this.phone;
}setAddress(address: string): void {this.address = address;
}getAddress(): string  {return this.address;
}static parseFrom(inputObject: any): AddressList {let result = new AddressList();if (!inputObject) {return result;}if (inputObject.id) {result.id = inputObject.id;}if (inputObject.user_id) {result.user_id = inputObject.user_id;}if (inputObject.administrativeArea) {result.administrativeArea = inputObject.administrativeArea;}if (inputObject.locality) {result.locality = inputObject.locality;}if (inputObject.subLocality) {result.subLocality = inputObject.subLocality;}if (inputObject.placeName) {result.placeName = inputObject.placeName;}if (inputObject.latitude) {result.latitude = inputObject.latitude;}if (inputObject.longitude) {result.longitude = inputObject.longitude;}if (inputObject.nikeName) {result.nikeName = inputObject.nikeName;}if (inputObject.phone) {result.phone = inputObject.phone;}if (inputObject.address) {result.address = inputObject.address;}return result;
}

}

export { AddressList };

都创建完成之后我们在云端先添加两条测试数据

然后我们点击新增进行数据的插入，插入后我们点击查询

可以看到我们已经有了两条测试数据，接下来我们就可以创建对应的页面开始查询我们云数据库的数据了

@Entry
@Component
struct AddressListPage {
@State user: User|null=null;
@State addressList:AddressList[]=[]
async aboutToAppear(): Promise {
const value = await StorageUtils.getAll(‘user’);
this.user=JSON.parse(value)
let databaseZone = cloudDatabase.zone(‘default’);
let condition = new cloudDatabase.DatabaseQuery(address_list);
condition.equalTo(“user_id”,this.user!.user_id)
let listData = await databaseZone.query(condition);
let json = JSON.stringify(listData)
let data1:AddressList[]= JSON.parse(json)
this.addressList=data1
hilog.info(0x0000, ‘testTag’, Succeeded in querying data, result: ${data1});
}
}
我们先添加对应的用户信息参数和对应的列表数据接收参数，然后在生命周期内进行数据查询

我们的断点中可以看到已经查询出了我们对应的两条数据，然后我们把它展示到列表中

build() {
Column() {
CommonTopBar({ title: “地址列表”, alpha: 0, titleAlignment: TextAlign.Center ,backButton:true})
Stack({alignContent:Alignment.Bottom}){
Column(){
List(){
ForEach(this.addressList,(item:AddressList,index:number)=>{
ListItem(){
Column(){
Row(){
Column({space:10}){
Row(){
Text(item.nikeName)
.fontColor(Color.Black)
.fontSize(16)
.fontWeight(FontWeight.Bold)
Text(item.phone)
.fontColor(Color.Black)
.fontSize(16)
.fontWeight(FontWeight.Bold)
.margin({left:20})
}
Text(item.address)
.fontColor(Color.Black)
.fontSize(16)
}
.alignItems(HorizontalAlign.Start)
.justifyContent(FlexAlign.Center)

                Image($r('app.media.address_edit')).width(20).height(20).onClick(()=>{showToast("编辑")})}.justifyContent(FlexAlign.SpaceBetween).width('100%').padding(10)Divider().width('90%').height(0.8).color("#ffb1b0b0")}}})}.layoutWeight(1)}.height('90%')Text("新增地址").width('70%').height(45).fontWeight(FontWeight.Bold).fontColor(Color.White).backgroundColor(0xff0000).borderRadius(10).textAlign(TextAlign.Center)}.backgroundColor(Color.White)
}
.backgroundColor(Color.White)
.height('100%')
.width('100%')

}
现在我们执行一下应用看一下效果

到这里我们的地址展示就实现了