vue.js のフロントエンドとバックエンドのデータ対話手順の詳細な説明

今回は、vue.js のフロントエンドとバックエンドのデータ連携の手順について詳しく説明します。vue.js のフロントエンドとバックエンドのデータ連携の注意事項は何ですか?ケースを見てみましょう。

フロントエンドの初心者が最初にページを作成し始めたとき、私たちはフロントエンド ページでフォームを使用することが多かったので、フォームの送信方法を学ぶことも基本的なスキルです。実際、これは ajax で実現できますが、その元の構文は 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) データ内のフォームのコンテンツのフィールドとフォームの制約ルールを定義します。フォームを送信するには

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

上記の送信関数におけるbaseURLとAPIの紹介は以下の通りです:

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

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

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

(2) メソッド内で次のようなリクエスト関数を定義します。ここでの関数名は showDetails として定義されます。ここでの BaseURL プロジェクトのパスは、プロジェクトがサーバー上にデプロイされている場合、後続の API はカプセル化されたバックエンドです。 API インターフェース; そして条件は、テーブルの

query

、

delete

およびその他のステートメントです。たとえば、student という名前のテーブルにクエリを実行し、学生 ID 40001 の学生の信頼度を取得する必要がある場合、クエリ ステートメントは「query?table=student&studentIDeq=40001」のように記述できます。注意する必要があるのは、これが関連しているということです。データベースの操作フィールド (平たく言えば、バックエンドによって定義されたフィールドとして理解できます) は引用符で囲む必要がありますが、フロントエンドによって定義されたフィールドは引用符の外側に配置する必要があります

(3; ) 最後に、このリクエスト操作は呼び出されず、デフォルトで実行されることを忘れないでください。したがって、リアルタイムで実行されます。これで、この関数は完了しました。ブラウザ コンソールのネットワークを介してバックエンドにアクセスすることも、コンソールの印刷出力を通じて確認することもできます。 ！ ！ この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

WeChat ミニプログラムの画像をデバイスの高さに合わせる方法

jquery 画像は、アップロード時に指定された比率でプレビューされます (コード付き)

以上がvue.js のフロントエンドとバックエンドのデータ対話手順の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。