Axios を使用して Vue2 がリクエストを開始する詳細なプロセス記録

npm インストール -S axios

// axios 依存関係を参照 import axios from 'axios'

// vue にハングアップします。ここでは axios をリクエストとしてマウントし、this.request を使用してコンポーネント内で axios を呼び出すことができます。 Vue.prototype.request = axios;

@レストコントローラ
@RequestMapping("/ユーザー")
パブリッククラスUserController{
    @GetMapping("/リスト")
    パブリックRリスト（）{
        return R.success("ユーザーリストのクエリが成功しました!");
    }
}

<テンプレート>
    <div id="インデックス">
        <button @click="selectList">ユーザーを照会</button>
    </div>
</テンプレート>
<スクリプト>
エクスポートデフォルト{
    名前: "インデックス",
    メソッド: {
        選択リスト() {
            // 単純な GET リクエストは、URL を渡すだけで実装できます。this.request.get("http://localhost:8000/user/list").then(res => {
                コンソールにログ出力します。
            }).catch(e => {
                コンソールにログ出力します。
            })
        }
    }
}
</スクリプト>
<スタイル></スタイル> 

@レストコントローラ
@RequestMapping("/ユーザー")
パブリッククラスUserController{
    @GetMapping("/get")
    パブリックR get(文字列id) {
        return R.success("ユーザー獲得に成功しました!");
    }
}

選択する() {
    設定 = {
        パラメータ: {id: "1"}
    }
    // URL の後に config オブジェクトが続きます。config オブジェクトの params 属性はリクエストパラメータに対応します this.request.get("http://localhost:8000/user/get", config).then(res => {
        コンソールにログ出力します。
    }).catch(e => {
        コンソールにログ出力します。
    })
},

@レストコントローラ
@RequestMapping("/ユーザー")
パブリッククラスUserController{
    @PostMapping("/save")
    パブリックR保存() {
        return R.success("ユーザーが正常に追加されました!");
    }
}

保存（） {
    // 単純な POST リクエストの送信は、単純な GET リクエストと似ています。get メソッドを post メソッドに変更するだけです。this.request.post("http://localhost:8000/user/save").then(res => {
        コンソールにログ出力します。
    }).catch(e => {
        コンソールにログ出力します。
    })
}, 

@レストコントローラ
@RequestMapping("/ユーザー")
パブリッククラスUserController{
    /**
     * 一般的に、POST リクエストを開始すると、パラメータはリクエスト本体に配置され、@RequestBody を通じて解析されます。* ここではエンティティ クラスを作成せず、Map コレクションを直接使用して受信します。*/
    @PostMapping("/save")
    パブリック R 保存(@RequestBody Map<String, String> データ) {
        return R.success("ユーザーが正常に追加されました!")
                .setAttribute("名前", data.get("ユーザー名"))
                .setAttribute("pwd", data.get("パスワード"));
    }
}

保存（） {
    データ = {
        ユーザー名:「ジャワ小学生丶」、
        パスワード: "123456789"
    }
    // パラメータリストを見ると、推測できるはずです。2 番目のパラメータにオブジェクトを入れるだけです。 // このメソッドによって運ばれるパラメータはリクエスト本体に配置されることに注意してください this.request.post("http://localhost:8000/user/save", data).then(res => {
        コンソールにログ出力します。
    }).catch(e => {
        コンソールにログ出力します。
    })
},

@レストコントローラ
@RequestMapping("/ユーザー")
パブリッククラスUserController{
    @PostMapping("/save")
    パブリック R save(文字列ユーザー名、文字列パスワード) {
        return R.success("ユーザーが正常に追加されました!")
                .setAttribute("名前", ユーザー名)
                .setAttribute("pwd", パスワード);
    }
}

保存（） {
    設定 = {
        パラメータ: {
            ユーザー名:「ジャワ小学生丶」、
            パスワード: "123456789"
        }
    }
    // ここではデータは使用されず、代わりにパラメータの受け渡しに config が使用されるか、またはオブジェクトがパラメータとしてカプセル化されて this.request.post("http://localhost:8000/user/save", null, config).then(res => {
        コンソールにログ出力します。
    }).catch(e => {
        コンソールにログ出力します。
    })
},

@レストコントローラ
@RequestMapping("/ユーザー")
パブリッククラスUserController{
    @PostMapping("/アップロード")
    パブリック R アップロード(MultipartFile ファイル、文字列ファイル名) {
        // ファイル オブジェクトは受信したファイルであり、ファイルの処理ロジックは省略されます...
        return R.success("ファイルのアップロードが成功しました!")
                .setAttribute("ファイル名", ファイル名);
    }

<テンプレート>
    <div id="インデックス">
        <!-- input:file はファイルを選択するために使用されます。ファイルを選択すると、変更イベントがトリガーされ、fileChange メソッドが呼び出されます -->
        <input type="file" id="file" @change="fileChange" />
        <!-- ファイルのアップロード方法を実行します-->
        <button @click="upload">クリックしてアップロード</button>
    </div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
    名前: "インデックス",
    データ（） {
        戻る {
            ファイル: null
        }
    },
    メソッド: {
        ファイル変更(イベント) {
            // このメソッドはファイルが選択されたときにトリガーされ、ファイル オブジェクトがファイルに保存されます。this.file = event.target.files[0];
        },
        アップロード（） {
            // FormData オブジェクトを作成し、その中にファイルを配置します。また、他のパラメータも配置できます。let data = new FormData();
            data.append('ファイル', this.file);
            data.append('fileName', "11223344.txt");
            // 設定オブジェクトを作成し、リクエストヘッダータイプを multipart/form-data に設定します
            設定 = {
                ヘッダー: {'Content-Type': 'multipart/form-data'}
            }
            // 作成したオブジェクトでリクエストを開始します this.request.post('http://localhost:8000/user/upload', data, config).then(res => {
                コンソールにログ出力します。
            })
        }
    }
}
</スクリプト> 

<スクリプト>
エクスポートデフォルト{
    名前: "インデックス",
    データ（） {
        戻る {
            設定: {
                ベースURL: "http://localhost:8000"
            }
        }
    },
    メソッド: {
        テスト（） {
            let data = {name: "Java小学生"};
            this.request.post("/user/save", データ, this.config).then(res => {
                コンソールにログ出力します。
            });
        },
    }
}
</スクリプト>

<スクリプト>
エクスポートデフォルト{
    名前: "インデックス",
    データ（） {
        戻る {
            設定: {
                ベースURL: "http://localhost:8000",
                タイムアウト: 5000
            }
        }
    },
    メソッド: {
        テスト（） {
            データ = {name: "張漢哲"};
            this.request.post("/user/save", データ, this.config).then(res => {
                コンソールにログ出力します。
            });
        },
    }
}
</スクリプト> 

<スクリプト>
エクスポートデフォルト{
    名前: "インデックス",
    データ（） {
        戻る {
            設定: {
                ベースURL: "http://localhost:8000",
                // サーバーがCredentials: trueと連携する必要がある、
                タイムアウト: 5000
            }
        }
    },
    メソッド: {
        テスト（） {
            let data = {name: "Java小学生"};
            this.request.post("/user/save", データ, this.config).then(res => {
                コンソールにログ出力します。
            });
        },
    }
}
</スクリプト>