前端入门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/')
"""
