SSM VUE Axios詳解
如何展示Sql日志？？
在yml核心配置文件內配置信息
#Sql日志文件打印
logging:
level:
com.jt.mapper: debug
SpringMVC里參數(shù)傳遞的說明
簡單參數(shù)傳值：利用MVC將參數(shù)寫到方法中，直接傳值
對象接收數(shù)據(jù)：參數(shù)過多封裝成對象
對象的引用賦值：重名參數(shù)傳遞 dog.name
restful
語法：
1.參數(shù)與參數(shù)之間用/分割
2.參數(shù)順序一旦定義，不可更改
3.請求路徑中不可出現(xiàn)動詞 因為不可暴露操作意圖，隱藏目的
用戶規(guī)范：
采用不同請求類型區(qū)分業(yè)務需求
get 查詢
post 新增/form提交
put 修改
delete 刪除
參數(shù)接收：
1.參數(shù)與參數(shù)之間用/分割
2.參數(shù)使用{}包裹
3.參數(shù)格式 @PathVariable("name") String name
4.若參數(shù)過多，參數(shù)名稱與對象中屬性名稱一致，可使用對象接收
@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，但是只適用于簡單操作，注解與映射文件不可同時出現(xiàn)
前后端調用
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>獲取數(shù)據(jù)：{{msg}}</h1>
</div>
<script>
new Vue({
el:"#app",
data:{
msg:"您好 VUE JS"
}
})
</script>
</body>
</html>
js中的變量
var無作用域，let有作用域，const定義常量
2.Vue生命周期
概念
是VUE針對用戶提供的擴展的功能，生命周期函數(shù)是自動執(zhí)行的
種類（③+⑧）
1.初始化階段④
beforeCreate（創(chuàng)建Vue對象，屬性暫時為null） Created（加載其中的屬性值，僅限創(chuàng)建不執(zhí)行，實例化成功）
beforeMount（解析el:"#app"，將指定區(qū)域/數(shù)據(jù)渲染區(qū)域交給Vue對象管理） Mouted（對象創(chuàng)建后，并且在指定區(qū)域開始渲染，解析表達式，執(zhí)行成功之后，用戶可可以看到解析后的頁面）
2.對象使用階段 VUE對象的修改②
beforeUpdate Updated
3.銷毀階段②
beforeDestroy Destroyed→VUE對象被銷毀，不存在了
3.前后端調用 Axios
Ajax
特點：局部刷新，異步訪問
同步與異步
Ajax設計原理：Ajax引擎
回調函數(shù)？？ 用來通知用戶的
案例一：
<!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！?。。。。。?/p>
案例二：通過?屬性=屬性值的方法拼接
需求：根據(jù)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)
})
案例三：通過對象的方式實現(xiàn)數(shù)據(jù)傳遞
需求：根據(jù)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請求參數(shù)傳遞的方式3種
方式1: 通過?屬性=屬性值的方法拼接
方式2: 通過對象的方式實現(xiàn)數(shù)據(jù)傳遞
方式3: 利用restFul的結構實現(xiàn)參數(shù)傳遞.
本篇文章就到這里了，希望能夠給你帶來幫助，也希望您能夠多多關注腳本之家的更多內容！
相關文章
這篇文章主要介紹了vue :src 文件路徑錯誤問題的簡單解決方法，本文分步驟給大家介紹的非常詳細，感興趣的朋友跟隨腳本之家小編一起學習吧2018-05-05
Element InputNumber 計數(shù)器的實現(xiàn)示例
這篇文章主要介紹了Element InputNumber 計數(shù)器的實現(xiàn)示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-08-08
這篇文章主要介紹了通過vue-cli3構建一個SSR應用程序,以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。2018-09-09
下面小編就為大家分享一篇解決vue-cli + webpack 新建項目出錯的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
公司的大數(shù)據(jù)工作組就需要通過數(shù)據(jù)大屏展示一些處理過后有價值的信息，本文主要介紹了Vue大屏數(shù)據(jù)展示示例，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-11-11
這篇文章主要介紹了vue3 攜帶參數(shù)跳轉|router傳參方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-06-06
這篇文章主要給大家介紹了關于如何使用Vue進行文件預覽與打印功能的相關資料,這個功能其實也是自己學習到的,做完也有一段時間了,一直想記錄總結一下,需要的朋友可以參考下2023-10-10
vue動態(tài)的 BreadCrumb 組件el-breadcrumb ElementUI詳解
這篇文章主要介紹了vue如何做一個動態(tài)的 BreadCrumb 組件,el-breadcrumb ElementUI2024-07-07
,本文通過圖文示例代碼相結合給大家介紹的非常詳細,需要的朋友可以參考下
這篇文章主要為大家詳細介紹了Vue3中邏輯復用的相關知識,文中的示例代碼簡潔易懂,對我們深入了解Vue3有一定的幫助,需要的小伙伴可以參考下2023-12-12
這篇文章主要介紹了Vue項目中props傳值時子組件檢測不到的問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08