【学习笔记DAY4】Cordova跨平台鸿蒙开发AtomGit之初访问

通过前几期的学习和实践，我们已经可以搭建适用于windows系统的Cordova开发环境，并跨平台开发出可以运行的鸿蒙应用，实现了页面跳转和联网功能。

知识谱：

Cordova跨平台鸿蒙开发环境搭建
鸿蒙应用在线网络访问权限的实现

本篇我们将在之前已建应用的基础上，扩展功能，通过Open API 提供的强大能力，通过编程方式与 AtomGit 上的资源进行交互。

一、基础认知：
1.HTML属于静态标记语言，主要用于描述网页的结构和内容，本身不具备动态处理能力或执行编程逻辑的功能。‌因此HTML无法直接发起或处理网络请求（如HTTP请求），网络请求能力通常需要依赖JavaScript等脚本语言来实现交互功能。
2.AtomGit API 提供的开放接口，允许开发者通过编程方式访问和管理平台上的资源，如仓库、用户信息、文件等。各种操作的示例，request请求，response响应都可以在AtomGit官网API文档获得良好的支持。（官方文档：https://docs.atomgit.com/docs/apis/）

3.Fetch API 提供了一个获取资源的接口（包括跨网络通信），全局 fetch() 方法是一个 JavaScript 接口，用于访问和操纵 HTTP 管道的一些具体部分，例如请求和响应，该方法提供了一种简单，合理的方式来跨网络异步获取资源。（参考：https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API/Using_Fetch）
4.访问令牌是一种用于身份验证的凭据，通常用于替代密码，以便应用程序、工具或脚本访问特定的服务或API。大多数 AtomGit API 请求需要认证，或者在未提供认证时只返回公共数据。可以在AtomGit->个人设置->访问令牌->新建和管理个人令牌。

二、功能代码

1.设置令牌与本地存储

 // 设置令牌
 function setToken(){
 accessToken = document.getElementById('tokenInput').value.trim();
 ......          
 //保存到本地存储
 localStorage.setItem('gitcode_token',accessToken);
 ......
 }

2.获取列表

//获取列表
async function getProjects() {     
    try{
        const response = await fetch('https://api.gitcode.com/api/v5/search/users?access_token=访问令牌&q=myWord.toString()');
        
        if(!response.ok){
        //注意点号，不是单引号
        	throw new Error(`HTTP${response.status}`);
        }
        const projects = await response.json();
        displayProjects(projects,myWord+'用户');
     }catch(error){
        showMessage('获取失败'+error.message,'error');
        console.error('错误详情',error);
        }
}

3.显示列表

 //显示列表
 function displayProjects(projects,title){
     const resultDiv = document.getElementById('result');

     projects.forEach(project => {
         html += `
         <div class="project">
             <br>
             <strong>用户名:${project.name}</strong>
             <p>${project.description || '无描述'}</p>
             <a href="${project.html_url}" target="_blank">阅读相关内容</a>
         </div>
         `;
     });

     resultDiv.innerHTML = html;
}

特别声明：因对HTML和JavaScript语言的严重知识匮乏，所用代码的母本为DeepSeek生成，为了实现基本搜索功能、简化代码结构，删除了母本中的CSS代码和多余代码模块，同时为了与AtomGit API文档中的要求和示例相统一，对相关代码做了适应性修改。

Deepseek生成的代码片段：

try{
    const response = await fetch('https://gitcode.net/api/v4/projects?per_page=20',{
        headers:{
           'PRIVATE-TOKEN':accessToken
        }
   });
    if(!response.ok){
       throw new Error(`HTTP${response.status}`);
    }
    const projects = await response.json();
    displayProjects(projects,'我的仓库');
}catch(error){
    showMessage('获取失败'+error.message,'error');
    console.error('错误详情',error);

AtomGit API请求的基本要求：

AtomGit API示例：

修改后的代码：

try{
    const response = await fetch('https://api.gitcode.com/api/v5/search/users?access_token=访问令牌&q="鸿蒙"');
	......
}catch(error){
    ......           
}

优化后的代码:

 //url分段
 baseURL = 'https://api.gitcode.com/api/v5';
 endpoint = '/search/users';
 const params = new URLSearchParams({
         access_token:accessToken.toString(),
         q:myWord.toString()
     })

 try{          
     const url = `${baseURL}${endpoint}?${params.toString()}`;

     //最简单的API调用
     const response = await fetch(url);
	......
 }catch(error){
    ......
 }

关于访问令牌的安全：
在前端开发中，特别是在使用AtomGit API时，处理访问令牌（Access Tokens）需要谨慎，因为这些令牌通常用于访问敏感的API端点，它们不应该被随意存储在前端代码中，特别是直接嵌入到客户端代码中。最安全的做法是不要直接在代码中存储任何敏感信息，包括访问令牌。

欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net