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); }); } } });
IV. 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!