Bagaimana untuk melaksanakan fungsi penapisan data menggunakan PHP dan Vue

Cara melaksanakan fungsi penapisan data menggunakan PHP dan Vue

Pengenalan:
Dalam aplikasi web moden, penapisan data adalah fungsi yang sangat penting. Melalui penapisan data, kami boleh menapis dan mempersembahkan data mengikut keadaan dan keperluan yang berbeza, dengan itu memberikan pengalaman pengguna yang lebih diperibadikan dan cekap. Dalam artikel ini, kami akan mempelajari cara menggunakan PHP dan Vue untuk melaksanakan fungsi penapisan data dan memberikan contoh kod khusus.

1. Penapisan sebelah pelayan

1. Kerja penyediaan
   Untuk melaksanakan penapisan data sebelah pelayan, kami terlebih dahulu memerlukan antara muka data bahagian belakang untuk mendapatkan data daripada pangkalan data dan menapisnya. Kami menggunakan bahasa PHP untuk membina antara muka belakang.
2. Buat fail PHP
   Pertama, kami mencipta fail PHP bernama "filterData.php". Dalam fail ini, kami akan mentakrifkan fungsi fetchData() untuk mendapatkan data. Kod khusus adalah seperti berikut:

// Sambung ke pangkalan data dan dapatkan 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);

}

// Terima parameter permintaan, panggil fungsi untuk mendapatkan penapisan data, dan kembalikan JSON Response
$filter = isset($_GET["filter"]) ? $_GET["filter"] : "";
$data = fetchData($filter);
echo json_encode($data);
?>

3. Menguji antara muka
   Kami boleh menggunakan alatan seperti posmen untuk menguji antara muka kami. Dengan menghantar permintaan HTTP ke alamat antara muka, kami boleh mendapatkan data yang ditapis dan mengembalikannya dalam format JSON. Contoh alamat antara muka ialah: http://yourdomain.com/filterData.php?filter=John

2. Penapisan bahagian hadapan

1. Persediaan
   Untuk melaksanakan penapisan data bahagian hadapan, kami memerlukan contoh Vue untuk memaparkan halaman, dan Dapatkan data dengan memanggil antara muka data hujung belakang. Dalam contoh ini, kami menggunakan Vue-cli untuk mencipta projek Vue dengan cepat.
2. Buat contoh Vue
   Mula-mula, masukkan direktori projek dalam baris arahan dan laksanakan arahan berikut untuk mencipta projek Vue:

vue create filter-demo

Kemudian, cipta fail bernama "App.vue dalam src direktori " fail dan tulis kod berikut dalam fail:

lalai {
( ) {

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

},

dikira: {

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;
  });

},

};

Arahan berikut Jalankan projek
3. 
   talian untuk menjalankan projek Vue:

cd filter-demo
npm run serve

Kemudian, buka penyemak imbas dan lawati http://localhost:8080, anda akan melihat kotak input dan senarai data. Apabila anda memasukkan kata kunci dalam kotak input, data dalam senarai akan ditapis berdasarkan kata kunci.

Kesimpulan:
Melalui gabungan PHP dan Vue, kami boleh mencapai fungsi penapisan data yang fleksibel dan cekap. Dengan penapisan sisi pelayan, kami boleh mendapatkan data daripada pangkalan data dan penapis berdasarkan syarat. Melalui penapisan bahagian hadapan, kami boleh menapis data dengan pantas dan memaparkannya pada halaman berdasarkan kata kunci yang dimasukkan oleh pengguna. Gabungan ini memberikan pengguna pengalaman penyemakan imbas data yang lebih diperibadikan dan cekap serta meningkatkan prestasi dan responsif aplikasi.

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan fungsi penapisan data menggunakan PHP dan Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!