arkTS开发鸿蒙OS应用(登录页面实现,连接数据库)

这篇具有很好参考价值的文章主要介绍了arkTS开发鸿蒙OS应用(登录页面实现,连接数据库)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

前言

喜欢的朋友可在抖音、小红书、微信公众号、哔哩哔哩搜索“淼学派对”。知乎搜索“编程淼”。

前端架构

arkts 与数据库连接案例,数据库

Toubu.ets

import router from '@ohos.router'
@Component
export struct Header{
  build(){
  //   标题部分
    Row({space:5}){
      Image($r('app.media.fanhui'))
        .width(20)
        .onClick(() =>{
          router.back()
        })
      Blank()
      Image($r('app.media.shuaxin'))
        .width(30)
    }
    .width('98%')
    .height(30)
  }
}

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($r('app.media.icon'))
          .width(150)
          .margin({top:50,bottom:20})
        // 账号登录
        TextInput({placeholder:'账号'})
          .margin(20)
          .height(50)
          .onChange(value =>{
            console.log(value)
            this.zhanghao_find = value
          })
          .backgroundColor('#36D2')
        TextInput({placeholder:'密码'})
          .margin({left:20,right:20,bottom:25})
          .height(50)
          .onChange(value =>{
            console.log(value)
            this.mima_find = value
          })
          .backgroundColor('#36D2')
        Button('登录')
          .width(200)
          .onClick(()=>{
            axios({
              method: "get",
              url: 'http://localhost:3000/find/'+this.zhanghao_find+ '/' + this.mima_find,
            }).then(res => {
              // console.info('result:' + JSON.stringify(res.data));
              console.info('result:' + JSON.stringify(res.data));
                router.pushUrl({
                  url: 'pages/NewApp_one',
                })
            }).catch(error => {
              console.error(error);
            })
          })
        Row(){
          Text('注册')
            .margin({right:5})
            .onClick( () =>{
              {
                router.pushUrl({
                  url: 'pages/zhuce',
                })
              }
            })
          Text('|')
          Text('忘记密码')
            .margin({left:5})
            .onClick( () =>{
              {
                router.pushUrl({
                  url: 'pages/WangjiMima',
                })
              }
            })
        }.margin(20)
      }
      .width('100%')
    .height('100%')
  }
}

NewApp_one.ets

@Entry
@Component
struct NewApp_one {
  @State message: string = 'app主页'

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
      }
      .width('100%')
    }
    .height('100%')
  }
}

WangjiMima.ets

import { Header } from '../components/Toubu'
import  axios  from '@ohos/axios'
import router from '@ohos.router'
@Entry
@Component
struct Index {
  // 上传数据
  @State zhanghao: string = ''
  @State mima: string = ''

  build() {
    Column() {
      Header()
        .margin(20)
      TextInput({placeholder:'原账号'})
        .margin(20)
        .height(50)
        .onChange(value =>{
          console.log(value)
          this.zhanghao = value
        })
        .backgroundColor('#36D2')
      TextInput({placeholder:'新密码'})
        .margin({ left:20,right:20,bottom:20 })
        .height(50)
        .onChange(value =>{
          console.log(value)
          this.mima = value
        })
        .backgroundColor('#36D2')
      Button('修改密码')
        .width(200)
        .onClick(()=>{
          axios({
            method: "post",
            url: 'http://localhost:3000/upd',
            data:{
              zhanghao:this.zhanghao,
              newmima:this.mima
            },
          }).then(res => {
            console.info('result:' + JSON.stringify(res.data));
            {
              router.pushUrl({
                url: 'pages/NewApp_one',
              })
            }
          }).catch(error => {
            console.error(error);
          })
        })
    }
    .width('100%')
    .height('100%')
  }
}

zhuce.ets

import { Header } from '../components/Toubu'
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() {
      Header()
        .margin(20)
      TextInput({placeholder:'注册账号'})
        .margin(20)
        .height(50)
        .onChange(value =>{
          console.log(value)
          this.zhanghao = value
        })
        .backgroundColor('#36D2')
      TextInput({placeholder:'注册密码'})
        .margin({ left:20,right:20,bottom:20 })
        .height(50)
        .onChange(value =>{
          console.log(value)
          this.mima = value
        })
        .backgroundColor('#36D2')
      Button('注册并登录')
        .width(200)
        .onClick(()=>{
          axios({
            method: "post",
            url: 'http://localhost:3000/publish',
            data:{
              zhanghao:this.zhanghao,
              mima:this.mima
            },
          }).then(res => {
            console.info('result:' + JSON.stringify(res.data));
              router.pushUrl({
                url: 'pages/NewApp_one',
              })
          }).catch(error => {
            console.error(error);
          })
        })
    }
    .width('100%')
    .height('100%')
  }
}

后端代码node.js

const express = require('express');
const app = express();
const { users } = require('./db');

app.use(express.urlencoded({ extended: true }));
app.use(express.json())

// 注册账号
app.post("/publish", async (req, res) => {
    try {
        const { zhanghao, mima } = req.body;
        await users.create({
            zhanghao, mima
        });
        res.send("success")
    } catch (error) {
        res.send(error, "error")
    }
})
// 注销账号
app.post("/del", async (req, res) => {
    console.log(req.body.zhanghao)
    try {
        const { zhanghao } = req.body;

        // 使用 deleteOne 删除指定 name 的数据
        const result = await users.deleteOne({ zhanghao });

        if (result.deletedCount === 1) {
            res.send("success");
        } else {
            res.send("未找到匹配的记录");
        }
    } catch (error) {
        res.send(error, "error");
    }
})
// 修改账号密码
app.post("/upd", async (req, res) => {
    try {
        const { zhanghao, newmima } = req.body;
        // 使用 updateOne 更新指定 name 的数据记录的 nianling 字段
        const result = await users.updateOne({ zhanghao }, { $set: { mima: newmima } });
        res.json({ message: "密码更新成功!", result });
    } catch (error) {
        res.status(500).json({ error: error.message });
    }
});

// 账号登录
app.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: "服务器内部错误" });
    }
});


app.listen(3000, () => {
    console.log('server running')
})

效果图

arkts 与数据库连接案例,数据库文章来源地址https://www.toymoban.com/news/detail-842956.html

到了这里,关于arkTS开发鸿蒙OS应用(登录页面实现,连接数据库)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 鸿蒙实战:ArkTs 开发一个鸿蒙应用

    学习过的 ArkTs 知识点,一步一步开发一个小的鸿蒙应用示例,涉及到  ArkTs 语法、注解 @Entry 、 @Component 、 @state 、路由、生命周期、 @Prop 、 @Link 、常用组件的使用等等知识点。 要开发一个鸿蒙应用,首先我们需要知道 系统是如何找到页面的启动入口 。 鸿蒙如何启动应用

    2024年02月22日
    浏览(51)
  • 用Rust开发鸿蒙应用(ArkTS NAPI)

    在DevEco Studio的模板工程中包含使用Native API的默认工程,使用File-New-Create Project创建Native C++模板工程。 在此基础上进行修改 删除 entry/src/main/cpp 打开 entry/build-profile.json5 删除c++ build 配置 创建rust项目 修改 Cargo.toml lib.rs 添加测试代码 添加对应ts代码 配置依赖 在 rust 根目录下编

    2024年02月03日
    浏览(41)
  • 【鸿蒙应用ArkTS开发系列】- Web组件使用讲解

    目录 一、Web组件介绍 二、创建组件 权限列表 三、设置样式和属性 四、添加事件和方法 五、访问本地Html 1、本地html文件创建 2、本地html文件加载 2、JS对象注入,Html使用JS对象调用客户端方法 3、客户端调用本地Html网页中的JS方法 使用鸿蒙的ArkUI框架开发鸿蒙应用的时候,官

    2024年02月07日
    浏览(49)
  • 【鸿蒙(HarmonyOS)】UI开发的两种范式:ArkTS、JS(以登录界面开发为例进行对比)

    之后关于HarmonyOS技术的分享,将会持续使用到以下版本 HarmonyOS:3.1/4.0 SDK:API 9 Release Node.js:v14.20.1 DevEco Studio: 3.1.0 HarmonyOS应用的UI开发依赖于 方舟开发框架(简称ArkUI) 。 根据官方介绍,ArkUI提供了UI语法、丰富的UI功能(组件、布局、动画以及交互事件),以及实时界面

    2024年02月08日
    浏览(66)
  • 鸿蒙开发已解决-ArkTS开发webview,html页面中的input和按钮等操作均无响应

    在鸿蒙开发过程遇到的问题: 问题 ArkTS API9 使用webview加载的html,页面中的按钮和input等操作均无响应 是有相关API设置webview是否可以touch或者,webview的层级问题来解决? ArkTS API9 使用webview加载的html,页面中的按钮和input等操作均无响应,是有相关API设置webview是否可以touch或者

    2024年02月03日
    浏览(45)
  • 鸿蒙Harmony应用开发—ArkTS(stateStyles:多态样式)

    @Styles和@Extend仅仅应用于静态页面的样式复用,stateStyles可以依据组件的内部状态的不同,快速设置不同样式。这就是我们本章要介绍的内容stateStyles(又称为:多态样式)。 stateStyles是属性方法,可以根据UI内部状态来设置样式,类似于css伪类,但语法不同。ArkUI提供以下五种

    2024年04月15日
    浏览(50)
  • 鸿蒙Harmony应用开发—ArkTS声明式开发(通用属性:边框设置)

    设置组件边框样式。 说明: 从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 border(value: BorderOptions) 设置边框样式。 卡片能力:  从API version 9开始,该接口支持在ArkTS卡片中使用。 系统能力:  SystemCapability.ArkUI.ArkUI.Full 参数: 参数

    2024年04月23日
    浏览(51)
  • 鸿蒙Harmony应用开发—ArkTS声明式开发(通用属性:文本通用)

    文本通用属性目前只针对包含文本元素的组件,设置文本样式。 说明: 从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 名称 参数类型 描述 fontColor ResourceColor 设置字体颜色。 从API version 9开始,该接口支持在ArkTS卡片中使用。 fon

    2024年03月23日
    浏览(48)
  • 鸿蒙Harmony应用开发—ArkTS声明式开发(容器组件:Flex)

    以弹性方式布局子组件的容器组件。 说明: 该组件从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 Flex组件在渲染时存在二次布局过程,因此在对性能有严格要求的场景下建议使用Column、Row代替。 Flex组件主轴默认不设置时撑满父容

    2024年04月11日
    浏览(49)
  • 鸿蒙Harmony应用开发—ArkTS声明式开发(通用属性:组件标识)

    id为组件的唯一标识,在整个应用内唯一。本模块提供组件标识相关接口,可以获取指定id组件的属性,也提供向指定id组件发送事件的功能。 说明: 从API Version 8开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 名称 参数说明 描述 id string 组件

    2024年04月22日
    浏览(64)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包