ホームページ > 記事 > ウェブフロントエンド > vue.js のフロントエンドとバックエンドのデータ連携の送信データ操作の詳細な説明
今回は、vue.js フロントエンドとバックエンドのデータ相互作用の送信データ操作について詳しく説明します。vue.js フロントで使用するための注意事項と注意事項
は何ですか。エンドとバックエンドのデータのやり取りを一緒に見てみましょう。 を使ってバックエンドにデータを送信する方法を紹介します。 (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('ruleForm')">提交</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 サイトの他の関連記事に注目してください。 推奨読書:親コンポーネントの vuex メソッドの更新状態に対処する方法と、子コンポーネントが時間内にレンダリングを更新できない
vue-i18n と element-ui の国際開発を実装する方法vueプロジェクト内
以上がvue.js のフロントエンドとバックエンドのデータ連携の送信データ操作の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。