실제 프로젝트 개발에서 우리는 특정 조건에 따라 데이터를 쿼리해야 하는데 전체가 아닌 일부 열만 업데이트하고 싶은 상황에 자주 직면합니다. 이때 Vue.js를 사용하여 간단한 프런트 엔드 애플리케이션을 구축하고 AJAX 기술을 통해 데이터 쿼리 및 업데이트를 구현할 수 있습니다.
이 글에서는 Vue.js에서 컬럼 데이터의 일부만 업데이트하는 기능을 구현하는 방법을 소개합니다.
1단계: 준비
먼저 프런트 엔드 애플리케이션이 서버 측과 상호 작용할 수 있도록 데이터베이스를 준비하고 서버 측에 해당 API를 작성해야 합니다. 이 기사에서는 MySQL 데이터베이스를 가정하고 Node.js 및 Express 프레임워크를 사용하여 API를 작성합니다.
데이터베이스에 다음 필드가 포함된 사용자 테이블이 있다고 가정합니다.
우리는 다음 기능을 달성하기를 희망합니다:
이 기능을 구현하려면 서버 측 API에서 쿼리 및 업데이트 기능을 각각 구현해야 하며 두 가지 경로에 해당해야 합니다.
이 기사에서는 프런트엔드 구현에 중점을 두므로 서버측 구현 방법에 대해서는 더 이상 논의하지 않습니다. 관심 있는 독자는 다른 관련 자료를 참조하세요.
2단계: 프런트 엔드 애플리케이션 구축
다음으로 Vue.js를 사용하여 프런트 엔드 애플리케이션을 구축하고 AJAX 기술 및 서버 측 API를 통해 데이터와 상호 작용합니다.
먼저 HTML 파일에 Vue.js 및 jQuery 라이브러리를 도입해야 합니다. 코드는 다음과 같습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue.js Demo</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div id="app">
<div>
<label>用户名：</label>
<input type="text" v-model="name">
<button @click="search">查询</button>
</div>
<div v-if="result">
<label>邮箱：</label>
<input type="text" v-model="result.email" :disabled="loading">
<label>电话：</label>
<input type="text" v-model="result.phone" :disabled="loading">
<button @click="update">更新</button>
</div>
<div v-else>
{{ message }}
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script src="app.js"></script>
</body>
</html>HTML 파일에서 ID가 "app"인 div 요소를 마운트 지점으로 정의합니다. Vue.js 인스턴스. 이 div에서는 Vue.js의 템플릿 구문과 지침을 사용하여 다음 기능을 구현합니다.
AJAX 요청을 보내는 데 사용할 수 있는 Promise 기반 HTTP 클라이언트인 axios 라이브러리를 HTML 파일에 도입했다는 점에 유의해야 합니다.
다음으로 app.js 파일에 Vue.js 인스턴스에 대한 코드를 작성합니다. 코드는 다음과 같습니다.
var app = new Vue({
el: "#app",
data: {
name: "",
result: null,
message: "",
loading: false,
},
methods: {
search: function() {
var self = this;
self.loading = true;
self.result = null;
self.message = "正在加载...";
axios.get("/api/users/" + self.name).then(function(res) {
self.loading = false;
if (res.data.status === 0) {
self.result = res.data.result;
self.message = "";
} else {
self.message = res.data.message;
}
}).catch(function() {
self.loading = false;
self.message = "加载失败，请重试";
});
},
update: function() {
var self = this;
var data = {
email: self.result.email,
phone: self.result.phone,
};
axios.put("/api/users/" + self.result.id, data).then(function(res) {
if (res.data.status === 0) {
alert("更新成功");
} else {
alert(res.data.message);
}
}).catch(function() {
alert("更新失败，请重试");
});
},
},
});app.js 파일에서 먼저 Vue.js 인스턴스의 데이터 속성을 정의합니다. 포함:
그런 다음 두 가지 방법을 정의했습니다.
AJAX 요청을 보낼 때 axios 라이브러리를 사용한다는 점에 유의하세요. API 구현 방법에 따라 해당 매개변수와 함께 axios.get 또는 axios.put 메서드를 사용하여 쿼리 및 업데이트 기능을 구현할 수 있습니다.
마지막으로 Vue.js 인스턴스를 생성하여 프런트엔드 애플리케이션을 마운트합니다.
3단계: 애플리케이션 테스트
이제 서버를 시작하고 HTML 파일에 액세스하여 애플리케이션을 테스트할 수 있습니다.
먼저 페이지에 사용자 이름을 입력하고 쿼리 버튼을 클릭하세요. 쿼리가 성공하면 쿼리 결과의 이메일 및 전화 입력란에 사용자의 이메일 및 전화 정보가 자동으로 채워집니다. 쿼리가 실패하면 오류 메시지가 표시됩니다.
그런 다음 이메일 및 전화 정보를 수정하고 업데이트 버튼을 클릭하여 업데이트 작업을 수행할 수 있습니다. 업데이트가 성공하면 프롬프트 상자가 나타납니다.
Summary
이번 글에서는 Vue.js와 AJAX 기술을 사용하여 컬럼 데이터의 일부만 업데이트하는 기능을 구현하는 방법을 예제를 통해 소개했습니다. 이 예제를 통해 다음 지식 포인트를 배울 수 있습니다.
위 내용은 Vue.js에서 일부 열 데이터만 업데이트하는 기능을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
