本周总结
前端开发之js
js简介
它是一门前端工程师的编程语言 但是它本身有很多逻辑错误(不是很严谨)
js基础
1.注释语法
//单行注释
/*多行注释*/
2.引入js的多种方式
1.head内script标签内编写
2.head内script标签src属性引入外部js资源
3.body内最底部通过script标签src属性引入外部js资源(最常用)
ps：注意页面的加载是从上往下 所以操作js代码一定要等待标签加载完毕再执行才可以正常运行
3.结束符号
分号;(很多时候不写也没问题)
'''输出关键字：console.log'''
变量与常量
"""
1.pycharm创建js文件或者html文件(适合编写较为复杂的js代码)
2.浏览器提供编写js代码的环境
"""
在js中声明变量需要使用关键字
var
var name = 'jason'
let
let name = 'kevin'
ps:let是ECMA6新语法 可以在局部定义变量不影响全局
js中声明常量也需要使用关键字
const
const pi = 3.14
基本数据类型
"""
在js中查看数据类型的方式 typeof
"""
1.数值类型(number)
在JS中整型与浮点型不分家 都叫Number
NaN也属于数值类型 意思是：不是一个数字(Not A Number)
2.字符类型
单引号 'jason'
双引号 "jason"
模板字符串 `jason`
let name1 = 'jason'
let age1 = 18
undefined
let desc = `my name is ${name1} my age is ${age1}`
1.字符串拼接推荐使用加号
2.常见内置方法
3.布尔类型
JS里面的布尔值与python不同
JS是纯小写的 而python是首字母大写
ps：""(空字符串)、0、null、undefined、NaN都是false。
4.null和undefined
null表示为空(曾经拥有过) undefined表示没有被定义(从来没有过)
5.对象(object)
对象之数组(Array)>>>:类似于python中的列表
let l1 = []
对象之自定义对象(object)>>>:类似于python的字典
let d1 = {'name':'jason',}
let d2 = new Object();
运算符
1.算术运算符
+ - * / % ++(自增1) --(自减1)
2.比较运算符
!=(值不等 弱不等) ==(值相等 弱) ===(值相等 强) !==(值不等 强)
3.逻辑运算符
&&(与) ||(或) !(非)
流程控制
1.单if分支
2.if...else分支
3.if...else if else 分支
4.如果分支结构中else if很多还可以考试使用switch语法
"""
三元运算
python中：值1 if 条件 else 值2
js中： 条件？值1：值2
"""
函数
function 函数名(形参){
// 函数注释
函数体代码
return 返回值
}
# 匿名函数
var s1 = function(a,b){
return a+b;
}
# 箭头函数
var f = V => v;
// 等同于
var f = function(v){
return v;
}
var f = () => 5;
var f = function(){return 5};
var sum = (num1, num2) => num1 + num2;
var sum = function(num1, num2){
return num1 + num2;
}
1.JS中函数的形参与实参个数可以不对应
传少了就是underfined 传多了不用
2.函数体代码中有一个关键字arguments用来接收所有的实参
3.函数的返回值如果有多个需要自己处理成一个整体
内置对象
var d = new Date();
//getDate() 获取日
//getDay() 获取星期
//getMonth() 获取月(0-11)(减一)
//getFullYear() 获取完整年份
//getYear() 获取年
//getHours() 获取小时
//getMinutes() 获取分钟
//getSeconds() 获取秒
//getMilliseconds() 获取毫秒
//getTime() 返回累计毫秒数(从1970/1/1午夜)
let dd = {'name':'jason', age:18}
JSON.stringify(dd) 序列化
JSON.parse(ss) 反序列化
定义正则两种方式
var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9]{5,11}");
var reg2 = /^[a-zA-Z][a-zA-Z0-9][5,9]$/;
1.全局模式的规律
lastIndex
2.test匹配数据不传 默认传undefined
BOM操作
BOM（Browser Object Model）是指浏览器对象模型，它使 JavaScript 有能力与浏览器进行“对话”
window.open('网址','网页大小')
window.close()
window.location.href
获取当前页面所在的网址 也可以再加赋值符号和网址跳转
window.location.reload()
刷新当前页面
alert()
警告框
confim()
确认框
prompt()
提示框
计时器相关操作
let t = setTimeout(函数名, 3000)
clearTimeout(t)
s = setInterval(func, 3000)
clearInterval(s)
DOM操作
"""
1.js中变量名的命名风格推荐是驼峰体
2.js代码查找到的标签如果需要反复使用可以用变量接收 规律 xxxEle
"""
document.getElementById('d1')
结果就是标签对象本身
document.getElementByClassName('c1')
结果就是数字里面含有多个标签对象
document.getElementByTagName('span')
结果是数组里面包含多个标签对象
parentElement 父节点标签元素
children 所有子标签
firstElementChild 第一个子标签
previousElementSibling 上一个兄弟标签元素
操作节点
// js代码创建一个标签
let aEle = document.createElement('a')
// js代码操作标签属性
aEle.href = 'http://www.lsmpx.com/' 只能添加默认的属性
setAttribute()兼容默认属性和自定义属性
getAttribute('age')
reomveAttribute('age')
// js代码操作标签文本
aELe.innerText = '这个很攒劲'
//js代码查找div标签并将a追加到div内部
let divEle = document.getElementByTagName('div')[0]
divEle.appendChild(aEle)
.innerText 获取标签内部所有的文本内容
.innerText = '文本' 替换/设置标签内部的文本(不识别标签语法)
.innerHTML 获取标签内部所有的标签包含文本
.innerHTML = '文本' 替换/设置标签内部的文本(识别标签语法)
获取值操作
1.针对用户输入和用户选择的标签
标签对象.value
2.针对用户上传的文件数据
标签对象.files fileList [文件对象，文件对象，文件对象]
标签对象.files[0] 文件对象
class与css操作
1.js操作标签css样式
标签对象.style.属性名(下划线没有 变成驼峰体)
2.js操作标签class属性
标签对象.classList.add()
标签对象.classList.contains()
标签对象.classList.remove()
标签对象.classList.toggle()
事件
事件可以简单的理解为通过js代码给html标签绑定一些自定义的功能
常见事件
onclick 当用户点击某个对象时调用的事件句柄
onfocus 元素获得焦点
onblur 元素失去焦点
onchange 域的内容被改变
......
绑定事件的多种方式
<!--绑定事件的方式1-->
<button onclick="showMsg()">快按我</button>
<!--绑定事件的方式2-->
<input type="button" value="快快快" id="d1">
事件函数中的this关键字
this指代的就是当前被操作的标签对象本身
如果事件函数内有多层嵌套那么最好在一开始用变量存储一下防止后续变化
onload方法
XXX.onload 等待XXX加载完毕之后再执行后面的代码
jQuery类库
Write less，do more 写的更少做的更多
1.加载速度快
2.选择器更多更好用
3.一行代码走天下
4.支持ajax请求(重点)
5.兼容多浏览器
准备工作
1.下载核心文件到本地引入(没有网络也可以使用)
<script src='jQuery3.6.js'></script>
2.CDN网络资源加载(必须有网络才可以使用)
https://www.bootcdn.cn/
https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js
https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.min.js
标签对象与jQuery类库
1.不同的对象能够调用的方法是不同的
在编写代码的时候一定要看清楚手上是什么对象
2.两者可以互相转换
标签对象转jQuery对象
$(标签对象)
jQuery对象转标签对象
jQuery对象[0]
jQuery查找标签
$('.c1')
$('div p')
$('[username]')
:first // 第一个
:last // 最后一个
:eq(index) // 索引等于index的那个元素
:even // 匹配所有索引值为偶数的元素，从0开始计数
:not(元素选择器) // 移除所有满足not条件的标签
:has
$(':text')
$(':checked') checked与selected都会被找到
$('selected') 只有selected
$('#id').next() 找到id元素的下一个元素
操作标签
1.class操作
addclass() classList.add()
2.位置操作
$(window).scrollTop() // 回到顶部
3.文本操作
text() innerText
html() innerHTML
val() value
jQuery对象[0].files files[0]
4.创建标签
document.createElement() $('<a>')
6.文档处理(添加标签)
$(A).append(B) // 把B追加到A内
$(A).appendTo(B) // 把A追加到B
jQuery事件
JS绑定事件
标签对象.on事件名 = function(){}
jQuery事件绑定
方式一：
jQuery对象.事件名(function(){})
方式二：
jQuery对象.on('事件名称',function(){})
ps:默认就用方式一 不行再用方式二
ps：补充
clone属性
clone(true) 默认不克隆事件 加true就可以
事件相关补充
1.取消后续事件
事件函数的最后return false即可
4.事件委托
主要针对动态创建的标签也可以使用绑定的事件
$('body').on('click','button',function(){})
将body内所有的单击事件委托给button标签执行
bookstrap页面框架
别人写好的一大堆css和js 我们只需要引入就能使用
文件结构
bootstrap.css
bootstrap.js
ps:js部分是需要依赖于jQuery
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>
核心部分讲解
使用bookstrap其实只需要操作标签的样式即可
布局容器
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">
颜色
<tr class="success">
2.表单标签
class = "form-control"
3.按钮组
class = "btn btn-primary btn-block"
django
纯手撸web框架
1.web框架的本质
理解1：连接前端与数据库的中间介质
理解2：socket服务端
"""
1.socket代码过于重复
2.针对请求数据处理繁琐
3.后缀匹配逻辑过于LowB
"""
基于wsgiref模块
内置模块 很多web框架底层使用的模块
功能1：封装了socket代码
功能2：处理了请求数据
from wsgiref.simple_server import make_server
def run(request, response):
"""
:param request: 请求相关数据
:param response: 响应相关数据(响应头，响应首行之类的)
:return: 返回给客户端的真实数据
"""
response('200 ok', []) # 固定格式 不用管他
# print(request) # 是一个处理之后的大字典
path_info = request.get('PATH_INFO')
if path_info == '/index':
return [b'index page good']
elif path_info == '/not':
return [b'do not have anything']
return [b'hello wsgiref module']
if __name__ == '__main__':
server = make_server('127.0.0.1', 8080, run) # 实时监听127.0.0.1:8080 一旦有请求过来自动给第三个参数加括号并传参数调用
server.serve_forever() # 启动服务器
动静态网页
动态网页
页面数据来源于后端
静态网页
页面数据直接写死
将字典传递给页面内容 并且在页面上还可以通过类似于后端的操作方式操作该数据
模板语法>>>:jinja2模块
jinja2模块
pip3.8 install jinja2
from jinja2 import Template
def get_dict_func(request):
user_dict = {'name': 'jason', 'age': 18, 'person_list': ['阿珍', '阿强', '阿香', '阿红']}
with open(r'templates/get_dict_page.html', 'r', encoding='utf8') as f:
data = f.read()
temp_obj = Template(data) # 将页面数据交给模板处理
res = temp_obj.render({'d1': user_dict}) # 给页面传了一个 变量名是d1值是字典数据的数据
return res
<p>{{ d1 }}</p>
<p>{{ d1.name }}</p>
<p>{{ d1['age'] }}</p>
<p>{{ d1.get('person_list') }}</p>
前端，后端，数据库三者联动
1.前端浏览器访问get_user 后端连接数据库查询use表中所有的数据 传递到某个html页面 弄好样式 再发送给浏览器展示
{% for user_dict in user_data_list %}
<tr>
<td>{{ user_dict.id }}</td>
<td>{{ user_dict.name }}</td>
<td>{{ user_dict.age }}</td>
</tr>
{% endfor %}
python主流web框架
1.Django
大而全 自身自带的功能组件非常多
2.flask
小而精 自身自带的功能组件非常的少
几乎所有的功能都需要依赖于第三方模块
3.tornado
异步非阻塞 速度极快效率极高甚至可以充当游戏服务端
ps：sanic，fastapi...
Django简介
1.版本问题
Django1.X:同步 1.11
Django2.X:同步 2.2
Django3.X:支持异步 3.2
django4.X:支持异步 4.2
ps:版本直接的差异其实不打 主要是添加了额外的功能
2.运行Django注意事项
1.Django项目中所有的文件名目录名不要出现中文
2.计算机名称尽量也不要出现中文
3.一个pycharm尽量就是一个完整的项目(不要嵌套 不要叠加)
4.不同版本的python解释器与不同版本的Django可能会出现小问题
django基本使用
1.下载
pip3 install django 默认最新版
pip3 install django==版本号 指定版本
pip3 install django==2.2.22
pip下载模块会自动解决依赖问题(会把关联需要用到的模块一起下了)
2.验证
django-admin
3.常见命令
1.创建Django项目
django-admin startproject 项目名
2.启动Django项目
cd 项目名
python38 manage.py runserver ip:port
4.pycharm自动创建Django项目
会自动创建templates文件夹 但是配置文件中可能会报错
os.path.join(BASE_DIR, 'templates')
Django app概念
django类似于是一所大学 app类似于大学里面的各个学院
django里面的app类似于某个具体的功能模块
user app 所有用户相关的都写在user app下
goods app 所有商品相关的都写在goods app下
命令行创建应用
python38 manage.py startapp 应用名
pycharm创建应用
新建Django项目可以默认创建一个 并且自动注册
"""
创建的app一定要去settings.py中注册
INSTALLED_APPS = [
'app01.apps.App01Config',
'app02'
]
"""
Django项目目录名
django项目目录名
Django项目同名目录
settings.py 配置文件
urls.py 存储网址后缀与函数名对应关系(不严谨)
wsgi.py wsgiref网关文件
db.sqlite3文件 Django自带的小型数据库(项目启动之后才会出现)
manage.py 入口文件(命令提供)
应用目录
migrations目录 存储数据库相关记录
admin.py Django内置的admin后台管理功能
apps.py 注册app相关
models.py 与数据库打交道的(非常重要)
tests.py 测试文件
views.py 存储功能函数(不严谨)
templates目录 存储html文件(命令行不会自动创建pycharm会)
配置文件中还需要配置路径
[os.path.join(BASE_DIR,'templates'),]
"""
网址后缀 路径
函数 视图函数
类 视图类
重要名词讲解
urls.py 路由层
views.py 视图层
models.py 模型层
templates 模板层
"""
Django小白必会三板斧
from django.shortcuts import render,HttpResponse,redirect
HttpResponse 返回字符串类型的数据
render 返回html页面并且支持传值
redirect 重定向
静态文件配置
1.编写一个用户登录页面
2.静态文件
不怎么经常变化的文件 主要针对html文件所使用的到的各种资源
css文件、js文件、img文件、第三方框架文件
django针对静态文件资源需要单独开始一个目录统一存放
static目录
该目录下如果各种类型的文件都多 还可以继续创建目录
css目录
js目录
img目录
utils目录/plugins目录/libs目录/others目录/不创
静态文件相关配置
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'static')
]
1.接口前缀
STATIC_URL = '/xxx/' # 访问静态文件资源的接口前缀(通行证)
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'static'), # 存储静态文件资源的目录名称
os.path.join(BASE_DIR, 'static1'), # 存储静态文件资源的目录名称
os.path.join(BASE_DIR, 'static2'), # 存储静态文件资源的目录名称
]
'''
接口前缀正确之后 会拿着后面的路径依次去到列表中自上而下查找 一旦找到就返回
'''
2.接口前缀动态匹配
{% load static %}
<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>
action 控制数据提交的地址
method 控制数据提交的方法(默认是get 可以填post)
request对象
request.method 获取请求方式 结果是纯大写的字符串数据
GET/POST
request.POST 获取post请求请求体里面携带的数据
request.POST.get() 获取列表最后一个数据值
request.POST.getlist() 获取整个列表数据
request.GET 获取网址问号后面携带的数据
request.GET.get() 获取列表最后一个数据值
request.GET.getlist() 获取整个列表数据
pycharm连接数据库
1.pycharm初次连接数据库 需要下载对应的驱动
详细见12.10号博客
django连接数据库
django自带的sqlite3是一个小型的数据库 功能比较少 主要用于本地测试
我们实际项目中都会替换掉它
默认配置sqlite3
DATABASES = {
'default': {
'ENGINE': 'django.db.backends.sqlite3',
'NAME': os.path.join(BASE_DIR, 'db.sqlite3'),
}
}
1.修改配置文件
DATABASES = {
'default': {
'ENGINE': 'django.db.backends.mysql',
'NAME': 'day51',
'HOST': '127.0.0.1',
'PORT': 3306,
'USER': 'root',
'PASSWORD': '123',
'CHARSET': 'utf8'
}
}
2.需要指定模块
django1.X版本需要在项目目录下或者app目录下的__init__.py编写代码
import pymysql
pymysql.install_as_MySQLdb()
django2.X及以上都可以直接通过下载mysqlclient模块解决
pip3.8 install mysqlclient
ps:该模块windows下载问题不大 主要是mac电脑可能有问题
ORM简介
ORM:对象关系映射
能够让不会SQL语句的python程序员 使用python面向对象的语法来操作数据库
ORM由于高度封装了SQL 所有有时候效率极低 我们还要需要自己会写SQL
ORM基本操作
1.先在models.py中编写模型类
class GirlInfo(models.Model):
# 字段名 = 字段类型 + 约束条件
id = models.AutoField(primary_key=True)
name = models.CharField(max_length=32)
age = models.IntegerField()
2.执行数据库迁移相关命令
python38 manage.py makemigrations 将操作记录到小本本上(migrations)
python38 manage.py migrate 将操作同步到数据库上
'''注意每次在models.py修改了与数据库相关的代码 都需要再次执行上述命令'''
OEM基本语句
from app01 import models
models.类名.objects.create()
models.类名.objects.filter()
models.类名.objects.update()
models.类名.objects.delete()
