집 >웹 프론트엔드 >JS 튜토리얼 >vue.js 프런트엔드 및 백엔드 데이터 상호작용을 위한 데이터 제출 작업 정보

vue.js 프런트엔드 및 백엔드 데이터 상호작용을 위한 데이터 제출 작업 정보

不言원래의: 2018-06-29 17:17:232629검색

이 글에서는 주로 vue.js 프론트엔드와 백엔드 데이터 상호작용의 데이터 제출 작업을 소개합니다. 양식 구조, 제약 조건 규칙, 데이터 제출 및 기타 관련 작업 기술과 vue.js 프론트엔드 관련 참고 사항을 자세히 분석합니다. 엔드 및 백엔드 데이터 상호 작용은 예제 형식입니다. 도움이 필요한 친구는 참고할 수 있습니다.

이 문서에서는 예제를 통해 vue.js 프런트 엔드 및 백엔드 데이터 상호 작용의 데이터 제출 작업을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 세부 사항은 다음과 같습니다.

프런트 엔드 초보자가 처음 페이지 만들기를 시작했을 때 우리는 프런트 엔드 페이지에서 양식을 자주 사용했기 때문에 양식 제출 방법을 배우는 것도 사실 기본 기술입니다. , ajax로 구현할 수 있지만 원래 문법이 약간 있습니다. . . 이마. . . 복잡하므로 vue-resource를 사용하여 백엔드에 데이터를 제출하는 방법이 있습니다.

(1) 첫 번째 단계는 템플릿에 양식을 작성하는 것입니다.

<el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm">
 <el-form-item label="用户名" prop="name">
   <el-input v-model="ruleForm.name"></el-input>
 </el-form-item>
 <el-form-item label="用户类型" prop="type">
   <el-select v-model="ruleForm.type" placeholder="请选择专利类型" style="width:500px;">
 <el-option label="一级管理员" value="1"></el-option>
 <el-option label="二级管理员" value="2"></el-option>
 <el-option label="三级管理员" value="3"></el-option>
 <el-option label="普通用户" value="4"></el-option>
   </el-select>
 </el-form-item>
 <el-form-item label="出生日期" prop="date">
   <el-input v-model="ruleForm.date"></el-input>
 </el-form-item>
 <el-form-item label="备注" prop="intro">
   <el-input type="textarea" v-model="ruleForm.intro" :rows="10"></el-input>
 </el-form-item>
 <el-form-item>
   <el-button type="primary" @click="submitForm(&#39;ruleForm&#39;)">提交</el-button>
 </el-form-item>
</el-form>

(2) 양식 콘텐츠의 필드와 데이터의 제약 조건 규칙을 정의합니다.

(3 ) 양식 제출 방법 정의

data() {
   return {
    ruleForm: {
       name: &#39;&#39;,
       type: &#39;&#39;,
       date: &#39;&#39;,
       intro: &#39;&#39;,
     }
   }
 rules: {
     name: [
      { required: true, message: &#39;请输入用户名&#39;, trigger: &#39;blur&#39; },
      { min: 1, max: 20, message: &#39;长度在 1 到20个字符&#39;, trigger: &#39;blur&#39; }
     ],
     type: [
      { required: true, message: &#39;请选择用户类型&#39;, trigger: &#39;change&#39; }
     ],
     date: [
      { required: true, message: &#39;请输入出生日期&#39;, trigger: &#39;blur&#39; },
      { min: 1, max: 100, message: &#39;长度在 1 到 100 个字符&#39;, trigger: &#39;blur&#39; }
     ],
     intro: [
      { required: true, message: &#39;请输入备注&#39;, trigger: &#39;blur&#39; },
      { min: 50, max: 500, message: &#39;请输入至少50个字&#39;, trigger: &#39;blur&#39; }
     ],
    }
}

위 제출 기능의 baseURL과 api 소개는 다음과 같습니다.

여기서는 다음에서 데이터를 요청하는 방법을 소개하겠습니다. vue-resource를 사용하는 백엔드.

예를 들어 백엔드에서 테이블을 요청합니다.

(1) 먼저 msg:[] 배열을 data에 반환하여 테이블 데이터를 받습니다.

(2) The와 같은 메서드에서 요청 함수를 정의합니다. 여기서 함수 이름은 showDetails로 정의됩니다.

methods:{
submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
      this.$http.get(baseURL+"api/create?table=user&"+getParamsString(param)).then(function(res){
            if(res.body==1){
              this.$alert("提交成功", &#39;提交结果&#39;, {
                confirmButtonText: &#39;确定&#39;,
                type: &#39;success&#39;,
                callback: action => {
                },
              });
            }
            else{
              this.$alert("提交失败", &#39;提交结果&#39;, {
                confirmButtonText: &#39;确定&#39;,
                type: &#39;warning&#39;,
                callback: action => {
                },
              });
            }
          })
        } else {
          console.log(&#39;error submit!!&#39;);
          return false;
        }
      });
    }
}

여기에서 프로젝트가 서버에 배포되는 경우 일반적인 형식은 www.XXX.com/project 이름입니다. 백엔드에 의해 캡슐화된 API 인터페이스 그런 다음 조건은 테이블 쿼리 및 삭제와 같은 명령문입니다. 예를 들어, 학생이라는 테이블을 쿼리하고 학생 ID가 40001인 학생의 신뢰도를 얻어야 하는 경우 쿼리 문은 'query?table=student&studentIDeq=40001'과 같이 작성할 수 있습니다. 데이터베이스의 작업 필드(일반인의 관점에서는 백엔드에 의해 정의된 필드로 이해될 수 있음)는 따옴표로 묶어야 하고, 프런트엔드에 의해 정의된 필드는 따옴표 밖에 배치되어야 합니다.

(3; ) 마지막으로 이 요청 작업은 기본적으로 호출되지 않고 실행되므로 마운트되어 있어야 합니다. 실시간으로 실행됩니다.

methods:{
  showDetails:function(){
    this.$http.get(baseURL+"api/条件").then(function(res){
      this.msg = res.body;
    });
  }
}

자, 이 기능은 완료되었습니다. 백엔드에서 얻은 데이터는 브라우저 콘솔의 네트워크를 통해 얻거나, 콘솔 출력을 통해서도 볼 수 있습니다! ! !

물론이죠. 전제는 데이터베이스에 user라는 테이블이 있고 이름, 유형, 날짜 및 소개와 같은 여러 필드가 있고 백엔드 인터페이스가 정의되어 있다는 것입니다. 그렇지 않으면 성공하지 못할 것입니다

위는 이 글의 전체 내용이 모든 분들의 학습에 도움이 되기를 바랍니다. 더 많은 관련 내용을 보시려면 PHP 중국어 웹사이트를 주목해주세요!

vue.js 프런트엔드 및 백엔드 데이터 상호작용을 위한 데이터 제출 작업 정보

관련 기사