前端入门10——简易web框架(附带Django基本)

Posted 凌醉枫

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端入门10——简易web框架(附带Django基本)相关的知识，希望对你有一定的参考价值。

昨日内容回顾

  • 阻止后续事件发生

    # 第一种(常用)
    return false
    # 第二种
    e.preventDefault()
    # 记form表单触发提交动作的按钮

 

  • 事件冒泡

    # 第一种(常用)
    return false
    # 第二种
    e.stopPropagation()

 

  • 事件委托

    # 针对标签无论是事先写好的还是后续动态创建的
    $(‘#d1‘).on(‘click‘,‘button‘,function(){})

 

  • 页面加载

    # 第一种
    $(document).ready(function(){})
    # 第二种
    $(function(){})
    # 第三种
    """body内部最下方"""

 

  • 动画效果(了解)

    """
    show 
    hide
    slideUp
    slideDown
    fadeIn
    fadeOut
    fadeTo
    ...
    """

 

  • 需要掌握的

    # each()  
    $(‘div‘).each(function(index,obj){return [index,obj]})
    $.each($(‘div‘,function(index,obj){return [index,obj]})
           
    # data()
    $(‘div‘).data(‘key‘)  # 获取
    $(‘div‘).data(‘key‘,‘value‘)  # 设置
    $(‘div‘).removeData(‘key‘)

 

  • 前端框架及插件

    # 使用bootstrap
    """
    使用boostrap调节样式其实就是写类属性
  • 1.布局容器
        container
        container-fluid
    2.栅格系统
        row     一行均分12份
        col-md-N        占几份
            响应式布局
        col-md-offset-2  移动
        pull-right/left  浮动
    3.表格
        table
        table-hover
        table-bordered
        table-striped
    4.表单
        form-control
            checkbox和radio不要加
    5.按钮
        btn btn-primary btn-sm/btn-xs btn-block
                        success
                        info
                        warning
                        danger
                        default
                        ...
    6.导航条
    7.分页
    8.面板
    9.模态框
    """
    # 就是拷贝+修改
  • ?
    """
    第三组件扩展
        图标
            fontawesome
        弹出框
            sweetalert
    """

 

 

 

 

 

 

今日内容概要(重要)

  • 我们自己写一个简易版本的web框架(代码无需掌握，重点在于理解思路)

  • django框架

 

今日内容详细

软件开发架构

cs架构
bs架构
# 本质bs也是cs


纯手撸web框架

HTTP协议
"""
网络协议
HTTP协议              数据传输是明文
HTTPS协议             数据传输是密文
websocket协议     　　 数据传输是密文
?

?
四大特性

    1.基于请求响应
    2.基于TCP、IP作用于应用层之上的协议
    3.无状态
    4.短/无链接


?
数据格式
    请求首行
    请求头
    
    请求体
?


响应状态码
    1XX
    2XX         200
    3XX         
    4XX         403 404
    5XX         500
"""
# 如何做到后缀的不同返回不同的内容
    # 拿到用户输入的后缀 做判断 
?
  
# 不足之处
  1.代码重复(服务端代码所有人都要重复写)
  2.手动处理http格式的数据 并且只能拿到url后缀 其他数据获取繁琐(数据格式一样处理的代码其实也大致一样 重复写)
  3.并发的问题


借助于wsgiref模块

"""
urls.py                     路由与视图函数对应关系
views.py                    视图函数(后端业务逻辑)
templates文件夹        专门用来存储html文件
"""
# 按照功能的不同拆分之后 后续添加功能只需要在urls.py书写对应关系然后取views.py书写业务逻辑即可


动静态网页

"""
静态网页
    页面上的数据是直接写死的 万年不变
动态网页
    数据是实时获取的
    eg:
        1.后端获取当前时间展示到html页面上
        2.数据是从数据库中获取的展示到html页面上
"""
?
动态网页制作
import datetime
def get_time(env):
    current_time = datetime.datetime.now().strftime(‘%Y-%m-%d %X‘)
    # 如何将后端获取到的数据"传递"给html文件？
    with open(r‘templates/03 mytime.html‘,‘r‘,encoding=‘utf-8‘) as f:
        data = f.read()
        # data就是一堆字符串
    data = data.replace(‘dwadasdsadsadasdas‘,current_time)   # 在后端将html页面处理好之后再返回给前端
    return data
?
# 将一个字典传递给html文件 并且可以在文件上方便快捷的操作字典数据
from jinja2 import Template
def get_dict(env):
    user_dic = {‘username‘:‘jason‘,‘age‘:18,‘hobby‘:‘read‘}
    with open(r‘templates/04 get_dict.html‘,‘r‘,encoding=‘utf-8‘) as f:
        data = f.read()
    tmp = Template(data)
    res = tmp.render(user=user_dic)
    # 给get_dict.html传递了一个值 页面上通过变量名user就能够拿到user_dict
    return res
?
# 后端获取数据库中数据展示到前端页面
?


模版语法之Jinja2模块

pip3 install jinja2
"""模版语法是在后端起作用的"""
?
# 模版语法(非常贴近python语法)
{{ user }}
{{ user.get(‘username‘)}}
{{ user.age }}
{{ user[‘hobby‘] }}
?
?
{% for user_dict in user_list %}
                        <tr>
                            <td>{{ user_dict.id}}</td>
                            <td>{{ user_dict.username}}</td>
                            <td>{{ user_dict.password}}</td>
                            <td>{{ user_dict.hobby}}</td>
                        </tr>
{% endfor%}

 

 

自定义简易版本web框架请求流程图

"""
wsgiref模块
    1.请求来的时候解析http格式的数据 封装成大字典
    2.响应走的时候给数据打包成符合http格式 再返回给浏览器
?
"""

 

 

 

python三大主流web框架

"""
django
    特点:大而全 自带的功能特别特别特别的多 类似于航空母舰
    不足之处:
        有时候过于笨重
?

flask

    特点:
　　　  小而精  自带的功能特别特别特别的少 类似于游骑兵
    　　 第三方的模块特别特别特别的多，如果将flask第三方的模块加起来完全可以盖过django
   　　  并且也越来越像django

    不足之处:
            比较依赖于第三方的开发者
 
       
tornado

    特点:异步非阻塞 支持高并发
            牛逼到甚至可以开发游戏服务器
    不足之处:
            暂时你不会
"""



A:socket部分
B:路由与视图函数对应关系(路由匹配)
C:模版语法
?
django
  A用的是别人的     wsgiref模块
  B用的是自己的
  C用的是自己的(没有jinja2好用 但是也很方便)
?
flask
    A用的是别人的     werkzeug(内部还是wsgiref模块)
  B自己写的
  C用的别人的(jinja2)
?
tornado
    A，B，C都是自己写的


注意事项

# 如何让你的计算机能够正常的启动django项目
  1.计算机的名称不能有中文
  2.一个pycharm窗口只开一个项目
  3.项目里面所有的文件也尽量不要出现中文
  4.python解释器尽量使用3.4~3.6之间的版本
    (如果你的项目报错 你点击最后一个报错信息
    去源码中把逗号删掉)
    
# django版本问题
  1.X 2.X 3.X(直接忽略)
  1.X和2.X本身差距也不大 我们讲解主要以1.X为例 会讲解2.X区别
  公司之前用的1.8 满满过渡到了1.11版本 有一些项目用的2.0
 
# django安装
  pip3 install django==1.11.11
  如果已经安装了其他版本 无需自己卸载
  直接重新装 会自动卸载安装新的
  
  如果报错 看看是不是timeout 如果是 那么只是网速波动
  重新安装即可
  
  验证是否安装成功的方式1
  终端输入django-admin看看有没有反应



django基本操作

# 命令行操作

    1.创建django项目
    """
    你可以先切换到对应的D盘 然后再创建
    """
    django-admin startproject mysite
    
        mysite文件夹
        manage.py
        mysite文件夹
            __init__.py
            settings.py
          urls.py
          wsgi.py

    2.启动django项目
    """
        一定要先切换到项目目录下    
        cd /mysite
    """
  python3 manage.py runserver
  # http://127.0.0.1:8000/
 
3.创建应用
"""
Next, start your first app by running python manage.py startapp [app_label].
"""
    python manage.py startapp app01
    应用名应该做到见名知意
      user
      order
      web
      ...
      但是我们教学统一就用app01/02/03/04
      
    有很多文件
  



# pycharm操作
    
1 new project 选择左侧第二个django即可
  
2 启动
        1.还是用命令行启动
        2.点击绿色小箭头即可
?
3 创建应用
        1.pycharm提供的终端直接输入完整命令
        2.pycharm 
            tools 
                run manage.py task提示(前期不要用 给我背完整命令)

4 修改端口号以及创建server    
        edit confi....


  

应用

"""
django是一款专门用来开发app的web框架
?
django框架就类似于是一所大学(空壳子)
app就类似于大学里面各个学院(具体功能的app)
    比如开发淘宝
        订单相关
        用户相关
        投诉相关
        创建不同的app对应不同的功能
    
    选课系统
        学生功能
        老师功能
?
一个app就是一个独立的功能模块
"""
***********************创建的应用一定要去配置文件中注册**********************
INSTALLED_APPS = [
    ‘django.contrib.admin‘,
    ‘django.contrib.auth‘,
    ‘django.contrib.contenttypes‘,
    ‘django.contrib.sessions‘,
    ‘django.contrib.messages‘,
    ‘django.contrib.staticfiles‘,
    ‘app01.apps.App01Config‘,  # 全写
    ‘app01‘,             # 简写
]
# 创建出来的的应用第一步先去配置文件中注册 其他的先不要给我干
ps:你在用pycharm创建项目的时候 pycharm可以帮你创建一个app并且自动注册
***********************************************************************

 

 

主要文件介绍

-mysite项目文件夹
    --mysite文件夹
    ---settings.py      　　配置文件
    ---urls.py          　　路由与视图函数对应关系(路由层)
    ---wsgi.py          　　wsgiref模块(不考虑)
    ---manage.py           django的入口文件
    ---db.sqlite3          django自带的sqlite3数据库(小型数据库 功能不是很多还有bug)
    ---app01文件夹
    ---admin.py         　　django后台管理
    ---apps.py          　　注册使用
    ---migrations文件夹     数据库迁移记录
    ---models.py        　　数据库相关的 模型类(orm)
    ---tests.py         　　测试文件
    ---views.py        　　 视图函数(视图层)



命令行与pycharm创建的区别

命令行创建不会自动有templatew文件夹 需要你自己手动创建而pycharm会自动帮你创建并且还会自动在配置文件中配置对应的路径

# pycharm创建
TEMPLATES = [
    {
        ‘BACKEND‘: ‘django.template.backends.django.DjangoTemplates‘,
        ‘DIRS‘: [os.path.join(BASE_DIR, ‘templates‘)]
]

# 命令行创建
TEMPLATES = [
    {
        ‘BACKEND‘: ‘django.template.backends.django.DjangoTemplates‘,
        ‘DIRS‘: [],
]
"""
也就意味着你在用命令创建django项目的时候不单单需要创建templates文件夹还需要去配置文件中配置路径
‘DIRS‘: [os.path.join(BASE_DIR, ‘templates‘)]
"""

 

 

django小白必会三板斧

"""
HttpResponse
    返回字符串类型的数据
?
render
    返回html文件的
?
redirect
    重定向
      return redirect(‘https://www.mzitu.com/‘)
    return redirect(‘/home/‘)
"""

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

以上是关于前端入门10——简易web框架(附带Django基本)的主要内容，如果未能解决你的问题，请参考以下文章

Django---进阶0

Django---进阶0

Django——纯手撸简易web框架Django初识

django是前端还是后端

Django框架简介

Python入门自学进阶-Web框架——11Django实践小项目