ホームページ > 記事 > ウェブフロントエンド > vue.js のフロントエンドとバックエンドのデータ連携のためのデータ送信の操作について

vue.js のフロントエンドとバックエンドのデータ連携のためのデータ送信の操作について

不言オリジナル: 2018-06-29 17:17:232258ブラウズ

この記事では、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) データ内のフォームコンテンツのフィールドとフォームの制約ルールを定義します。

(3 ) フォームの送信方法を定義します

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

上記送信関数のbaseURLとAPIの紹介は以下の通りです

ここでデータをリクエストする方法を紹介します。バックエンドは vue-resource を使用します。

たとえば、バックエンドからテーブルをリクエストします。

(1) まず、データで msg:[] 配列を返し、テーブルデータを受け取ります。

(2) メソッド内で次のようなリクエスト関数を定義します。ここでの関数名は showDetails として定義されます。プロジェクトがサーバー上にデプロイされている場合、後続の API は、baseURL プロジェクトのパスです。バックエンドによってカプセル化された API インターフェイス。次に、条件はテーブルのクエリや削除などのステートメントです。たとえば、student という名前のテーブルにクエリを実行し、学生 ID 40001 の学生の信頼度を取得する必要がある場合、クエリステートメントは「query?table=student&studentIDeq=40001」のように記述できます。注意する必要があるのは、これが関連しているということです。データベースの操作フィールド (平たく言えば、バックエンドによって定義されたフィールドとして理解できます) は引用符で囲む必要がありますが、フロントエンドによって定義されたフィールドは引用符の外側に配置する必要があります

(3; ) 最後に、このリクエスト操作は呼び出されず、デフォルトで実行されるので、リアルタイムで実行されることを忘れないでください。これで、この関数は完了しました。バックエンドから取得したデータは、ブラウザコンソールのネットワークを通じて取得することも、コンソールの印刷出力を通じて確認することもできます。！！

もちろんです。前提として、データベースに user という名前のテーブルがあり、名前、タイプ、日付、イントロなどのいくつかのフィールドがあり、バックエンドインターフェイスが定義されていることが前提となります。そうでない場合は成功しません

上記はこの記事の全内容が皆さんの学習に役立つことを願っています。その他の関連コンテンツについては、PHP 中国語 Web サイトに注目してください。

vue.js のフロントエンドとバックエンドのデータ連携のためのデータ送信の操作について

関連記事