本周总结-数据库两天+前端三天
目录
本周总结
多表查询的两种方法
方式一：连表操作
inner join 内连接
left join 左连接
right join 右连接
union 全连接
'''
将拼接之后的表起别名当成一张表再去与其他表拼接 再起别名当做一张表跟其他表拼接 以此往复即可
'''
方式二：子查询
将一条SQL语句用括号括起来当成另外一条SQL语句的查询条件
'''
很多时候多表查询需要结合实际情况判断用哪种 更多时候甚至是相互配合使用
'''
小知识点补充
1.concat与concat_ws
concat用于分组之前的字段拼接操作
concat_ws拼接多个字段并且中间的连接符一致
2.exists
sql1 exists sql2
在sql2有结果的情况下才会执行sql1 否则不执行sql1 返回空数据
3.表相关SQL补充
alter table 表名 rename 新表名; # 修改表名
alter table 表名 add 字段名 字段类型(数字) 约束条件 after 已有字段; # 在已有字段之后添加新字段
约束条件之后填first # 在首栏添加一个新字段
约束条件之后不填 # 默认添加新字段
alter table 表名 change 旧字段名 新字段名 字段类型(数字) 约束条件; # 修改字段
alter table 表名 modify 字段名 新字段类型(数字) 约束条件; # 修改字段的字段类型
alter table 表名 drop 字段名; # 删除字段
可视化软件Navicat
第三方开发的用来充当数据库客户端的简单快捷的操作界面
无论第三方软件有多么的花里胡哨 底层的本质还是SQL
能够操作数据库的第三方软件有很多 其中MySQL最出名的就是Navicat
python操作MySQL
pymysql模块
pip install pymysql
import pymysql
# 1.连接MySQL服务端
conn = pymysql.connect(
host='127.0.0.1',
post=3306,
user='root',
psaaword='222',
db='db1',
charset='utf8mb4'
)
# 2.产生游标对象
# cursor = conn.cursor() # 括号内不填额外参数 数据是元祖 指定性不强 [(),()]
cursor = conn.cursor(cursor=pymysql.cursors.DictCursor)
# 3.编写SQL语句
sql = 'select * from teacher;'
# 4.发送sql语句
affect_rows = cursor.execute(sql) # execute也有返回值 接收的是sql语句影响的行数
# 5.获取SQL语句执行之后的结果
res = cursor.fetchall()
print(res)
pymysql补充说明
1.获取数据
fetchall() # 获取所有的结果
fetchone() # 获取结果集的第一个数据
fetchmany() # 获取指定数量的结果集(括号内填写)
ps：三者都有类似于光标移动的特性
cursor.scroll(1, 'relative') # 基于当前位置往后移动
cursor.scroll(0, 'absolute') # 基于数据的开头往后移动，0就是在开头不移动
2.增删改查
cautocommit=True # 针对增 删 改 自动确认(直接配置)
conn.commit() # 针对增 删 改 需要二次确认(代码确认)
SQL注入问题
因为特殊符号的组合产生了特殊的含义 从而避开正常的业务逻辑
(ps：传入的SQL语句被注释掉了)
针对上述的SQL注入问题 核心在于手动拼接了关键数据 解决方案：直接交给execute处理即可
视图
视图就是通过查询得到的一张虚拟表 然后保存下来 下次直接使用
create view 视图名 as select * from 表一 inner join 表二 on 约束条件
1.视图的表只能用来查询不能做其他的增删改操作
2.视图尽量少用 会跟真正的表产生混淆 从而干扰操作者
触发器
达到某个条件后字典触发
主要有6种情况
改前 改后 增前 增后 删前 删后
create trigger 触发器的名字 before/after insert/update/delete on 表名
for each row
begin
sql语句
end
1.触发器命名有一定的规律
2.临时修改SQL语句的结束符
因为有些操作中需要使用分号
# 查看所有的触发器
show triggers;
# 删除所有的触发器
drop trigeger 触发器名;
事务
事务四大特性
A:原子性
事务中的各项操作是不可分割的整体 要么同时成功要么同时失败
C:一致性
使数据库从一个一致性状态变到另一个一致性状态
I:隔离性
多个事务之间彼此互不干扰
D:持久性
也称永久性 指一个事务一旦提交 它对数据库中数据的改变就是永久性的
start transaction;
# 开启事务操作
在SQL标准中定义了四种隔离级别，每一种级别都规定了一个事务中所做的修改
InnoDB支持所有隔离级别
set transaction isolation level 级别
1.read uncommitted(未提交读)
事务中的修改即使没有提交，对其他事务也都是可见的，事务可以读取未提交的数据，这一现象也称之为"脏读"
2.read committed(提交读)
大多数数据库系统默认的隔离级别
一个事务从开始直到提交之前所作的任何修改对其他事务都是不可见的，这种级别也叫做"不可重复读"
3.repeatable read(可重复读) # MySQL默认隔离级别
能够解决"脏读"问题，但是无法解决"幻读"
所谓幻读指的是当某个事务在读取某个范围内的记录时另外一个事务又在该范围内插入了新的记录，当之前的事务再次读取该范围的记录会产生幻行，InnoDB和XtraDB通过多版本并发控制(MVCC)及间隙锁策略解决该问题
4.serializable(可串行读)
强制事务串行执行，很少使用该级别
"""
由此当我们查询一条记录的时候，只有满足以下两个条件的记录才会被显示出来：
1.当前事务id要大于或者等于当前行的create_version值，这表示在事务开始前这行数据已经存在了。
2.当前事务id要小于delete_version值，这表示在事务开始之后这行记录才被删除。
"""
存储过程
可以看成是python中的自定义函数
# 无参函数
delimiyer $$
create procedure p1()
begin
select * from cmd;
end $$
delimiter;
# 调用
call p1()
# 有参函数
delimiter $$
create procedure p2(
int m int, # in表示这个参数必须只能是传入不能被返回出去
in n int,
out res int # out表示这个参数可以被返回出去，还有一个inout表示既可以传入也可以被返回出去
)
begin
select * from cmd where id > m and id < n;
set res=0; # 用来标志存储过程是否执行
end $$
delimiter ;
# 针对res需要提前定义
set @res=10; # 定义
select @res; # 查看
call p1(1,5,@res) # 调用
select @res # 查看
"""
查看存储过程具体信息
show create procedure pro1;
查看所有存储过程
show procedure status;
删除存储过程
drop procedure pro1;
"""
函数
可以看成是python中的内置函数
'ps:可以通过help 函数名 查看帮助信息!'
# 1.移除指定字符
Trim,LTrim,RTrim
# 2.大小写转换
Lower,Upper
# 3.获取左右起始指定个数字符
left,right
# 4.返回读音相似值(对英文生效 中文暂时无效)
Soundex
# 5.日期格式：date_format
'''在MySQL中表示时间格式尽量采用2022-11-11格式'''
# 更多日期处理相关函数
adddate 增加员工日期
addtime 增加员工时间
datediff 计算两个日期差值
流程控制
# 分支结构
declare i int default 0;
if i = 1 then
select 1;
elseif i = 2 then
select 2;
else
select 7;
end if;
# 循环结构
declare num int;
set num = 0 ;
while num < 10 do
select num ;
set num = num + 1 ;
end while ;
索引相关概念
1）索引就好比一本书的目录，它能让你更快的找到自己想要的内容
2）让获取的数据更有目的性，从而提高数据库检索数据的性能
索引在MySQL中也叫做“键”，是存储引擎用于快速找到记录的一种数据结构
* primary key
* unique key
* index key
1.上述的三个key都可以加快数据查询
2.primary key和unique key除了可以加快查询本身还自带限制条件而index key很单一就是用来加快数据查询
3.外键不属于索引键的范围 是用来建立关系的 与加快查询无关
索引可以加快数据查询 但是会降低增删的速度
通常情况下我们频繁使用某些字段查询数据
为了提升查询的速度可以将该字段建立索引
聚集索引(primary key)
主键、主键索引
辅助索引(unique,index)
除主键意外的都是辅助索引
覆盖索引
select name from user where name='jason';
非覆盖索引
select age from user where name='jason';
索引数据结构
索引底层其实是树结构>>>:树是计算机底层的数据结构
树有很多中类型
二叉树、b树、b+树、B*树......
二叉树
二叉树里面还可以细分成很多领域 我们简单的了解即可
二叉意味着每个节点最大只能分两个子节点
B树
所有的节点都可以存放完整的数据
B+\*树
只有叶子节点才会存放真正的数据 其他节点只存放索引数据
B+叶子节点增加了指向其他叶子节点的指针
B*叶子节点和枝节点都有指向其他节点的指针
辅助索引在查询数据的时候最会还是需要借助于聚集索引
辅助索引叶子节点存放的是数据的主键值
有时候就算采用索引字段查询数据 也可能不会走索引!!!
最好能记三个左右的特殊情况
慢查询优化
在执行SQL语句前加explain，可以查看当前SQL语句的执行速度等级
1.index 尽量避免
2.range
3.ref
4.eq_ref
5.const
6.system
7.null
前端
前端与后端的概念
前端
任何与用户直接打交道的操作界面>>>:接待员
后端
不直接与用户打交道 主要负责内部真正的业务逻辑的执行>>>:幕后操作者
前端三剑客
HTML 网页的骨架
CSS 网页的样式
JavaScript 网页的动态
前端前戏
1.编写服务端
2.浏览器充当客户端访问服务端
3.浏览器无法正常展示服务端内容(因为服务端的数据没有遵循标准)
4. HTTP协议>>>:最主要的内容就是规定了浏览器与服务端之间数据交互的格式
HTML协仪
1.四大特性
1.基于请求响应
客户端发送请求 服务端回应响应
2.基于TCP，IP作用于应用层之上的协议
该协议属于应用层
3.无状态
服务端不会保存客户端状态(记不住人)
纵使见她千百遍 我都待她如初见
4.无\短连接
客户端与服务端不会长久保持连接
如果想要长链接 可以使用其他协议
2.数据格式
1.请求格式
请求首行(请求方式(有很多种) 协议版本)
请求头(一大堆K:V键值对)
换行
请求体(存放敏感信息 并不是所有的请求方式都有请求体)
2.响应格式
响应首行(状态码 协议版本)
响应头(一大堆K:V键值对)
换行
响应体(存放给浏览器展示的数据)
3.响应状态码
用数字来表达一些文字意义(类似于暗号)
1xx：服务端已经接收到了你的请求正在处理 客户端可以继续发送或者等待
2xx：200 OK 请求成功 服务端发送了对应的响应
3xx：302(临时) 304(永久) 重定向(想访问网页A但是自动调到了网页B)
4xx：403访问权限不够 404请求资源不存在
5xx：服务端内部错误
在公司中我们还会自定义更多的响应状态码 通常以10000起步
聚合数据
HTML简介
1.直接发送手写的数据
2.转为发送文件里面的数据
3.编写HTML出现的特殊现象
超文本标记语言：所见即所得
<h1>you sleep i sleep all sleep!</h1>
<a href="https://www.4399.com/">we are loser</a>
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Ftruth.bahamut.com.tw%2Fs01%2F201501%2F7c0ec0c4a2dc03c93a83bd623b279da7.JPG&refer=http%3A%2F%2Ftruth.bahamut.com.tw&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1672397728&t=8e074fac815982ce0445ca77ab7439ba"/>
HTML概览
1.HTML注释语法
<!--注释内容-->
2.HTML文档结构
<html> 固定格式 html包裹
<head>主要放在跟浏览器交互的配置</head>
<body>主要放在给用户查看的花里胡哨的内容</body>
</html>
3.HTML标签分类
单标签(自闭和标签)
<img/>
双标签
<h1></h1>
预备知识
1.网页信息数据一般也会存放于文件中
.html
2.pycharm支持前端所有类型的文件编写
内置有自动补全的功能 我们只需要专注于标签名的编写即可
3.html文件的打开
内置有自动调用浏览器的功能
head内常见标签
1.title网页小标题
2.mate定义网页源信息(很多配置)
3.style内部支持编写css代码
4.link引入外部css文件
5.script支持内部编写js代码也可以引入外部js代码
ps：了解每个标签大致的作用即可
body内基本标签
1.标题系列标签
h1~h6
2.段落标签
p
3.其他标签
u 下划线
i 斜体
s 删除线
b 加粗
ps：相同效果可能是有不同的标签实现的 不是独一无二的
4.换行和分割线
br 换行
hr 分割线
"""
标签的分类二
行内标签 u i s b
内部文本有多大就占多大
块儿级标签 h系列 p
独占一行
"""
常见符号
1. 空格
2.> 大于
3.< 小于
4.& &符
5.¥ ￥
6.© ©
7.® ®
body内布局标签
div
块儿级标签
span
行内标签
"""
标签之间可以相互嵌套 并且理论上可以无线套娃
块儿级标签内部可以嵌套块儿级标签和行内标签
p标签虽然是块儿级标签 但是它的内部也不能嵌套块儿级标签
行内标签内部只能嵌套行内标签
"""
body内常用标签
a标签 链接标签
href
1.填写网址 具备跳转功能
href='url'
2.填写其他标签的id值 具备锚点功能
href='#id'
target
默认_self原网页跳转
_blank新建网页跳转
img标签 图片标签
src
1.填写图片地址
2.还有更多特性 目前没法讲
title
鼠标悬浮在图片上自动展示的文本
alt
图片加载失败提示的信息
width\height
列表标签
无序列表
<ul>
<li>手机</li>
<li>衣物</li>
<li>电子</li>
</ul>
ps:页面上所有有规则排列的横向或者竖向的数据 一般使用的都是无序列表
有序列表
<ol type="I">
<li>111</li>
<li>222</li>
<li>333</li>
</ol>
ps:还可以通过type竖向切换数字
标题列表
<dl>
<dt>大标题</dt>
<dd>小标题1</dd>
<dd>小标题2</dd>
<dt>大标题</dt>
<dd>小标题1</dd>
<dd>小标题2</dd>
<dd>小标题3</dd>
</dl>
表格标签
1.先写基本骨架
<table>
<thead></thead>
<tbody></tbody>
</table>
2.再写表头及表单数据
<tr> 一个tr标签就表示一行
<th>编号</th> th主要用于表头字段中 用来加粗显示
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td>1</td> td主要用于表达数据中
<td>jason</td>
<td>18</td>
</tr>
表单标签
可以获取到用户的数据并发送给服务端
from标签
action 控制数据的提交地址
method 控制数据的提交方式
input标签(类似于前端的变形金刚)
type属性
text 普通文本
password 密文展示
date 日期选择
email 邮箱格式
radio 单选
checkbox 多选
file 文件
submit 触发提交动作
reset 重置表单内容
button 暂无任何功能
select标签 下拉框
option 一个个选项
textarea标签 获取大段文本
input标签应该有那么属性
name属性相当于字典的键 input标签获取到的用户数据相当于字典的值
点击发送就会组织成字典的形式发送给客户端 这样才具有明确意义
表单标签补充说明
1.用于获取用户数据的标签至少应该含有name属性
2.如果不需要用户填写数据 只需要选择 =那么我们自己需要填写value，不然无法发送
3.针对input标签理论上需要配一个label标签绑定 但是也可以不写
4.标签的属性与属性值如果相等 那么可以简写
5.针对选择类型的标签可以提前设置默认选项
6.下拉框与文件上传可以复选
css层叠样式表
主要用来调节html标签的各种样式
"""
标签的两大重要属性>>>:区分标签
class标签
分门别类 主要用于批量查找
id属性
精确查找 主要用于点对点
"""
1.css语法结构
选择器 {
样式名1:样式值1;
样式名2:样式值2
}
2.css注释语法
/*注释内容*/
3.引入css的多种方式
1.head内style标签内部编写(学习的时候使用)
2.head内link标签引入(标准的方式)
3.标签内部通过style属性直接编写(不推荐)
css选择器
1.CSS基本选择器
1.标签选择器(直接按照标签名查找标签)
div {
color: red;
}
2.类选择器(按照标签的class值查找标签)
.c1 {
color: green;
}
3.id选择器(根据标签的id之精准查找标签)
#d1 {
color: yellow;
}
4.通用选择器(直接选择页面所有的标签)
* {
color:blue;
}
2.css组合选择器
"""
预知知识点 我们对标签的嵌套有另外一套说辞
针对标签的上下层级以及嵌套有另外的说法
父标签 后代标签 子标签 弟弟标签 哥哥标签 祖先标签
"""
1.后代选择器(空格)
2.儿子选择器(大于)
3.毗邻选择器(加号)
4.弟弟选择器(小波浪号)
3.分组与嵌套
div,p,span { # 多个选择器合并查找
color:yellow;
}
div.c1 # 查找class含有c1的div
div#d1 # 查找id是d1的div
.c1 p.c2 # 查找c1样式值里含有c2样式值的p标签
4.属性选择器
/*[username] {*/ 按照属性名查找
/* color: red;*/
/*}*/
div[username='jason'] {
color: darkcyan;
} # 按照属性名等于属性值
5.伪类选择器
'''a标签补充说明 针对没有点击过的网站 默认是蓝色 点击过则为紫色'''
<style>
a:link {
color: pink;
}
a:active {
color: blue;
}
a:hover {
color: orange;
}
input:focus {
background-color: red;
}
</style>
6.伪元素选择器
p:first-letter {
font-size: 48px;
color: red;
}
p:before {
content: '嘿嘿嘿';
color: blue;
}
p:after {
content: '嗨害嗨';
color: pink;
}
选择器优先级
1.选择器相同 导入方式不同
就近原则
2.选择器不同 导入方式相同
内联样式 > id选择器 > 类选择器 > 标签选择器
css样式调节
字体样式
font-size 字体大小
font-weight 字体粗细
color 字体颜色
text-align 文本对齐
text-decoration 主要用于a标签取消下划线
text-indent 首行缩进
边框
border: 10px solid orange;
/*调整整个边框 上下左右*/
border-左右上下-模式(长宽颜色)
/*画圆*/
border-radius: 50%;
display
'''
行内标签是无法设置长宽 只有块儿级可以设置
'''
快捷创建div等
div*5 # 创建五个div标签
ul>li*3 # 创建一个ul标签内包含三个li标签
ul>li*3>a.c1#id{嘿嘿嘿}
底层是emmet插件 一般都会有
display: lnline; # 将块儿级标签变成行内标签
display: block; # 将行内标签变成块儿级标签
盒子模型
我们可以将标签看成是一个盒子(快递盒)
1.快递包里面的实际物体 content(内容)
2.物体与内部盒子墙的距离 padding(内边距，内填充)
3.快递盒的厚度 border(边框)
4.快递盒之间的距离 margin(外边距)
border: 5px dotted blue;
/*padding-left: 50px;*/
/*padding-top: 50px;*/
/*!*padding-right: 50px; 无效果，因为文字过短，右边太大不生效*!*/
/*padding-bottom: 50px;*/
/* 调节条件一样 可以简写 */
/*padding: 50px 20px;!*两个参数情况：第一个参数控制上下，第二个参数控制左右*!*/
padding: 10px 20px 30px 40px;/*四个参数，顺序上右下左*/
margin-bottom: 30px;
'''margin和padding用法一样'''
浮动
浮动就是用来做页面布局的
浮动的现象
float:left\right
浮动带来的影响
浮动的元素是脱离正常文档的 会造成父标签塌陷
如何解决浮动的影响
clear
解决浮动带来的影响终级方法
先提前写好样式
.clearfix:after { /*提前建好一个类方法 谁塌了就给谁*/
content: ''; /*空字符串*/
display: block; /*变成块儿级标签，独占一行*/
clear: both; /*这个文本左右两边的天空和地面都不允许有浮动元素*/
}
ps:浏览器会优先展示文本内容(如果被挡住)
溢出
overflow: hidden; # 多出的直接截掉
overflow: auto; # 多出的可以上下滚动
overflow: scroll; # 多出的部分上下左右出现滑块可以滚动
div img {
max-width: 100%;/*把图片按照100%按等比例缩放放入框内*/
}
定位
标签在默认情况下都是无法通过定位的参数来移动
针对定位有四种状态
1.static静态(标签默认的状态 无法定位移动)
2.relative相对定位(基于标签原来的位置)
3.absolute绝对定位(基于某个定位过的父标签做定位)
4.fixed固定定位(基于浏览器窗口固定不动)
z-index
调整页面的高度，可以有多个页面
网页登录后边的灰色就是这么做出来的
