Développement PHP et Vue : Comment implémenter une requête d'enregistrement de l'échange de points des membres

Développé avec PHP et Vue : Enquête sur les enregistrements d'échange de points de membre

Introduction :
Dans les plateformes de commerce électronique ou les systèmes d'adhésion, les points sont un mécanisme de récompense courant. Les membres gagnent des points grâce à leur consommation, puis utilisent ces points pour échanger des biens. . ou des services. Afin de faciliter la gestion des membres et de promouvoir leur activité, il est nécessaire d'interroger les enregistrements d'échange de points des membres. Cet article utilisera le développement PHP et Vue comme exemple pour présenter en détail comment implémenter la fonction de requête d'enregistrement d'échange de points membres et fournira des exemples de code spécifiques.

1. Préparation du projet
Avant de commencer le développement, vous devez confirmer les éléments suivants :

1. Assurez-vous que l'environnement PHP a été installé et entièrement configuré ;
2. Assurez-vous que l'environnement Vue a été installé et entièrement configuré ; Assurez-vous que la base de données a été créée et contient une table de données qui stocke les enregistrements d'échange de points des membres.
3. 2. Conception de la base de données

Dans cet exemple, nous utiliserons MySQL comme base de données. Créez une table de données nommée "exchange_records", contenant les champs suivants :

id : identifiant d'enregistrement, clé primaire, incrémentation automatique ;

1. member_id : identifiant de membre
2. exchange_date : date d'échange ;
3. exchange_goods : échangez des marchandises.
4. 3. Développement back-end
5. Dans le développement back-end, nous utilisons PHP pour gérer l'ajout, la suppression, la modification et l'interrogation des données, et fournissons des interfaces API pour les appels front-end.

Créez un fichier appelé "exchangeRecords.php" et assurez-vous d'importer la configuration de connexion à la base de données.

// Importer la configuration de la connexion à la base de données require_once "config.php";

// Interroger les enregistrements d'échange de points des membres
function getExchangeRecords($member_id) {

// 创建数据库连接
$conn = new mysqli(DB_HOST, DB_USER, DB_PASSWORD, DB_NAME);

// 检查连接是否成功
if ($conn->connect_error) {
    die("连接数据库失败：" . $conn->connect_error);
}

// 构建查询语句
$sql = "SELECT * FROM exchange_records WHERE member_id = '$member_id'";

// 执行查询
$result = $conn->query($sql);

// 检查查询结果是否为空
if ($result->num_rows > 0) {
    // 将查询结果转换为数组
    $rows = array();
    while ($row = $result->fetch_assoc()) {
        $rows[] = $row;
    }
    return $rows;
} else {
    return "没有找到会员积分兑换记录";
}

// 关闭数据库连接
$conn->close();

}

// Traiter les demandes

if ($_SERVER["REQUEST_METHOD"] == "GET") {

// 获取会员ID
$member_id = $_GET["member_id"];

// 调用查询函数，返回结果
$result = getExchangeRecords($member_id);

// 返回查询结果
echo json_encode($result);

}

?>

Créez un fichier nommé "config.php", contenant les informations de configuration de la base de données.

// Informations de configuration de la base de données define('DB_HOST', 'localhost');

define('DB_USER', 'root');

define('DB_PASSWORD', 'password');
definition('DB_NAME', 'your_database_name');
?>

4. Développement front-end

Utilisez Vue pour créer la page front-end Dans cet exemple, nous utiliserons Vue-cli pour créer une page de base. projet.

Modifiez le fichier src/main.js et ajoutez des fonctions de configuration de routage et de requête API.

1. importer Vue depuis 'vue'
2. importer l'application depuis './App.vue'
importer VueRouter depuis 'vue-router'

importer axios depuis 'axios'

Vue.use(VueRouter)

const router = new VueRouter({

routes : [

{
  path: '/',
  name: 'Home',
  component: Home
},
// 其他路由配置...

]

})

Vue.prototype.$http = axios

new Vue({

router,

render: h => h(App)

}).$mount ("#app")

Créez un composant de page nommé "ExchangeRecords.vue". La page contient une zone de saisie et un bouton pour saisir l'ID du membre et déclencher la requête.

<script><p>export par défaut {<br> data() {<pre class='brush:php;toolbar:false;'>return { memberId: '', exchangeRecords: [] }</pre><p>},<br> méthodes : { <br><pre class='brush:php;toolbar:false;'>getExchangeRecords() { this.$http.get('/api/exchangeRecords.php', { params: { member_id: this.memberId } }) .then(response =&gt; { this.exchangeRecords = response.data; }) .catch(error =&gt; { console.log(error); }); }</pre>}<p>}<br></script>

Dans l'exemple de code ci-dessus, nous utilisons l'instruction v-model de Vue pour implémenter la liaison bidirectionnelle des ID de membre et lançons une requête GET via la bibliothèque axios pour obtenir des points de membre. enregistrements de rachat et afficher les résultats sur la page.

5. Fonctionnement du projet

Backend : placez le fichier PHP ci-dessus sur le serveur (par exemple, localhost/api/exchangeRecords.php).
Front-end : exécutez npm run serve dans le projet Vue pour démarrer le serveur de développement.
1. Visitez http://localhost:8080/#/exchange-records dans votre navigateur pour accéder à la page de requête d'enregistrement d'échange de points de membre.
2. Résumé :
3. Cet article explique comment utiliser PHP et Vue pour développer un projet avec une fonction de requête d'enregistrement d'échange de points membres. La requête de base de données est implémentée via le code PHP back-end, et l'interface API est fournie pour l'appel frontal, puis la requête est lancée via la page frontale Vue et les résultats de la requête sont rendus. J'espère que cet article sera utile à tout le monde pour réaliser la fonction de requête des enregistrements d'échange de points des membres.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!