Bearbeiten Sie die Front-End- und Back-End-Daten von vue.j

Dieses Mal bringe ich Ihnen die Front-End- und Back-End-Daten von vue.js. Was sind die Vorsichtsmaßnahmen für den Betrieb der Front-End- und Back-End-Daten von vue.js? ein Blick.

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, 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 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/Projektname ;Die nachfolgende API ist die vom Backend gekapselte API-Schnittstelle, und dann sind die Bedingungen Anweisungen wie Abfragen und Löschen 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. ! !

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, sonst wird es keinen Erfolg haben

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

Empfohlene Lektüre:

Wie man Vuex zum Bedienen von Zustandsobjekten verwendet

Das obige ist der detaillierte Inhalt vonBearbeiten Sie die Front-End- und Back-End-Daten von vue.j. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!