1. 前后臺數據交互

1.1 socket搭建后臺

【注意點】：

1. 前臺發送的數據是用\r\n進行換行

2. 路由：請求的路徑，獲得路由的途徑是通過后臺對前臺發送的數據進行拆分(split)得到，一般路徑在前臺發送的數據的信息頭的1號位

3. 后臺響應信息時，不僅需要發送響應的數據給前臺，還要再次之前想瀏覽器發送響應頭信息

#用socket建立一個服務器

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

#拿到請求的路徑(路由)

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

router= header.split(' ')[1]print('前臺請求路徑：', router)#響應時，不僅需要發送響應數據，還要高旭瀏覽器響應頭的信息

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

后臺頁面

'.encode('utf-8'))

if router == '/index':

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

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

client.send(b'

404

')

client.close()

socket搭建后臺

1.2 flask搭建后臺(ajax獲取前臺數據)

原生socket搭建后臺時候，需要我們自己對前臺發送的數據進行切分，這樣比較麻煩。

于是，可以通過ajax獲取前臺的數據發送個給后臺。這樣不需要進行拆分就可以直接獲

得我們所需要的信息。

1.2.1? ajax獲取前臺數據

http協議：前臺發送請求給后臺(請求方式、請求路徑、請求內容)，后臺返回響應給前臺(頁面、數據)

ajax完成的是頁面中的局部數據請求，不會頁面改變

環境：

# pip3 install flask

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

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

【注意點】：

1. 固定使用方式：$.ajax() ，前臺發送請求給后臺(可以攜帶數據)，拿到后臺響應的數據

2. 攜帶是數據以字典的形式發送：{

url:?請求的后臺地址：接口,

type:?請求的方式 get post,

data:?要提交給后臺的數據,

success:?后臺成功的響應,

error:?后臺錯誤的響應

...

}

請求

ajax請求

請求

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請求響應

1.2.2 flask搭建后臺

【注意點】：

1. 需要解決跨域問題，因為前臺可能是pycharm打開的，后臺是flask打開，他們不是來自 同源，非同源的數據會影響瀏覽器的功能，所以要解決跨域問題。

2. flask處理路由時候，一個響應對應一個路由

from flask importFlask, request#解決跨域問題，因為前臺是pycharm開啟的，后臺是flask開啟

from flask_cors importCORS

app= Flask(__name__)

CORS(app, supports_credentials=True)#flask處理路由：一個響應對應一個路徑

@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搭建后臺

2. bootstrap

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。