Python--day56(前后台數據交互、bootstrap)


1. 前后台數據交互

1.1 socket搭建后台

【注意點】:

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

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

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

# 用socket建立一個服務器
import socket
server = socket.socket()
server.bind(('localhost', 8801))
server.listen(5)
print('瀏覽器訪問:http://localhost:8801')

while True:
    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('<h1>后台頁面</h1>'.encode('utf-8'))

    if router == '/index':
        with open('要返回給前台的頁面.html', 'rb') as rf:
            client.send(rf.read())
    else:
        client.send(b'<h1 style="color:red;text-align:center">404</h1>')

    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: 后台錯誤的響應

  ...

}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>請求</title>
</head>
<body>
    <h1>ajax請求</h1>
    <form action="">
        <input type="text" name="username" id="username">
        <input type="text" name="password" id="password">
        <button id="btn" type="button">請求</button>
    </form>
</body>
<script src="../jq/jquery-3.4.1.js"></script>
<script>
    $('#btn').click(function () {
        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)
                }
            })
        }
    });


</script>
</html>
ajax請求響應

1.2.2 flask搭建后台

【注意點】:

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

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

from flask import Flask, request
# 解決跨域問題,因為前台是pycharm開啟的,后台是flask開啟
from  flask_cors import CORS
app = Flask(__name__)

CORS(app, supports_credentials=True)
# flask處理路由:一個響應對應一個路徑
@app.route('/')
@app.route('/index')
def home():
    return '<h1>Home Page</h1>'

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

@app.route('/get_data', methods=['GET]', 'POST'])
def get_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


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2020 ITdaan.com