SSM VUE Axios詳解

2021-10-04 16:00:39

如何展示Sql紀錄檔？？

在yml核心組態檔內設定資訊

#Sql紀錄檔檔案列印
logging:
  level: 
    com.jt.mapper: debug

SpringMVC裡引數傳遞的說明

簡單引數傳值：利用MVC將引數寫到方法中，直接傳值

物件接收資料：引數過多封裝成物件

物件的參照賦值：重名引數傳遞 dog.name

restful

語法：

1.引數與引數之間用/分割

2.引數順序一旦定義，不可更改

3.請求路徑中不可出現動詞因為不可暴露操作意圖，隱藏目的

使用者規範：

採用不同請求型別區分業務需求

get 查詢

post 新增/form提交

put 修改

delete 刪除

引數接收：

1.引數與引數之間用/分割

2.引數使用{}包裹

3.引數格式 @PathVariable("name") String name

4.若引數過多，引數名稱與物件中屬性名稱一致，可使用物件接收

    @RequestMapping("user/{name}/{age}/{id}")
    public Integer user(@PathVariable("name") String name,
                        @PathVariable("age") Integer age,
                        @PathVariable("id") Integer id){
        return userService.user(name,age,id);
    }
    /*物件接收方式*/
//    @RequestMapping("user/{name}/{age}/{id}")
//    public Integer userr(User user){
//        return userService.user(user);
//    }

<update id="user">
        update demo_user set name=#{name},age=#{age} where id =#{id}
    </update>

MyBatis簡化sql的註解

@Insert() @sele() @Update() @Delete()

簡化Sql，但是隻適用於簡單操作，註解與對映檔案不可同時出現

前後端呼叫

1.Vue入門案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>VUE入門案例</title>
		<script src="../js/vue.js"></script>
	</head>
	<body>
		
		<div id="app">
			<h1>獲取資料：{{msg}}</h1>
		</div>
		<script>
			new Vue({
				el:"#app",
				data:{
					msg:"您好 VUE JS"
				}
			})
		</script>
		
	</body>
</html>

js中的變數

var無作用域，let有作用域，const定義常數

2.Vue生命週期

概念

是VUE針對使用者提供的擴充套件的功能，生命週期函數是自動執行的

種類（③+⑧）

1.初始化階段④

beforeCreate（建立Vue物件，屬性暫時為null） Created（載入其中的屬性值，僅限建立不執行，範例化成功）

beforeMount（解析el:"#app"，將指定區域/資料渲染區域交給Vue物件管理） Mouted（物件建立後，並且在指定區域開始渲染，解析表示式，執行成功之後，使用者可可以看到解析後的頁面）

2.物件使用階段 VUE物件的修改②

beforeUpdate Updated

3.銷燬階段②

beforeDestroy Destroyed→VUE物件被銷燬，不存在了

3.前後端呼叫 Axios

Ajax

特點：區域性重新整理，非同步存取

同步與非同步

Ajax設計原理：Ajax引擎

回撥函數？？用來通知使用者的

案例一：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Axios練習</title>
		<script src="../js/axios.js"></script>
	</head>
	<body>
		<!-- http://localhost:8090/getUser -->
		<h1>Ajax入門案例</h1>
		<script>
			let url="http://localhost:8090/getUser"
			axios.get(url)
			       .then(function(promise){
				    console.log(promise.data)
			})
		</script>
	</body>
</html>

注意：需要在Controller層加註解@CrossOrigin！！！！！！！

案例二：通過?屬性=屬性值的方法拼接

需求：根據Id查詢使用者 url：url地址: http://localhost:8090/axios/findUserById

前端程式碼：

	let user = {
					age: 21,
					sex: "女"
				}
				axios.get("http://localhost:8090/axios/findUserByAS", {
						params: user
					})
					.then(function(promise) {
						console.log(promise.data)
					})

案例三：通過物件的方式實現資料傳遞

需求：根據age/sex查詢使用者資訊 url：http://localhost:8090/axios/findUserByAS

前端程式碼：

	let user = {
					age: 21,
					sex: "女"
				}
				axios.get("http://localhost:8090/axios/findUserByAS", {
						params: user
					})
					.then(function(promise) {
						console.log(promise.data)
					})