Vue.js에서 일부 열 데이터만 업데이트하는 기능을 구현하는 방법-프런트엔드 Q&A-php.cn

집

웹 프론트엔드

프런트엔드 Q&A

Vue.js에서 일부 열 데이터만 업데이트하는 기능을 구현하는 방법

PHPz

Apr 13, 2023 am 10:46 AM

실제 프로젝트 개발에서 우리는 특정 조건에 따라 데이터를 쿼리해야 하는데 전체가 아닌 일부 열만 업데이트하고 싶은 상황에 자주 직면합니다. 이때 Vue.js를 사용하여 간단한 프런트 엔드 애플리케이션을 구축하고 AJAX 기술을 통해 데이터 쿼리 및 업데이트를 구현할 수 있습니다.

이 글에서는 Vue.js에서 컬럼 데이터의 일부만 업데이트하는 기능을 구현하는 방법을 소개합니다.

1단계: 준비

먼저 프런트 엔드 애플리케이션이 서버 측과 상호 작용할 수 있도록 데이터베이스를 준비하고 서버 측에 해당 API를 작성해야 합니다. 이 기사에서는 MySQL 데이터베이스를 가정하고 Node.js 및 Express 프레임워크를 사용하여 API를 작성합니다.

데이터베이스에 다음 필드가 포함된 사용자 테이블이 있다고 가정합니다.

id - 사용자 고유 식별자, 자체 증가 정수
name - 사용자 이름, 문자열 유형
email - 사용자 이메일, 문자 문자열 유형
전화 - 사용자 전화번호, 문자열 유형

우리는 다음 기능을 달성하기를 희망합니다:

사용자 이름을 기반으로 모든 사용자 정보를 쿼리합니다.
사용자의 이메일과 전화번호를 업데이트할 수 있지만 다른 정보는 허용되지 않습니다. 수정될 수 있습니다.

이 기능을 구현하려면 서버 측 API에서 쿼리 및 업데이트 기능을 각각 구현해야 하며 두 가지 경로에 해당해야 합니다.

GET /users/:name - 사용자 이름을 기반으로 사용자 정보 쿼리 ;
PUT /users/:id - 사용자 정보를 업데이트합니다.

이 기사에서는 프런트엔드 구현에 중점을 두므로 서버측 구현 방법에 대해서는 더 이상 논의하지 않습니다. 관심 있는 독자는 다른 관련 자료를 참조하세요.

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의 템플릿 구문과 지침을 사용하여 다음 기능을 구현합니다.

입력 요소의 값을 Vue.js 인스턴스의 이름 속성에 바인딩합니다.
쿼리 버튼을 클릭할 때; , 검색은 메소드라고 합니다.
v-if 지시문은 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 인스턴스의 데이터 속성을 정의합니다. 포함:

이름: 사용자가 입력한 쿼리 조건(예: 사용자 이름)을 저장합니다.
result: 쿼리 결과를 저장합니다.
message: 오류 프롬프트를 저장합니다.
loading: 데이터가 현재 로드되고 있는지 식별합니다.

그런 다음 두 가지 방법을 정의했습니다.

search: AJAX 요청을 보내고, 사용자 이름을 기반으로 사용자 정보를 쿼리하고, 쿼리 결과를 기반으로 데이터 속성을 업데이트합니다.
update: AJAX 요청을 보내고, 사용자를 업데이트합니다. 정보 및 팝업 프롬프트 상자.

AJAX 요청을 보낼 때 axios 라이브러리를 사용한다는 점에 유의하세요. API 구현 방법에 따라 해당 매개변수와 함께 axios.get 또는 axios.put 메서드를 사용하여 쿼리 및 업데이트 기능을 구현할 수 있습니다.

마지막으로 Vue.js 인스턴스를 생성하여 프런트엔드 애플리케이션을 마운트합니다.

3단계: 애플리케이션 테스트

이제 서버를 시작하고 HTML 파일에 액세스하여 애플리케이션을 테스트할 수 있습니다.

먼저 페이지에 사용자 이름을 입력하고 쿼리 버튼을 클릭하세요. 쿼리가 성공하면 쿼리 결과의 이메일 및 전화 입력란에 사용자의 이메일 및 전화 정보가 자동으로 채워집니다. 쿼리가 실패하면 오류 메시지가 표시됩니다.

그런 다음 이메일 및 전화 정보를 수정하고 업데이트 버튼을 클릭하여 업데이트 작업을 수행할 수 있습니다. 업데이트가 성공하면 프롬프트 상자가 나타납니다.

Summary

이번 글에서는 Vue.js와 AJAX 기술을 사용하여 컬럼 데이터의 일부만 업데이트하는 기능을 구현하는 방법을 예제를 통해 소개했습니다. 이 예제를 통해 다음 지식 포인트를 배울 수 있습니다.

Vue.js에서 데이터 속성 및 메소드를 정의하는 방법
템플릿 구문 및 지침을 사용하여 데이터 바인딩 및 동적 업데이트를 구현하는 방법; axios 라이브러리 AJAX 요청을 보냅니다.
물론, 이 글은 단순한 예시를 바탕으로 소개된 것일 뿐입니다. 이러한 기술이 실제 프로젝트에 적용되어야 한다면 구체적인 상황에 따라 조정 및 개선이 필요합니다.

위 내용은 Vue.js에서 일부 열 데이터만 업데이트하는 기능을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.