首页 > 其他分享 >本周总结

本周总结

时间:2022-12-11 18:33:39浏览次数:37  
标签:总结 对象 标签 py 本周 js django Django

目录

本周总结

前端开发之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>

form表单

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()

标签:总结,对象,标签,py,本周,js,django,Django
From: https://www.cnblogs.com/zpf1107/p/16974110.html

相关文章

  • 2022-2023-1 20221311《计算机基础与程序设计》课程总结
    2022-2023-120221311《计算机基础与程序设计》课程总结作业信息班级:https//edu.cnblogs.com/campus/besti/2022-2023-1-CFAP作业要求:https.//www.cnblogs.com/rocedu/p/......
  • Kubernetes疑难问题总结一
    分析ExitCode定位Pod异常退出原因    查看ExitCode   使用kubectldescribepod查看到pod对应退出状态码,如果不为0,表示异常退出  退出状态码区间,0-255,0表示正常......
  • 20221418 《计算机基础与程序设计》课程总结
    2022-2023-120221418《计算机基础与程序设计》第十五周学习总结作业信息这个作业属于哪个课程(2022-2023-1-计算机基础与程序设计)这个作业要求在哪里(2022-20......
  • Docker 基础和常用命令总结
    ​一,Docker简介​​​1.1,什么是Docker​​​​1.2,Docker与虚拟机的区别​​​​1.3,Docker架构​​​​1.4,为什么用Docker​​​二,Docker基本概念​​​2.1,镜像​​​......
  • Latex使用总结(二)
    目录通用篇1.大小的调整2.重新编号3.缩进图片篇1.使用表格篇1.使用2.快捷操作算法篇1.使用2.注意公式篇1.使用引用篇1.使用2.注释总结通用篇1.大小的调整\usepackage{......
  • 2022-2023 20221403 《计算机基础与程序设计》课程总结
    学期(如2022-2023-1)学号(如:20221403)《计算机基础与程序设计》第十五周学习总结课程总结《计算机基础与程序设计》第01周作业简要内容:课程概论工业革命与浪潮之巅......
  • 2022-2023-1 20221322《计算机基础与程序设计》第十五周学习总结
    20221322《计算机基础与程序设计》课程总结作业信息这个作业属于哪个课程<班级的链接>(2022-2023-1-计算机基础与程序设计)这个作业要求在哪里<作业要求的链接>(......
  • 周总结(11)
    周总结(11)JavaScirpt编程语言引入js的多种方式head内script标签内编写head内script标签src属性引入外部js资源body内最底部通过script标签src属性引入外部js资......
  • 2022-2023-1 20221414《计算机基础和程序设计》第15周学习总结
    基本信息这个作业属于哪个课程2022-2023-1-计算机基础与程序设计这个作业要求在哪里2022-2023-1计算机基础与程序设计第15周作业作业正文https://www.cnbl......
  • NOIP2022 总结
    \(\text{summary}\)怎么都没想到这次题目那么有新意:把这样的题\(T2\)放\(T2\)......策略出现很大问题,赛后也意识到很多选手也会出现同样的问题:死磕\(T2\)毕竟稳妥的......