目录

前言

ArkTS

ArkTS 框架简介

TypeScript 与 JavaScript 比较

下载鸿蒙生态下载器

利用ohpm下载axios

鸿蒙os开发代码

Index.ets


前言

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

ArkTS

ArkTS 是一个开源的 TypeScript 框架,旨在简化和加速构建 Node.js 后端应用程序的过程。下面是 ArkTS 框架的简介以及 TypeScript 与 JavaScript 的比较:

ArkTS 框架简介

  1. 基于 TypeScript:ArkTS 是一个 TypeScript 框架,因此它提供了 TypeScript 的所有优势,包括静态类型检查、更好的编辑器支持以及更清晰的代码结构。

  2. 模块化和组件化:ArkTS 支持模块化和组件化开发模式,使得代码组织更加清晰和易于维护。

  3. 提供了常见的后端功能:ArkTS 提供了许多常见的后端功能,例如路由管理、HTTP 请求处理、数据库集成等,使得开发者能够快速构建功能完善的后端应用程序。

  4. 易于使用:ArkTS 设计简洁,提供了清晰的文档和示例,使得开发者能够快速上手并开始构建应用程序。

  5. 灵活性和可扩展性:ArkTS 提供了灵活的架构和插件系统,使得开发者能够根据自己的需求扩展框架的功能,满足不同项目的需求。

TypeScript 与 JavaScript 比较

  1. 类型系统

    • TypeScript: TypeScript 是 JavaScript 的一个超集,添加了静态类型系统。这意味着开发者可以在代码中定义变量、函数等的类型,并在编译时进行类型检查。
    • JavaScript: JavaScript 是一种动态类型语言,变量的类型在运行时确定,无法在编译时进行类型检查。
  2. 错误检查

    • TypeScript: TypeScript 提供了静态类型检查,可以在编译时发现代码中的类型错误,并提供错误提示和修复建议。
    • JavaScript: JavaScript 只能在运行时才能发现类型错误,这可能导致一些错误在开发阶段未被发现。
  3. 代码结构和可维护性

    • TypeScript: 由于有静态类型系统的支持,TypeScript 代码通常更具可读性和可维护性。类型定义可以使得代码更易于理解,并且编辑器可以提供更好的代码补全和导航功能。
    • JavaScript: JavaScript 的动态特性使得代码结构更加灵活,但有时也可能导致代码可读性较差和难以维护。
  4. 生态系统和库支持

    • TypeScript: TypeScript 生态系统日益壮大,许多流行的 JavaScript 库和框架都提供了 TypeScript 类型定义文件,使得开发者能够更方便地在 TypeScript 中使用这些库。
    • JavaScript: JavaScript 有着庞大的生态系统和丰富的第三方库支持,但并非所有库都提供了 TypeScript 类型定义,因此在 TypeScript 中使用这些库可能需要进行类型声明或手动添加类型定义。

TypeScript 提供了更严格的类型检查和更好的代码提示,使得开发更加安全和高效,而 JavaScript 则更灵活,适用于快速原型开发和小型项目。选择使用 TypeScript 还是 JavaScript 取决于项目的具体需求和开发团队的偏好。 ArkTS 则是建立在 TypeScript 基础上,提供了更多后端开发的便捷功能,适用于需要构建可靠和健壮后端应用程序的场景。

下载鸿蒙生态下载器

ohpm使用指导-命令行工具-DevEco Studio使用指南-工具-HarmonyOS应用开发

1. 解压到文件夹之后,来到ohpm\bin目录下利用cmd打开命令窗口

2.首先切换到npm默认的源:npm config set registry https://registry.npmjs.org/

(这里不能使用npm淘宝的镜像源)

3.执行命令行:init.bat

4.查看ohpm版本:ohpm -v(有版本显示,说明安装鸿蒙下载器成功)

利用ohpm下载axios

1.进入网址:DevEco Marketplace (harmonyos.com)

2.进入创建的鸿蒙项目的根目录下,利用开发者工具打开根目录的命令行窗口,输入:npm install @ohos/axios --save

鸿蒙os开发代码

Index.ets

import  axios  from '@ohos/axios'
@Entry
@Component
struct Index {
  // 上传数据
  @State shangchuan_xingming: string = ''
  @State shangchuang_nianling: string = ''
  @State shangchuan_xingming_del:string =''
  @State shangchuan_xingming_upd:string =''
  @State shangchuan_newNianling_upd:string =''
  @State shangchuan_xingming_find:string =''

  build() {
    // Row() {
      Column() {
        // 上传数据
        Text('鸿蒙os连接mongoDB数据库')
          .margin(20)
          .backgroundColor('#62d1')
          .borderRadius(10)
          .height(50)
          .fontWeight(500)
        // 输入框1
        TextInput({placeholder:'请输入姓名'})
          .margin(20)
          .height(50)
          .onChange(value =>{
            console.log(value)
            this.shangchuan_xingming = value
          })
          .backgroundColor('#36D2')
        TextInput({placeholder:'请输入年龄'})
          .margin({ left:20,right:20,bottom:20 })
          .height(50)
          .onChange(value =>{
            console.log(value)
            this.shangchuang_nianling = value
          })
          .backgroundColor('#36D2')
        Button('增加')
          .width(200)
          .onClick(()=>{
            axios({
              method: "post",
              url: 'http://localhost:3000/publish',
              data:{
                name:this.shangchuan_xingming,
                nianling:this.shangchuang_nianling
              },
            }).then(res => {
              console.info('result:' + JSON.stringify(res.data));
            }).catch(error => {
              console.error(error);
            })
          })

      //   删除数据
        // 输入框1
        TextInput({placeholder:'请输入要删除的姓名'})
          .margin(20)
          .height(50)
          .onChange(value =>{
            console.log(value)
            this.shangchuan_xingming_del = value
          })
          .backgroundColor('#36D2')
        Button('删除')
          .width(200)
          .onClick(()=>{
            axios({
              method: "post",
              url: 'http://localhost:3000/del',
              data:{
                name:this.shangchuan_xingming_del,
              },
            }).then(res => {
              console.info('result:' + JSON.stringify(res.data));
            }).catch(error => {
              console.error(error);
            })
          })
        // 修改数据
        // 输入框1
        TextInput({placeholder:'请输入要修改的姓名'})
          .margin(20)
          .height(50)
          .onChange(value =>{
            console.log(value)
            this.shangchuan_xingming_upd = value
          })
          .backgroundColor('#36D2')
        TextInput({placeholder:'请输入新的年龄'})
          .margin({ left:20,right:20,bottom:20 })
          .height(50)
          .onChange(value =>{
            console.log(value)
            this.shangchuan_newNianling_upd = value
          })
          .backgroundColor('#36D2')
        Button('修改')
          .width(200)
          .onClick(()=>{
            axios({
              method: "post",
              url: 'http://localhost:3000/upd',
              data:{
                name:this.shangchuan_xingming_upd,
                newNianling:this.shangchuan_newNianling_upd
              },
            }).then(res => {
              console.info('result:' + JSON.stringify(res.data));
            }).catch(error => {
              console.error(error);
            })
          })
        // 查询数据
        // 输入框1
        TextInput({placeholder:'请输入要修改的姓名'})
          .margin(20)
          .height(50)
          .onChange(value =>{
            console.log(value)
            this.shangchuan_xingming_find = value
          })
          .backgroundColor('#36D2')
        Button('查询')
          .width(200)
          .onClick(()=>{
            axios({
              method: "get",
              url: 'http://localhost:3000/find/'+this.shangchuan_xingming_find,
            }).then(res => {
              console.info('result:' + JSON.stringify(res.data));
            }).catch(error => {
              console.error(error);
            })
          })
      }
      .width('100%')
    // }
    .height('100%')
  }
}

后端使用代码可查看node.js后端+小程序前端+mongoDB(增删改查)-CSDN博客

02-08 16:33