Informationen zum Vorgang der Übermittlung von Daten für die Front-End- und Back-End-Dateninteraktion von vue.js

In diesem Artikel wird hauptsächlich der Datenübermittlungsvorgang der Front-End- und Back-End-Dateninteraktion von vue.j vorgestellt. Er analysiert detailliert die Formularstruktur, die Einschränkungsregeln, die Datenübermittlung und andere verwandte Betriebsfähigkeiten im Zusammenhang mit dem Front-End von vue.j. Hinweise zur Interaktion zwischen End- und Back-End-Daten finden Sie in Form von Beispielen:

Dieser Artikel beschreibt die Übermittlungsdatenoperation der Front-End- und Back-End-Dateninteraktion von vue.j. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Wenn Front-End-Neulinge zum ersten Mal mit der Erstellung von Seiten beginnen, werden auf unseren Front-End-Seiten häufig Formulare verwendet. Daher ist das Erlernen des Absendens von Formularen ebenfalls eine Grundvoraussetzung Tatsächlich kann die Verwendung von Ajax implementiert werden, die ursprüngliche Syntax ist jedoch etwas umständlich. . . Stirn . . . Es ist kompliziert, daher finden Sie hier eine Möglichkeit, mit vue-resource 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 den Formularinhalt in den Daten Einschränkungsregeln für Felder und Formulare;

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 Einführung von baseURL und API in der obigen Übermittlungsfunktion ist wie folgt:

Hier stelle ich Ihnen eine Methode zum Anfordern von Daten vom Backend mithilfe von vue-resource vor.

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 wird hier beispielsweise als showDetails definiert Das Projekt wird auf dem Server bereitgestellt. Das obige allgemeine Format lautet www.XXX.com/Projektname. Die nachfolgende API ist die vom Backend gekapselte API, und die Bedingungen sind Anweisungen wie Tabellenabfrage und -löschung. 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

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

Okay, diese Funktion ist abgeschlossen, Sie können sie vom Backend über die Netzwerkansicht der Browserkonsole abrufen. Die Daten können auch über den Konsolenausdruck angezeigt werden! ! !

Natürlich. Die Voraussetzung ist, dass es in Ihrer Datenbank eine Tabelle mit dem Namen Benutzer gibt, die Namen, Typ, Datum und Intro-Felder enthält, und dass die Back-End-Schnittstelle definiert wurde, andernfalls wird dies nicht erfolgreich sein

Das Obige ist Ich hoffe, dass der gesamte Inhalt dieses Artikels für das Studium aller hilfreich ist. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

Einführung in das dynamische Festlegen von Routing-Parametern in Vue

Über die Integration von vue.js in mint-ui Karussellbild von

Das obige ist der detaillierte Inhalt vonInformationen zum Vorgang der Übermittlung von Daten für die Front-End- und Back-End-Dateninteraktion von vue.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!