前端入门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(rtemplates/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(rtemplates/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基本)

上一篇:JS初探


下一篇:PHP快速使用RabbitMQ实现项目中部分业务的解耦