Detaillierte Erläuterung des Übermittlungsdatenvorgangs der Front-End- und Back-End-Dateninteraktion von vue.js

Dieses Mal werde ich Ihnen eine detaillierte Erklärung des Übermittlungsdatenvorgangs für die Front-End- und Back-End-Dateninteraktion von vue.js geben. Was sind die Vorsichtsmaßnahmen für die Verwendung von vue.js Front-End? Das Folgende ist die tatsächliche Praxis.

Als Front-End-Neulinge anfingen, Seiten zu erstellen, verwendeten wir häufig Formulare in unseren Front-End-Seiten, daher ist das Erlernen des Sendens von Formularen auch eine grundlegende Fähigkeit. Tatsächlich kann dies mit Ajax erreicht werden, aber es ist so Die ursprüngliche Syntax ist etwas umständlich. . . Stirn . . . Es ist kompliziert, daher finden Sie hier eine Möglichkeit, vue-resource zu verwenden, um Daten an das Backend zu übermitteln.

(1) Der erste Schritt besteht darin, ein Formular in die Vorlage zu schreiben

<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) Definieren Sie die Felder des Formularinhalts und die Einschränkungsregeln des Formulars in den Daten

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' }
     ],
    }
}

(3) Definieren Sie die Methode zum Senden des Formulars

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;
        }
      });
    }
}

Die Basis-URL und die API-Einführung in der obigen Übermittlungsfunktion lauten wie folgt:

Hier werde ich Ihnen Folgendes vorstellen: Möglichkeit, vue-resource aus der Zukunft zu verwenden. Methode zum Anfordern von Daten vom Client.

Fordern Sie beispielsweise eine Tabelle vom Backend an,

(1) Geben Sie zunächst ein msg:[]-Array in Daten zurück, um die Tabellendaten zu empfangen;

(2 ) Definieren Sie eine Anforderungsfunktion in der Methode. Der Funktionsname ist hier beispielsweise als

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

Der Pfad des baseURL-Projekts ist hier definiert .XXX.com/project name ;Die nachfolgende API ist die Back-End-gekapselte API-Schnittstelle und dann sind die Bedingungen Anweisungen wie query, delete usw. in der Tabelle. Wenn Sie beispielsweise die Tabelle „Student“ abfragen und das Vertrauen von Studenten mit der Studenten-ID 40001 ermitteln müssen, kann die Abfrageanweisung als „query?table=student&studentIDeq=40001“ geschrieben werden. Es ist zu beachten, dass sie verwandt ist zu den Operationsfeldern der Datenbank (für Laien kann man verstehen, dass die vom Backend definierten Felder in Anführungszeichen gesetzt werden sollten, während die vom Frontend definierten Felder außerhalb der Anführungszeichen stehen sollten;

(3) Vergessen Sie nicht, dass dieser Anforderungsvorgang standardmäßig nicht aufgerufen und ausgeführt wird. Er muss also in Echtzeit ausgeführt werden.

mounted: function (){
   this.showDetails();
}

Okay, diese Funktion ist abgeschlossen Sie können die vom Backend erhaltenen Daten über das Netzwerk der Browserkonsole anzeigen oder sie auch über den Konsolenausdruck anzeigen. ! !

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Wie man mit dem Aktualisierungsstatus der Vuex-Methode in der übergeordneten Komponente umgeht und die untergeordnete Komponente das Rendering nicht rechtzeitig aktualisieren kann

So implementieren Sie die internationale Entwicklung von vue-i18n und element-ui im ​​Vue-Projekt

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung des Übermittlungsdatenvorgangs der Front-End- und Back-End-Dateninteraktion von vue.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!