SSM VUE Axios の詳細な説明

SQL ログを表示するにはどうすればいいですか? ?

ymlコア設定ファイル内の情報を設定する

#SQL ログ ファイルの印刷レコード:
  レベル： 
    com.jt.mapper:デバッグ

SpringMVC でのパラメータ渡しの説明

シンプルなパラメータ値の受け渡し: MVCを使用してメソッドにパラメータを書き込み、値を直接渡す

オブジェクト受信データ: オブジェクトにカプセル化されているパラメータが多すぎます

オブジェクト参照の割り当て: dog.name を渡した重複パラメータ

安らかな

文法：

1. パラメータを区切るには / を使用する

2. パラメータの順序は一度定義すると変更できません

3. 動詞は操作の意図を明らかにして目的を隠すことができないため、リクエストパスに表示できません。

ユーザー仕様:

さまざまなリクエストタイプを使用してビジネスニーズを区別する

クエリを取得

投稿追加/フォーム送信

変更を加える

消去

受信したパラメータ:

1. パラメータを区切るには / を使用する

2. パラメータは{}で囲まれます

3. パラメータ形式 @PathVariable("name") 文字列名

4. パラメータが多すぎる場合、パラメータ名がオブジェクト内の属性名と一致している場合は、オブジェクト受信を使用できます。

    @RequestMapping("ユーザー/{名前}/{年齢}/{ID}")
    パブリック整数ユーザー(@PathVariable("name") 文字列名、
                        @PathVariable("age") 整数の年齢、
                        @PathVariable("id") 整数ID){
        userService.user(名前、年齢、ID) を返します。
    }
    /*オブジェクト受信メソッド*/
// @RequestMapping("ユーザー/{名前}/{年齢}/{ID}")
// パブリック整数 userr(ユーザー user) {
// userService.user(user) を返します。
// }

<更新ID="ユーザー">
        demo_user を更新し、name=#{name}、age=#{age} を設定します。id =#{id} です。
    </更新>

MyBatisはSQLアノテーションを簡素化します

@挿入() @選択() @更新() @削除()

SQL を簡素化しますが、単純な操作の場合のみ、注釈とマッピングファイルは同時に表示できません。

フロントエンドとバックエンドの呼び出し

1. Vue入門ケース

<!DOCTYPE html>
<html>
	<ヘッド>
		<メタ文字セット="utf-8">
		<title>VUE 入門ケース</title>
		<script src="../js/vue.js"></script>
	</head>
	<本文>
		
		<div id="アプリ">
			<h1>データを取得: {{msg}}</h1>
		</div>
		<スクリプト>
			新しいVue({
				el:"#アプリ",
				データ：{
					メッセージ:「こんにちは VUE JS」
				}
			})
		</スクリプト>
		
	</本文>
</html>

js の変数
var にはスコープがありません。let にはスコープがあり、const には定数を定義します。

2. Vueのライフサイクル

コンセプト

VUEがユーザー向けに提供する拡張機能です。ライフサイクル機能が自動的に実行されます。

タイプ（③+⑧）

1. 初期化フェーズ ④

beforeCreate (Vue オブジェクトを作成、属性は一時的に null) Created (属性値を読み込み、作成のみで実行はせず、インスタンス化は成功)

beforeMount (el: "#app" を解析し、指定された領域/データレンダリング領域を Vue オブジェクトに渡して管理します) Mouted (オブジェクトが作成され、指定された領域でレンダリングが開始され、式が解析され、正常に実行されると、ユーザーは解析されたページを見ることができます)

2. オブジェクト使用フェーズにおけるVUEオブジェクトの修正②

beforeUpdate 更新済み

3. 破壊フェイズ ②

beforeDestroy 破棄→VUEオブジェクトは破棄され、存在しなくなります

3. フロントエンドとバックエンドのAxios呼び出し

アヤックス

機能: 部分更新、非同期アクセス

同期と非同期

Ajax 設計原則: Ajax エンジン

コールバック関数? ? ユーザーに通知するため

ケース1:

<!DOCTYPE html>
<html>
	<ヘッド>
		<メタ文字セット="utf-8">
		<title>Axios エクササイズ</title>
		<script src="../js/axios.js"></script>
	</head>
	<本文>
		<!-- http://localhost:8090/getUser -->
		<h1>Ajax 入門ケース</h1>
		<スクリプト>
			url="http://localhost:8090/getUser" とします。
			axios.get(URL) を取得します。
			       .then(関数(約束){
				    コンソールログ(promise.data)
			})
		</スクリプト>
	</本文>
</html>

注意: コントローラー層に @CrossOrigin アノテーションを追加する必要があります。！！！！！！

ケース2: ?attribute=属性値方式によるスプライシング

要件: ID に従ってユーザー URL を照会します: URL アドレス: http://localhost:8090/axios/findUserById

フロントエンドコード:

	ユーザー = {
					年齢: 21,
					性別：「女性」
				}
				axios.get("http://localhost:8090/axios/findUserByAS", {
						パラメータ: ユーザー
					})
					.then(関数(約束) {
						コンソールログ(promise.data)
					})

ケース3: オブジェクトを介したデータ転送

要件: 年齢/性別に基づいてユーザー情報を照会する URL: http://localhost:8090/axios/findUserByAS

フロントエンドコード:

	ユーザー = {
					年齢: 21,
					性別：「女性」
				}
				axios.get("http://localhost:8090/axios/findUserByAS", {
						パラメータ: ユーザー
					})
					.then(関数(約束) {
						コンソールログ(promise.data)
					})