黑馬程序員前端AJAX入門到實戰全套教程，包含學前端框架必會的（ajax+node.js+webpack+git），一套全覆蓋 Day1
你好,我是Qiuner. 為幫助別人少走彎路和記錄自己編程學習過程而寫博客
這是我的 github https://github.com/Qiuner ??
? gitee https://gitee.com/Qiuner 🌹
如果本篇文章幫到了你 不妨點個贊吧~ 我會很高興的 😄 (^ ~ ^)
想看更多 那就點個關注吧 我會盡力帶來有趣的內容 😎
本人已經做過多個前后端項目，這些技術也早就學過了，此次重學，一為服務其他人，讓別人少走彎路。二為查缺補漏
本文檔是黑馬程序員公開學習視頻的學習筆記，記錄了bug、作業等。
- 官方筆記、資源在 https://pan.baidu.com/s/1Gd-ANtinWR7kh8TPTto10A&pwd=9987
- 官方接口文檔在 歡迎使用 - B站-AJAX和黑馬頭條-數據管理平臺 (apifox.com)
- 在這篇文檔中，我總結了一些思路與如做到與視頻同步的辦法
封面背景顏色是淡茜紅
大致課程安排
AJAX
達到視頻中效果課使用的插件
安裝插件
Preview on Web Server
使用插件
注意視頻中其實是開了一個瀏覽器，然后實現一半一半屏幕
- 然后通過open in browser來
快速入門小案例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>axios基本使用</title>
</head>
<body><p class="my-p"></p>
</body>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>axios({url:'http://hmajax.itheima.net/api/province'}).then(result => {console.log(result)console.log(result.data.list)document.querySelector('.my-p').innerHTML = result.data.list.join('<br>')
})
</script>
</html>
URL介紹
- 對資源
axios為什么這么寫介紹
- 使用.then的方式來進行處理返回結果，result就是請求成功后服務器返回的東西
axios參數
axios查詢參數
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>axios基本使用</title>
</head>
<body><p class="my-p"></p>
</body>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
axios({url:'http://hmajax.itheima.net/api/city',params:{pname:'福建省'}
}).then(result =>{console.log(result.data.list)document.querySelector('p').innerHTML = result.data.list.join('<br>')
})
</script>
</html>
-
主要還是和js配合起來使用，使用js來獲得數據然后使用axios進行查詢
-
當屬性名和變量名同名時，可以寫為pname或cname
axios請求方法參數
小案例實踐
- 代碼編寫成功后點擊按鈕查看request這里，
小案例報錯！代碼看著沒問題但顯示TypeError: Cannot read properties of undefined (reading ‘protocol’)
- 這種情況，是你使用錯誤，比如data寫成date什么的。在本例中，就是將url寫成URL了
axios錯誤處理
- 注意，result、error都是箭頭函數，因此，result不能在error括號中使用
HTTP
HTTP請求協議
通過請求報文查錯
- 發現發送的數據是有問題的
通過請求找bug思路
一：復現bug
二：查看報錯信息或請求信息
三：根據信息找到相關代碼，以此為切入點，理解一部分項目，從而進行代碼修改
HTTP響應協議
- HTTP協議很關鍵，可以多花時間找兩篇博客來看一看
接口文檔
- 這里很簡單，相關代碼官方也有給出，我就不記了
結天案例
- 這里成功失敗是框架定義的，所以看框架中文文檔就好了
- 這個框架引入之后，只需要寫類樣式，他自己會把你寫上類樣式的地方變成已經寫好的界面
form-seralize插件
- 這個插件的用法直接看視頻就好了
![BUUCTF逆向wp [HDCTF2019]Maze](http://pic.xiahunao.cn/BUUCTF逆向wp [HDCTF2019]Maze)