PHP dan UniApp melaksanakan paparan garis masa dan penapisan masa data

PHP dan UniApp melaksanakan paparan garis masa dan penapisan masa data

Dengan pembangunan Internet mudah alih, paparan garis masa dan penapisan masa telah menjadi fungsi penting dalam banyak aplikasi. Dalam artikel ini, kami akan menggunakan PHP dan UniApp untuk melaksanakan paparan garis masa dan fungsi penapisan masa data, dan melampirkan contoh kod.

1. Penyediaan data dan reka bentuk pangkalan data

Pertama, kita perlu menyediakan beberapa data ujian dan menyediakan jadual pangkalan data untuk menyimpan data ini. Katakan kita mempunyai jadual data bernama "acara" yang mengandungi medan berikut: id (ID acara), tajuk (tajuk acara), perihalan (huraian acara), masa mula (masa mula acara), masa tamat (masa tamat acara).

Kod contoh:

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. Pelaksanaan kod belakang

Seterusnya, kami menggunakan PHP untuk melaksanakan kod hujung belakang untuk mendapatkan semula data acara daripada pangkalan data dan mengembalikannya ke bahagian hadapan.

Kod contoh:

<?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. Pelaksanaan kod hadapan

Kemudian, kami menggunakan UniApp untuk melaksanakan kod bahagian hadapan untuk memaparkan garis masa dan menapis data acara.

Kod contoh:

<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>

Kod UniApp ini menunjukkan halaman ringkas yang mengandungi dua kotak input tarikh dan senarai acara yang dipaparkan. Apabila pengguna memilih tarikh mula dan tamat, kod bahagian hadapan akan memulakan permintaan dan menghantar tarikh yang dipilih sebagai parameter kepada kod hujung belakang. Kod bahagian belakang akan mendapatkan semula data acara yang layak daripada pangkalan data berdasarkan julat tarikh yang diluluskan dan mengembalikannya ke bahagian hadapan, yang akan memaparkan data pada halaman.

Melalui contoh kod PHP dan UniApp di atas, kami boleh melaksanakan paparan garis masa dan fungsi penapisan masa data. Harap artikel ini dapat membantu anda!

Atas ialah kandungan terperinci PHP dan UniApp melaksanakan paparan garis masa dan penapisan masa data. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!