PHP と Vue.js を使用して機密データの改ざんから保護するアプリケーションを開発する方法を教えます
機密データを悪意のある改ざんから保護するには、強力なアプリケーションを開発することが非常に重要です。この記事では、PHP と Vue.js を使用して、データを改ざんのリスクから保護する防御アプリケーションを開発する方法を説明します。
1. 背景知識
始める前に、まずいくつかの基本概念を理解しましょう。
2. データベース テーブルを作成する
まず、機密データを保存するデータベース テーブルを作成する必要があります。 「sensitive_data」という名前のデータベースを作成し、その中に「users」という名前のテーブルを作成して、ユーザーの機密データを保存します。テーブル構造は次のとおりです:
CREATE TABLE `users` ( `id` int(11) NOT NULL AUTO_INCREMENT, `name` varchar(255) NOT NULL, `email` varchar(255) NOT NULL, `password` varchar(255) NOT NULL, PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
3. PHP と Vue.js の構成
PHP 構成には、以下を含めます。データベース接続情報を取得し、データを処理および検証するための関数をいくつか記述します。 「config.php」という名前のファイルを作成し、次のコードをそこに貼り付けます。
<?php // 数据库连接信息 define('DB_HOST', 'localhost'); define('DB_NAME', 'sensitive_data'); define('DB_USER', 'your_username'); define('DB_PASSWORD', 'your_password'); // 连接到数据库 $conn = mysqli_connect(DB_HOST, DB_USER, DB_PASSWORD, DB_NAME); // 验证用户输入的函数 function validateInput($input) { // 执行你的验证逻辑,确保数据的完整性和正确性 } // 插入数据到数据库函数 function insertData($name, $email, $password) { global $conn; $stmt = $conn->prepare("INSERT INTO users (name, email, password) VALUES (?, ?, ?)"); $stmt->bind_param("sss", $name, $email, $password); if ($stmt->execute()) { return true; } else { return false; } } ?>
Vue.js 構成では、次のコードを使用します。 axios ライブラリはサーバーにリクエストを送信し、Vue.js コンポーネントはデータをレンダリングして処理します。 「app.js」という名前のファイルを作成し、次のコードをそこに貼り付けます:
import Vue from 'vue'; import axios from 'axios'; // 执行一些全局配置,例如设置axios的默认baseURL等 axios.defaults.baseURL = 'http://localhost:8888'; Vue.prototype.$http = axios; new Vue({ el: '#app', data: { name: '', email: '', password: '' }, methods: { submitForm() { this.$http.post('/saveData.php', { name: this.name, email: this.email, password: this.password }) .then(response => { console.log(response); // 在这里可以处理服务器的响应,例如显示成功消息等 }) .catch(error => { console.log(error); }); } } });
4. PHP と Vue.js のコードを作成します
これで、PHP と Vue.js の構成が完了しました。実際のコードを書き始めることができます。
「saveData.php」という名前のファイルを作成し、次のコードをそこに貼り付けます:
<?php require_once 'config.php'; $data = $_POST; // 对用户输入进行验证 if (!validateInput($data['name']) || !validateInput($data['email']) || !validateInput($data['password'])) { $response = array( 'status' => 'error', 'message' => 'Invalid input data' ); } else { // 插入数据到数据库 $name = $data['name']; $email = $data['email']; $password = $data['password']; if (insertData($name, $email, $password)) { $response = array( 'status' => 'success', 'message' => 'Data saved successfully' ); } else { $response = array( 'status' => 'error', 'message' => 'Failed to save data' ); } } header('Content-Type: application/json'); echo json_encode($response); ?>
Vue.js コードでは、フォーム コンポーネントと入力コンポーネントを使用してユーザー入力を受信して処理します。 「index.html」という名前のファイルを作成し、次のコードをそこに貼り付けます:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>防御敏感数据篡改的应用程序</title> </head> <body> <div id="app"> <form @submit.prevent="submitForm"> <label for="name">Name</label> <input type="text" id="name" v-model="name"> <label for="email">Email</label> <input type="email" id="email" v-model="email"> <label for="password">Password</label> <input type="password" id="password" v-model="password"> <button type="submit">Save</button> </form> </div> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> <script src="app.js"></script> </body> </html>
5. アプリケーションを実行します
アプリケーションの開発が完了したので、アプリケーションは次のことができます。ターミナルで次のコマンドを実行して起動します。
php -S localhost:8888
次に、ブラウザで「http://localhost:8888」にアクセスしてアプリケーションにアクセスします。
6. まとめ
PHP と Vue.js を使用して機密データの改ざんを防止する機能を備えたアプリケーションを開発することは難しくありません。適切な検証ルールを使用し、データの安全な送信と保存を確保することで、機密データが改ざんのリスクから確実に保護されます。
この記事では、PHP と Vue.js を使用して基本的なアプリケーションを開発する方法を学習し、参考として PHP と Vue.js のコード例を提供しました。このチュートリアルがお役に立てば幸いです。また、開発が成功することを祈っています。
以上がPHP と Vue.js を使用して機密データの改ざんを防ぐアプリケーションを開発する方法を説明します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。