ajax前后台的交互 Bootstrap 栅格系统-布局

逃离我推掉我的手 2021-12-03 07:55 271阅读 0赞

昨日回顾
    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:样式值
    　　......
    　　样式名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()  ovj.prevAll()
    　　obj.siblings()
    　　注:关系不强烈,用选择器获取

原生socket搭建后台

# 用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('要返回给前台的页面.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:  完成页面中 的 局部数据请求,不会改变页面

// 先有jq环境
    #pip3  install flask
    #pip3  install -i https://pypi.douban.com/simple flask
    
    #pip3  install -i https://pypi.douban.com/simple flask-cors
    
    
    // $.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>
        
        <link rel="stylesheet" href="bs-3.3.7/css/bootstrap.css">
        
        <style></style>
    </head>
    <body>
        
    </body>
    
    <script src="js/jquery-3.4.1.js"></script>
    
    <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 {
                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>
    
    <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>

删除系统 -布局

http://v3.bootcss.com/css/\#grid

1.一共有四种属性

2.默认将父级等分12 等分,子级可以选取占剁手份

col-xs -等分       col.sm      clo-md    col.1g

3. 默认有两种容器

转载于:https://www.cnblogs.com/wyf20190411-/p/11151680.html