PHP 및 UniApp은 데이터의 타임라인 표시 및 시간 필터링을 구현합니다.

PHP와 UniApp은 타임라인 표시와 데이터의 시간 필터링을 구현합니다.

모바일 인터넷의 발달로 타임라인 표시와 시간 필터링은 많은 애플리케이션에서 필수적인 기능이 되었습니다. 본 글에서는 PHP와 UniApp을 사용하여 데이터의 타임라인 표시 및 시간 필터링 기능을 구현하고 코드 예제를 첨부하겠습니다.

1. 데이터 준비 및 데이터베이스 설계

먼저 테스트 데이터를 준비하고 이 데이터를 저장할 데이터베이스 테이블을 설정해야 합니다. id(이벤트 ID), title(이벤트 제목), 설명(이벤트 설명), start_time(이벤트 시작 시간), end_time(이벤트 종료 시간) 필드를 포함하는 "events"라는 데이터 테이블이 있다고 가정합니다.

샘플 코드:

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 코드는 두 개의 날짜 입력 상자와 표시된 이벤트 목록이 포함된 간단한 페이지를 보여줍니다. 사용자가 시작 날짜와 종료 날짜를 선택하면 프런트 엔드 코드는 요청을 시작하고 선택한 날짜를 매개 변수로 백 엔드 코드에 전달합니다. 백엔드 코드는 전달된 날짜 범위를 기반으로 데이터베이스에서 적격 이벤트 데이터를 검색하고 이를 프런트엔드로 반환하여 페이지에 데이터를 표시합니다.

위의 PHP 및 UniApp 코드 예제를 통해 데이터의 타임라인 표시 및 시간 필터링 기능을 구현할 수 있습니다. 이 기사가 도움이 되기를 바랍니다!

위 내용은 PHP 및 UniApp은 데이터의 타임라인 표시 및 시간 필터링을 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!