day-56前端

原生socket搭建后台

import socket
server = socket.socket()                        # 用socket建立一个服务器
server.bind(('localhost', 8801))
server.listen(5)

print('浏览器访问：http://localhost:8801')      # 浏览器要访问的端口号

while True:
    client, _, = server.accept()
    data = client.recv(1024)                    # 接收的数据用
作为换行
    


    request_data = data.decode('utf-8')         # 想要拿到请求的路径（链接/后面的东西）
    
    header = request_data.split('
')[0]      #拿到第一行请求
    router = header.split(' ')[1]               #拿到 链接/后面的东西
    

   
    client.send(b'HTTP1.1 200 OK
Content-Type: text/html;charset=utf8

')   # 返回的响应头


    if router == '/index':
        with open('1.请求.html', 'rb') as rf:          #拿到链接/后面的东西，是'/index'返回一个html页面
            client.send(rf.read())
    else:
        client.send(b'<h1 style="color:red;text-align:center">404</h1>')    #不是404

    client.close()

Flask搭建后台

需要安装flask、flask-cors

from flask import Flask, request
from flask_cors import CORS                 # 解决跨越(服务器之间相互访问)

app = Flask(__name__)                       #开启flack服务器
CORS(app, supports_credentials=True)


@app.route('/')                             # 处理浏览器请求
@app.route('/index')
def home():
    return '<h1>Home Page</h1>'             #给浏览器返回信息


@app.route('/favicon.ico')                  #第一次请求服务器，经过这个函数,返回图片
def icon():
    with open('图片路径'，'rb') as f:
        data=f.read()
    return data


@app.route('/get_data', methods=['GET', 'POST'])    # 拿到前台的数据(ajax)，完成数据的响应（允许get、post请求）
def get_data():
    print(request.method)                           #获取请求信息，get还是post
    if request.method == 'GET':
        username = request.args['username']         #通过前台的key，拿到值(get)
        print(username)
    if request.method == "POST":
        username = request.form['username']         #通过前台的key，拿到值(post)
        password = request.form['password']
        if username == 'owen' and password == '123':
            return 'login success'
        return 'login failed'


if __name__ == '__main__':
    app.run(host='localhost', port=6601)            # 规定ip，端口号

ajax前后台交互

jq包要有

ajax完成的是页面中的局部数据请求，不会改变页面（如登录、注册）

<!DOCTYPE html>
<html>
<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>    //为了让后台用ajax获取数据，不靠提交按钮获取数据
    </form>
</body>
<script src="js/jquery-3.4.1.js"></script>
<script>
    $('#btn').click(function () {            
        usr = $('#username').val();                        //获取表单信息
        pwd = $('#password').val();
        if (usr && pwd) {                                  // 有内容才打印
           

            
            $.ajax({                                    //  $.ajax() 发送请求给后台
                // 
                url: 'http://localhost:6601/get_data',  //请求的后台地址（接口）,'/get_data’ 是要找到flask对应的函数
               
                type: 'post',                            // 请求的方式 get post
                // 
                data: {
                    username: usr,                      // 要提交给后台的数据,{后台取数据的key: 前台要发送的数据}
                    password: pwd
                },
                
                success: function (response) {          // 后台成功的返回信息，response成功过后拿到的结果
                    console.log(response);
                    alert(response)
                },
                
                error: function (error) {                // 后台错误的返回信息
                    console.log(error)
                }
            })

        }
    })

</script>
</html>

bootspart

什么是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</title>
    <link rel="stylesheet" href="bs-3.3.7/css/bootstrap.css">      <!--bs的样式-->
    
    <style>
        .o-btn {                                                  <!--自定义样式写在导入之后，可以再修改bs规定好的样式-->
            width: 120px;
        }
        .o-i {
            font-size: 100px;
            color: red;
        }
    </style>
</head>
<body>
<hr>
<button class="btn btn-danger btn-block">按钮</button>

<hr>

<i class="o-i glyphicon glyphicon-magnet"></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="#">菜单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>                    <!--必须提前导入jq-->
<script src="bs-3.3.7/js/bootstrap.js"></script>              <!--bs的逻辑-->
</html>

bootspart栅格系统

1.一共有四种尺寸
超小屏幕手机 (<768px)

小屏幕平板 (≥768px)

中等屏幕桌面显示器 (≥992px)

大屏幕大桌面显示器 (≥1200px)

2.默认将父级等分12分，子级可以选取占多少份（比如就占8份也可以），写完后浮动，清浮动也做了
col-xs-等分 | col-sm-等分 | col-md-等分（经常使用） | col-lg-等分

超小屏幕显示　小屏幕显示　中等屏幕显示　　大屏幕显示

min- 800px;

可以规定父级最小（最大）宽度，就只需要考虑在允许尺寸（比如中等屏幕以上）中的布局

3.默认有两种容器

　　a.<div class="container">

　　b.<div class="container-fluid">

　　　<div class="row">　　　　　　//填充了两边的空余

jq补充：

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

　　div.remove() #自己删除自己