PHP와 Vue를 사용하여 데이터 필터링 기능을 구현하는 방법-PHP 튜토리얼-php.cn

PHP와 Vue를 사용하여 데이터 필터링 기능을 구현하는 방법

PHP 및 Vue를 사용하여 데이터 필터링 기능을 구현하는 방법

소개:
현대 웹 애플리케이션에서 데이터 필터링은 매우 중요한 기능입니다. 데이터 필터링을 통해 다양한 조건과 요구 사항에 따라 데이터를 필터링하고 제시할 수 있으므로 보다 개인화되고 효율적인 사용자 경험을 제공할 수 있습니다. 이 기사에서는 PHP와 Vue를 사용하여 데이터 필터링 기능을 구현하는 방법을 배우고 구체적인 코드 예제를 제공합니다.

1. 서버 측 필터링

준비 작업
서버 측 데이터 필터링을 구현하려면 먼저 데이터베이스에서 데이터를 가져와 필터링하는 백엔드 데이터 인터페이스가 필요합니다. 우리는 백엔드 인터페이스를 구축하기 위해 PHP 언어를 사용합니다.
PHP 파일 만들기
먼저 "filterData.php"라는 이름의 PHP 파일을 만듭니다. 이 파일에서는 데이터를 가져오는 fetchData() 함수를 정의합니다. 구체적인 코드는 다음과 같습니다.

// 데이터베이스에 연결하여 데이터 가져오기
function fetchData($filter) {

// 这里假设我们已经连接到数据库，并可以执行查询操作
// 在实际应用中，你需要根据自己的情况进行数据库连接和查询操作

// 这里仅作示例，返回一个假数据
$data = [
    ["id" => 1, "name" => "John Doe", "age" => 25],
    ["id" => 2, "name" => "Jane Smith", "age" => 30],
    ["id" => 3, "name" => "Mike Johnson", "age" => 35],
    ["id" => 4, "name" => "Lisa Brown", "age" => 28],
    ["id" => 5, "name" => "Tom Wilson", "age" => 32],
];

// 进行过滤操作
$filteredData = array_filter($data, function($item) use ($filter) {
    if ($filter === "") {
        // 如果没有传入过滤条件，则返回全部数据
        return true;
    } else {
        // 根据过滤条件返回满足条件的数据
        return strpos($item["name"], $filter) !== false;
    }
});

// 返回过滤后的数据
return array_values($filteredData);

로그인 후 복사

}

// 요청 매개변수를 받고 함수를 호출하여 필터링된 데이터 가져오기 데이터를 반환하고 JSON 응답을 반환합니다.
$filter = isset($_GET["filter"]) ? $_GET["filter"] : "";
$data = fetchData($filter);
echo json_encode($data);
?>

인터페이스 테스트
Postman과 같은 도구를 사용하여 인터페이스를 테스트할 수 있습니다. 인터페이스 주소로 HTTP 요청을 보내면 필터링된 데이터를 얻어 JSON 형식으로 반환할 수 있습니다. 예제 인터페이스 주소는 다음과 같습니다. http://yourdomain.com/filterData.php?filter=John

2. 프런트엔드 필터링

Preparation
프런트엔드 데이터 필터링을 구현하려면 Vue 인스턴스가 필요합니다. 페이지를 렌더링하고 백엔드 데이터 인터페이스를 호출하여 데이터를 얻습니다. 이 예에서는 Vue-cli를 사용하여 Vue 프로젝트를 빠르게 생성합니다.
Vue 인스턴스 만들기
먼저 명령줄에 프로젝트 디렉터리를 입력하고 다음 명령을 실행하여 Vue 프로젝트를 만듭니다.

vue create filter-demo

그런 다음 src 디렉터리 " 파일을 만들고 파일에 다음 코드를 작성합니다.