SSM VUE Axios詳解
如何展示Sql日志？？
在yml核心配置文件內(nèi)配置信息
#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è)務(wù)需求
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)
前后端調(diào)用
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.前后端調(diào)用 Axios
Ajax
特點：局部刷新，異步訪問
同步與異步
Ajax設(shè)計原理：Ajax引擎
回調(diào)函數(shù)？？ 用來通知用戶的
案例一：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Axios練習(xí)</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！?。。。。?！
案例二：通過?屬性=屬性值的方法拼接
需求：根據(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)
})
總結(jié)
前端Get請求參數(shù)傳遞的方式3種
方式1: 通過?屬性=屬性值的方法拼接
方式2: 通過對象的方式實現(xiàn)數(shù)據(jù)傳遞
方式3: 利用restFul的結(jié)構(gòu)實現(xiàn)參數(shù)傳遞.
本篇文章就到這里了，希望能夠給你帶來幫助，也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容！
相關(guān)文章
使用vue-cli3+typescript的項目模板創(chuàng)建工程的教程
這篇文章主要介紹了使用vue-cli3+typescript的項目模板創(chuàng)建工程,本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2020-02-02
Vue報錯Component?name"Home"should?always?be?mult
這篇文章主要介紹了Vue報錯Component?name"Home"should?always?be?multi問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
使用Vue指令實現(xiàn)Markdown渲染和代碼高亮
在前端開發(fā)中,我們經(jīng)常需要將Markdown格式的文本渲染成HTML并展示在頁面上,同時還希望能夠?qū)Υa塊進行高亮顯示,今天我將分享一段代碼,通過Vue指令實現(xiàn)了這個功能,需要的朋友可以參考下2023-09-09
解決Vue keep-alive 調(diào)用 $destory() 頁面不再被緩存的情況
這篇文章主要介紹了解決Vue keep-alive 調(diào)用 $destory() 頁面不再被緩存的情況，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
Vue生產(chǎn)環(huán)境如何自動屏蔽console
這篇文章主要介紹了Vue生產(chǎn)環(huán)境如何自動屏蔽console問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-06-06
這篇文章主要介紹了vue路由緩存的幾種實現(xiàn)方式,結(jié)合實例形式詳細分析了vue.js路由緩存常見實現(xiàn)方式、使用技巧與操作注意事項,需要的朋友可以參考下2020-02-02
本篇文章主要介紹了Vue利用canvas實現(xiàn)移動端手寫板的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-05-05
Vue Cli與BootStrap結(jié)合實現(xiàn)表格分頁功能
這篇文章主要介紹了Vue Cli與BootStrap結(jié)合實現(xiàn)表格分頁功能,需要的朋友可以參考下2017-08-08
Vue.js已成為現(xiàn)代Web開發(fā)中不可或缺的技術(shù)之一,雖然Vue.js的一些基礎(chǔ)概念和語法比較易學(xué),但深入挖掘Vue.js的核心概念和功能需要更多的實踐,下面這篇文章主要給大家介紹了關(guān)于Vue3封裝組件(帶回調(diào)事件)的相關(guān)資料,需要的朋友可以參考下2023-06-06
這篇文章主要為大家介紹了vue中百度地圖定位及附近搜索功能使用步驟詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-09-09