PHP and UniApp implement timeline display and time filtering of data

PHP and UniApp implement timeline display and time filtering of data

With the development of mobile Internet, timeline display and time filtering have become essential functions in many applications. In this article, we will use PHP and UniApp to implement the timeline display and time filtering functions of data, and attach code examples.

1. Data preparation and database design

First, we need to prepare some test data and set up database tables to store this data. Suppose we have a data table named "events" that contains the following fields: id (event ID), title (event title), description (event description), start_time (event start time), end_time (event end time).

Sample 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. Backend code implementation

Next, we use PHP to implement the backend code for retrieving from the database Event data and returned to the front end.

Sample 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. Front-end code implementation

Then, we use UniApp to implement the front-end code for displaying the timeline and filtering event data .

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

This UniApp code shows a simple page containing two date input boxes and a list of display events. When the user selects the start and end dates, the front-end code will initiate a request and pass the selected dates as parameters to the back-end code. The back-end code will retrieve qualified event data from the database based on the passed date range and return it to the front-end, which will display the data on the page.

Through the above PHP and UniApp code examples, we can implement the timeline display and time filtering functions of data. Hope this article can be helpful to you!

The above is the detailed content of PHP and UniApp implement timeline display and time filtering of data. For more information, please follow other related articles on the PHP Chinese website!