PHPとVueを使ったデータ削除機能の実装方法

PHP と Vue を使用してデータ削除機能を実装する方法

はじめに:
Web 開発では、データの追加、削除、変更、確認が一般的です。手術。この記事では、PHPとVueを組み合わせてデータ削除機能を実装する方法を、フロントエンドのVueの記述からバックエンドのPHPの処理まで詳しく紹介します。

1. フロントエンドの実装

1. Vue コンポーネントの作成
   まず、Vue コンポーネント ファイル内に削除用のコンポーネント (DeleteButton.vue など) を作成します。このコンポーネントには、削除アクションをトリガーするボタンが含まれています。

削除

<script>デフォルトのエクスポート {<br> メソッド: {</script>

deleteData() {
  // 在这里触发删除事件
}

}
}

2. axios を使用してリクエストを送信します
   Inバックエンドと通信するには、Vue プラグイン axios を使用して HTTP リクエストを送信する必要があります。まず、プロジェクトに axios をインストールします。

npm install axios

次に、DeleteButton.vue に axios を導入し、削除メソッドでリクエストを送信します。削除インターフェースが delete.php であると仮定します。これは、削除するデータの ID として id パラメーターを受け取る必要があります。

<script><br>「axios」から axios をインポート;</p><p>デフォルトのエクスポート {<br> メソッド: {</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>deleteData() { const id = 1; // 假设需要删除的数据的id为1 axios.delete('delete.php', { params: { id: id } }) .then(response =&gt; { console.log(response.data); }) .catch(error =&gt; { console.log(error); }); }</pre><div class="contentsignin">ログイン後にコピー</div></div><p>}<br>}<br> </script>

2. バックエンドの実装

1. delete.php ファイルの作成
   フロントエンドを受け取るために、プロジェクトのルート ディレクトリに delete.php を作成します。送信の終了 削除要求と処理。

$id = $_GET['id']; // フロントエンドによって渡された id パラメータを取得します

// データの追加と削除ここでロジック

//応答を返します
$response = [
'ステータス' => '成功',
'メッセージ' => '削除に成功しました'
];

header('Content-Type: application/json');
echo json_encode($response);
?>

2. 削除するデータベースに接続しますdata
   データベースに接続してデータを削除するコードを delete.php に追加します。 MySQL データベースを例として、データ テーブルの名前が users であると仮定し、ID が渡されたパラメータ ID であるデータを削除する必要があるとします。

$サーバー名 = "ローカルホスト";
$ユーザー名 = "ルート";
$パスワード = "";
$dbname = "テスト";

$id = $_GET['id']; // フロントエンドによって渡された id パラメータを取得します

// 接続を作成します
$conn = new mysqli( $servername, $username, $password, $dbname);

// 接続を確認
if ($conn->connect_error) {
die("接続に失敗しました: " . $conn- >connect_error );
}

//データの削除
$sql = "ユーザーから削除 WHERE id = ${id}";

if ($conn-> ;query( $sql) === TRUE) {
$response = [

'status' => 'success',
'message' => '删除成功'

];
} else {
$response = [

'status' => 'error',
'message' => '删除失败'

];
}

$conn->close();

header('Content-Type: application/json');
echo json_encode($response);
?> ;

概要:
Vue のフロントエンド コンポーネントと axios プラグインを通じて、バックエンドと簡単に通信してデータ削除機能を実現できます。バックエンドは PHP を使用してデータベースに接続し、フロントエンドから渡されたパラメータに基づいてデータ削除操作を実行します。この組み合わせにより、開発効率が効果的に向上し、データのセキュリティが確保されます。

以上がPHPとVueを使ったデータ削除機能の実装方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。