ホームページ > 記事 > ウェブフロントエンド > 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('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 インターフェイス、条件はテーブル クエリ、削除、その他のステートメントです。たとえば、student という名前のテーブルにクエリを実行し、学生 ID 40001 の学生の信頼度を取得する必要がある場合、クエリ ステートメントは「query?table=student&studentIDeq=40001」のように記述できます。注意する必要があるのは、これが関連しているということです。データベースの操作フィールド (平たく言えば、バックエンドによって定義されたフィールドとして理解できます) は引用符で囲む必要がありますが、フロントエンドによって定義されたフィールドは引用符の外側に配置する必要があります
(3; ) 最後に、このリクエスト操作は呼び出されず、デフォルトで実行されることを忘れないでください。したがって、リアルタイムで実行されます。これで、この関数は完了しました。ブラウザ コンソールのネットワークを介してバックエンドにアクセスすることも、コンソールの印刷出力を通じて確認することもできます。 ! !
もちろんです。前提条件は、データベースに user という名前のテーブルがあり、名前、タイプ、日付、イントロなどのいくつかのフィールドがあり、バックエンド インターフェイスが定義されていることです。そうでない場合は成功しません
この記事の事例を読んで、その方法をマスターしてください。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。
推奨書籍:
vuex を使用して状態オブジェクトを操作する方法以上がvue.js のフロントエンドとバックエンドのデータを操作するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。