Cara menggunakan PHP dan Vue untuk melaksanakan fungsi sambungan data

Cara menggunakan PHP dan Vue untuk melaksanakan fungsi sambungan data

Pengenalan:
Dalam aplikasi web moden, sambungan data adalah fungsi yang sangat penting. Menginteraksikan data pada bahagian belakang dengan antara muka pengguna pada bahagian hadapan adalah kunci untuk mencapai aplikasi yang mesra pengguna. PHP ialah bahasa pengaturcaraan sebelah pelayan yang popular, manakala Vue ialah rangka kerja bahagian hadapan yang popular. Fungsi sambungan data boleh dilaksanakan dengan mudah menggunakan PHP dan Vue bersama-sama. Dalam artikel ini, kami akan memberi tumpuan kepada cara menggunakan PHP dan Vue untuk melaksanakan fungsi sambungan data dan menyediakan contoh kod khusus.

1 Buat pangkalan data
Pertama, kita perlu buat pangkalan data untuk menyimpan data kita. MySQL atau sistem pengurusan pangkalan data hubungan lain boleh digunakan. Berikut ialah contoh pertanyaan SQL untuk mencipta pangkalan data bernama "pelajar" dan jadual data bernama "pengguna":

CREATE DATABASE students;
USE students;

CREATE TABLE users (
  id INT PRIMARY KEY AUTO_INCREMENT,
  name VARCHAR(255),
  email VARCHAR(255),
  age INT
);

2. Buat bahagian belakang PHP
Seterusnya, kita perlu mencipta bahagian belakang PHP untuk mengendalikan interaksi dengan pangkalan data . Kami boleh menggunakan sambungan PDO (Objek Data PHP) PHP untuk menyambung dan melaksanakan operasi berkaitan pangkalan data. Berikut ialah contoh kod hujung belakang PHP yang mudah untuk mendapatkan dan menyimpan data pengguna:

<?php
// 连接数据库
$db = new PDO('mysql:host=localhost;dbname=students', 'username', 'password');

// 获取用户数据
function getUsers() {
  global $db;
  $query = $db->query('SELECT * FROM users');
  $users = $query->fetchAll(PDO::FETCH_ASSOC);
  return $users;
}

// 保存用户数据
function saveUser($name, $email, $age) {
  global $db;
  $stmt = $db->prepare('INSERT INTO users (name, email, age) VALUES (?, ?, ?)');
  $stmt->execute([$name, $email, $age]);
}

3. Cipta bahagian hadapan Vue
Sekarang, mari kita cipta bahagian hadapan Vue untuk memaparkan dan menyimpan data pengguna. Kami boleh menggunakan pustaka axios yang disediakan oleh Vue untuk menghantar permintaan HTTP ke bahagian belakang dan mengikat data ke antara muka bahagian hadapan. Berikut ialah contoh kod bahagian hadapan Vue yang mudah:

<template>
  <div>
    <h1>用户列表</h1>
    <ul>
      <li v-for="user in users" :key="user.id">
        {{ user.name }} - {{ user.email }} - {{ user.age }}
      </li>
    </ul>
    <h2>添加用户</h2>
    <input v-model="name" placeholder="姓名" />
    <input v-model="email" placeholder="邮箱" />
    <input v-model="age" placeholder="年龄" />
    <button @click="saveUser">保存</button>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      users: [],
      name: '',
      email: '',
      age: ''
    };
  },
  mounted() {
    this.getUsers();
  },
  methods: {
    getUsers() {
      axios.get('backend.php?action=getUsers')
        .then(response => {
          this.users = response.data;
        })
        .catch(error => {
          console.error(error);
        });
    },
    saveUser() {
      axios.post('backend.php?action=saveUser', {
        name: this.name,
        email: this.email,
        age: this.age
      })
      .then(() => {
        this.getUsers();
        this.name = '';
        this.email = '';
        this.age = '';
      })
      .catch(error => {
        console.error(error);
      });
    }
  }
};
</script>

4. Sambungkan bahagian hadapan dan belakang
Akhir sekali, kita perlu menyambungkan bahagian hadapan dan belakang. Kami boleh mencipta fail bernama "backend.php" untuk mengendalikan permintaan HTTP yang dihantar oleh bahagian hadapan dan memanggil fungsi bahagian belakang yang sepadan. Berikut ialah contoh kod "backend.php" mudah:

<?php
header('Content-Type: application/json');

include 'db.php';

$action = $_GET['action'];

if ($action === 'getUsers') {
  $users = getUsers();
  echo json_encode($users);
}

if ($action === 'saveUser') {
  $name = $_POST['name'];
  $email = $_POST['email'];
  $age = $_POST['age'];
  saveUser($name, $email, $age);
}

Sekarang, apabila kita mengakses halaman hadapan Vue dalam penyemak imbas, ia akan menghantar permintaan HTTP ke bahagian belakang PHP melalui axios dan mengikat data kepada antara muka bahagian hadapan yang lebih tinggi. Apabila kami mengisi borang dan mengklik butang "Simpan", ia akan menghantar permintaan HTTP POST ke bahagian belakang dan menyimpan data pengguna ke pangkalan data.

Kesimpulan:
Dengan menggunakan PHP dan Vue, kita boleh melaksanakan fungsi sambungan data dengan mudah. PHP menyediakan alatan untuk berinteraksi dengan pangkalan data, manakala Vue menyediakan rangka kerja bahagian hadapan yang fleksibel dan mudah digunakan. Dengan menyambungkan bahagian hadapan dan bahagian belakang, kami boleh membina aplikasi mesra pengguna dan membolehkan operasi pada data. Melalui pengenalan dan contoh kod artikel ini, saya percaya pembaca mempunyai pemahaman asas tentang cara menggunakan PHP dan Vue untuk melaksanakan fungsi sambungan data.

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