1. 前后臺(tái)數(shù)據(jù)交互

1.1 socket搭建后臺(tái)

【注意點(diǎn)】：

1. 前臺(tái)發(fā)送的數(shù)據(jù)是用\r\n進(jìn)行換行

2. 路由：請(qǐng)求的路徑，獲得路由的途徑是通過后臺(tái)對(duì)前臺(tái)發(fā)送的數(shù)據(jù)進(jìn)行拆分(split)得到，一般路徑在前臺(tái)發(fā)送的數(shù)據(jù)的信息頭的1號(hào)位

3. 后臺(tái)響應(yīng)信息時(shí)，不僅需要發(fā)送響應(yīng)的數(shù)據(jù)給前臺(tái)，還要再次之前想瀏覽器發(fā)送響應(yīng)頭信息

#用socket建立一個(gè)服務(wù)器

importsocket

server=socket.socket()

server.bind(('localhost', 8801))

server.listen(5)print('瀏覽器訪問：http://localhost:8801')whileTrue:

client, _,=server.accept()

data= client.recv(1024)#print(data) # 用\r\n作為換行

#print(data.decode('utf-8'))

request_data = data.decode('utf-8') #type: str

#拿到請(qǐng)求的路徑(路由)

header = request_data.split('\r\n')[0]

router= header.split(' ')[1]print('前臺(tái)請(qǐng)求路徑：', router)#響應(yīng)時(shí)，不僅需要發(fā)送響應(yīng)數(shù)據(jù)，還要高旭瀏覽器響應(yīng)頭的信息

client.send(b'HTTP1.1 200 OK\r\nContent-Type: text/html;charset=utf8\r\n\r\n')#client.send('

后臺(tái)頁面

'.encode('utf-8'))

if router == '/index':

with open('要返回給前臺(tái)的頁面.html', 'rb') as rf:

client.send(rf.read())else:

client.send(b'

404

')

client.close()

socket搭建后臺(tái)

1.2 flask搭建后臺(tái)(ajax獲取前臺(tái)數(shù)據(jù))

原生socket搭建后臺(tái)時(shí)候，需要我們自己對(duì)前臺(tái)發(fā)送的數(shù)據(jù)進(jìn)行切分，這樣比較麻煩。

于是，可以通過ajax獲取前臺(tái)的數(shù)據(jù)發(fā)送個(gè)給后臺(tái)。這樣不需要進(jìn)行拆分就可以直接獲

得我們所需要的信息。

1.2.1? ajax獲取前臺(tái)數(shù)據(jù)

http協(xié)議：前臺(tái)發(fā)送請(qǐng)求給后臺(tái)(請(qǐng)求方式、請(qǐng)求路徑、請(qǐng)求內(nèi)容)，后臺(tái)返回響應(yīng)給前臺(tái)(頁面、數(shù)據(jù))

ajax完成的是頁面中的局部數(shù)據(jù)請(qǐng)求，不會(huì)頁面改變

環(huán)境：

# pip3 install flask

# pip3 install -i https://pypi.douban.com/simple flask

# pip3 install -i https://pypi.douban.com/simple flask-cors

【注意點(diǎn)】：

1. 固定使用方式：$.ajax() ，前臺(tái)發(fā)送請(qǐng)求給后臺(tái)(可以攜帶數(shù)據(jù))，拿到后臺(tái)響應(yīng)的數(shù)據(jù)

2. 攜帶是數(shù)據(jù)以字典的形式發(fā)送：{

url:?請(qǐng)求的后臺(tái)地址：接口,

type:?請(qǐng)求的方式 get post,

data:?要提交給后臺(tái)的數(shù)據(jù),

success:?后臺(tái)成功的響應(yīng),

error:?后臺(tái)錯(cuò)誤的響應(yīng)

...

}

請(qǐng)求

ajax請(qǐng)求

請(qǐng)求

user=$('#username').val();

pwd=$('#password').val();if(user&&pwd) {

$.ajax({

url:'http://localhost:8888/get_data',

type:'post',

data: {

username: user,

password: pwd

},

success:function(response) {

console.log(response)

},

error:function(error) {

console.log(error)

}

})

}

});

ajax請(qǐng)求響應(yīng)

1.2.2 flask搭建后臺(tái)

【注意點(diǎn)】：

1. 需要解決跨域問題，因?yàn)榍芭_(tái)可能是pycharm打開的，后臺(tái)是flask打開，他們不是來自 同源，非同源的數(shù)據(jù)會(huì)影響瀏覽器的功能，所以要解決跨域問題。

2. flask處理路由時(shí)候，一個(gè)響應(yīng)對(duì)應(yīng)一個(gè)路由

from flask importFlask, request#解決跨域問題，因?yàn)榍芭_(tái)是pycharm開啟的，后臺(tái)是flask開啟

from flask_cors importCORS

app= Flask(__name__)

CORS(app, supports_credentials=True)#flask處理路由：一個(gè)響應(yīng)對(duì)應(yīng)一個(gè)路徑

@app.route('/')

@app.route('/index')defhome():return '

Home Page

'

#@app.route('/favicon.ico')#def icon():#return

@app.route('/get_data', methods=['GET]', 'POST'])defget_data():print(request.method)if request.method == 'GET':

username= request.args['username']

password= request.args['password']print(username, password)if request.method == 'POST':

username= request.form['username']

password= request.form['password']if username == 'wangyong' and password == "123":return 'login success'

return 'login failed'

if __name__ == '__main__':

app.run(host='localhost', port='8888')

flask搭建后臺(tái)

2. bootstrap

總結(jié)

以上是生活随笔為你收集整理的pycharm+python+bootstrap写一个登陆界面_Python--day56（前后台数据交互、bootstrap）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。