Python Day 53 前端、原生socket搭建后台、ajax前后台交互、Bootstrap框架、bootstrap栅格系统

　　##内容回顾

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.其他
 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搭建后台

“”“
快速理解：
    下面案例是模拟一个原生的socket服务器，后面这些东西都已经封装好了。首先要知道的是：
    1、http协议：前台发送请求给后台(请求方式、请求路径、请求内容)，后台返回响应给前台（页面、数据）。可通过# print(data.decode('utf-8'))查看详细信息
    2、返回响应头，固定写法：client.send(b'HTTP1.1 200 OK
Content-Type: text/html;charset=utf8

')
    3、获取前台发送过来的路径信息进行判断：
        先拿到路径：header = request_data.split('
')[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)  # 用
作为换行

    # print(data.decode('utf-8'))
    request_data = data.decode('utf-8')  # type: str
    # 拿到请求的路径（路由）
    header = request_data.split('
')[0]
    router = header.split(' ')[1]
    print('前台请求路径：', router)

    # 返回响应头
    client.send(b'HTTP1.1 200 OK
Content-Type: text/html;charset=utf8

')
    # 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前后台交互

#1、 http协议：前台发送请求给后台(请求方式、请求路径、请求内容)，后台返回响应给前台（页面、数据）

#2、 ajax完成的是页面中的局部数据请求，不会页面改变

#3、环境
pip3 install flask
pip3 install -i https://pypi.douban.com/simple flask

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

#4、请求响应

　// 先有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)
    }
})

#5、案例
*****************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框架

#1、什么是bootstrap框架
bootstrap是前端框架 - bs提前帮你写了一套样式(css)、一套逻辑(js)、一套图标库(字体图标)、还可以拓展功能(支持插件)

#2、环境配置
# 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>


#3、案例
<!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{
             120px;
        }
        .o-i{
             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栅格系统

#1、栅格系统介绍：
    官网：https://v3.bootcss.com/css/#grid
    Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。
#2、栅格系统布局
1.一共有四种尺寸
        超小屏幕  手机、小屏幕 平板、中等屏幕 桌面显示器、大屏幕 大桌面显示器
2.默认将父级等分12分，子级可以选取占多少份（重点*****）
    col-xs-超小 | col-sm小屏幕 | col-md中等屏幕 | col-lg大屏幕
3.默认有两种容器
        Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。我们提供了两个作此用处的类。注意，由于 padding 等属性的原因，这两种 容器类不能互相嵌套。
        .container 类用于固定宽度并支持响应式布局的容器。
        .container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。

#3、案例
<!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{
            /* 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>

 　　##上述知识点综合案例