1.服務器已經開啟了CORS跨域支持
- 瀏覽器有同源策略限制:協議、域名、端口號
- 其中無法向非同源地址發送ajax請求
- 跨域解決方法:JSONP(只支持get不支持post),不是ajax
凡是有src屬性的標簽都有跨域能力
前端定義一個處理返回data的方法
后端獲取前端的callback參數(函數名)
后端用callback函數包裝數據返回給前端
前端由于先前定義了callback,就能以自己想要的方式處理數據(調用)
JSONP學習筆記
2)vue的jsonp : this.$http.JSONP('', {})3) CORS跨域資源共享普通的跨域請求,只需要后端設置;帶cookie的跨域請求,前后端都要設置
什么是跨域?跨域解決方法
2.axios
創建實例時,即使配置了baseURL,也不影響,因為他是給相對路徑使用的,而我的測試頁面用的是絕對路徑。
baseURL
將自動加在url
前面,除非url
是一個絕對 URL。
它可以通過設置一個baseURL
便于為 axios 實例的方法傳遞相對 URL- 創建實例時配置headers,其中有緩存頭Cache-Control,設置為no-store:本地和代理服務器都不可以存儲緩存,每次都要重新請求,拿到內容。
- 攔截器
請求攔截器:發送請求之前做什么;對請求錯誤做什么;
設置攔截器是為了配合服務器的要求:請求接口時要求帶token,那我就在請求攔截器的發送請求之前,給headers配上token
Object.assign方法用于對象的合并,將源對象(source)的所有可枚舉屬性,復制到目標對象(target)
3. 登錄時報錯
OPTIONS http://122.248.77.123:8090/login/login net::ERR_CONNECTION_TIMED_OUT
查了一圈問題,發現這個ip地址ping不通…
ping是tcp/ip工具
1.解析域名為ip地址
2.檢查網絡是否通暢
3.檢測計算機名
4.了解所使用的操作系統
Ping命令的七種用法
4. mock.js
由以上問題,正好學習了下mock.js
手摸手教你在vue項目中使用mockjs模擬數據入門
5. slot-scope
slot-scope是element-ui表格里的用法,實際在vue里是slot插槽的概念
elementUI:理解vue之element-ui中的
- 使用時是
scope.row
- scope不能直接用
vue插槽:Vue的slot-scope的場景的個人理解
6. vue導出表格
選擇插件時應當搜索vue導出excel的,當時搜的是elementUI導出表格,推薦到這個文章:Element-ui組件庫Table表格導出Excel表格
雖然用這2個插件沒毛病,但是,操作時報錯:
cant read property 'getElementsByTagName' of null
我就一直糾結于是否在按鈕點擊時,注冊在methods里的事件不能獲得dom元素(table),嘗試了在mounted里能獲取,于是在mounted里將dom保存到data,再methods里調用,依然不行!
然后陷入循環找不到原因…
最終發現,在布局時,將el-table放在了el-row里,影響了插件方法獲取dom,這里應當看看源碼…
7. 監聽路由的改變
路由跳轉前后,this.$route值
在mounted里檢測(決定了dom掛載到頁面上時是否渲染下拉框),是直接訪問路徑時隱藏;
watch路由的from,to,是保證路由切換時也能隱藏;
8.apache和php的關系
Apache是Web服務器,負責回應所有收到的Web請求。比如你訪問http://zhihu.com/1.html,那么Apache就找到根目錄下的1.html文件,將其中的內容返回。 如果我需要這個地址能顯示動態的東西,比如當前日期時間,那么就寫一個PHP程序1.php,當Apache收到http://zhihu.com/1.php的請求時,通過CGI調用PHP解釋程序,執行1.php文件的內容,然后將返回的字符串返回給客戶端。
就把服務器看成一間餐館,apache是店面的傳菜員,php是廚房的廚師。有些飲料之類的(靜態資源,如:HTML、CSS、JS、Images等),不用經過廚師,直接由傳菜員傳遞給顧客(Client)。如果需要廚師烹飪的菜式(例如:*.PHP等),就需要先等廚師把原始食材(php)烹飪完變成可以吃用的飯菜(靜態資源),傳菜員才能上菜。
9. package-lock.json
鎖定安裝時的包的版本號,并且需要上傳到git,以保證其他人在npm install時大家的依賴能保證一致。
package-lock.json的作用
10.vue項目中devServe 設置open為true的時候瀏覽器啟動兩次的解決辦法
- vue.config.js 里的devServer里的open選項改為false,
- package.json中的scripts改為 {“dev”: “vue-cli-service serve --open”}