基于 arkTS 开发鸿蒙 app 应用案例——通讯录案例

import  axios  from '@ohos/axios'import router from '@ohos.router' @Entry@Componentstruct Index {  // 上传数据  @State zhanghao: string = ''  @State mima: string = ''  @State zhanghao_find:string =''  @State mima_find:string =''  build() {    Column() {      Text('淼学通讯录')        .margin({top:70})        .fontWeight(FontWeight.Bold)        .fontSize(30)      Image('./components/img/appimg.jpg')        .width(200)        .height(200)        .borderRadius(20)        .margin({top:50,bottom:20})      // 账号登录      Row(){        Image('./components/img/zhanghao.png')          .width(20)          .height(20)        TextInput({placeholder:'账号'})          .backgroundColor('#00FFFFFF')          .width('75%')          .onChange(value =>{            console.log(value)            this.zhanghao_find = value          })      }      .borderRadius(12)      .borderWidth(1)      .borderColor('#E4DFDF')      .padding(5)      .margin({top:10})      Row(){        Image('./components/img/mima.png')          .width(20)          .height(20)        TextInput({placeholder:'密码'})          .backgroundColor('#00FFFFFF')          .width('75%')          .onChange(value =>{            console.log(value)            this.mima_find = value          })      }      .borderRadius(12)      .padding(5)      .margin({top:10})       Button('登录',{type:ButtonType.Normal,stateEffect:true})        .borderRadius(10)        .margin({top:40})        .width(250)        .height(55)        .onClick(()=>{          axios({            method: "get",            url: 'http://localhost:3000/users/find/'+this.zhanghao_find+ '/' + this.mima_find,          }).then(res => {            console.info('result:' + JSON.stringify(res.data));            // 获取data数组中的第一个元素            const zhanghao = res.data.data[0].zhanghao;            console.log(JSON.stringify(zhanghao))            // 获取data数组中的第一个元素            // 获取zhanghao字段的值            router.pushUrl({              url: 'pages/App_one',              params: {                zhanghao              }            })          }).catch(error => {            console.error(error);          })        })    }    .width('100%')    .height('100%')  }}

import { Header } from '../components/Toubu'import router from '@ohos.router'import  axios  from '@ohos/axios' @Entry@Componentstruct App_one {  @State items:Array<Object> = []  @State Ondata: object = router.getParams()  onPageShow(){    axios({      method: "get",      url: 'http://localhost:3000/lianxirens/find/'+this.Ondata?.['zhanghao'],    }).then(res => {      console.info('result:123123123' + JSON.stringify(res.data));      this.items = res.data.data;    }).catch(error => {      console.error(error);    })  }   build() {      Column() {        Header()        .margin(20)        Row(){          Text('我的联系人')            .fontSize(20)            .padding({left:10,right:10})        }        .borderRadius(5)        .borderWidth(1)        .borderColor('#E4DFDF')        .padding(10)        .margin({top:10})         Image('./components/img/add.png')          .height(70)          .width(70)          .position({ x: 280, y: 500,})          .zIndex(20)          .onClick(()=>{            router.pushUrl({              url: 'pages/add',              params: {                zhanghao:this.Ondata?.['zhanghao']              }            })           })        // Scroll(){          Column() {            List({ space: 20, initialIndex: 0 }) {              ForEach(this.items, (item) => {                ListItem() {                  Row(){                    Image('./components/img/one.png')                    .width(30)                      .onClick(()=>{                        // 获取点击物品的number                        console.log(JSON.stringify(item.number))                        router.pushUrl({                          url: 'pages/detail',                          params: {                            id: item._id,                            zhanghao:this.Ondata?.['zhanghao']                          }                        })                      })                    .margin({right:50,left:25})                    if (item.sex == '男') {                      Image('./components/img/nan.png')                        .width(20)                    } else {                      Image('./components/img/nv.png')                        .width(20)                    }                    Text(item.name)                      .fontWeight(800)                      .margin({ left: 20 })                    Text(item.number)                      .fontWeight(800)                      .margin({ left: 20 })                  }                }                .borderColor('#E4DFDF')                .margin({ top: 10 })              })            }           }          .height(700)          // .backgroundColor('#E4DFDF')      }      .width('100%')  }}

import { Header } from '../components/Toubu'import  axios  from '@ohos/axios'import router from '@ohos.router'@Entry@Componentstruct Add {  @State number:string =''   @State name:string =''   @State sex:string ='男'   @State Ondata: object = router.getParams()   build() {      Column() {        Header()          .margin(20)        // 手机号        TextInput({placeholder:'手机号',})          .backgroundColor('#00FFFFFF')          .width('75%')          .onChange(value =>{            console.log(value)            this.number= value          })          .border({width: {  bottom: '3' },})          .borderColor('#E4DFDF')          .padding(15)          .margin({top:20})        // 姓名        TextInput({placeholder:'姓名',})          .backgroundColor('#00FFFFFF')          .width('75%')          .onChange(value =>{            console.log(value)            this.name= value          })          .border({width: {  bottom: '3' },})          .borderColor('#E4DFDF')          .padding(15)          .margin({top:20})        // 性别        Row(){          Column(){            Radio({ value: 'nan', group: 'radioGroup' }).checked(true)              .height(30)              .width(30)              .onChange((isChecked: boolean) => {                console.log('Radio1 status is ' + isChecked)                this.sex = '男'              })            Text('男')          }          Column(){            Radio({ value: 'nv', group: 'radioGroup' }).checked(false)              .height(30)              .width(30)              .onChange((isChecked: boolean) => {                console.log('Radio2 status is ' + isChecked)                this.sex = '女'              })            Text('女')          }          .margin({left:20})        }        .borderRadius(12)        .borderWidth(1)        .borderColor('#E4DFDF')        .padding({left:20,right:20})        .margin({top:30})         Button('添加',{type:ButtonType.Normal,stateEffect:true})          .borderRadius(10)          .margin({top:100})          .width(250)          .height(55)          .onClick(()=>{            axios({              method: "post",              url: 'http://localhost:3000/lianxirens/add',              data:{                number:this.number,                name:this.name,                sex:this.sex,                zhanghao:this.Ondata?.['zhanghao']              }            }).then(res => {              console.info('result:' + JSON.stringify(res.data));              router.back()            }).catch(error => {              console.error(error);            })          })      }      .width('100%')  }}

import { Header } from '../components/Toubu'import router from '@ohos.router'import  axios  from '@ohos/axios'@Entry@Componentstruct Detail {  @State _id: string = ''   @State number:string =''   @State name:string =''   @State sex:string ='男'  // @State number: string = ''  @State shuju: object = router.getParams()  onPageShow(){    console.info('result:' + JSON.stringify(this.shuju?.['id']));    axios({      method: "get",      url: 'http://localhost:3000/lianxirens/find1/'+this.shuju?.['id'],    }).then(res => {      console.info('result:' + JSON.stringify(res.data.data[0]));      this.number = res.data.data[0].number      this.name = res.data.data[0].name      // this.sex = res.data.data[0].sex    }).catch(error => {      console.error(error);    })  }   build() {      Column() {        Header()          .margin(20)        TextInput({placeholder:'手机号',text:this.number})          .backgroundColor('#00FFFFFF')          .width('75%')          .onChange(value =>{            console.log(value)            this.number= value          })          .border({width: {  bottom: '3' },})          .borderColor('#E4DFDF')          .padding(15)          .margin({top:20})        // 姓名        TextInput({placeholder:'姓名',text:this.name})          .backgroundColor('#00FFFFFF')          .width('75%')          .onChange(value =>{            console.log(value)            this.name= value          })          .border({width: {  bottom: '3' },})          .borderColor('#E4DFDF')          .padding(15)          .margin({top:20})        // 性别        Row(){          Column(){            Radio({ value: 'nan', group: 'radioGroup' }).checked(true)              .height(30)              .width(30)              .onChange((isChecked: boolean) => {                console.log('Radio1 status is ' + isChecked)                this.sex = '男'              })            Text('男')          }          Column(){            Radio({ value: 'nv', group: 'radioGroup' }).checked(false)              .height(30)              .width(30)              .onChange((isChecked: boolean) => {                console.log('Radio2 status is ' + isChecked)                this.sex = '女'              })            Text('女')          }          .margin({left:20})        }        .borderRadius(12)        .borderWidth(1)        .borderColor('#E4DFDF')        .padding({left:20,right:20})        .margin({top:30})         Button('修改',{type:ButtonType.Normal,stateEffect:true})          .borderRadius(10)          .margin({top:100})          .width(250)          .height(55)          .onClick(()=>{            axios({              method: "post",              url: 'http://localhost:3000/lianxirens/upd',              data:{                number:this.number,                name:this.name,                sex:this.sex,                _id:this.shuju?.['id']              }            }).then(res => {              console.info('result:' + JSON.stringify(res.data));              router.back()            }).catch(error => {              console.error(error);            })          })         Button('删除',{type:ButtonType.Normal,stateEffect:true})          .borderRadius(10)          .margin({top:30})          .width(250)          .height(55)          .onClick(()=>{            axios({              method: "post",              url: 'http://localhost:3000/lianxirens/delete',              data:{                _id:this.shuju?.['id']              }            }).then(res => {              console.info('result:' + JSON.stringify(res.data));              router.back()            }).catch(error => {              console.error(error);            })          })      }      .width('100%')    .height('100%')  }}

const mongoose = require('mongoose') //连接mongodb数据库mongoose.connect("mongodb://localhost:27017/tongxunlu")    .then(() => {        console.log("数据库连接成功！")    })    .catch((err) => {        console.log("数据库连接失败！", err)    }) // 创建表用户表const Users = new mongoose.Schema({    number: {        type: String,    },    name: {        type: String    },    sex:{        type:String    },    list:{        type:Array    }})const Lianxirens = new mongoose.Schema({    zhanghao:{        type: String,    },    number: {        type: String,    },    name: {        type: String    },    sex:{        type:String    },})   const users = mongoose.model("Users", Users);const lianxirens = mongoose.model("Lianxirens", Lianxirens);module.exports = {    users,    lianxirens}