如何利用PHP和Vue实现仓库管理的会员管理功能

$conn = new mysqli("localhost", "username", "password", "database"); if ($conn->connect_error) { die("连接数据库失败: " . $conn->connect_error); }

$sql = "SELECT * FROM members"; $result = $conn->query($sql); if ($result->num_rows > 0) { $members = array(); while ($row = $result->fetch_assoc()) { $members[] = $row; } echo json_encode($members); } else { echo "暂无会员信息"; }

$name = $_POST["name"]; $phone = $_POST["phone"]; $idCard = $_POST["idCard"]; $sql = "INSERT INTO members (name, phone, id_card) VALUES ('$name', '$phone', '$idCard')"; if ($conn->query($sql) === TRUE) { echo "添加会员成功"; } else { echo "添加会员失败: " . $conn->error; }

$id = $_POST["id"]; $sql = "DELETE FROM members WHERE id=$id"; if ($conn->query($sql) === TRUE) { echo "删除会员成功"; } else { echo "删除会员失败: " . $conn->error; }

new Vue({ el: '#app', data: { members: [] }, mounted() { this.fetchMembers(); }, methods: { fetchMembers() { axios.get('member.php') .then(response => { this.members = response.data; }) .catch(error => { console.log(error); }); } } });

 
 
 
 
ID
 
姓名
 
手机号码
 
身份证号码
 
操作
 
 
 
 
 
{{ member.id }}
 
{{ member.name }}
 
{{ member.phone }}
 
{{ member.id_card }}
 
 删除 
 
 
 
 

 
    添加 
  

methods: { addMember() { axios.post('member.php', { name: this.name, phone: this.phone, idCard: this.idCard }) .then(response => { alert(response.data); this.fetchMembers(); this.name = ''; this.phone = ''; this.idCard = ''; }) .catch(error => { console.log(error); }); } }

methods: { deleteMember(id) { axios.post('member.php', { id: id }) .then(response => { alert(response.data); this.fetchMembers(); }) .catch(error => { console.log(error); }); } }