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

1. 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.
2. 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);

}

// 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);
?>

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

1. 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.
2. 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:

<script><br>export default {<br> data() {</script>

return {
  keyword: "", // 用户输入的关键词
  items: [], // 从后端接口获取的数据
};

},
computed: {

filteredItems() {
  return this.items.filter((item) => {
    if (this.keyword === "") {
      return true;
    } else {
      return item.name.includes(this.keyword);
    }
  });
},

},
mounted() {

// 建议将接口地址根据实际情况配置到环境变量中，这里仅作示例
const API_URL = "http://yourdomain.com/filterData.php?filter=";
// 调用后端接口获取数据
fetch(API_URL + this.keyword)
  .then((response) => response.json())
  .then((data) => {
    this.items = data;
  });

},
};

3. Run the project
   Execute the following command in the command line to run the Vue project:

cd filter-demo
npm run serve

Then, open the browser and access http ://localhost:8080, you will see an input box and a data list. When you enter keywords in the input box, the data in the list will be filtered based on the keywords.

Conclusion:
Through the combination of PHP and Vue, we can achieve flexible and efficient data filtering functions. With server-side filtering, we can get data from the database and filter based on conditions. Through front-end filtering, we can quickly filter the data and render it on the page based on the keywords entered by the user. This combination provides users with a more personalized and efficient data browsing experience and improves application performance and responsiveness.

The above is the detailed content of How to implement data filtering function using PHP and Vue. For more information, please follow other related articles on the PHP Chinese website!