前后端交互的概念
前端頁面的數(shù)據(jù)要發(fā)生變化，那么就要與后端發(fā)生交互，那么前后端之間到底是怎樣交互的呢?
前后端之間的通信是要通過一個(gè)協(xié)議來完成的————這里是通過一個(gè)在tcp/udp協(xié)議之上的一個(gè)協(xié)議-----http協(xié)議
這里先了解一下，后邊講web框架時(shí)會(huì)再次講解。
然而在傳統(tǒng)的開發(fā)中都是用的是前后端不分離的開發(fā)模式，在經(jīng)過不斷地更新逐漸演變?yōu)榍昂蠖朔蛛x的開發(fā)模式
- 前后端不分離：傳統(tǒng)的開發(fā)模式，前端頁面發(fā)送請(qǐng)求，后端服務(wù)器接受后操作數(shù)據(jù)庫(比如：查詢數(shù)據(jù))，然后把這些數(shù)據(jù)綁定在html模板上，返回給前端頁面，使前端頁面發(fā)生改變。
- 前后端分離：比較主流的開發(fā)模式，相比于前后端不分離，前后端分離減少了服務(wù)器端的操作，增加了客戶端的任務(wù)(富客戶端開發(fā)),這樣一些簡單的頁面操作就可以直接在前端完成，后端只負(fù)責(zé)操作數(shù)據(jù)庫提供數(shù)據(jù)(JSON數(shù)據(jù)格式(或xml))即可。比如學(xué)習(xí)的vue，react等前端開發(fā)框架。
- 前后端分離有什么好處?：在傳統(tǒng)的web開發(fā)的過程中，返回的html頁面是固定的，只能在pc端顯示，那么如果手機(jī)端也想顯示，那么只能在做一個(gè)服務(wù)器并且重新編寫適合手機(jī)端顯示的頁面模板。而前后端分離的情況：只需要做一份服務(wù)器，不同的前端頁面(pc端，ios端，andriod端)向其發(fā)送請(qǐng)求，直接返回響應(yīng)數(shù)據(jù)，即可完成。
1.異步
- JavaScript的執(zhí)行環(huán)境是「單線程」
- 所謂單線程，是指JS引擎中負(fù)責(zé)解釋和執(zhí)行JavaScript代碼的線程只有一個(gè)，也就是一次只能完成一項(xiàng)任務(wù)，這個(gè)任務(wù)執(zhí)行完后才能執(zhí)行下一個(gè)，它會(huì)「阻塞」其他任務(wù)。這個(gè)任務(wù)可稱為主線程
- 異步模式可以一起執(zhí)行多個(gè)任務(wù)
JS中常見的異步調(diào)用
- 定時(shí)任何
- ajax
- 事件函數(shù)
異步請(qǐng)求：當(dāng)前端頁面向后端服務(wù)器發(fā)送請(qǐng)求后，后端服務(wù)器要進(jìn)行一些操作，在后端返回?cái)?shù)據(jù)之前，前端頁面仍然能夠繼續(xù)一些操作，這就是異步請(qǐng)求，同步請(qǐng)求與之相反，在返回?cái)?shù)據(jù)之前，不能進(jìn)行任何操作，只能等待服務(wù)器響應(yīng)。
2.前后端交互調(diào)用接口方式
- 原生ajax
- 基于jQuery的ajax(過時(shí))
- fetch
- axios
3.python后端開發(fā)--Flask
因?yàn)樯婕暗角昂蠖私换ィ砸却罱ㄒ粋€(gè)后端服務(wù)器
這里我們使用Flask框架進(jìn)行搭建，(Flask相對(duì)比較輕量級(jí))
(1)打開pycharm。新建項(xiàng)目，選擇flask，
點(diǎn)擊create，等待安裝
打開setting，查看安裝的庫：
flask及其依賴都已經(jīng)安裝好了，這就是pycharm的好處，如果使用終端的話，那么就需要自己一個(gè)一個(gè)的安裝。
app.py:
from flask import Flask
#flaskapp應(yīng)用
app = Flask(__name__)
#裝飾器，app的路由，當(dāng)訪問/地址的url時(shí)，進(jìn)入該函數(shù)
@app.route('/')
def hello_world():
#返回字符串
return 'Hello World!'
#啟動(dòng)服務(wù)的main()
if __name__ == '__main__':
app.run()
啟動(dòng)服務(wù)器：
127.0.0.1:5000
顯示hello world！
也可以返回html格式：
@app.route('/')
def hello_world():
#返回字符串
return '</h1>Hello World!</h1>'
瀏覽器會(huì)自動(dòng)解析為html標(biāo)簽：
跳轉(zhuǎn)
@app.route('/')
def hello_world():
return '<a href="/info">Hello World!</a>'
@app.route('/info')
def info():
#返回字符串
return 'Hello zhangsan'
再次啟動(dòng)項(xiàng)目：
點(diǎn)擊hello World！，會(huì)跳轉(zhuǎn)到/info。
flask接受參數(shù)
@app.route('/info')
def info():
#獲取前臺(tái)發(fā)送的內(nèi)容
uname = request.args['username']
#返回字符串
return 'Hello'+uname
1.原生AJAX請(qǐng)求
AJAX = 異步 JavaScript 和 XML。
- AJAX是基于JavaScript編寫的一個(gè)用于前后端交互的技術(shù)。
- XML是一種標(biāo)記語言，與JSON的作用一樣，但是相對(duì)繁瑣，所以它過時(shí)了，現(xiàn)在都用JSON。
AJAX 是一種用于創(chuàng)建快速動(dòng)態(tài)網(wǎng)頁的技術(shù)。
通過在后臺(tái)與服務(wù)器進(jìn)行少量數(shù)據(jù)交換，AJAX 可以使網(wǎng)頁實(shí)現(xiàn)異步更新。這意味著可以在不重新加載整個(gè)網(wǎng)頁的情況下，對(duì)網(wǎng)頁的某部分進(jìn)行更新。
1.創(chuàng)建ajax對(duì)象
let xhr = new XMLHttpRequest()
2.鏈接服務(wù)器
open(method,url,async)
acync:是否異步
xhr.open('get','http://localhost:5000/?username=lisi',true)
get請(qǐng)求一般不會(huì)影響到數(shù)據(jù)庫中的數(shù)據(jù)，一般用來查詢數(shù)據(jù)
post請(qǐng)求會(huì)影響到數(shù)據(jù)庫中的數(shù)據(jù)，一般用來增加數(shù)據(jù)
不常用：
put--一般用來修改數(shù)據(jù)
delete-- 一般用來刪除數(shù)據(jù)
3.發(fā)送請(qǐng)求
send(string)
使用get請(qǐng)求時(shí)參數(shù)直接在url后拼接即可
使用post請(qǐng)求時(shí)參數(shù)代表著向服務(wù)器發(fā)送的數(shù)據(jù)：
get：
xhr.send()
post：
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send('username=lisi')
4.接受服務(wù)器響應(yīng)數(shù)據(jù)
#當(dāng)服務(wù)器響應(yīng)返回時(shí)，執(zhí)行回調(diào)函數(shù)
xhr.onload = function(){
console.log(xhr.responseText)
}
示例：
打開vscode，新建html文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
window.onload = function(){
//創(chuàng)建ajax對(duì)象
let xhr = new XMLHttpRequest()
// 回調(diào)函數(shù)，當(dāng)服務(wù)器的響應(yīng)回來時(shí)，調(diào)用
xhr.onload = function(){
//后端返回的內(nèi)容
console.log(xhr.responseText)
}
//打開請(qǐng)求，(get方式，訪問服務(wù)器地址，true是否異步)
xhr.open('get','http://127.0.0.1:5000/info?username=lisi',true)
//發(fā)送請(qǐng)求
xhr.send()
console.log('請(qǐng)求已發(fā)送')
}
</script>
</body>
</html>
啟動(dòng)服務(wù)器
運(yùn)行前端頁面：
跨域：就是前后端的頁面雖然都在本機(jī)，但是并沒有遵循同一個(gè)端口。
解決方案：
在服務(wù)器端安裝：Flask-Cors
打開pycharm的中斷terminal：
pip install
在app.py中添加：
再次運(yùn)行前端頁面：
這就是異步的的感覺。
1.1傳統(tǒng)的回調(diào)函數(shù)(現(xiàn)在都寫onload就行)
<script>
window.onload = function(){
//創(chuàng)建ajax請(qǐng)求
let xhr = new XMLHttpRequest()
//每當(dāng)狀態(tài)碼1234改變的時(shí)候，都會(huì)調(diào)用該函數(shù)
xhr.onreadystatechange = function(){
console.log(xhr.readyState) #顯示準(zhǔn)備狀態(tài)
#當(dāng)準(zhǔn)備狀態(tài)=4(準(zhǔn)備好了)，狀態(tài)碼=200(正常，ok)
if(xhr.readyState == 4 && xhr.status == 200) {
console.log(xhr.responseText) #顯示服務(wù)器返回內(nèi)容
}
}
//打開請(qǐng)求，(get方式，訪問服務(wù)器地址，true是否異步)
xhr.open('get','http://localhost:5000/?username=lisi',true)
//發(fā)送請(qǐng)求
xhr.send()
console.log('請(qǐng)求已發(fā)送')
}
運(yùn)行項(xiàng)目：
