WeChatミニプログラムにおけるPHPで開発された評価とコメントの実装方法

WBOY
リリース: 2023-06-01 10:42:01
オリジナル
2006 人が閲覧しました

WeChat ミニ プログラムの人気と発展に伴い、ますます多くの企業や開発者が WeChat ミニ プログラムを使用して独自のアプリケーションを構築し始めています。重要な機能の 1 つは評価とコメント機能です。この記事では、PHPを使用してWeChatアプレットで開発した評価とコメントの実装方法を紹介します。

まず、評価とコメントの 2 つの機能の実装原則を明確にする必要があります。評価機能は、ユーザーが製品またはサービスを評価し、他のユーザーが参照できるようにスコアを記録することとして理解できます。コメント機能を使用すると、ユーザーは他のユーザーの参照のために製品またはサービスのページに独自のコメントや提案を残すことができます。

次に、これら 2 つの機能を実装するにはどのような技術ツールが必要かを明確にする必要があります。 PHP は、Web 開発に広く使用されている人気のあるサーバー側プログラミング言語です。 WeChat アプレットでは、PHP を使用して MySQL データベースと対話し、評価機能とコメント機能を実装できます。

1. スコアリング機能の実装

スコアリング機能の基本は、複数のスコアリング項目と送信ボタンを含むフロントエンド ページにスコアリング コントロールを設計することです。ユーザーが送信ボタンをクリックすると、フロントエンドは POST リクエストを通じてユーザーの評価データをバックグラウンド PHP ファイルに送信し、バックグラウンド PHP ファイルは MySQL データベースを通じてデータを保存します。コード例は次のとおりです。

フロントエンド ページ コード (WXML):

<view class="rate">
  <view class="title">服务评分:</view>
  <view class="stars">
    <view wx:for="{{[1,2,3,4,5]}}" wx:key="{{index}}" class="star" 
          data-score="{{index+1}}" bindtap="onStarClick">
      <image src="{{index<score ? '/images/star_on.png' : '/images/star_off.png'}}"></image>
    </view>
  </view>
  <view wx:if="{{score>0}}" class="submit" bindtap="onSubmitClick">提交评分</view>
</view>
ログイン後にコピー

フロントエンド ロジック コード (JS):

Page({
  data: {
    score: 0,
  },
  onStarClick: function(e) {
    var score = e.currentTarget.dataset.score;
    this.setData({
      score: score,
    });
  },
  onSubmitClick: function(e) {
    wx.request({
      url: 'https://www.example.com/rate.php',
      data: {
        score: this.data.score,
      },
      method: 'POST',
      success: function(res) {
        wx.showToast({
          title: '评分成功',
          icon: 'success',
        });
      },
      fail: function(res) {
        wx.showToast({
          title: '评分失败',
          icon: 'none',
        });
      },
    });
  },
});
ログイン後にコピー

バックエンド PHP コード:

<?php

$score = $_POST['score'];

if (!empty($score)) {
  $conn = mysqli_connect('localhost', 'user', 'password', 'database');
  mysqli_query($conn, "INSERT INTO ratings (score) VALUES ('$score')");
}

?>
ログイン後にコピー

#, コメント機能を実装する

##コメント機能では、フロントエンド ページに入力ボックスと送信ボタンを設計する必要があります。送信ボタンがクリックされると、フロントエンドはユーザーのPOST リクエストを介してバックグラウンド PHP ファイルにコメント データを送信する バックグラウンド PHP ファイル MySQL データベースを介してデータを保存します。さらに、悪意のあるコメントを防止し、ユーザーのプライバシーを保護するために、コメントの内容をフィルタリングして暗号化する必要があります。コード例は次のとおりです。

フロントエンド ページ コード (WXML):

<view class="comment">
  <textarea placeholder="写下你的评价" bindinput="onInput"></textarea>
  <view wx:if="{{content!=''}}" class="submit" bindtap="onSubmitClick">提交评价</view>
</view>
ログイン後にコピー

フロントエンド ロジック コード (JS):

Page({
  data: {
    content: '',
  },
  onInput: function(e) {
    var content = e.detail.value;
    this.setData({
      content: content,
    });
  },
  onSubmitClick: function(e) {
    wx.request({
      url: 'https://www.example.com/comment.php',
      data: {
        content: this.data.content,
      },
      method: 'POST',
      success: function(res) {
        wx.showToast({
          title: '评论成功',
          icon: 'success',
        });
      },
      fail: function(res) {
        wx.showToast({
          title: '评论失败',
          icon: 'none',
        });
      },
    });
  },
});
ログイン後にコピー

バックエンド PHP コード:

<?php

$content = $_POST['content'];

if (!empty($content)) {
  $content = htmlspecialchars($content); // 过滤HTML标签
  $content = addslashes($content); // 转义特殊字符
  $conn = mysqli_connect('localhost', 'user', 'password', 'database');
  $now = date('Y-m-d H:i:s'); // 获取当前时间
  mysqli_query($conn, "INSERT INTO comments (content,time) VALUES ('$content','$now')");
}

?>
ログイン後にコピー
概要

この記事の導入部を通じて、PHP を使用して WeChat ミニ プログラムで評価およびコメント機能を開発する方法を学びました。評価とコメントはユーザーエクスペリエンスを測定するための重要な要素の1つであり、企業や開発者がこの実装方法を習得することが非常に必要です。同時に、ユーザーエクスペリエンスとデータセキュリティを向上させるために、他の技術的手段と組み合わせて、評価とコメント機能をさらに最適化およびアップグレードする必要もあります。

以上がWeChatミニプログラムにおけるPHPで開発された評価とコメントの実装方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート