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

1.项目所用技术栈

  • arkTS

  • node.js express

  • mongoDB

2.效果图

3.源码

Index.ets(登录页)

登陆时让前端访问数据库中已经存好的账号密码,如果可以查询到数据库中的数据,则账号密码正确,登录成功,否则登录失败。

import  axios  from '@ohos/axios'
import router from '@ohos.router'@Entry
@Component
struct 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%')}
}

App_one.ets(功能页)

显示该登录的用户所添加的联系人。

import { Header } from '../components/Toubu'
import router from '@ohos.router'
import  axios  from '@ohos/axios'@Entry
@Component
struct 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(()=>{// 获取点击物品的numberconsole.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%')}
}

add.ets(功能页)

根据上个页面的跳转传递过来的账号参数,并向该账号的数据表的该条数据中添加数据。

import { Header } from '../components/Toubu'
import  axios  from '@ohos/axios'
import router from '@ohos.router'
@Entry
@Component
struct 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%')}
}

detail.ets(功能页)

在页面刷新之前首先通过组件生命周期函数访问数据表中的数据,拿到数据库之后复制在输入框中,根据上个页面传过来的参数对该登录的账号的用户所设计的联系人进行修改信息和删除。

import { Header } from '../components/Toubu'
import router from '@ohos.router'
import  axios  from '@ohos/axios'
@Entry
@Component
struct 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].numberthis.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%')}
}

后端node.js文件架构

主要代码:

db.js

负责创建数据库中数据表的结构,并连接数据库,为数据表中的键值创建模型。负责创建数据库中数据表的结构,并连接数据库,为数据表中的键值创建模型。

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
}

index.js


后端主入口程序,引用自定义组件进行进一步的模块封装。

// index.js
const express = require('express');
const app = express();
const userApi = require('./user_ctrl/user_api');
const lianxirensApi = require('./lianxiren_ctrl/lianxiren_api');app.use('/users', userApi);
app.use('/lianxirens', lianxirensApi);app.listen(3000, () => {console.log('server running');
});

user_api.js

负责该登录用户的联系人的查询以及账号的登录。

// user_api.js
const express = require('express');
const router = express.Router();
const { users } = require('../db');router.use(express.urlencoded({ extended: true }));
router.use(express.json());// 查询联系人
router.get("/findusers/:zhanghao", async (req, res) => {try {const zhanghao = req.params.zhanghao;// 使用 find 查询匹配指定 zhanghao 的数据记录const result = await users.findOne({ zhanghao });if (result) {// 如果找到匹配的记录,则返回该记录res.json({ data: result, message: "登录成功!" });} else {res.status(404).json({ message: "未找到匹配的记录" });}} catch (error) {res.status(500).json({ message: "服务器内部错误" });}
});// 账号登录
router.get("/find/:zhanghao/:mima", async (req, res) => {try {const zhanghao = req.params.zhanghao;const mima = req.params.mima;// 使用 find 查询所有匹配指定 name 的数据记录const results = await users.find({ zhanghao, mima });if (results.length > 0) {// 如果找到匹配的记录,则返回所有匹配的记录res.json({ data: results, message: "登录成功!" });} else {res.status(404).json({ message: "未找到匹配的记录" });}} catch (error) {res.status(500).json({ message: "服务器内部错误" });}
});module.exports = router;

lianxiren_api.js

负责修改该登录的用户所涉及的联系人的信息,以及删除联系人的信息数据。

// user_api.js
const express = require('express');
const router = express.Router();
const { lianxirens } = require('../db');router.use(express.urlencoded({ extended: true }));
router.use(express.json());// 修改联系人信息
router.post("/add", async (req, res) => {try {const { zhanghao ,number,name,sex } = req.body;await lianxirens.create({zhanghao,number,name,sex}); res.send("success"); } catch (error) {res.send(error, "error");}});
//router.get("/find/:zhanghao", async (req, res) => {try {const zhanghao = req.params.zhanghao;// 使用 find 查询所有匹配指定 name 的数据记录const results = await lianxirens.find({ zhanghao });if (results.length > 0) {// 如果找到匹配的记录,则返回所有匹配的记录res.json({ data: results, message: "登录成功!" });} else {res.json({ data: results, message: "None" });}} catch (error) {res.status(500).json({ message: "服务器内部错误" });}});
//   查找联系人router.get("/find1/:_id", async (req, res) => {try {const _id = req.params._id;// 使用 find 查询所有匹配指定 name 的数据记录const results = await lianxirens.find({ _id });if (results.length > 0) {// 如果找到匹配的记录,则返回所有匹配的记录res.json({ data: results, message: "查找联系人成功!" });} else {res.json({ data: results, message: "None" });}} catch (error) {res.status(500).json({ message: "服务器内部错误" });}});// 修改联系人信息
router.post("/upd", async (req, res) => {try {const { _id, number, name, sex } = req.body;// 使用 updateOne 更新指定 _id 的数据记录的 number、name 和 sex 字段const result = await lianxirens.updateOne({ _id }, { $set: { number, name, sex } });res.json({ message: "修改联系人信息成功!", result });} catch (error) {res.status(500).json({ error: error.message });}
});
// 删除联系人
router.post("/delete", async (req, res) => {try {const { _id } = req.body;// 使用 deleteOne 删除指定 _id 的数据记录const result = await lianxirens.deleteOne({ _id });res.json({ message: "删除联系人信息成功!", result });} catch (error) {res.status(500).json({ error: error.message });}
});module.exports = router;

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/786128.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Docker容器赋能TitanIDE:引领编程新纪元的集成开发环境

Docker是一种容器化技术&#xff0c;它可以将应用程序和其所有的依赖项打包到一个轻量级、可移植的容器中。以下是Docker的基本概念和优势&#xff1a; 基本概念&#xff1a; 镜像&#xff08;Image&#xff09;&#xff1a;一个镜像是一个只读的模板&#xff0c;可以用于创建…

17.应用负载压力测试

早些点&#xff0c;下午题考&#xff0c;最近几年出现的少&#xff1b; 备考较为简单&#xff1b;历年真题相似度高&#xff1b; 主要议题&#xff1a; 1.负载压力测试概述 注意这些测试细微的差别&#xff1b; 负载测试和压力测试的方法比较相似&#xff0c;但是目的不同&a…

学习 MongoDB:打开强大的数据库技术大门

一、基本概念 MongoDB 是一个基于分布式文件存储的文档数据库&#xff0c;由 C 语言编写。它旨在为 Web 应用提供可扩展的高性能数据存储解决方案。 相信MySQL我们非常的熟悉&#xff0c;那么MySQL的表结构与MongoDB的文档结构进行类比的话可能更好理解MongoDB。 MySQL的数据…

ubuntu 20 虚拟机配置静态ip

在/etc/netplan/ 中得文件里&#xff08;类似&#xff1a;01-network-manager-all.yaml&#xff09;添加 # Let NetworkManager manage all devices on this system network:ethernets:ens33:dhcp4: noaddresses: [192.168.40.128/24]gateway4: 192.168.40.2optional: truenam…

WPF —— TreeView树形控件

1 TreeView简介 TreeView 表示一个控件&#xff0c;该控件在树结构&#xff08;其中的项可以展开和折叠&#xff09;中显示分层数据。 TreeView 是一个 ItemsControl&#xff0c;这意味着它可以包含任何类型的对象的集合 (&#xff0c;例如字符串、图像或面板) 。 2 Tree Vie…

【iOS ARKit】3D 视频

在AR 中播放视频也是一种常见的需求&#xff0c;如在一个展厅中放置的虚拟电视上播放宣传视频&#xff0c;或者在游戏中为营造氛围而设置的虚拟电视视频播放&#xff0c;或者在识别的2D个人名片上播放自我介绍视频&#xff0c;因视频具有静态图像无法比拟的综合信息展示能力&am…

NoSQL(非关系型数据库)之Redis

目录 一、 关系型数据库与非关系型数据库 1.1 关系型数据库 1.2 非关系型数据库 1.3 区别 1.3.1 数据存储方式不同 1.3.2 扩展方式不同 1.4 非关系型数据库产生背景 二、 Redis简介 2.1 Redis概述 2.2 Redis优点 2.3 Redis为什么这么快&#xff1f; 总结 一 数据流…

23种设计模式的概念

一、设计模式的来源 设计模式&#xff08;Design Pattern&#xff09;是前辈们对代码开发经验的总结&#xff0c;是解决特定问题的一系列套路。它不是语法规定&#xff0c;而是一套用来提高代码可复用性、可维护性、可读性、稳健性以及安全性的解决方案。 1995 年&#xff0c;…

华为数通方向HCIP-DataCom H12-821题库(多选题:241-260)

第241题 [RTAospf100 [RTA-ospf-100]silent-intefaceGigabitEthernet 1/0/0上面是路由器RTA的部分配置,对于此部分的配置描述,正确的是: A、接口gigabitethemet 1/0/0的直连路由仍然可以发布出去 B、无法与该接口的直连邻居形成邻居关系 C、禁止接口gigabi tethemet 1/0/0发…

vscode 自用的一些配置

目录 1&#xff0c;修改默认配置1&#xff0c;关闭预览模式2&#xff0c;取消自动定位到左侧边栏 2&#xff0c;自定义快捷键1&#xff0c;手动定位到左侧边栏2&#xff0c;关闭其他3&#xff0c;其他常用快捷键 3&#xff0c;插件1&#xff0c;和 git 相关的GitlensGit Histor…

C++ 2024-4-1 作业

#include <iostream> using namespace std;class A { public:int a;A(int a):a(a){cout<<"A的有参构造"<<endl;} }; class B:virtual public A { public:int b;B(int a,int b):A(a),b(b){cout<<"B的有参构造"<<endl;} }; cl…

用Wireshark解码H.264

H264&#xff0c;你不知道的小技巧-腾讯云开发者社区-腾讯云 这篇文章写的非常好 这里仅做几点补充 init.lua内容&#xff1a; -- Set enable_lua to false to disable Lua support. enable_lua trueif not enable_lua thenreturn end-- If false and Wireshark was start…

华为云RDS for Mysql入门与配置

华为云RDS for MySQL支持混合SSD实例&#xff0c;它结合了华为云容器、本地SSD盘和高速云盘。 优势&#xff1a; 主备实例提供故障自动切换和手动切换&#xff0c;业务中断时间为秒级&#xff0c;以及异地灾难备份&#xff0c;最大程度上在出现故障的情况下保障整个数据库集群…

适用于智能断路器、新能源汽车充电枪锁、电动玩具、电磁门锁等的直流电机驱动芯片D6289ADA介绍

应用领域 适用于智能断路器&#xff08;家用或工业智能空开&#xff09;、新能源汽车充电枪锁、电动玩具、电磁门锁、自动阀门等的直流电机驱动。 功能介绍 D6289ADA是一款直流马达驱动芯片&#xff0c;它有两个逻辑输入端子用来控制电机前进、后退及制动。该电路具有良好的抗干…

天池医疗AI大赛[第一季] Rank8解决方案[附TensorFlow/PyTorch/Caffe实现方案]

团队成员&#xff1a;北京邮电大学 模式识别实验室硕士研究生 今年5月&#xff0c;参加了天池医疗AI大赛&#xff0c;这次比赛是第一次参加此类的比赛&#xff0c;经过接近半年的比赛&#xff0c;终于10月落下帷幕&#xff0c;作为第一次参加比赛&#xff0c;能在接近3000支队…

计算矩阵中0的个数

在MATLAB中&#xff0c;计算矩阵中0的个数可以通过多种方法实现。最直接的方法之一是使用find函数或者逻辑运算符结合sum函数。以下是几种计算矩阵中0的个数的方法&#xff1a; 方法1&#xff1a;使用find函数 % 假设A是你的矩阵 A [1 0 3; 4 5 0; 7 8 9];% 计算矩阵中0的个…

标定系列——预备知识-OpenCV中矫正相关函数(十二)

标定系列——预备知识-OpenCV中矫正相关函数&#xff08;十二&#xff09; 说明记录 说明 记录了OpenCV中的矫正相关函数的使用 记录

ubuntu 使用 apt 安装、卸载 mysql

安装 mysql 更新 apt 列表 apt-get upgrade安装 mysql apt-get install mysql-server启动和关闭 mysql # 启动: service mysql start# 重启: service mysql restart # 关闭: service mysql stop登录数据库&#xff0c;修改 root 账号密码 mysql -uroot -p# 不用输入任何…

Can‘t connect to server on ‘localhost‘ (10061)

问题&#xff1a;电脑关机重启后&#xff0c;连接不上mysql了&#xff0c;报错信息如下&#xff1a;2002 - Cant connect to server on localhost (10061)解决办法&#xff1a;很大的原因是mysql服务没有启动&#xff0c;需要你重启一下mysql&#xff1a; 以管理员的身份运行cm…

安卓Glide加载失败时点击按钮重新加载图片

需求 假设此时已经用load指定一个url: String&#xff0c;又用into指定了一个img: ImageView开始加载&#xff0c;但是网络突然中断&#xff0c;导致图片加载失败。在这种情况下&#xff0c;想要通过点击一个Button重新加载。 Glide.with(context).load(url).placeholder(loa…