Bagaimana untuk melaksanakan fungsi carian data menggunakan PHP dan Vue-tutorial php-php.cn

Bagaimana untuk melaksanakan fungsi carian data menggunakan PHP dan Vue

WBOY

Lepaskan： 2023-09-25 18:34:02

asal

728 orang telah melayarinya

Bagaimana untuk melaksanakan fungsi carian data menggunakan PHP dan Vue

Cara menggunakan PHP dan Vue untuk melaksanakan fungsi carian data

Dalam pembangunan Web moden, fungsi carian data telah menjadi perkara biasa dan perlu Ciri yang sangat diperlukan. PHP dan Vue ialah dua teknologi yang sangat popular Jika anda menggabungkan keupayaan hebat mereka, anda boleh melaksanakan fungsi carian data yang cekap.

Artikel ini akan memperkenalkan cara menggunakan PHP dan Vue untuk melaksanakan fungsi carian data melalui contoh kod tertentu Kami akan mengambil sistem pengurusan maklumat pelajar yang mudah sebagai contoh. Terdapat jadual maklumat pelajar dalam sistem, yang mengandungi maklumat seperti nama pelajar, umur dan jantina. Kita perlu melaksanakan borang carian supaya pengguna boleh mencari maklumat pelajar dengan memasukkan kata kunci.

Pertama, kita perlu membina antara muka hujung belakang PHP untuk mengendalikan fungsi carian. Kita boleh menggunakan sambungan operasi pangkalan data PHP, seperti PDO atau mysqli, untuk menyambung ke pangkalan data dan melaksanakan operasi pertanyaan. Berikut ialah contoh kod menggunakan sambungan PDO:

<?php 
// 连接数据库
$dsn = "mysql:host=localhost;dbname=database";
$username = "username";
$password = "password";
$dbh = new PDO($dsn, $username, $password);

// 处理搜索请求
$keyword = $_GET["keyword"];

// 查询语句
$sql = "SELECT * FROM student WHERE name LIKE :keyword";

// 使用预处理语句防止 SQL 注入
$stmt = $dbh->prepare($sql);
$stmt->bindValue(':keyword', '%' . $keyword . '%');

// 执行查询
$stmt->execute();

// 获取结果集
$results = $stmt->fetchAll(PDO::FETCH_ASSOC);

// 返回 JSON 格式的结果
echo json_encode($results);
?>

Salin selepas log masuk

Dalam kod di atas, kami mula-mula mewujudkan sambungan dengan pangkalan data, dan kemudian mendapatkan kata kunci yang dimasukkan oleh pengguna dari hujung hadapan. Seterusnya, kami menggunakan pernyataan yang disediakan untuk menghalang suntikan SQL dan melaksanakan pertanyaan, mengembalikan hasil pertanyaan ke bahagian hadapan dalam format JSON.

Seterusnya, kita perlu menggunakan Vue di bahagian hadapan untuk mengendalikan fungsi carian. Berikut ialah contoh kod menggunakan Vue:

<!DOCTYPE html>
<html>
<head>
  <title>数据搜索功能示例</title>
  <!-- 引入 Vue.js -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <input type="text" v-model="keyword" placeholder="请输入关键字">
    <button @click="search">搜索</button>
    <ul>
      <li v-for="student in students" :key="student.id">{{ student.name }}</li>
    </ul>
  </div>

  <script>
  new Vue({
    el: "#app",
    data() {
      return {
        keyword: "",
        students: []
      }
    },
    methods: {
      search() {
        // 发送 Ajax 请求到后端接口
        fetch('search.php?keyword=' + this.keyword)
          .then(response => response.json())
          .then(data => {
            this.students = data;
          })
          .catch(error => {
            console.error(error);
          });
      }
    }
  });
  </script>
</body>
</html>

Salin selepas log masuk

Dalam kod di atas, kami mula-mula memperkenalkan Vue.js dan mencipta tika Vue. Dalam pembolehubah data 中定义了 keyword 和 students 两个变量，分别用于保存用户输入的关键字和查询结果。在 search 方法中，我们使用 fetch 方法发送 Ajax 请求到后端接口，并将返回的数据赋值给 students contoh.

Melalui contoh kod PHP dan Vue di atas, kami telah melaksanakan fungsi carian data yang mudah. Selepas pengguna memasukkan kata kunci dalam kotak input dan mengklik butang carian, maklumat pelajar yang sepadan boleh diperolehi dari bahagian belakang dan dipaparkan pada halaman.

Di atas hanyalah contoh mudah Dalam pembangunan sebenar, kod boleh dioptimumkan dan dikembangkan mengikut keperluan tertentu. Saya harap artikel ini dapat membantu anda memahami cara menggunakan PHP dan Vue untuk melaksanakan fungsi carian data!

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