PHP와 Vue를 사용하여 데이터 삭제 기능을 구현하는 방법

PHP와 Vue를 사용하여 데이터 삭제 기능을 구현하는 방법

소개:
웹 개발에서는 데이터를 추가, 삭제, 수정 및 확인하는 것이 일반적인 작업입니다. 이번 글에서는 프론트엔드 Vue 작성, 백엔드 PHP 처리 등 PHP와 Vue의 결합을 통해 데이터 삭제 기능을 구현하는 방법을 자세히 소개하겠습니다.

1. 프런트엔드 구현

1. Vue 컴포넌트 생성
   먼저 Vue 컴포넌트 파일에 삭제용 컴포넌트(예: DeleteButton.vue)를 생성합니다. 이 구성 요소에는 삭제 작업을 트리거하는 버튼이 포함되어 있습니다.

삭제

<script><br>기본값 내보내기 {<br> 메소드: {</script>

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

}
}

2. axios를 사용하여 요청 보내기
   백엔드와 통신하려면 Vue 플러그인 axios를 사용하여 HTTP 요청을 보내야 합니다. 먼저 프로젝트에 axios를 설치합니다.

npm install axios

다음으로, DeleteButton.vue에 axios를 소개하고 삭제 메소드에서 요청을 보냅니다. 삭제 인터페이스가 삭제할 데이터의 ID로 id 매개변수를 받아야 하는 delete.php라고 가정합니다.

<script> <br>프런트 엔드에서 전달한 삭제 요청을 받아 처리하기 위해 프로젝트 루트 디렉터리에 delete.php를 생성합니다. </script>

$id = $_GET['id'] // 프런트 엔드에서 전달된 id 매개변수 가져오기

// 여기에 데이터 삭제 로직 추가

// 응답 반환

$ response = [

'status' => '성공',

'message' => '삭제 성공'
1. ];
   
header('Content-Type: application/json');

echo json_encode($response);

? >

데이터를 삭제하려면 데이터베이스에 연결하세요

delete.php에서 데이터베이스에 연결하고 데이터를 삭제하려면 코드를 추가하세요. MySQL 데이터베이스를 예로 들면, 데이터 테이블이 사용자로 지정되어 있고 전달된 매개변수 ID와 ID가 동일한 데이터를 삭제해야 한다고 가정합니다.

$servername = "localhost";
$username = "root";

$password = "";

$dbname = "test";

$id = $_GET['id'] ; // 프런트 엔드에서 전달된 id 매개변수 가져오기

// 연결 만들기
2. $conn = new mysqli($servername, $username, $password, $dbname);
   
// 연결 확인

if ($ conn-> connect_error) {

die("연결 실패: " . $conn->connect_error);
}

// 데이터 삭제
$sql = "ID = ${id}인 사용자에서 삭제";

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

$response = [

deleteData() {
  const id = 1; // 假设需要删除的数据的id为1

  axios.delete('delete.php', {
    params: {
      id: id
    }
  })
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.log(error);
  });
}

];

} else {

$response = [

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

];
}

$conn- >close( );

header('Content-Type: application/json');

echo json_encode($response);
?>

요약:
Vue의 프런트 엔드 구성 요소 및 Axios 플러그인을 통해, 백엔드와 쉽게 통신할 수 있고 데이터 삭제 기능도 구현할 수 있습니다. 백엔드는 PHP를 사용하여 데이터베이스에 연결하고 프런트엔드에서 전달된 매개변수를 기반으로 데이터 삭제 작업을 수행합니다. 이러한 조합은 개발 효율성을 효과적으로 향상시키고 데이터 보안을 보장할 수 있습니다.

위 내용은 PHP와 Vue를 사용하여 데이터 삭제 기능을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!