Rumah > Artikel > pembangunan bahagian belakang > Pembangunan PHP dan Vue: Bagaimana untuk melaksanakan kemas kini dinamik mata keahlian
PHP dan pembangunan Vue: kemas kini dinamik mata keahlian
Pengenalan:
Dalam banyak tapak web atau aplikasi, mata keahlian ialah ciri umum. Pengguna boleh memperoleh mata dengan mengambil bahagian dalam aktiviti, membeli barangan atau menyelesaikan tugasan dan boleh menggunakan mata untuk menebus ganjaran atau diskaun. Dalam artikel ini, kami akan memperkenalkan cara menggunakan pembangunan PHP dan Vue untuk melaksanakan fungsi kemas kini dinamik mata ahli dan menyediakan contoh kod khusus.
Analisis keperluan:
Sebelum mula menulis kod, keperluan berikut perlu dijelaskan:
Berdasarkan analisis permintaan, artikel ini menggunakan PHP sebagai bahasa pembangunan bahagian belakang dan Vue sebagai rangka kerja pembangunan bahagian hadapan. PHP ialah bahasa skrip sebelah pelayan yang popular yang mampu berinteraksi dengan pangkalan data dan menjana kandungan web dinamik. Vue ialah rangka kerja bahagian hadapan yang ringan dan fleksibel yang memfokuskan pada membina antara muka pengguna.
CREATE TABLE members ( id INT PRIMARY KEY AUTO_INCREMENT, name VARCHAR(50) NOT NULL, points INT DEFAULT 0 );
<?php // 连接数据库 $conn = new mysqli("localhost", "username", "password", "database_name"); // 获取会员积分 if ($_GET["action"] === "getPoints") { $memberId = $_GET["memberId"]; $sql = "SELECT points FROM members WHERE id = $memberId"; $result = $conn->query($sql); $points = $result->fetch_assoc()["points"]; echo $points; } // 增加积分 if ($_GET["action"] === "addPoints") { $memberId = $_GET["memberId"]; $pointsToAdd = $_GET["pointsToAdd"]; $sql = "UPDATE members SET points = points + $pointsToAdd WHERE id = $memberId"; $conn->query($sql); } // 扣减积分 if ($_GET["action"] === "deductPoints") { $memberId = $_GET["memberId"]; $pointsToDeduct = $_GET["pointsToDeduct"]; $sql = "UPDATE members SET points = points - $pointsToDeduct WHERE id = $memberId"; $conn->query($sql); } ?>
vue create vue-membership
<template> <div> <h1>会员积分</h1> <p>当前积分: {{ points }}</p> <button @click="addPoints">增加积分</button> <button @click="deductPoints">扣减积分</button> </div> </template> <script> export default { data() { return { points: 0 } }, methods: { addPoints() { // 向后端发送增加积分的请求 fetch("api.php?action=addPoints&memberId=1&pointsToAdd=10") .then(response => response.json()) .then(points => { // 更新前端显示的积分数值 this.points = points; }); }, deductPoints() { // 向后端发送扣减积分的请求 fetch("api.php?action=deductPoints&memberId=1&pointsToDeduct=5") .then(response => response.json()) .then(points => { // 更新前端显示的积分数值 this.points = points; }); } }, mounted() { // 获取初始积分 fetch("api.php?action=getPoints&memberId=1") .then(response => response.json()) .then(points => { // 更新前端显示的积分数值 this.points = points; }); } } </script>
<template> <div id="app"> <Membership /> </div> </template> <script> import Membership from "./components/Membership.vue"; export default { components: { Membership } } </script>
npm run serve#🎜 🎜#Ringkasan :
Perlu diingatkan bahawa contoh kod yang disediakan dalam artikel ini hanyalah untuk demonstrasi, dan perlu diubah suai dan ditambah baik mengikut keperluan khusus dalam pembangunan sebenar. Pada masa yang sama, dalam projek sebenar, adalah disyorkan untuk melaksanakan pengesahan keselamatan dan menyekat kebenaran akses pada API bahagian belakang untuk memastikan keselamatan dan kestabilan sistem.
Atas ialah kandungan terperinci Pembangunan PHP dan Vue: Bagaimana untuk melaksanakan kemas kini dinamik mata keahlian. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!