• 笔记day07


    上周内容回顾

    • 软件开发目录规范

      1.面条版代码
      2.函数版代码
      3.模块版代码
      软件开发目录规范
       面向对象版代码
    • socket模块

      能够让代码程序之间实现网络通信(OSI七层、TCP与UDP)
    • 前端三剑客之HTML

      超文本标记语言 是构建网页的骨架
      html head body h p div span a img table ul form
    • 前端三剑客之CSS

      层叠样式表 是html的样式资源
      选择器、边框、盒子模型、浮动、定位、背景
    • 前端三剑客之JavaScript

      也是一门编程语言 简称JS
      '''当你真的学会了一门编程语言之后 再去学习其他的都会容易很多'''
      基础语言、BOM操作、DOM操作(事件绑定)

    本周内容概要

    • 前端类库之jQuery框架

    • 前端页面框架Bootstrap

    • python后端框架之django(重点)

    • django框架详细讲解(重点)

    本周内容详细

    前端类库之jQuery框架

    jQuery内部封装了JS代码 能够让我们编写更少的代码实现更多的功能 并且兼容诸多浏览器
    '''以前做前端比较头疼的一件事就是浏览器兼容性问题 甚至有时候同一个功能需要编写不同的代码针对不同的浏览器>>>:IE浏览器'''

    使用jQuery之前 必须先导入(script标签引入jQuery的js文件)
    1.官网下载文件
    2.网络CDN(bootcdn)
    资源路径后缀如果有min一般情况下都表示该资源为压缩版本
       ps:为了偷懒 也可以使用pycharm自动添加模板的功能

    使用jQuery可以用特殊符号$
    jQuery() 等价于  $()
     
    jQuery对比JS代码复杂度
    编写代码让页面上的第一个标签内文本颜色变为红色 第二个变为绿色
     JS代码实现
    let h1EleList = document.getElementsByTagName('h1');
    h1EleList[0].style.color = 'red'
       h1EleList[1].style.color = 'green'
    jQuery代码实现
     $('h1').first().css('color','pink').next().css('color','orange')
     

    1.jQuery选择器(与CSS差不多)
    $('#d1')  id选择器 关键符号是警号
     $('.c1')  class选择器 关键符号是点好
     $('tag')  标签选择器 关键符号就是标签名
     $('div.c1')  查找class中含有c1的div标签
     $('#d1, .c1, span')  查找id是d1的或者class含有c1的或者span标签
     $('div p')  查找div内部所有的p标签(后代)
     $('div > p')  查找div内部第一层级的p(儿子)
     $('[name]')  查找含有name属性的标签
     $('[name="jason"]')  查找含有name属性并且值是jason的标签
     $('div[name="jason"]')  查找含有name属性并且值是jason的div标签
     表单筛选器(专门用于快速查找form表单内的一些标签)
     $(':text')  查找form表单内type=text的标签  === $('[type="text"]')
     筛选器方法
     .next()  同级别下一个标签
    .prev()  同级别上一个标签
     .parent()父标签
    ps:链式操作(调用了一个方法之后还可以继续调用)
     
    2.jQuery操作标签 JS操作标签
    $(选择器).addClass() 标签对象.classList.add()
     $(选择器).removeClass()       标签对象.classList.remove()
     $(选择器).hasClass()          标签对象.classList.contains()
     $(选择器).toggleClass()       标签对象.classList.toggle()
     $(选择器).css('color','red')  标签对象.style.属性名 = 属性值
     text() innerText
    html() innerHTML
     val() value

    3.jQuery绑定事件 JS绑定事件
    $(选择器).click(function(){ 标签对象.onclick = function(){
    }) }
                 
     $(选择器).on('click',function(){
       
    })
       
    4.取消后续事件
    我们在给标签绑定事件的时候 如果标签本身就含有事件功能 那么该如何执行
    eg:
      form表单提交数据的按钮 点击就会朝后端发送数据
         a标签点击就会自动跳转到href属性后填写的网址
    '''默认情况下已经含有功能的标签绑定了其他事件之后会先执行事件功能然后再执行自身自带的功能'''
         在事件函数内部最后添加return false即可阻止标签后续事件的执行
    <a href="https://www.sogo.com/" id="d1">点我跳转</a>
       <script>
           $('#d1').click(function () {
               alert('嘿嘿嘿')
               return false
          })
       </script>
             
    5.动画效果

    前端页面框架Bootstrap

    很多非常好看的页面样式其实都不需要我们自己编写 直接拷贝使用即可>>>:CV大法

    https://www.bootcss.com/  建议使用3版本 较为成熟稳定
    响应式布局:根据页面浏览器窗口的大小自动调整页面样式从而达到最佳的查看效果
     
    1.如何使用Bootstrap
    需要在页面上提前导入相应的文件资源
     1.直接下载文件资源
     2.导入网络CDN资源
     ps:如果你想让pycharm自动提示框架对应的关键字 最好是先下载文件资源导入

    2.文件资源准备
    css、js、jQuery
     通过查看框架源码发现js部分需要使用jQuery 所以我们要想确保框架资源的完整使用需要先导入jQuery然后再导入js

    3.基本介绍
    CV拷贝即可使用

    页面框架核心知识

    """使用前端页面框架一般情况下都只需要使用者操作标签的类属性即可"""
    1.布局容器
    <div class="container"></div> 左右两边有留白
     <div class="container-fluid"></div> 左右两边没有留白
    2.栅格系统
    区域划分及响应式布局
     <div class="row"> 一个row就是一行
           <div class="col-md-6 c1"></div>  一行只有12份
           <div class="col-md-6 c1"></div>   一行只有12份
       </div>
       
    超小屏幕 小屏幕  中等屏幕    大屏幕  
     .col-xs- .col-sm- .col-md- .col-lg-

    页面框架样式

    1.表格样式
    class="table table-hover table-striped table-bordered"
    2.表单样式
    class="form-control"
    3.按钮样式
    class='btn btn-颜色 btn-尺寸'
    4.图标样式
    class='图标代码'
    fontawesome字体图标库
    5.诸多组件
    借助于侧边栏提示 快速查找并拷贝即可
    6.js动态插件
    模态框、轮播图
    sweetalert动态弹框

    HTTP协议

    超文本传输协议 规定了浏览器与服务端之间各项标准
    1.四大特性
    1.基于请求响应
    2.基于TCP、IP作用于应用层之上的协议
    3.无状态
    4.无连接

    2.数据格式
    请求格式(客户端给服务端发送的数据格式)
    1.请求首行(请求方法、协议版本)
    2.请求头(一大堆K:V键值对)
    3.换行符
    4.请求体(携带数据 不是所有的请求都有请求体)

    响应格式(服务端朝客户端发送的数据格式)
    1.响应首行(响应状态码、协议版本)
    2.响应头(一大堆K:V键值对)
    3.换行符
    4.响应体(即将给客户端查找的数据内容)

    3.响应状态码
    用数字来表达指定的情况
    1XX:服务端已经接受到了请求数据正在处理 客户端可以等待或者继续提交数据
    2XX:200 OK 服务端已经返回了一些数据
    3XX:重定向(原本想要访问A页面但是莫名其妙的跳转到了B页面)
    4XX:403请求不合法 404请求资源不存在
    5XX:服务器内部错误
    在日常工作中HTTP协议提供的状态码远远不够 程序员还需要自定义状态码
    一般情况下自定义状态码是从10000开始
    参考网站:聚合数据

    手写web框架

    '''听懂流程思路即可 代码无需掌握'''
    1.纯手撸web框架
    web框架可以简单的理解为是一个基于网络通信的server(服务端)
    我们编写的服务端无法直接与浏览器做数据交互 因为我们编写的数据不符合规范
    浏览器肯定是遵循请求格式的 问题就出在我们编写的服务端发送响应的时候
    1.先让浏览器可以和我们的服务端无障碍的数据交互
    2.如何根据用户输入的路由(网址后缀)不同返回不同的响应数据
    请求首行中有用户想要访问的路由(网址后缀) 针对fav...直接忽略即可
    '''
    1.服务端代码需要反复编写
    2.针对HTTP格式数据的处理过于简单 兼容性不强
    3.路由匹配非常多的情况下大量的if肯定不合适
    '''

    2.基于wsgiref模块
    from wsgiref.simple_server import make_server
    def run(request, response):
    """
    :param request: 请求相关的数据(自动处理成字典格式)
    :param response: 响应相关的数据
    :return: 返回给客户端的数据
    """
    response('200 OK', []) # 固定写法 此处不用研究
    return [b'hello wsgiref']
    if __name__ == '__main__':
    server = make_server('127.0.0.1', 8080, run) # 监控本机的8080端口 一旦有请求自动调用run
    server.serve_forever()

    3.路由匹配优化
    1.将具体业务逻辑封装成函数
    2.构造路由与函数的对应关系
    3.根据功能的不同拆分成不同的模块
    views.py 专门存储业务逻辑代码
    urls.py 专门存储路由与函数匹配关系
    4.拆分完成后 如果想再添加一个功能 那么将非常的简单
    只需要在上述两个py文件中填写各自的代码即可
    5.针对文件类型的不同还可以优化
    templates文件夹 专门存储HTML文件
    static文件夹 专门存储静态文件(css js 框架)

    4.动态网页(数据来源于后端)
    需求1:后端获取当前时间 想办法渲染到html页面上并让浏览器展示出来
    利用字符串替换
    需求2:后端有数据类型 想办法渲染到html页面上并且在页面上还可以使用类似于后端的操作方法来处理这些数据类型
    模板语法(新知识)
    能够在html页面上使用类似于后端的代码来操作数据

    5.jinja2模块
    pip install jinja2
    <p>{{ user_data }}</p>
    <p>{{ user_data.get('username') }}</p>
    <p>{{ user_data.pwd }}</p>
    <p>{{ user_data['hobby'] }}</p>

    6.课堂练习
    能否查询MySQL里面的表数据 然后展示到前端页面(前端+后端+MySQL)
    {% for user_dict in xxx %}
    <tr>
    <td>{{user_dict.id}}</td>
    <td>{{user_dict.name}}</td>
    <td>{{user_dict.age}}</td>
    </tr>
    {% endfor %}

    python主流web框架

    1.django框架
    大而全 自身携带的功能非常的多 类似于航空母舰

    2.flask框架
    小而精 自身携带的功能非常的少 类似于游骑兵
    该框架的诸多都需要依赖于第三方模块 如果将该框架的第三方模块全部整合到一起甚至可以超过django

    3.tornado框架
    异步非阻塞 速度非常快甚至可以充当游戏服务器
    """
    web框架底层原理其实大差不差 我们在学习的时候应该先重点学习一个
    等熟练掌握之后再去学习其他的 千万不要同时学习多个 很容易混乱 走火入魔
    """

    django简介

    """
    同步:任务提交之后原地等待任务的返回结果 期间不做任何事
    异步:任务提交之后不原地等待任务的结果 期间可以做其他事 一旦有结果会自动提醒
    """
    1.版本问题
    django1.X 同步框架
    django1.11
    django2.X 同步框架
    django2.2
    django3.X 支持异步
    django3.2
    django4.X 支持异步
    django4.2
    ps:目前使用比较广泛的是django2.2版本(其实版本差距不大 选择任何一个都可)

    2.注意事项
    1.计算机名称不要出现中文
    2.项目中所有的文件名称不要出现中文
    3.多个项目文件尽量不要嵌套,做到一项一夹
    4.python解释器版本不同可能会出现启动报错

    3.框架基本使用
    pip install django==2.2.11
    pip install django==1.11.11
    命令行
    1.创建django项目
    django-admin startproject mysite
    2.启动django项目
    cd mysite
    python3 manage.py runserver IP:PORT
    3.创建应用
    '''django项目类似于一个空壳子 里面真正干活的是应用:每个应用都有具体的业务逻辑和业务范围 我们在教学阶段没有具体名字的情况下就采用app01 02 03'''
    python3 manage.py startapp app01
    pycharm快捷方式
    支持自动创建一个应用并且自动创建templates文件夹

    主要目录结构

    """
    1.创建的应用必须要去配置文件中注册
    INSTALLED_APPS = [
    'app01.apps.App01Config', 完整写法
    'app01' 简易写法
    ]
    2.有时候配置文件中的参数会出现错乱(pycharm自动创建)
    'DIRS': [os.path.join(BASE_DIR, 'templates')]
    如果是命令行创建 那么上述列表为空 需要自己填写
    """

    项目目录
    项目同名目录
    settings.py 配置文件
    urls.py 路由层(对应关系)
    manage.py django入口文件
    db.sqlite3 django自带的小型数据库
    应用目录
    migrations目录 orm迁移记录
    admin.py 后台管理
    apps.py 注册
    models.py 模型层(与数据库打交道 非常重要)
    views.py 视图层(专门编写业务逻辑)
    templates目录 模板层(专门存储html文件)

    django小白必会三板斧

    """
    使用方式与我们自己编写的框架几乎一致
    在urls.py中添加对应关系
    在views.py中编写业务逻辑
    """
    HttpResponse 主要用于返回字符串类型的数据

    render 主要用于返回html页面

    redirect 主要用于页面重定向

    django请求生命周期流程图

    参考群内截图

    静态文件资源

    页面上需要使用的不经常修改变动的文件资源 都可以称之为是静态文件
    css文件、js文件、图片文件、第三方框架文件
    针对静态文件资源的存储 一般建议放在static目录下
    如果该目录下的资源也非常的混乱 那么还可以继续划分
    static目录
    css目录
    js目录
    img目录
    others目录

    针对静态文件资源的访问需要单独配置才可以 否则无法使用
    # 静态文件资源访问路径配置
    STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'static')
    ]

    # 静态文件资源访问动态解析
    STATIC_URL = '/static/'
    {% load static %}
    <link rel="stylesheet" href="{% static 'bootstrap-3.3.7-dist/css/bootstrap.min.css' %}">

    网络请求方式

    1.GET请求
    朝服务端索要数据 可以携带额外的参数(大小2KB左右 并且数据敏感度不高)
    url?name=jason&age=18
    2.POST请求
    朝服务端提交数据 可以携带额外的数据(大小没有限制 并且可以携带敏感数据)
    请求体

    form表单重要参数

    action参数
    控制数据的提交地址
    1.不写 默认朝当前页面所在的地址提交
    2.写全路径 https://www.baidu.com/
    3.写后缀 /home/

    method参数
    控制数据的提交方式
    默认是get
    可以切换为post

    '''在提交post请求的时候 django会校验csrf 前期可以直接注释该功能'''
    MIDDLEWARE = [
    # 'django.middleware.csrf.CsrfViewMiddleware',
    ]

    request对象方法

    request.method  				  获取当前请求方式   结果是纯大写的字符串
    request.POST 获取post请求提交的普通数据
    request.POST.get() 获取列表最后一个数据
    request.POST.getlist() 获取整个列表数据
    request.GET 获取url问号后面携带的数据
    request.GET.get() 获取列表最后一个数据
    request.GET.getlist() 获取整个列表数据

    pycharm链接数据库(了解)

    类似于navicat的功能 首次链接数据库需要下载对应的驱动 否则无法链接

    django链接MySQL

    django默认使用的是sqlite3 但是该数据库很小 功能也不健全 

    1.配置文件
    DATABASES = {
    'default': {
    'ENGINE': 'django.db.backends.mysql',
    'NAME': 'zm_day07',
    'HOST':'127.0.0.1',
    'PORT':3306,
    'USER':'root',
    'PASSWORD':'jason123',
    'CHARSET':'utf8'
    }
    }
    2.模块准备
    mysqlclient模块

    作业

    1.使用django展示MySQL表数据到前端页面
    尽量将今日所学内容全部使用进去
    2.提前研究什么是ORM(重要)
  • 相关阅读:
    Android打包报错 Export aborted because fatal lint errors were found. These are listed in the Lint View
    jqMobi 更小更快的移动框架
    php报错:Call to undefined function get_magic_quotes_gpc()
    php:字符窜截取substr和mb_substr
    Warning Creating default object from empty value in xxx.php
    linux下安装xampp
    程序员找不女朋友的原因
    键盘各种按键对应的ASII码
    Read All About It-Attraction舞团
    What are words-Chris Medina
  • 原文地址:https://www.cnblogs.com/A121/p/16725470.html
Copyright © 2020-2023  润新知