基于鸿蒙（ArkTs）作为前端开发，Node.js作为后端框架连接MySQL数据库实现的http数据通信，实现数据查询

一.基本知识介绍

1.鸿蒙原生语言ArkTs

ArkTS是一种设计用于构建高性能应用的编程语言。它在继承TypeScript语法的基础上进行了优化，以提供更高的性能和开发效率。

许多编程语言在设计之初未考虑移动设备，导致应用运行缓慢、低效且功耗大。随着移动设备在日常生活中越来越普遍，针对移动环境的编程语言优化需求日益增加。ArkTS专为解决这些问题而设计，聚焦提高运行效率。

TypeScript是在JavaScript基础上通过添加类型定义扩展而来的，ArkTS则是TypeScript的进一步扩展。TypeScript提供了一种更结构化的JavaScript编码方法，深受开发者喜爱。ArkTS保持了TypeScript的大部分语法，旨在为现有的TypeScript开发者实现无缝过渡，帮助移动开发者快速上手。

ArkTS的一大特性是它专注于低运行时开销。ArkTS对TypeScript的动态类型特性施加了更严格的限制，以减少运行时开销，提高执行效率。通过取消动态类型特性，ArkTS代码能更有效地被运行前编译和优化，从而实现更快的应用启动和更低的功耗。

ArkTS语言设计中考虑了与TypeScript和JavaScript的互通性。许多移动应用开发者希望重用TypeScript和JavaScript代码及库，因此ArkTS提供与TypeScript和JavaScript的无缝互通，使开发者可以轻松集成TypeScript和JavaScript代码到应用中，充分利用现有代码和库进行ArkTS开发。

ArkTs的优点是讲不完的，而作为一个本科新生，我的理解就是其作为鸿蒙原生编程语言，在推动产品国产化进程中有着其它语言无可比拟的作用，同样华为新推出的仓颉原生语言（Cangjie）也具有其强大的功能，以后博主可能会出一些基于仓颉的实现项目，也欢迎大家的指正支持！

本项目注重应用且只使用一些基础的ArkTs语法来实现。具体ArkTs的相应语法以及示例代码可以在鸿蒙开发者平台进行学习！

开发-HarmonyOS NEXT鸿蒙应用开发平台-华为开发者联盟

也可以在B站黑马程序员上进行基础语法的学习：

【全网首发黑马程序员鸿蒙 HarmonyOS NEXT星河版零基础入门到实战，零基础也能快速入门鸿蒙开发教程】https://www.bilibili.com/video/BV14t421W7pA?vd_source=ded291221abbad7d078b6a45fa46c6d2

2.Node.js

Node.js 是一个基于 Chrome JavaScript 运行时建立的一个平台，本质为js语言，npm（Node Package Manager）拥有数百万个开源包，只需在终端敲打npm install ...... 即可方便下载调用，你可以理解为运用它来编写后端代码十分高效便捷。

Node.js 是一个事件驱动 I/O 服务端 JavaScript 环境，基于 Google 的 V8 引擎，执行 Javascript 的速度非常快，运行起来相当舒服。

在博主的理解下，我觉得Node.js像是一个框架，它并不是一门像python、c++等的编程语言，它是一个跑js代码的框架，也就是它从下载就在你的操作系统之中了，你只需要在终端中输入node 要执行的js文件的路径即可启动Node.js了，这样是不是更好理解了？

同时建议先学习javascript的基础语法，这样才可以读懂代码并进行js文件的撰写。

相应的学习路径推荐黑马程序员的javascript与Node.js系列课程。

【黑马程序员前端JavaScript入门到精通全套视频教程，javascript核心进阶ES6语法、API、js高级等基础知识和实战教程】https://www.bilibili.com/video/BV1Y84y1L7Nn?p=2&vd_source=ded291221abbad7d078b6a45fa46c6d2

【黑马程序员Node.js全套入门教程，nodejs新教程含es6模块+npm+express+webpack+promise等_Nodejs实战案例详解】https://www.bilibili.com/video/BV1a34y167AZ?p=5&vd_source=ded291221abbad7d078b6a45fa46c6d2

官方下载路径如下，可以下载zip并解压安装即可：

Node.js — Download Node.js®

3.MySQL数据库

数据库（Database）是按照数据结构来组织、存储和管理数据的仓库。

我们也可以将数据存储在文件中，但是在文件中读写数据速度相对较慢。

所以，现在我们使用关系型数据库管理系统（RDBMS）来存储和管理大数据量。所谓的关系型数据库，是建立在关系模型基础上的数据库，借助于集合代数等数学概念和方法来处理数据库中的数据。

RDBMS 即关系数据库管理系统(Relational Database Management System)的特点：

1.数据以表格的形式出现

2.每行为各种记录名称

3.每列为记录名称所对应的数据域

4.许多的行和列组成一张表单

5.若干的表单组成database

而MySQL就恰好是这样一个数据库且简单易上手，这里需要一些MySQL的基础知识，可以学习B站上程序不打烊的课程就足够。

【【SQL数据库】SQL两小时半快速入门到精通 建议反复观看 学不会自我反省】https://www.bilibili.com/video/BV1yw4m1S7Be?vd_source=ded291221abbad7d078b6a45fa46c6d2

4.http通信

HTTP 是万维网（WWW）的数据通信的基础，设计目的是确保客户端与服务器之间的通信，是互联网上最常用的协议之一。

而对于http在各个操作系统（安卓，苹果，鸿蒙）上其实都有不同的编写方法，但是好在对于http，所有语言基本都具有非常好的API与封装可供调用，这就大大方便了我们开发者进行调用，而且万变不离其宗，主要都是进行一些配置，这里可以通过学习菜鸟教程对其有个大致的了解：

HTTP 教程 | 菜鸟教程

而对于鸿蒙相关的http，博主在一开始也踩了很多坑，它跟平常的http不太一样，是这样的流程：

 - 导入相应模块
 - 使用http模块
1. 创建一个请求对象
2. 发起网络请求
3. 处理响应结果
4. 必要的时候使用类（Promise），可以理解为异步请求，就是可以在将来拿到这个数据，也即在服务器拿到。

具体可以通过黑马程序员的相关教程进行学习（里面的http模块）：

【黑马程序员HarmonyOS4+NEXT星河版入门到企业级实战教程，一套精通鸿蒙应用开发】https://www.bilibili.com/video/BV1Sa4y1Z7B1?vd_source=ded291221abbad7d078b6a45fa46c6d2

华为http官方技术文档：

文档中心

在这个连接之中我们需要用到两次http，一次在使用http连接后端与MySQL数据库之中，我们主要在js代码中进行配置，另一次是使用http连接前后端，我们主要在ArkTs代码中配置，因而对两种我们都要有所了解。

5.相关技术平台准备

前端代码开发平台：DevEco Studio

DevEco Studio-鸿蒙应用集成开发环境（IDE）-华为开发者联盟

后端代码开发平台：Visual Studio Code

数据库使用平台：MySQL以及MySQL Workbench，可以跟着我前面的程序不打烊的B站教程进行下载安装就好啦！

二.项目实现

1.数据库基本部署

1.新建总的资源存放位置

下载完MySQL Workbench之后我们可以点击左下角的加号新建自己的资源存放位置，里面我们存放数据库以及相对应的表单等，这里我们要把信息记住，后续我们配置后端连接数据库会用到，以我这里举例：

localhost就是127.0.0.1（一般自己的主机都是这个IP，部署到云服务器则有别的IP地址）

user就是root（在自己没修改之前默认都是这样）

password就是当初安装时设置的密码

port就是3306端口号

2.创建数据库与表单

这些包括harmony,sys,your_database就是你自己创建数据库的名称啦，右键可以创建表单的总存放处，再右键即可创建表单啦，这里面的mytable就是表单，而左键点击后会有我所创建的Column的显示，以及对应的数据类型，我建了三行Column，其中id为主键。（怎么创建可观看B站教程）

到这里我们简单完成了数据库的对应配置啦！

下面来到重头戏，两次连接的主要实现

2.使用http连接js后端与MySQL数据库，并可以在服务器实现数据查询

1.基础配置（npm）

在Vscode里下载js插件，并新建一个js文件，新建一个新的终端，下载对应的我们要使用的Node.js的包。

2.导入对应模块

const express = require(\'express\');const mysql = require(\'mysql2\');

3.新建服务器并配置端口（注意区分MySQL的端口）

const app = express();const port = 3000;

4.数据库连接配置

// 数据库连接配置const db = mysql.createConnection({ host: \'localhost\', // 数据库主机地址 user: \'root\', // 数据库用户名 password: \'\', // 数据库密码 database: \'\', // 数据库名 port: 3306, // 数据库端口});//连接确认db.connect((err) => { if (err) { console.error(\'数据库连接失败:\', err.stack); return; } console.log(\'已连接到数据库\');});

5.在服务器进行数据查询

 //自己规定端口号app.get(\'/api/getData\', (req, res) => { const markerId = req.query.id; const sql = \'SELECT id, height, picture FROM mytable WHERE id = ? LIMIT 1\'; //query查询 db.query(sql, [markerId], (error, results) => { if (error) { console.error(\'数据库查询失败:\', error.stack); res.status(500).send(\'数据库查询失败\'); return; } if (results.length > 0) { const result = results[0]; //json格式输出 res.json({ id: result.id, height: result.height, //picture可忽略因为我在这里进行了BLOB编码格式转二进制的操作 picture: pictureBase64 ? `data:image/jpeg;base64,${pictureBase64}` : null, }); } else { res.status(404).send(\'未找到数据\'); } });});

6.监听服务器运行情况

app.listen(port, () => { console.log(`服务器运行在 http://localhost:${port}`);});

7.实现效果

terminal终端中：

浏览器中成功获取到数据（null是因为我没传图片）：

3.使用http连接前后端

这里因为项目的需要，我从后端拉取数据用的是数据库里的id作为主键进行数据区分，大家可自行修改。

1.导入HTTP模块，我们可以调用它的API

//导入http模块import http from \'@ohos.net.http\';

2.撰写一个异步函数

获取从后端拿过来的数据，并进行封装方便后续调用，具体代码如下

// 获取数据函数 //向后端拉取数据并更新页面状态 async fetchDataFromBackend(markerId: string) { // ------------------------------------------------- // 外层 try-catch：捕获整个“发请求”流程中的任何同步异常 // ------------------------------------------------- try { // 1) 创建 HTTP 客户端 const httpRequest = http.createHttp(); // 2) 拼装 GET 请求配置 const options: http.HttpRequestOptions = { method: http.RequestMethod.GET, // 在 URLSearchParams 里带 id=markerId extraData: { id: markerId } }; // 3) 发起异步请求 httpRequest.request( \'http://localhost:3000/api/getData\', options, (err: BusinessError, resp: http.HttpResponse) => { // ------------------------------------------------- // 回调里的 try-catch：捕获“回调内部”的同步异常 // ------------------------------------------------- try { if (err) {  console.error(\'请求出错:\', err);  return; } if (resp.responseCode === 200) {  try { // 解析后端返回的 JSON const data = JSON.parse(resp.result as string) as ApiResponse; // 把解析结果写进组件状态（驱动 UI 更新） this.text = `ID: ${data.id}\\n离地高度：${data.height}m\\n`; this.pictureUrl = data.picture;  } catch (parseError) { // 捕获 JSON 解析失败 console.error(\'解析失败:\', parseError);  } } else {  console.error(\'请求失败，状态码:\', resp.responseCode); } } catch (callbackError) { // 捕获回调里除 JSON 解析以外的其他同步异常 console.error(\'回调内异常:\', callbackError); } } ); } catch (error) { // 捕获“创建 HTTP 客户端、拼装 options”等步骤中的同步异常 console.error(\'获取数据失败:\', error); } }

3.实现效果

这样我们就实现了前后端的连接！其重点在于这里

这与后端的接口是对应的，这也就是前后端设计员常说的对接口

三.结语

1.学习平台推荐

在这里感谢一些帮助到我完成这个流程的平台

B站黑马程序员：

菜鸟教程：

华为开发者平台：

2.心得体会

博主是一名大一将升大二的本科生，在大一的时候学习了html+css+js前端三剑客以及后端的python框架，也是能做一些网页，对于app与鸿蒙却是涉世未深。而在这次暑假在组队打比赛和做项目的过程之中和学长与导师的招揽与推荐之下，接触到了鸿蒙的ArkTs与Cangjie语言，也第一次感受到了新的编程语言缺乏资料与AI难寻的困难，一步步的接触技术文档，深入底层去看整个鸿蒙生态，方知国产化我们仍有很长的一段路要走，我们只知华为不断研发出新的璀璨却未能理解背后开发者的共同努力，有幸的是在这个大一我看到了并参与其中，也希望我小小的几篇文章能够为共建鸿蒙生态出自己的一份力量，帮助到跟当时的我刚接触时一头雾水一样的你，因为博主还只是一个小小的本科生，这篇文章中肯定存在很多问题，也欢迎所有爱好者共同指正交流。

最后感谢自己为了项目，为了爱好，为了大家日夜研究的每一天，感谢支持我在大一就放弃回家而选择留校研究的家人们，感谢各类比赛ddl带给我的push感，感谢陪伴我进行开发的项目组成员们，感谢陪伴我努力的uu，接下来的路必定是璀璨星河！