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) 데이터에서 양식 콘텐츠의 필드와 양식의 제약 규칙을 정의합니다. to submit the form

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

위 제출 기능의 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("提交成功", '提交结果', {
                confirmButtonText: '确定',
                type: 'success',
                callback: action => {
                },
              });
            }
            else{
              this.$alert("提交失败", '提交结果', {
                confirmButtonText: '确定',
                type: 'warning',
                callback: action => {
                },
              });
            }
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    }
}

프로젝트가 서버에 배포되는 경우 일반적인 형식은 www.XXX.com/project 이름입니다. API 인터페이스; 그리고 조건은

query

, delete 및 기타 테이블 명령문입니다. 예를 들어, 학생이라는 테이블을 쿼리하고 학생 ID가 40001인 학생의 신뢰도를 얻어야 하는 경우 쿼리 문은 'query?table=student&studentIDeq=40001'과 같이 작성할 수 있습니다. 데이터베이스의 작업 필드(일반인의 관점에서는 백엔드에 의해 정의된 필드로 이해될 수 있음)는 따옴표로 묶어야 하고, 프런트엔드에 의해 정의된 필드는 따옴표 밖에 배치되어야 합니다. (3; ) 마지막으로 이 요청 작업은 기본적으로 호출되지 않고 실행되므로 탑재되어야 합니다. 실시간으로 실행됩니다.

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

자, 이 함수는 완료되었습니다. 브라우저 콘솔의 네트워크를 통해 백엔드를 확인하거나 콘솔 출력물을 통해서도 볼 수 있습니다! ! !

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 자료:

WeChat 미니 프로그램의 이미지를 기기 높이에 맞게 조정하는 방법

jquery 이미지는 업로드 시 지정된 비율로 미리보기됩니다(코드 포함)

위 내용은 vue.js 프런트엔드 및 백엔드 데이터 상호 작용 단계에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!