Python Day 53 前端、原生socket搭建後臺、ajax先後臺交互、Bootstrap框架、bootstrap柵格系統

時間 2019-11-21

標籤 python day 前端原生 socket 搭建後臺 ajax 交互 bootstrap 框架柵格系統欄目 Python 简体版

原文原文鏈接

　　##內容回顧css

1.選擇器：$('css3語法選擇器')
2. js、jq對象轉換
_divs = $('.div')    _divs[0] => js對象
div = document.querySelector('.div')   $(div) => jq對象

3.操做頁面的三步驟:選擇器、事件、具體操做
$('.div').on('事件名', function() {
    // 具體操做
    this => js對象
    $(this) => jq對象
})

4.內容操做 obj表明jq對象
賦值: obj.text("value")  |  取值：obj.text()
obj.html([value])
obj.val([value])：表單元素，有value屬性的標籤
賦值: obj.attr('屬性名', '屬性值|能夠是函數')  |  取值：obj.attr('屬性名')

5.樣式
obj.css('樣式名', 樣式值)
obj.css({
    樣式名1: 樣式值1,
    // ...
    樣式名n: 樣式值n
})
obj.addClass()
obj.removerClass()
obj.toggleClass()

6.其餘
width: obj.width()
height: obj.height()
padding左右+ width：obj.innerWidth()
padding上下+ height：obj.innerHeight()

7.建立標籤添加到頁面
div = $('<div class="div"></div>')
div.text("內容")

$('body').append(div) 末尾
$('body').prepend(div) 來頭
$('p').before(div) 前
$('p').after(div) 後

div.remove()  #本身刪除本身


8.關係
obj.children()
obj.parent()
obj.next() obj.nextAll()
obj.prev() obj.prevAll()
obj.siblings()
注：關係不強烈，用選擇器獲取

　　##原生socket搭建後臺html

「」「
快速理解：
    下面案例是模擬一個原生的socket服務器，後面這些東西都已經封裝好了。首先要知道的是：
    一、http協議：前臺發送請求給後臺(請求方式、請求路徑、請求內容)，後臺返回響應給前臺（頁面、數據）。可經過# print(data.decode('utf-8'))查看詳細信息
    二、返回響應頭，固定寫法：client.send(b'HTTP1.1 200 OK\r\nContent-Type: text/html;charset=utf8\r\n\r\n')
    3、獲取前臺發送過來的路徑信息進行判斷：
        先拿到路徑：header = request_data.split('\r\n')[0]   router = header.split(' ')[1] 而後判斷是否等於index
」「」
# 用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('1.請求.html', 'rb') as rf:
            client.send(rf.read())
    else:
        client.send(b'<h1 style="color:red;text-align:center">404</h1>')

    client.close()

　　##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

#四、請求響應

　 // 先有jq環境

// $.ajax() 前臺發送請求給後臺(能夠攜帶數據)，拿到後臺響應的數據
$.ajax({
    // 請求的後臺地址：接口
    url: 'http://localhost:6601/get_data',
    // 請求的方式 get post
    type: 'post',
    // 要提交給後臺的數據
    data: {
        username: usr, // 後臺取數據的key: 前臺要發送的數據
        password: pwd
    },
    // 後臺成功的響應
    success: function (response) {
        console.log(response);
        alert(response)
    },
    // 後臺錯誤的響應
    error: function (error) {
        console.log(error)
    }
})

#五、案例
*****************flask_server.py**********************************
from flask import Flask, request
# 解決跨域問題
from flask_cors import CORS

app = Flask(__name__)
# 指定具體服務app知足跨域通訊，supports_credentials參數固定 不提示可直接到源碼中查看
CORS(app, supports_credentials=True)


# flask處理路由

# 主頁處理
@app.route('/')
@app.route('/index')
def home():
    return '<h1>Home Page</h1>'


# 圖標處理
@app.route('/favicon.ico')
def icon():
    with open('img/favicon.ico', 'rb') as f:
        data = f.read()
    return data


# 數據響應處理：拿到前臺的數據，完成數據的響應
@app.route('/get_data', methods=['GET', 'POST'])
def get_data():
    # request模塊：能夠拿到前臺發到後端的數據
    print(request.method)
    if request.method == 'GET':
        # ajax在前端發送過來的data是以字典形式，因此經過request中args接收取值
        username = request.args['username']
        print(username)
    if request.method == 'POST':
        # 經過request中form發送數據
        username = request.form['username']
        password = request.form['password']
        if username == 'icon' and password == '123':
            return 'login success'
        return 'login failed'
    return '後臺數據'


if __name__ == '__main__':
    app.run(host='localhost', port=6601)
**********************2.ajax請求.html***********************
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>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="js/jquery-3.4.1.js"></script>
<script>
    $('#btn').click(function () {
        usr = $('#username').val();
        pwd = $('#password').val();

        if (usr && pwd){//有內容本身用
            //前臺本身用
            // console.log(ctx);

            //發送給後臺 $.ajax()發給後臺
            $.ajax({
                //請求的後他地址：接口
                url:'http://localhost:6601/get_data',
                //請求的方式 get/post
                type:'post',
                //要提交給後臺的數據
                data:{
                    //後臺要取數據的key：前臺要發送的數據
                    username:usr,
                    password:pwd
                },
                //後臺成功的響應
                success:function (response) {
                    console.log(response)
                    alert(response)
                },
                //後臺錯誤相應
                error:function (error) {
                    console.log(error)
                }
            })
        }
    })
</script>
</html>

　　##Bootstrap框架jquery

#一、什麼是bootstrap框架
bootstrap是前端框架 - bs提早幫你寫了一套樣式(css)、一套邏輯(js)、一套圖標庫(字體圖標)、還能夠拓展功能(支持插件)

#二、環境配置
# bs的邏輯(js)是依賴jq環境的，使用使用bs提早要導入jq

# 第一種：官網下載
# 本地導入
https://v3.bootcss.com/getting-started/#download
# 第二種：CDN連接
# https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css
# https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
　　 <!--bs的樣式-->
　　 <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">
　　<!--自定義樣式寫在導入以後，能夠再修改bs規定好的樣式-->
　　<style></style>

</head>
<body>
</body>
<!--必須提早導入jq-->
<script src="js/jquery-3.4.1.js"></script>
<!--bs的邏輯-->
<script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
</html>


#三、案例
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">
    <style>
        .o-btn{
            width: 120px;
        }
        .o-i{
            width: 30px;
        }
    </style>
</head>
<body>
<!-btn-danger爲bootstrap的樣式，內部都已經封裝好了--->
<botton class="btn btn-danger btn-block">按鈕</botton>

<hr>
<!--glyphicon glyphicon-music爲圖標，在bootstrap觀望中複製名字過來，就會自動匹配-->
<i class="o-i glyphicon glyphicon-music"></i>
<hr>

<!-- Single button -->
<div class="btn-group">
    <button type="button" class="o-btn btn btn-lg btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"
            aria-expanded="false">
        菜單 <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
        <li><a href="#">菜單一</a></li>
        <!--   下劃線     -->
        <li role="separator" class="divider"></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li role="separator" class="divider"></li>
        <li><a href="#">Separated link</a></li>
    </ul>
</div>
</body>
<script src="js/jquery-3.4.1.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
</html>

　　##bootstrap柵格系統css3

#一、柵格系統介紹：
    官網：https://v3.bootcss.com/css/#grid
    Bootstrap 提供了一套響應式、移動設備優先的流式柵格系統，隨着屏幕或視口（viewport）尺寸的增長，系統會自動分爲最多12列。它包含了易於使用的預約義類，還有強大的mixin 用於生成更具語義的佈局。
#二、柵格系統佈局
1.一共有四種尺寸
        超小屏幕  手機、小屏幕 平板、中等屏幕 桌面顯示器、大屏幕 大桌面顯示器
2.默認將父級等分12分，子級能夠選取佔多少份（重點*****）
    col-xs-超小 | col-sm小屏幕 | col-md中等屏幕 | col-lg大屏幕
3.默認有兩種容器
        Bootstrap 須要爲頁面內容和柵格系統包裹一個 .container 容器。咱們提供了兩個做此用處的類。注意，因爲 padding 等屬性的緣由，這兩種 容器類不能互相嵌套。
        .container 類用於固定寬度並支持響應式佈局的容器。
        .container-fluid 類用於 100% 寬度，佔據所有視口（viewport）的容器。

#三、案例 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    　　 <!--bs的樣式-->
    　　
    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">
    　　<!--自定義樣式寫在導入以後，能夠再修改bs規定好的樣式-->
    　　
    <style>
        .box{
            /*width: 600px;*/
            /*height: 300px;*/
            border: 1px solid red;
            margin: 0 auto;
            /*能夠規定父級最小最大寬度，就只須要考慮在容許尺寸中的佈局*/
            min-width: 500px;
        }
        .b{
            height: 300px;
        }
        .left{background-color: orange}
        .center{background-color: brown}
        .right{background-color: cyan}
    </style>

</head>
<body>
<!--直接在bootstrap官網拷貝：下面是導航欄功能當瀏覽器擴大縮小時，顯示效果-->
<div class="owen">
    <nav class="navbar navbar-default">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Brand</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
                <li><a href="#">Link</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                       aria-expanded="false">Dropdown <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">One more separated link</a></li>
                    </ul>
                </li>
            </ul>
            <form class="navbar-form navbar-left">
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="Search">
                </div>
                <button type="submit" class="btn btn-default">Submit</button>
            </form>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">Link</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                       aria-expanded="false">Dropdown <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                    </ul>
                </li>
            </ul>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>
</div>
<div class="box">
<!--    col-md-2:中等屏幕 col-sm-5:小屏幕 col-xs-5:超小屏幕 -->
    <div class="b left col-md-2 col-xs-5"></div>
    <div class="b center col-md-8 col-xs-2"></div>
    <div class="b right col-md-2 col-xs-5"></div>
</div>

<div class="container">
    <div class="b left col-md-2 col-xs-5"></div>
    <div class="b center col-md-8 col-xs-2"></div>
    <div class="b right col-md-2 col-xs-5"></div>
</div>

<div class="container-fluid">
    <!-- .row 默認有-15px 會移除兩邊的padding 15px空白   -->
    <div class="row">
        <div class="b left col-md-2 col-xs-5"></div>
        <div class="b center col-md-8 col-xs-2"></div>
        <div class="b right col-md-2 col-xs-5"></div>
    </div>
</div>
</body>
<!--必須提早導入jq-->
<script src="js/jquery-3.4.1.js"></script>
<!--bs的邏輯-->
<script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
</html>