How to implement data filtering function using PHP and Vue-PHP Tutorial-php.cn

How to implement data filtering function using PHP and Vue

How to use PHP and Vue to implement data filtering function

Introduction:
In modern web applications, data filtering is a very important function. Through data filtering, we can filter and present data according to different conditions and requirements, thereby providing a more personalized and efficient user experience. In this article, we will learn how to use PHP and Vue to implement data filtering functions, and provide specific code examples.

1. Server-side filtering

Preparation work
In order to implement server-side data filtering, we first need a back-end data interface to obtain data from the database and perform filter. We use PHP language to build the back-end interface.
Create PHP file
First, we create a PHP file named "filterData.php". In this file, we will define a function fetchData() to get data. The specific code is as follows:

// Connect to the database and obtain data
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);

Copy after login

}

// Receive the request parameters, call the function to obtain the filtered data, and return the JSON response
$filter = isset($_GET["filter"]) ? $_GET["filter"] : "";
$data = fetchData($filter);
echo json_encode($data);
?>

Test interface
We can use tools such as postman to test our interface . By sending an HTTP request to the interface address, we can obtain the filtered data and return it in JSON format. The example interface address is: http://yourdomain.com/filterData.php?filter=John

2. Front-end filtering

Preparation work
In order to implement the front-end For data filtering, we need a Vue instance to render the page and obtain the data by calling the backend data interface. In this example, we use Vue-cli to quickly create a Vue project.
Create Vue instance
First, enter the project directory in the command line and execute the following command to create a Vue project:

vue create filter-demo

Then, create a file named "App.vue" in the src directory and write the following code in the file: