PHPとUniAppを介してデータページング機能を実装する方法

PHP と UniApp を使用してデータ ページング機能を実装する方法

はじめに:
UniApp に基づいてモバイル アプリケーションを開発する場合、多くの場合、サーバーから大量のデータを取得して表示する必要があります。アプリ。ユーザー エクスペリエンスとアプリケーションのパフォーマンスを向上させるために、多くの場合、データをページに表示する必要があります。この記事では、PHPとUniAppを使ってデータページング機能を実装する方法をコード例を交えて紹介します。

1. PHP 部分:

1. データベース テーブルとデータの作成
   まず、表示するデータを保存するテーブルをデータベースに作成する必要があります。たとえば、フィールド ID、ユーザー名、および年齢を含む「user」という名前のテーブルを作成しました。

CREATE TABLE user (
id int(11) NOT NULL AUTO_INCREMENT,
username varchar(255 ) NOT NULL,
age int(11) NOT NULL,
主キー (id)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

次に、テスト データを挿入します:

INSERT INTO user (id, username, age) VALUES
(1, '張三', 18),
(2, '李斯', 20),
(3, '王武', 25),
(4, '趙Six', 30),
(5, 'Qianqi', 35),
(6, 'Sunba', 40),
(7, 'Zhoujiu', 45),
(8 , 'Wu Shi', 50);

2. PHP インターフェイスの作成
   次に、データベースから特定のページ番号のデータを取得するための PHP インターフェイスを作成する必要があります。

9c98dbdf9d0a2fbca2c2d788105c354aconnect_errno) {

echo "Failed to connect to MySQL: " . $mysqli->connect_error;
exit();

}

// 現在のページ番号を取得します
$page = isset($_GET['page']) ? $_GET['page' ] : 1;

//ページごとに表示されるデータ項目の数
$perPage = 3;

//開始オフセットを計算します
$ offset = ($page - 1) * $perPage;

//クエリ データ
$result = $mysqli->query("SELECT * FROM user LIMIT $offset, $perPage");

// データを JSON 形式でフロントエンドに返します
$data = array();
while ($row = $result->fetch_assoc()) {

$data[] = $row;

}
echo json_encode($data);

//データベース接続を閉じる
$mysqli->close();
?>

2. UniApp パート:

1. Vue コンポーネントの作成
   UniApp では、HTTP リクエストを開始し、取得したデータを表示するために Vue コンポーネントを作成する必要があります。

7ab6b075cc6c7bcbe15d0b9685c6f1da
b3f6d2e99bd71dbb2b65ad40c92bf0e0

<view v-for="user in userList" :key="user.id">
  <text>{{ user.username }}</text>
  <text>{{ user.age }}</text>
</view>
<button @click="loadMore">加载更多</button>

7b13547e2ff188449fe297f9f60757a0
3399104e6938bdac11bae5f4688ce7ba

4e07eaec52b67b6abe4024604b22f1f1
エクスポートデフォルト {
data() {

return {
  userList: [],  // 存储用户列表数据
  page: 1  // 当前页码
};

},
mount() {

this.loadData();

},
メソッド: {

loadData() {
  uni.request({
    url: 'http://your-php-server/api/getData.php',
    data: {
      page: this.page
    },
    success: (res) => {
      if (res.statusCode === 200) {
        this.userList = this.userList.concat(res.data);
      }
    }
  });
},
loadMore() {
  this.page++;
  this.loadData();
}

}
};
2cacc6d41bbb37262a98f745aa00fbf0

2. リクエスト ドメイン名の構成
   UniApp プロジェクトでは、法的なリクエスト ドメイン名を構成する必要があります。次のコードをmanifest.jsonファイルに追加し、独自のPHPサーバーアドレスに置き換えます。

"networkTimeout": {
"request": 60000,
"downloadFile": 60000,
"uploadFile": 60000,
"websocket": 60000
},
"uni.request": {
"プロトコル": "https",
"ドメイン": "your-php-server"
}

上記これらは、PHP と UniApp を使用してデータ ページング機能を実装する手順とコード例です。 PHPインターフェースを介してデータベースから指定したページ番号のデータを取得し、UniApp上で表示します。ユーザーが「さらに読み込む」ボタンをクリックすると、対応するページ番号が送信され、次のページのデータが読み込まれます。このようにして、データ ページング機能が実現され、ユーザー エクスペリエンスとアプリケーションのパフォーマンスが向上します。

以上がPHPとUniAppを介してデータページング機能を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。