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.其他
width: obj.width()
height: obj.height()
padding左右+ width：obj.innerWidth()
padding上下+ height：obj.innerHeight()

7.创建标签添加到页面
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\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('
后台页面
'.encode('utf-8'))

    if router == '/index':
        with open('1.请求.html', 'rb') as rf:
            client.send(rf.read())
    else:
        client.send(b'
404')

    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 '
Home Page'


# 图标处理
@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***********************

"en">

    "UTF-8">
    


ajax请求
"">
    "text" name="username" id="username">
    "text" name="password" id="password">
    "btn" type="button">登录

 　　##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/[email protected]/dist/css/bootstrap.min.css
# https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js


"en">

    "UTF-8">
    
　　 
　　 "stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">
　　
　　











#3、案例

"en">

    "UTF-8">
    
    "stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">
    



class="btn btn-danger btn-block">按钮



class="o-i glyphicon glyphicon-music">



class="btn-group">
    "button" class="o-btn btn btn-lg btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"
            aria-expanded="false">
        菜单 class="caret">
    
    
class="dropdown-menu">
        
"#">菜单一
        
        
"separator" class="divider">
        
"#">Another action
        
"#">Something else here
        
"separator" class="divider">
        
"#">Separated link
    

 　　##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>Titletitle>
    　　 
    　　
    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">
    　　
    　　
    <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>

<div class="owen">
    <nav class="navbar navbar-default">
    <div class="container-fluid">
        
        <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 navigationspan>
                <span class="icon-bar">span>
                <span class="icon-bar">span>
                <span class="icon-bar">span>
            button>
            <a class="navbar-brand" href="#">Branda>
        div>

        
        <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="#">Linka>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="#">Actiona>li>
                        <li><a href="#">Another actiona>li>
                        <li><a href="#">Something else herea>li>
                        <li role="separator" class="divider">li>
                        <li><a href="#">Separated linka>li>
                        <li role="separator" class="divider">li>
                        <li><a href="#">One more separated linka>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">Submitbutton>
            form>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">Linka>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="#">Actiona>li>
                        <li><a href="#">Another actiona>li>
                        <li><a href="#">Something else herea>li>
                        <li role="separator" class="divider">li>
                        <li><a href="#">Separated linka>li>
                    ul>
                li>
            ul>
        div>
    div>
nav>
div>
<div class="box">

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

<script src="js/jquery-3.4.1.js">script>

<script src="bootstrap-3.3.7-dist/js/bootstrap.js">script>
html>

 　　##上述知识点综合案例

 

转载于:https://www.cnblogs.com/liangzhenghong/p/11151743.html