SSM VUE Axios詳解

Posted on by

如何展示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)
					})

總結

前端Get請求參數傳遞的方式3種

方式1: 通過?屬性=屬性值的方法拼接

方式2: 通過對象的方式實現數據傳遞

方式3: 利用restFul的結構實現參數傳遞.

本篇文章就到這裡瞭，希望能夠給你帶來幫助，也希望您能夠多多關註WalkonNet的更多內容！

推薦閱讀：