周总结(11)
周总结(11)
JavaScirpt编程语言
引入js的多种方式
-
head内script标签内编写
-
head内script标签src属性引入外部js资源
-
body内最底部通过script标签src属性引入外部js资源 (最常用)
注意事项： 页面的下载是从上往下的，所以操作js代码一定要等到页面加载完毕在执行才可以正常运行，所以script标签应当放于网页的最底部。
变量与常量
js中首次定义一个变量名需要关键字声明
1.var
2.let let是ECM6新语法 可以在局部定义变量不影响全局
js声明常量也需要关键字
const
基本数据类型
1. 数值类型(Number)
在JS中整型与浮点型都是Number，但是在转换的时候可以控制保存数据是否含有小数点
parseInt 保留整数 parseFloat 保留整数含有小数
2. 字符类型(String)
在JS中定义字符 单引号 双引号 ` 顿号都可以
顿号是可以写多行，支持格式化输出。称为模板字符串
3.布尔类型(boolean)
JS布尔值 是纯小写的。 python是首字母大写
4. null与undefined
null表示值是空，一般在需要指定或清空一个变量时才会使用，如 name=null;(曾经拥有 但是没了)
undefined 表示根本就没定义(从来没有)
5. 对象(object)
与python中一致 一切皆对象。
对象之数组(Array)
python中的列表
对象之自定义对象(object)
python中的字典
Js函数特性
1.JS中函数的形参与实参个数可以不对应
传少了就是undefined 传多了不用
2.函数体代码中有一个关键字arguments用来接收所有的实参
BOM操作
全称: Browser OBject Model 指浏览器对象模型
弹框系列
# 警告框
alert('警告信息')
"弹框"
# 确认框
confirm('确认信息')
"比较警告框多了一个确定与取消，并拥有返回值，确定=true 取消=false"
# 提示框
prompt('提升信息','可以+默认值')
"填写内容,并有确定与取消 取消=null"
计时相关(重点)
用来编写定时任务。
一次性定时任务
setTimeout（showMsg,1000(毫秒)） # 开启一个定时任务
# 存储定时任务
let t = setTimeout（showMsg,1000(毫秒)）
# 取消定时任务
cLearTimeout(t)
循环定时任务
setInterval(showMsg,1000) # 每隔1000毫秒执行一次
# 保存定时任务
let t = setInterval(showMsg,1000)
# 清除定时任务
cLearInterval(t)
DOM操作
指文档对象模型，通过它可以访问HTML所有元素。
想通过JS代码来操作标签，先要学习如何查找标签，之后才可以给标签绑定一些JS代码(DOM操作)
DOM操作关键字： documen
获取值操作（重点）
# 在JS中找到标签对象后可以通过.value 找到用户输入或选择的值
let inputEle = document.getElementsByTagName('input')[0]
inputEle.value
# 基于文件来说 .value 只能拿到 字符串内容是当前计算机文件路径(还是假的路径)
.files # 获取文件
.files[0] # 一个文件情况可以获取 文件对象
针对多个文件可以做for循环拿出来
事件(重点)
给标签添加一些自定义的功能.
onclick 当用户点击某个对象时调用的事件句柄。
onfocus 元素获得焦点。
onblur 元素失去焦点。
onchange 域的内容被改变。
Query类库
简介
一个轻量级的，兼容多浏览器的javaScript库。它的宗旨就是写的更少做的更多。
使用方法
jQuery导入之后需要使用关键字才可以使用默认的关键字就是jQuery
jQuery 简化了关键字 使用 $
标签对象与jQuery对象
在我们日常使用中可能在标签对象与jQuery对象 交互使用，需要提前弄清楚手上的是什么对象
标签对象不能通过.css的方式修改样式，也不能.first 或者.next
但是 也可以通过两者转换实现
"标签对象转jQuery对象"
$(标签对象)
"jQuery对象转标签对象"
jQuery对象[0]
jQuery 操作标签
操作标签
1.操作样式
.addClass(); # 添加指定的css类名
DOM操作 classlist.add()
.removeClass(); # 移除指定的CSS类名
DOM操作 removeClass()
.hasClass() # 判断样式存不存在
DOM操作 hasClass()
.toggleClass() # 有就删没有就添加
DOM操作 toggleClass()
2. 位置操作
$(window).scrollTop() # 获取到当前处在浏览器的位置
3.文本操作
$('span').text('aaa') # 添加文本
$('span').html() # 添加文本并识别html语法
$('input').val() # 拿值
$('input')[1].files # 拿文件
4.创建标签
$('<a>')
"如果想用变量名保存一个jQuery对象话要在变量名前面+ $"
5.属性操作
attr() # 添加属性
removeAttr() # 删除属性
"attr针对动态变化的属性获取会失真"
prop('checked') prop('selected') # 判断动态属性有没有
6.文档处理
# 内部添加
$(A).append(B) # 把B追加到A
$(A).prepend(B) # 把B前置到A
#外部添加
$(A).after(B) # 把B放到A后面
$(A).before(B) # 把B放到A前面
# 清空内容
$('body').empty() # 直接清空 body里面的所有东西
jQuery事件
jQuery事件绑定
方式1:
jQuery对象.事件名(function(){})
方式2:
jQuery对象.on('事件名称',function(){})
ps:默认就用方式1 不行了再用方式2
input框实时监测事件
<input type="text">
$('input').on('input',function (){
console.log($(this).val())
})
"输入每一个字符时都会打印，学会后端就可以拿到值去校验"
事件相关补充
1. 取消后续事件
- 在我们遇到标签内含有事件，我们又给他加了一个事件，执行的顺序是 先做我们加的，后做他自己的事件。也可以取消
事件函数的最后加上 return false即可
2. 冒泡事件
- 如果一个div内多个后代标签都有事件(嵌套关系)，那么就会出现冒泡事件。 执行完当前子标签的事件后自动执行父标签的事件。
子事件函数最后加上 return false即可
3.JS代码如果想写在head里
- 就要等待页面加载完毕再执行代码
写在head内:
$(function(){ JS代码 } ) # 缩略写法
$(document).ready(function(){}) # 完整写法
4. 事件委托
- 正常情况下，我们给按钮绑定了一个点击事件，在终端里手动添加一个按钮那么此按钮无法绑定事件。
事件委托可以帮助我们 给动态创建的标签也可以使用绑定的事件。
$('body').on('click','button',function(){
alert('啦啦啦')
})
# 将body内所有的单击事件委托给button标签执行
$('父标签').on('事件名','事件的标识(id值，class值)',function(){})
Bootstrap页面框架
CDN引入
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" >
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
官网下载地址
https://v3.bootcss.com/
页面核心部分
使用bootstrap其实只需要操作标签的样式类即可
布局容器
class = "container" 有留白
class = "container-fluid" 没有留白
栅格系统
class = "row" 一行均分12份
class = "col-md-8" 划分一行的12份
屏幕参数
col-md-6 col-xs-2 col-sm-3 col-lg-3
栅格偏移
col-md-offset-3
表格
1.表格样式
<table class="table table-hover table-striped">
table 样式
table-hover 悬浮
table-striped 渐变
table-bordered 边框
2.颜色
<tr class="success">
success
danger
warning
info
active
表单
1.表单标签
class = "form-control"
2.按钮组
class = "btn btn-primary btn-block"
<input type="submit" class="btn-success btn-block" >
<input type="button" class="btn-danger btn-block" value="退出">
<a href="" class="btn btn-danger">1</a>
<a href="" class="btn btn-success">2</a>
<a href="" class="btn btn-info">3</a>
<a href="" class="btn btn-danger">4</a>
<a href="" class="btn btn-danger btn-xs" >6</a>
<a href="" class="btn btn-danger btn-sm">7</a>
<a href="" class="btn btn-danger btn-lg">8</a>
<a href="" class="btn btn-danger btn-block">9</a>
组件
1.图标
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
2.导航条
class="navbar navbar-inverse"
手写web框架
1.web框架的本质
连接前端与数据库的中间介质 就是服务端
socket服务端
2.手写的web框架
编写socket服务端代码
浏览器访问响应无效>>>: 因为数据格式不一样， HTTP协议(规定了浏览器与服务端之间数据交互的格式)
根据网址的路由不同获取不同的页面内容
获取到用户输入的路由>>>: 查看请求数据内 找到规则获取路由
"请求首行 GET /login HTTP/1.1 找到规则 处理请求数据获取网址路由"
问题：
1.sock的代码 重复太多
2. 针对请求数据的处理过于繁琐
3. 路由匹配逻辑过于 低端
基于wsgiref模块
wsgiref是自带的内置模块， 很多web框架底层都使用到的模块。
功能： 1.封装了socket代码 2.处理了请求数据
优点：
1.固定的代码启动服务端
2.查看处理之后的request 发现是 以 大字典的形式的数据
3.研究大字典键值对找到 含有路由的键值对>>> get 方法获取路由
4. 发现 还是要进行if判断 思考解决方法
优化后代码
-
解决 路由获取后的 判断问题
-
思考路由匹配成功后 执行代码可能会很多也可能会很少
2.1 将if分支的代码封装成多个函数 (views.py)2.2 建立函数与路由之间的对应关系 (urls.py)
2.3 获取路由后进行循环匹配 自动执行该路由对应函数
2.4 后续 新增功能只需要添加函数再进行添加对应关系
-
为了使函数体代码中业务逻辑有更多的数据可用
3.1 把request 大字典当做实参 传给函数
"""根据不同的功能拆分成不同的py文件
views.py 存储核心业务逻辑(功能函数)
urls.py 存储网址后缀与函数名对应关系
templates目录 存储html页面文件"""
动静态网页
1.动态网页
页面数据来源于后端
- 如果想要把字典 传给 页面 并可以通过字典的操作方式获取字典内的数据，必须要使用模板语法>>>:jinja2 模块
2.静态网页
页面数据直接在html里写死
jinja2模块
- 将字典数据传输到页面并还可以用后端的操作获取到字典的数据进行展示
前端,后端,数据库
前端浏览器访问/table 后端连接数据库查询userinfo表中所有的数据 传递到get_table页面 设置好标签样式 再发送给浏览器展示
django
简介
# 版本问题
LTS 稳定发行版
django1.X:同步 推荐使用版本 1.11
django2.X:同步 推荐使用版本 2.2
django3.X:支持异步 推荐使用版本 3.2
django4.X:支持异步 推荐使用版本 4.2
版本之间差距并不大，主要是添加了一些新的功能
注意事项
运行django注意事项
1.django项目中所有的文件名目录名不要出现中文
2.计算机名称尽量也不要出现中文
3.一个pycharm尽量就是一个完整的项目(不要嵌套 不要叠加)
4.不同版本的python解释器与不同版本的django可能会出现小问题
5.保证同时间只有一个django在运行（可能会出现你cmd 已经运行了，pycharm里又运行了一个）
django基本使用
下载
cmd内操作：
pip3 install django==2.2.22
下载速度过慢的话可以使用下列代码
pip3.8 install django==2.2.22 -i https://mirrors.aliyun.com/pypi/simple/
验证是否下载成功
django-admin 前提 需要环境变量
cmd常见命令
1.创建django项目
django-admin startproject 项目名(mysite)
2.启动django项目
切换到项目目录
cd 项目名
python38 manage.py runserver ip:port
不输入ip端口默认使用127.0.0.1:8000
3.pycharm创建django项目
在pycharm中创建django项目会自动进行创建templates文件夹，但是配置文件中可能会报错，需要我们在settings 文件中修改
找到settings里的TEMPLATES修改其中的DIRS
[os.path.join(BASE_DIR,'templates')]
4.pycharm中启动项目
点击右上角选择运行旁边的窗口选择带django图标的文件执行，
django app
django本身类似于是一个空壳子 真正的功能是由里面的各个应用决定
django框架相当于是一所大学 应用相当于是大学里面的各个学院
大学其实是个壳子 负责提供环境
学院才是一个个真正具备特定功能的集合
django里面的app类似于某个具体的功能模块
user app 所有用户相关的都写在user app下
goods app 所有商品相关的都写在goods app下
5.命令行创建应用
python38 manage.py startapp 应用名(add01)
"""
创建的app一定要去settings.py中注册
INSTALLED_APPS = [
'app01.apps.App01Config', 全写
'app02' 简写
]
"""
django主要文件介绍
"""
网址后缀 路由
函数 视图函数
类 视图类
重要名词讲解
urls.py 路由层
views.py 视图层
models.py 模型层
templates 模板层
"""
django三板斧
from django.shortcuts import render,HttpResponse,redirect
# 1.HttpResponse 返回字符串类型的数据给页面
def index_func(request):
return HttpResponse('hello big baby')
# 2.render 返回html页面并且支持传值
def get_table(request):
user_dict={'name':'LiAJi','pwd':123}
return render(request,'get_table.html',{'d1':user_dict})
# 3.redirect 重定向 跳转到指定页面
def fun_func(request):
return redirect('http://www.baidu.com/')
静态文件配置
不经常变化的软件，主要针对html文件所使用到的各种资源 eg： css文件、js文件、img文件、第三方框架文件。
django 针对静态文件资源需要创建一个目录统一存放
static目录
该目录下可以存放多种类型目录，还可以新建目录
常用目录 css目录 js目录 img目录
utlis目录/plugins目录/libs目录/others目录/ 或者不创建
资源访问问题
我们在地址栏中靠路由获取到相应的资源是因为程序员提前开设了资源的接口。(路由与功能关系)
静态文件资源访问
默认情况下无法访问，因为我们没有提前开设静态文件的资源访问接口
配置静态文件接口
想要使用static中的静态资源必须在settings里配置文件
# 方法
在settings 最下面一行添加
STATIC_URL = '/static/'
STATICFILES_DIRS=[
os.path.join(BASE_DIR,'static') # 存储静态文件资源的目录名称
# 在html文件内导入静态资源
<link rel="stylesheet" href="{%static 'bootstrap-3.4.1-dist/css/bootstrap.min.css' %} ">
<script src = "{% static 'bootstrap-3.4.1-dist/js/bootstrap.min.js' %}"></script>
<script src = "{% static 'bootstrap-3.4.1-dist/js/jqery.js' %}"></script>
后续如果需要更改路由只需要修改settings里最下面的路由
如果有多个static目录的话
"""
os.path.join(BASE_DIR, 'static')是存储静态文件资源的目录名称。接口前缀正确之后,会拿着后面的路径依次去列表中自上而下的查找,找到即停止。
"""
"""
当我们在访问一个网页时如果之前访问过,那么网页可能会混存下来访问过的内容,当我们再次访问时会访问到之前的网页,当我们进行如下设置,网页每一次都是真正地向后端发送请求而不是使用缓存的网页(中文:停用缓存,英文:disable cache)。
"""
form表单
form表单
action 控制数据提交的地址
1.action="" 数据默认提交给当前页面所在的地址
2.action="https://www.baidu.com/" 完整地址
3.action="/index/" 朝当前服务端的index地址
127.0.0.1:8000/index/ # 本地地址不需要填写自动补全
method 控制数据提交的方法
1.get 默认
2.post 可以改post method="post"
form表单默认get请求
"获取post请求input标签一定要含有name属性。"
请求方法补充
1.get请求 ：朝服务端索要数据，也可以携带一些额外的要求。
携带额外数据方式：URL?xxx=yyy&uuu=zzz，但是问号后面携带的数据大小是有限制的（2kb），并且不能携带敏感数据（密码）
2.post请求： 朝服务端提交数据
携带额外数据的方式：请求体，请求体携带数据安全性较高并且没有大小的限制。
前期发送post请求需要注释掉配置文件中的某一行
# settings里
MIDDLEWARE = [
'django.middleware.security.SecurityMiddleware',
'django.contrib.sessions.middleware.SessionMiddleware',
'django.middleware.common.CommonMiddleware',
# 'django.middleware.csrf.CsrfViewMiddleware',
'django.contrib.auth.middleware.AuthenticationMiddleware',
'django.contrib.messages.middleware.MessageMiddleware',
'django.middleware.clickjacking.XFrameOptionsMiddleware',
]
request对象
如果是get请求就返回一个html页面
如果时post请求就获取发送过来的数据
获取当前请求方法
request.method # 结果是纯大写的字符串
可以根据 结果进行判断 返回不同数据
if request.method == 'GET':
return render(request, 'input.html')
elif request.method == 'POST':
return HttpResponse('我是赛利亚')
POST方法
request.POST # 获取post请求请求体里面携带的数据
"是一个字典 键对着值 相同的键如果有多个值那么就是键：值列表"
request.post.get() # 获取值列表里最后一个数据值
request.POST.getlist() # 获取整个键对应的值列表
GET方法
request.GET # 获取网址问号后面携带的数据
"结果也是一个字典"
request.post.get() # 获取值列表里最后一个数据值
request.POST.getlist() # 获取整个键对应的值列表
pycharm连接数据库
pycharm初次连接数据库 点开界面右侧 database进入选择数据库后进入界面 输入数据库用户名与密码--点击弹出界面下方三角警示标下载驱动文件---appy后 ok
django连接数据库
djiango 运行后 自动产生了一个sqlite3是一个小型的数据库 主要用于本地测试
我们需要使用django 来连接MySql 需要修改settings配置
DATABASES = {
'default': {
'ENGINE': 'django.db.backends.sqlite3',
'NAME': os.path.join(BASE_DIR, 'db.sqlite3'),
}
}
修改配置文件
DATABASES = {
'default': {
'ENGINE': 'django.db.backends.mysql',
'NAME': 'day51',
'HOST': '127.0.0.1',
'PORT': 3306,
'USER': 'root',
'PASSWORD': '123',
'CHARSET': 'utf8'
}
}
ORM
ORM：对象关系映射
优点：它能够让不会SQL语句的python程序员，使用python面向对象的语法来操作数据库。
缺点：封装程度太高，有时候sql语句的效率偏低，需要自己写SQL语句。
类 表
对象 一条条数据
对象点名字 数据获取字段对应的值
ORM基本操作
在models.py 模型层编写模型类
class userinfo1(models.Model): # 类名等于表名
id = models.AutoField(primary_key=True) # 字段名= 字段类型+约束条件、
name = models.CharField(max_length=32)
pwd = models.CharField(max_length=32)
age = models.IntegerField() # int
编写好了还不行。需要进行数据库迁移操作
执行数据库迁移相关命令
python38 manage.py makemigrations # 将操作记录
"在migrations init 文件里"
python38 manage.py migrate # 同步到数据库
'''注意每次在models.py修改了与数据库相关的代码 都需要再次执行上述命令'''
ORM基本语句
from app01 import models
1.创建数据
models.类名.objects.create()
models.userinfo1.objects.create(name=name,pwd=pwd,age=age)
2.查询数据
models.类名.objects.filter()
res = models.userinfo1.object.filter(name=name) # 结果是个对象
res[0].字段名 可以拿到该字段的数据
"改,删都需先查询到该数据才能操作"
3.修改数据
models.类名.objects.update()
models.userinfo1.objects.filter(name=name).update(name='lxj') # 多条数据通过id筛选
4.删除数据
models.类名.objects.delete()
models.userinfo1.objects.filter(id=2).delete()
