PHP et UniApp implémentent l'affichage de la chronologie et le filtrage temporel des données

PHP et UniApp implémentent l'affichage chronologique et le filtrage temporel des données

Avec le développement de l'Internet mobile, l'affichage chronologique et le filtrage temporel sont devenus des fonctions essentielles dans de nombreuses applications. Dans cet article, nous utiliserons PHP et UniApp pour implémenter les fonctions d'affichage de la chronologie et de filtrage temporel des données, et joindrons des exemples de code.

1. Préparation des données et conception de la base de données

Tout d'abord, nous devons préparer des données de test et configurer des tables de base de données pour stocker ces données. Supposons que nous ayons une table de données nommée "events" qui contient les champs suivants : id (ID de l'événement), title (titre de l'événement), description (description de l'événement), start_time (heure de début de l'événement), end_time (heure de fin de l'événement).

Exemple de code :

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. Implémentation du code backend

Ensuite, nous utilisons PHP pour implémenter le code backend permettant de récupérer les données d'événement de la base de données et de les renvoyer au frontend.

Exemple de code :

<?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. Implémentation du code frontal

Ensuite, nous utilisons UniApp pour implémenter le code frontal permettant d'afficher la chronologie et de filtrer les données d'événement.

Exemple de code :

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

Ce code UniApp affiche une page simple contenant deux zones de saisie de date et une liste des événements affichés. Lorsque l'utilisateur sélectionne les dates de début et de fin, le code front-end lancera une demande et transmettra les dates sélectionnées comme paramètres au code back-end. Le code back-end récupérera les données d'événement qualifiées de la base de données en fonction de la plage de dates transmise et les renverra au front-end, qui affichera les données sur la page.

Grâce aux exemples de code PHP et UniApp ci-dessus, nous pouvons implémenter les fonctions d'affichage de la chronologie et de filtrage temporel des données. J'espère que cet article pourra vous être utile !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!