序文
前のセクションの復習
前節では書籍情報を入力する前の準備について、主にElementUIのel-formを使用して、el-input、el-select、el-date-picker、画像アップロードなどの入力インターフェースの基本レイアウトを作成する方法について説明しました。同時に、レイアウト完成後、 el-form付属のルールを利用して入稿前にデータの検証を行ってください。文脈が理解できない学生は、 Vue + el-form + rules を使用して書籍情報入力機能を実現することを参照してください。
このセクションでは、
このセクションは、このコラムの実践ブログの 13 回目になります。前セクションに基づいて、提出されたデータの検証が完了しました。いよいよデータの組み立てを開始し、axios を使用してデータを提出します。送信が成功すると、プロジェクトの機能の大部分が完了し、次のステップは書籍リスト モジュールです。
目次
4. SetTimeout は手動でクリアする必要があります
1. データの組み立て
これで、一般的なインターフェイス、フロント エンド、およびフロント エンドによって送信されたデータは、JSON 形式の使用を調整します。つまり、インターフェイスのリクエスト ヘッダーの Content-Type 属性の値は application/json になります。
1. デフォルトのデータアセンブリ
Vue プロジェクトを使用する前に、データを送信するときに、入力パラメーター データを組み立てる必要があります。または、フォーム フォームの使用に慣れている場合は、フォーム内の要素の名前の値が送信されるデータになります。この場合、通常の JSON データ アセンブリは次のようになります。
let params = {
bookName: this.form.bookName,
bookNo: this.form.bookNo,
bookType: this.form.bookType,
author: this.form.author,
publisher: this.form.publisher,
publishDate: this.form.publishDate,
description: this.form.description,
coverImage: this.form.coverImage,
}2. VueプロジェクトのJSONデータの組み立て
しかし、Vue プロジェクトでは、データ依存関係と DOM 部分の間の 1 対 1 の対応に加えて、データ依存関係のフォームは送信された配列の単なる事前アセンブリであることがわかります。そのため、直接これを行う：
let params = this.form;このように、paramsで取得したJSONデータがたまたまフォームのデータになります。十分ではありません。この場合、フォームのデータはインターフェイスによって送信されたデータに対応するだけであり、これはこの方法で簡単に行うことができます。しかし、実際の作業では、以前の組み立て方法を使用する必要がある蛾のようなプロジェクトが必ず存在します。したがって、データを組み立てる最初の方法も利用できる必要があります。
2. axiosが要求するファンクションポイント
データが組み立てられました。次のステップは axios リクエストを送信することです。このプロジェクトでどのような準備が必要かを見てみましょう。
1. 新しい API ファイルを作成します
新しいモジュールが到着したため、リクエストを送信するインスタンス メソッドは新しいファイル (新しいファイル src\api\bookManager.js) を作成する必要があります。
2. 書籍の URL を管理して入力します
src\config\httpUrl.jsファイルに、図に示すように、書籍を入力するためのインターフェイス URL を追加します。この URL はサーバー スタッフによって定義され、私たちに提供されます。
3. 書籍情報入力リクエストメソッドを追加
新しく作成した src\api\bookManager.js ファイルに request メソッドを追加し、後続の書籍管理全体のモジュールである request メソッドはこのファイルに含まれます。以前の写真をアップロードするためのインターフェイス メソッドは別のファイルに配置されます。プロジェクトでは可能な場合があるため、画像アップロードを使用する必要がある要件が多数あるため、画像アップロードはパブリックメソッドとしてカウントされるため、このファイルには追加されません。コードは次のとおりです
import request from '../utils/httpRequire.js';
import { URLS } from '../config/httpUrl.js';
// 录入图书信息
export function enterBook(data) {
return request({
url: URLS.createBook,
method: 'post',
data,
});
}3. ビジネスコンポーネントでリクエストを送信する
入力パラメータのデータが準備でき、axiosが要求する部分が準備できたので、次にビジネスコンポーネントに戻り、実際に書籍情報の入力リクエストをトリガーして送信します。
1. リクエストメソッドの導入
src \views\bookManager\Create.vueファイルに axios インスタンス メソッドを導入します。
import { enterBook } from '@/api/bookManager.js';2. リクエストを送信する
前のセクションでは、送信ボタンが handleSubmit メソッドを呼び出すと説明しました。検証データが渡された後、ボタンが繰り返しクリックされることを避けるために、このメソッドはisLoadingのスイッチ制限を追加します。デフォルト設定は false です。 、 true に変更されると、送信ボタンが送信を読み込み中状態になります。コードは以下のように表示されます。
handleSubmit() {
this.$refs.form.validate((valid) => {
if (valid) {
console.log('已验证通过');
this.isLoading = true;
let params = this.form;
enterBook(params).then((res) => {
console.log(res);
if (res.code != 200) {
this.isLoading = false;
this.$message.error(res.message);
return;
}
this.isLoading = false;
this.$message({
message: '提交成功',
type: 'success'
});
let enterTimeout = setTimeout(() => {
window.clearTimeout(enterTimeout);
enterTimeout = null;
this.$router.push('/book-manager');
}, 1500)
})
}
})
},3. インターフェースから返されたデータの処理
インターフェイスの戻り値には正常な状況と異常な状況が存在する必要があるため、インターフェイスが異常な場合、つまり戻りコード値が 200 ではない場合、ユーザーにメッセージ情報を表示し、isLoading スイッチ変数を false に変更します。ユーザーが処理を終了できること 異常な状況が発生した後も送信を続行し、同時にリターンコードを追加してコードの実行継続を停止することができます。
インターフェイスが通常の状態に戻ると、「送信成功」プロンプトが通常どおりポップアップ表示され、ユーザーがポップアップ プロンプトを確認した後、1500 ミリ秒の遅延で書籍リスト ページにジャンプします。
4. SetTimeout は手動でクリアする必要があります
setTimeout が内部で外部複合変数を参照していない場合、または再帰計算に使用されていない場合、手動でクリアする必要はなく、ブラウザが自動的に解放すると考える人が多いでしょう。ただし、Brother Gou は、setTimeout が使用されている場合は、内部でどれほど単純な処理が行われていたとしても、手動でクリアする必要があると提案しています。コードは複雑ではなく、簡単です。なぜなら、コードの事後メンテナンスでは、誰がコード内で何をするのか誰も分からないし、将来のテクノロジーに何が起こるのかも誰にも分からないからです。先ほど誰も setInterval を言わなかったのと同じように、これ、あれ、ある日突然、面接官は setInterval の問題は何ですかと尋ね始めました。ある日目覚めたかのように、会社のサーバーが log4j のアップグレードを開始しました。多くの人がサードパーティのコンポーネントを使用することを好むので、インストールしてください。多くの人が必要に応じてインストールします。注目してください、はい、ユーザーがそれを使用している場合、ある日突然素晴らしいメッセージが表示されます、はは、遠いです。
やっと
このコラムは、私とサーバー Tiange ( Tiange ホームページ) が共同で作成した、フロントエンドとバックエンドの分離プロジェクトの実践シリーズです。 Tiange のサーバーは: SpringBoot+Vue フロントエンド分離プロジェクトの実践です。Tian 兄弟はすでに多くのインターフェースをリリースしています。最近、本を書きたいと思っていますが、昼夜を問わず頑張っているため、進捗がかなり遅れています。私ももっと頑張ります。コラムを購入した多くの友人にも届くでしょう」 . 最新のソースコードを頑張ってください。
最後に、皆さんのために投票セッションを用意しました。気に入っていただければ幸いです