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

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

Jun 29, 2018 pm 05:17 PM
vue.js Front-End- und Back-End-Dateninteraktion

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>
Nach dem Login kopieren

(2) Definieren Sie den Formularinhalt in den Daten Einschränkungsregeln für Felder und Formulare;

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; }
     ],
    }
}
Nach dem Login kopieren

(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("提交成功", &#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;
        }
      });
    }
}
Nach dem Login kopieren

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;
    });
  }
}
Nach dem Login kopieren

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!

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

Video Face Swap

Video Face Swap

Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Heiße Themen

Java-Tutorial
1663
14
PHP-Tutorial
1266
29
C#-Tutorial
1238
24
Detaillierte grafische Erklärung zur Integration des Ace-Code-Editors in ein Vue-Projekt Detaillierte grafische Erklärung zur Integration des Ace-Code-Editors in ein Vue-Projekt Apr 24, 2023 am 10:52 AM

Ace ist ein in JavaScript geschriebener einbettbarer Code-Editor. Es entspricht der Funktionalität und Leistung nativer Editoren wie Sublime, Vim und TextMate. Es kann problemlos in jede Webseite und JavaScript-Anwendung eingebettet werden. Ace wird als Haupteditor für die Cloud9-IDE gepflegt und ist der Nachfolger des Mozilla Skywriter (Bespin)-Projekts.

Ausführliche Diskussion darüber, wie Vite .env-Dateien analysiert Ausführliche Diskussion darüber, wie Vite .env-Dateien analysiert Jan 24, 2023 am 05:30 AM

Wenn wir das Vue-Framework zum Entwickeln von Front-End-Projekten verwenden, stellen wir bei der Bereitstellung mehrere Umgebungen bereit. Oft sind die von Entwicklungs-, Test- und Online-Umgebungen aufgerufenen Schnittstellendomänen unterschiedlich. Wie können wir die Unterscheidung treffen? Dabei werden Umgebungsvariablen und Muster verwendet.

Was ist der Unterschied zwischen Komponentisierung und Modularisierung in Vue? Was ist der Unterschied zwischen Komponentisierung und Modularisierung in Vue? Dec 15, 2022 pm 12:54 PM

Der Unterschied zwischen Komponentisierung und Modularisierung: Die Modularisierung ist aus Sicht der Codelogik unterteilt. Sie erleichtert die Entwicklung auf Codeebene und stellt sicher, dass die Funktionen jedes Funktionsmoduls konsistent sind. Die Komponentisierung ist die Planung aus der Perspektive der UI-Schnittstelle; die Komponentisierung des Frontends erleichtert die Wiederverwendung von UI-Komponenten.

Erfahren Sie, wie Sie Unit-Tests in Vue3 schreiben Erfahren Sie, wie Sie Unit-Tests in Vue3 schreiben Apr 25, 2023 pm 07:41 PM

Vue.js ist heute ein sehr beliebtes Framework in der Front-End-Entwicklung. Da sich Vue.js ständig weiterentwickelt, werden Unit-Tests immer wichtiger. Heute untersuchen wir, wie man Unit-Tests in Vue.js 3 schreibt, und stellen einige Best Practices sowie häufige Probleme und Lösungen vor.

Ein einfacher Vergleich der JSX-Syntax und der Template-Syntax in Vue (Analyse der Vor- und Nachteile) Ein einfacher Vergleich der JSX-Syntax und der Template-Syntax in Vue (Analyse der Vor- und Nachteile) Mar 23, 2023 pm 07:53 PM

In Vue.js können Entwickler zwei verschiedene Syntaxen zum Erstellen von Benutzeroberflächen verwenden: JSX-Syntax und Vorlagensyntax. Beide Syntaxen haben ihre eigenen Vor- und Nachteile. Lassen Sie uns ihre Unterschiede, Vor- und Nachteile besprechen.

So fragen Sie die aktuelle Vue-Version ab So fragen Sie die aktuelle Vue-Version ab Dec 19, 2022 pm 04:55 PM

Es gibt zwei Möglichkeiten, die aktuelle Vue-Version abzufragen: 1. Führen Sie in der cmd-Konsole den Befehl „npm list vue“ aus, um die Versionsnummer abzufragen. 2. Suchen und öffnen Sie das Paket. json-Datei im Projekt und suchen Sie können die Versionsinformationen von Vue im Element „Abhängigkeiten“ sehen.

Lassen Sie uns darüber sprechen, wie Sie die Amap-API in vue3 verwenden Lassen Sie uns darüber sprechen, wie Sie die Amap-API in vue3 verwenden Mar 09, 2023 pm 07:22 PM

Als wir Amap verwendeten, empfahl uns der Beamte viele Fälle und Demos, aber diese Fälle verwendeten alle native Methoden für den Zugriff und stellten keine Demos von Vue oder React bereit. In diesem Artikel haben jedoch viele Leute über den Vue2-Zugriff geschrieben , wir werden einen Blick darauf werfen, wie vue3 die häufig verwendete Amap-API verwendet. Ich hoffe, es wird für alle hilfreich sein!

Eine kurze Analyse, wie Vue den Datei-Slicing-Upload implementiert Eine kurze Analyse, wie Vue den Datei-Slicing-Upload implementiert Mar 24, 2023 pm 07:40 PM

Im eigentlichen Entwicklungsprojektprozess ist es manchmal erforderlich, relativ große Dateien hochzuladen, und dann ist der Upload relativ langsam, sodass das Front-End möglicherweise das Hochladen von Dateiabschnitten erfordert. Dies ist beispielsweise sehr einfach Der Gigabyte-Dateistrom wird in mehrere kleine Dateiströme aufgeteilt, und dann wird die Schnittstelle aufgefordert, die jeweiligen kleinen Dateiströme zu liefern.

See all articles