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

技术栈

Appgallery connect

开发准备

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

功能分析

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

代码实现

首先我们创建对应的表{"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 类

dbimport { 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() {}

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@Componentstruct AddressListPage {@State user: User|null=null;@State addressList:AddressList[]=[]async aboutToAppear(): Promise<void> {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=data1hilog.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%')

}

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