一.基本常识讲解
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并解压安装即可：
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是万维网数据通信的基石，其设计初衷是保障客户端与服务器之间的通信，是互联网上应用极为广泛的协议之一。
对于http在各个操作系统（安卓，苹果，鸿蒙）上其实都有不同的编写方法，但是好在对于http，所有语言基本都具有非常好的API与封装可供调用，这就大大方便了我们开发者进行调用，而且万变不离其宗，主要都是进行一些配置，这里可以通过学习菜鸟教程对其有个大致的认知：
而对于鸿蒙相关的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: BusinessError<void>, resp: http.HttpResponse) => {
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<void>, 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站黑马程序员：
