Bootstrap

原生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('要返回给前台的页面.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)
}
})

Bootstrap：

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

环境：

# bs的逻辑(js)是依赖jq环境的，使用使用bs提前要导入jq

# 第一种：官网下载
# 本地导入

# 第二种：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>
<head>
    <meta charset="utf-8">
    <title>初识</title>
    <!--bs的样式-->
    <link rel="stylesheet" href="bs-3.3.7/css/bootstrap.css">
    <!--自定义样式写在导入之后，可以再修改bs规定好的样式-->
    <style></style>
</head>
<body>
    
</body>
<!--必须提前导入jq-->
<script src="js/jquery-3.4.1.js"></script>
<!--bs的逻辑-->
<script src="bs-3.3.7/js/bootstrap.js"></script>
</html>

案例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Title</title>
<link rel="stylesheet" href="bs-3.3.7/css/bootstrap.css">
<style>
.o-btn {
120px;
}
.o-i {
font-size: 100px;
color: red;
}
</style>
</head>
<body>
<hr>
<button class="btn btn-danger btn-block">按钮</button>

<hr>

<hr>

<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="#">菜单1</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="bs-3.3.7/js/bootstrap.js"></script>
</html>

栅格布局：

1.一共有四种尺寸
2.默认将父级等分12分，子级可以选取占多少份
col-xs-等分 | col-sm | col-md | col-lg
3.默认有两种容器