网站开发与维护是学什么怎样优化标题关键词
一、项目初始化与环境准备
1. 创建鸿蒙工程
src/main/ets/
├── api/
│ ├── api.ets # 接口聚合入口
│ ├── login.ets # 登录模块接口
│ └── request.ets # 网络请求核心封装
└── pages/ └── login.ets # 登录页面逻辑 通过DevEco Studio新建项目，手动添加生成上面目录结构。
2. 安装axios依赖
在终端执行（必须联网）：
ohpm install @ohos/axios 作用：
引入与Web端兼容的HTTP库，自动处理鸿蒙系统网络接口适配
二、配置网络权限（关键步骤！）
修改entry/src/main/module.json5 ，添加内容：
"module": { "requestPermissions": [ { "name": "ohos.permission.INTERNET"} ]
} 常见问题：
权限未声明 → 应用崩溃且无网络响应；生产环境需补充ohos.permission.NOTIFICATION 等权限说明
三、核心代码分步实现
1. 网络请求核心层 api/request.ets
//封装axios网络请求模块
import axios,{InternalAxiosRequestConfig,AxiosResponse}from '@ohos/axios'export interface Option_Type{method?:stringurl:stringdata?:objectparams?:objectheaders?:object
}interface Request_dataType{code:numbermessage?:stringdata?:object | null
}const request = axios.create({//使用const声明baseURL:"http://159.75.169.224:3321/v3pz",// API网关地址headers:{Terminal:"h5"}, // 终端标识(告诉服务器是手机还是电脑访问)timeout:15000///增加超时配置，防止长时间阻塞
})
//请求拦截器优化
request.interceptors.request.use((req:InternalAxiosRequestConfig)=>{req.headers['h-token'] = "d43ff2fe3e5b0927df54662af86d4ac8"return req
})function http(options: Option_Type) {// 获取请求方法，默认使用GETlet method = options.method || "GET" // 若未指定method则赋默认值// 将GET请求的data参数转为paramsif (method.toLowerCase() === "get") { // 统一转为小写比较options.params = options.data // 将data内容转移到params}// 发送请求return request(options) // 调用axios实例发送请求
}//全局响应处理，统一错误逻辑,接收http结果 → 返回业务数据
export default async function test<T>(options: Option_Type): Promise<T> {// 发送请求并等待响应let result: AxiosResponse<Request_dataType> = await http(options) // 异步等待请求完成// 解构响应数据let res = result.data // 获取响应主体数据let code = res.code // 提取状态码console.log(" 输入obj", JSON.stringify(res)) // 开发调试日志console.log("[DEBUG] 响应原始数据:", result); // 打印完整响应对象console.log("[INFO] 解析后的状态码:", res.code);// 状态码判断if (code=== 10000) {return res.data as T // 成功时返回数据} else if (code === -2 && res.message === 'token错误') {throw new Error(res.message) // 特定错误处理} else {throw new Error(res.message) // 通用错误处理}}
2. 登录接口层 api/login.ets
//数据模型定义,接口封装
import request from './request'
// 定义登录接口返回数据类型
export interface return_login_type{token:string,userInfo:userInfo
}
// 用户基础信息实体类
export interface userInfo{avatar:string,name:string
}
// 登录请求参数接口
interface login_type{passWord:stringuserName:string
}export function login_submit(data:login_type){return request<return_login_type>({//调用request接口url:'./login' ,// 接口路径method:'post',data})
}3. 接口聚合层 api/api.ets
// 📎 统一导出所有业务接口（便于模块化管理）
export * from './login';
// 后续可添加：
// export * from './user';
// export * from './order'; 4. 视图层 pages/login.ets
//页面周期控制，UI框架集成
import { login_submit } from '../api/api';@Entry
@Component
struct login{onPageShow(): void {login_submit({//调用了api/login_submit接口// 模拟用户登录（硬编码账号密码存在安全风险）userName:"18993391234",passWord:"123456"})}build(){}
}
注册账号：http://159.75.169.224:3322
注册后填写信息到代码。
在pages\login.ets使用previewer，得到调试信息
04-16 22:06:26.302 33376-34256 A0c0d0/JSAPP I 输入obj {"code":10000,"message":"success","data":{"token":"00a688216d7c1858fc1b4d3da6a36a8c","userInfo":{"avatar":"http://159.75.169.224:5500/avatar.jpeg","name":"admin"}}}
04-16 22:06:26.302 33376-34256 A0c0d0/JSAPP I [DEBUG] 响应原始数据: [object Object]
04-16 22:06:26.302 33376-34256 A0c0d0/JSAPP I [INFO] 解析后的状态码: 10000
流程图：
