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