《Vue.js前端開(kāi)發(fā)技術(shù)與實(shí)踐（第二版）》 課件 第11章 前后端數(shù)據(jù)交互技術(shù)

第11章前后端數(shù)據(jù)交互技術(shù)前后端設(shè)備前后端設(shè)備客戶端和服務(wù)器端客戶端：在瀏覽器中運(yùn)行的部分。使用HTML、CSS、JavaScript構(gòu)建服務(wù)器端：在服務(wù)器中運(yùn)行的部分。負(fù)責(zé)存儲(chǔ)數(shù)據(jù)和處理應(yīng)用邏輯用戶交互的界面使用node.js、Java、.net等構(gòu)建網(wǎng)站服務(wù)器能夠提供網(wǎng)站訪問(wèn)服務(wù)的機(jī)器就是網(wǎng)站服務(wù)器。它能夠接收客戶端的請(qǐng)求，能夠?qū)φ?qǐng)求做出響應(yīng)。服務(wù)器相關(guān)概念I(lǐng)P地址：是互聯(lián)網(wǎng)設(shè)備的唯一標(biāo)識(shí)域名：由于IP地址難于記憶，所以產(chǎn)生了域名的概念，所謂域名就是平時(shí)上網(wǎng)所使用的網(wǎng)址。

開(kāi)發(fā)過(guò)程，使用本機(jī)作為服務(wù)器：特定IP為，特定域名為localhost端口：使用端口區(qū)分不同的服務(wù)。URL：統(tǒng)一資源定位符，又叫URL，是專(zhuān)為標(biāo)識(shí)internet網(wǎng)上資源位置而設(shè)的一種編址方式。傳輸協(xié)議：//服務(wù)器ip或域名:端口/資源所在位置標(biāo)識(shí)/cup/?sort=students_count&category_id=3https:///blog/2014/05/restful_api.htmlRESTfulAPI規(guī)范開(kāi)發(fā)者工具中查看報(bào)文json-server可以指定一個(gè)json文件作為api的數(shù)據(jù)源網(wǎng)址：/typicode/json-server安裝：npminstall-gjson-server啟動(dòng)服務(wù)：json-server--watchdb.json

必須在.json數(shù)據(jù)所在的目錄下運(yùn)行啟動(dòng)命令axios

一、定義Axios是一個(gè)基于promise的HTTP庫(kù)，可以用在瀏覽器和node.js中。二、原理axios本質(zhì)上也是對(duì)原生XHR（）的封裝，只不過(guò)它是Promise的實(shí)現(xiàn)版本，符合最新的ES規(guī)范。三、主要特點(diǎn)（1）從瀏覽器創(chuàng)建XMLHttpRequests（2）從node.js創(chuàng)建http請(qǐng)求（3）支持PromiseAPI（4）攔截請(qǐng)求和響應(yīng)（5）轉(zhuǎn)換請(qǐng)求和響應(yīng)數(shù)據(jù)（6）取消請(qǐng)求（7）自動(dòng)轉(zhuǎn)換JSON數(shù)據(jù)（8）客戶端支持防御XSRF[2]“CSRF/XSRF(Cross-siterequestforgery),中文名稱:跨站請(qǐng)求偽造四、axios開(kāi)發(fā)網(wǎng)址（1）axios中文文檔|axios中文網(wǎng)/zh-cn/docs/（2）github/axios/axios（3）CDN國(guó)內(nèi)引用地址（CDN的全稱是ContentDeliveryNetwork，即內(nèi)容分發(fā)網(wǎng)絡(luò)。）//axios/五、應(yīng)用axios1、安裝2、基本使用3、axios的api4、默認(rèn)配置5、攔截器6、取消請(qǐng)求7、封裝8、跨域Axios封裝1、每次客戶端與服務(wù)器連接只處理一個(gè)事務(wù)，就斷開(kāi)連接。2、http協(xié)議是無(wú)狀態(tài)的，沒(méi)有記憶能力。http協(xié)議特性：https:///weixin_45070175/article/details/118559272

利用token進(jìn)行用戶身份驗(yàn)證的流程：1、客戶端使用用戶名和密碼請(qǐng)求登錄2、服務(wù)端收到請(qǐng)求，驗(yàn)證用戶名和密碼3、驗(yàn)證成功后，服務(wù)端會(huì)簽發(fā)一個(gè)token，再把這個(gè)token返回給客戶端4、客戶端收到token后可以把它存儲(chǔ)起來(lái)，比如放到cookie中5、客戶端每次向服務(wù)端請(qǐng)求資源時(shí)需要攜帶服務(wù)端簽發(fā)的token，可以在cookie或者h(yuǎn)eader中攜帶6、服務(wù)端收到請(qǐng)求，然后去驗(yàn)證客戶端請(qǐng)求里面帶著的token，如果驗(yàn)證成功，就向客戶端返回請(qǐng)求數(shù)據(jù)tokenJWT就是上述流程當(dāng)中token的一種具體實(shí)現(xiàn)方式，其全稱是JSONWebToken

瀏覽器的同源策略同源：是指協(xié)議，域名，端口都要相同，其中有一個(gè)不同都會(huì)產(chǎn)生跨域?？缬颍菏侵竻f(xié)議，域名，端口都要相同，其中有一個(gè)不同都會(huì)產(chǎn)生跨域。同源策略：在沒(méi)有明確授權(quán)的情況下，禁止頁(yè)面加載或執(zhí)行與跨域的任何腳本。同源策略限制的行為：1.)不同源的Cookie、LocalStorage和IndexDB無(wú)法讀取2.)不同源DOM和Js對(duì)象無(wú)法獲得3.)不同源AJAX請(qǐng)求不能發(fā)送跨域資源共享（CORS）跨域資源共享（corss-originresourcesharing）：CORS需要瀏覽器和服務(wù)器同時(shí)支持。當(dāng)瀏覽器進(jìn)行跨域請(qǐng)求的時(shí)候，會(huì)在請(qǐng)求里添加頭部origin，表明自己協(xié)議，主機(jī)，端口。當(dāng)服務(wù)器收到這個(gè)客戶端發(fā)送的請(qǐng)求之后，如果需要允許能夠訪問(wèn)，就需要添