day10內容
- ajax框架 axios 【jQuery】
1) 回憶jquery
底層接口
$.ajax({})
$.ajaxSetup({})
快捷接口
本質上是對於底層接口的封裝
$.get(url,param,success)
$.post(url,data,success)
$.put(url,data,success)
$.delete(url,param,success)
如果發送的get/delete請求，請求參數稱爲param,一般這個參數是拼接在url中
如果發送的post/put請求，請求參數稱爲data,一般這個參數是存放在請求體中
請求體data可以進行編碼後傳輸
Content-Type: application/x-www-form-urlencoded
jquery中ajax的默認形式，如果data爲對象，jquery會自動將參數轉換爲查詢字符串
Content-Type: application/json
如果想要發送json,1) 修改Content-Type。 2) 對data進行編碼
場景：
vue實例
用戶點擊了保存按鈕
methods:{
...mapActions(['saveOrUpdateArticle'])
}
this.saveOrUpdateArticle(this.form,function(){
當保存成功後，
1) 關閉模態框
2) 提示保存成功
3) 刷新列表
})
vuex狀態機
actions:{
saveOrUpdateArticle(data,handler){
$.post(url,data,function(response){
handler(response)
})
}
}
2) axios
與jquery中的ajax類似，axios是用於封裝底層的XMLHttpRequest【ajax】;不同的是axios是一個專一的ajax框架，axios是基於promise機制的框架，即可以運行到瀏覽器中也可以運行在nodejs，提供了請求響應的攔截器，在POST請求中默認將請求參數對象封裝爲json字符串，可以對響應信息進行二次封裝
接口標準【briup】- 前端開發者 <=> 後端開發者
1. post請求如果沒有特殊說明，默認使用application/x-www-form-urlencoded
2. 響應信息的數據格式：
{
status:200, // 200 500 401 403
data: // 字符串，對象，數組
message:'' // 接口響應信息
timestamp: // 時間戳，表示接口響應時間
}
jquery無法運行在nodejs，基於瀏覽器api，而nodejs中沒有瀏覽器api
1. 底層接口
1) 直接通過axios底層函數發送請求
axios(config)
2) 先創建axios實例對象，在創建的時候可以添加一些默認的配置信息，這樣所有的axios實例對象都具備這樣的配置信息了。
let request = axios.create([config])
request.get()
3) 爲axios配置默認值 , xxx表示config中的屬性
axios.defaults.xxx
config是一個對象
{
url,
method,
baseURL, // 基路徑，一個真正的請求應該是 baseURL + url, 【http://localhost:8888】【/article/findAll】
data, // 是放在請求體中被傳遞的參數，僅適用於'PUT', 'POST', and 'PATCH'
params, // 表示拼接在url後面的參數，參數格式查詢字符串
headers // 表示請求頭信息 Content-Type
timeout // 超時時間設定
withCredentials // false,表示是否攜帶cookie
responseType // 等同於jquery中的dataType,服務器返回的數據類型，默認爲json
responseEncoding// 默認爲utf-8
transfromRequest
transfromResponse
}
axios會將服務器端返回來的數據做一次封裝,封裝的時候將服務器端返回的數據放到data中
服務端數據格式
{
status:200, // 200 500 401 403
data: // 字符串，對象，數組
message:'' // 接口響應信息
timestamp: // 時間戳，表示接口響應時間
}
axios resposne:
{
status:
statusText:
data:{
status:200, // 200 500 401 403
data: // 字符串，對象，數組
message:'' // 接口響應信息
timestamp: // 時間戳，表示接口響應時間
},
}
2. 便捷接口
axios.request(config)
axios.get(url[,config])
axios.post(url,data[,config])
axios.delete(url[,config])
axios.put(url,data[,config])
3. 攔截器
可以對所有的請求進行攔截
1) 請求攔截器
在請求發送之前攔截所有請求
axios.interceptors.request.user(function (config) {
// Do something before request is sent
return config;
}, function (error) {
// Do something with request error
return Promise.reject(error);
})
2) 響應攔截器
在請求響應回來之前攔截響應
axios.interceptors.response.use(function(response){
return response;
},function(error){
return Promise.reject(error);
})
4. 全局默認配置
axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
場景：
vue實例
用戶點擊了保存按鈕
methods:{
...mapActions(['saveOrUpdateArticle'])
}
this
.saveOrUpdateArticle(this.form)
.then(response =>{
當保存成功後，
1) 關閉模態框
2) 提示保存成功
3) 刷新列表
})
vuex狀態機
actions:{
saveOrUpdateArticle(data){
return axios.post(url,data);
}
}
22. 重複編寫業務（）
階段性梳理：
nodejs
es6
vue的核心部分
vue基礎【script直接導入方式】
實例對象
渲染
列表渲染
條件渲染
事件機制
計算屬性
過濾器
監聽器
組件
渲染函數
…
vue生態
element-ui組件庫
vue-cli 腳手架【模塊化機制- 組件】
vueRouter 路由
vuex 狀態管理
axios ajax【數據交互】
總體演練 （vue + vuex + vueRouter + elementui + axios）
vue深入部分(錦上添花)
webpack
sass
vue-element-admin (半成品框架-類似於app05 )
微信小程序（一週）
項目階段【家政服務預約】
老師帶着大家完成一個完整的項目
---------------------前端結束---------------------
後端技術：
nodejs
express -> swagger-ui(後端服務)
mysql
完整應用