PHP と UniApp はデータのタイムライン表示と時間フィルタリングを実装します

PHP と UniApp はデータのタイムライン表示と時間フィルタリングを実装します

モバイル インターネットの発展に伴い、タイムライン表示と時間フィルタリングは多くのアプリケーションで不可欠な機能になりました。この記事では、PHPとUniAppを使ってデータのタイムライン表示と時間フィルタリング機能を実装し、コード例を添付します。

1. データの準備とデータベースの設計

まず、いくつかのテスト データを準備し、このデータを保存するデータベース テーブルを設定する必要があります。 「events」という名前のデータ テーブルがあり、次のフィールドが含まれているとします。id (イベント ID)、title (イベント タイトル)、description (イベント説明)、start_time (イベント開始時刻)、end_time (イベント終了時刻)。

サンプル コード:

CREATE TABLE events (
    id INT(11) AUTO_INCREMENT PRIMARY KEY,
    title VARCHAR(255) NOT NULL,
    description TEXT,
    start_time DATETIME NOT NULL,
    end_time DATETIME NOT NULL
);

2. バックエンド コードの実装

次に、PHP を使用して、データベースからイベント データを取得し、返されるバックエンド コードを実装します。フロントエンドへ。

サンプル コード:

<?php

// 连接数据库
$servername = "localhost";
$username = "your_username";
$password = "your_password";
$dbname = "your_database_name";

$conn = new mysqli($servername, $username, $password, $dbname);

if ($conn->connect_error) {
    die("连接失败：" . $conn->connect_error);
}

// 获取时间范围参数
$start = $_GET['start'];
$end = $_GET['end'];

// 构建查询语句
$sql = "SELECT * FROM events WHERE start_time >= '$start' AND end_time <= '$end'";
$result = $conn->query($sql);

// 处理查询结果
$data = array();

if ($result->num_rows > 0) {
    while ($row = $result->fetch_assoc()) {
        $data[] = $row;
    }
}

// 返回JSON格式数据
header('Content-Type: application/json');
echo json_encode($data);

// 断开数据库连接
$conn->close();

?>

3. フロントエンド コードの実装

次に、UniApp を使用して、タイムラインを表示するためのフロントエンド コードを実装し、イベント データのフィルタリング。

サンプル コード:

<template>
  <view>
    <input type="date" v-model="startDate" @change="fetchData" />
    <input type="date" v-model="endDate" @change="fetchData" />
    <view v-for="event in events" :key="event.id">
      <view>{{ event.title }}</view>
      <view>{{ event.start_time }}</view>
      <view>{{ event.end_time }}</view>
      <view>{{ event.description }}</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      startDate: '',
      endDate: '',
      events: []
    }
  },
  methods: {
    fetchData() {
      // 发起请求获取数据
      uni.request({
        url: 'http://your_domain/api.php',
        data: {
          start: this.startDate,
          end: this.endDate
        },
        success: (res) => {
          this.events = res.data;
        }
      });
    }
  },
  mounted() {
    this.fetchData();
  }
}
</script>

この UniApp コードは、2 つの日付入力ボックスと表示イベントのリストを含む単純なページを示しています。ユーザーが開始日と終了日を選択すると、フロントエンド コードはリクエストを開始し、選択された日付をパラメーターとしてバックエンド コードに渡します。バックエンド コードは、渡された日付範囲に基づいてデータベースから修飾されたイベント データを取得し、それをフロントエンドに返し、ページ上にデータを表示します。

上記の PHP および UniApp コード例を通じて、データのタイムライン表示と時間フィルター機能を実装できます。この記事があなたのお役に立てば幸いです!

以上がPHP と UniApp はデータのタイムライン表示と時間フィルタリングを実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。