HarmonyOS 應用中複雜業務場景下的介面設計

Swift社区發表於2024-11-29

前言

在開發複雜業務應用時，介面設計不僅需要滿足業務功能，還要考慮通用性和高效性。對於多業務耦合場景，介面如何靈活擴充套件、避免過度設計，同時保證資料傳輸的高效，是開發者需要解決的重要問題。本文結合 HarmonyOS 的開發實踐，分享如何針對複雜業務場景設計高擴充套件性、低耦合的介面。

設計理念與原則

模組化設計

透過將介面按業務功能模組劃分，減少不同模組之間的耦合。例如使用者管理、訂單管理等模組獨立設計，介面職責清晰。

動態可擴充套件性

支援客戶端指定請求引數和響應欄位，根據需求動態返回資料，避免冗餘。

支援多種查詢模式

設計介面時相容常見的分頁、過濾、排序等功能，提升介面的靈活性。

統一響應格式

定義一致的響應結構，便於客戶端處理和錯誤追蹤，例如標準的code、message和data欄位。

實現複雜業務介面示例

後端介面程式碼（Node.js + Express）

import express from 'express';

const app = express();

// 模擬業務資料
const orders = [
  { id: 1, user: 'John', amount: 100, status: 'pending', createdAt: '2023-10-01' },
  { id: 2, user: 'Alice', amount: 200, status: 'completed', createdAt: '2023-09-25' },
  { id: 3, user: 'Bob', amount: 150, status: 'cancelled', createdAt: '2023-10-05' },
];

// 通用響應格式
function formatResponse(code: number, message: string, data: any) {
  return { code, message, data };
}

// 複雜查詢介面
app.get('/api/orders', (req, res) => {
  const { user, status, sortBy, page = 1, limit = 10 } = req.query;

  let result = [...orders];

  // 按使用者篩選
  if (user) {
    result = result.filter(order => order.user === user);
  }

  // 按狀態篩選
  if (status) {
    result = result.filter(order => order.status === status);
  }

  // 排序
  if (sortBy) {
    result.sort((a, b) => (a[sortBy] > b[sortBy] ? 1 : -1));
  }

  // 分頁
  const start = (page - 1) * limit;
  const end = start + limit;
  const paginatedData = result.slice(start, end);

  res.json(formatResponse(200, 'Success', paginatedData));
});

app.listen(3000, () => console.log('Server is running on port 3000'));

前端呼叫程式碼（ArkTS）

import fetch from '@system.fetch';

export default {
  data: {
    orderList: []
  },

  async fetchOrders(params: string) {
    try {
      const response = await fetch.fetch({
        url: `http://localhost:3000/api/orders${params}`,
        method: 'GET',
        responseType: 'json'
      });
      this.orderList = response.data.data; // 取響應中的資料部分
    } catch (error) {
      console.error('請求失敗:', error);
    }
  }
};

前端介面（ArkUI）

import { View, Text, Button, List, ListItem } from '@ohos.arkui';

export default {
  build() {
    return (
      <View>
        <Button
          value="獲取全部訂單"
          onClick={() => this.fetchOrders('?page=1&limit=10')}
        />
        <Button
          value="獲取Pending訂單"
          onClick={() => this.fetchOrders('?status=pending')}
        />
        <List>
          {this.orderList.map(order => (
            <ListItem>
              <Text>{`訂單ID: ${order.id}, 使用者: ${order.user}, 狀態: ${order.status}`}</Text>
            </ListItem>
          ))}
        </List>
      </View>
    );
  }
};

程式碼詳解

後端程式碼詳解

  1. 資料模擬：

    • orders陣列模擬了訂單資料，包括id、user、amount等欄位。

  2. 通用響應格式：

    • formatResponse方法統一了返回結果的結構，包含code（狀態碼）、message（資訊）和data（資料）。

  3. 查詢引數解析：

    • 介面支援按user、status篩選訂單。
    • 支援根據sortBy引數對結果排序。
    • 提供分頁功能，透過page和limit引數控制返回資料的數量。

  4. 最終響應：

    • 將篩選、排序、分頁後的資料返回給客戶端。

前端程式碼詳解

  1. HTTP請求：

    • 使用fetch.fetch模組向後端傳送GET請求，params引數用於動態拼接查詢條件。

  2. 資料處理：

    • 將介面返回的資料儲存到orderList中，便於在介面中展示。

介面程式碼詳解

  1. 互動按鈕：

    • 兩個按鈕分別請求不同條件的訂單資料。
    • 使用onClick繫結互動邏輯，呼叫fetchOrders方法。

  2. 訂單列表展示：

    • 使用<List>元件迴圈渲染orderList中的訂單資訊。
    • 每條訂單作為<ListItem>展示，顯示訂單ID、使用者和狀態。

介面設計的關鍵點

靈活的查詢引數

透過動態查詢引數，支援多種組合篩選，提高介面的適配能力。

分頁與排序

分頁控制返回資料的數量，降低傳輸壓力；排序功能便於客戶端定製資料展示順序。

通用響應結構

一致的返回格式便於客戶端解析和錯誤處理。

高擴充套件性

介面邏輯清晰，便於後續增加新篩選條件或業務邏輯。

QA環節

  1. 如何處理大資料量介面響應？

    • 使用分頁和延遲載入機制。
    • 開啟資料壓縮（如GZIP）減少資料量。

  2. 如何減少介面的呼叫頻率？

    • 實現資料快取，減少重複請求。
    • 使用增量資料介面，僅返回更新的資料。

  3. 如何保障介面安全？

    • 驗證請求引數的合法性。
    • 使用加密傳輸（如HTTPS）。

總結

針對複雜業務場景，介面設計應注重靈活性和擴充套件性，動態支援不同業務需求，同時最佳化效能。本文透過欄位篩選、分頁和排序的結合展示了介面如何滿足多場景需求。

參考資料

  • HarmonyOS ArkTS開發文件
  • Express 官方文件
  • 前端介面呼叫最佳化策略

相關文章