技术栈
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类
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%')
} 现在我们执行一下应用看一下效果
到这里我们的地址展示就实现了
