Html
一、 大前端
1.前端能做什么
APP、小程序、游戏、网站、微信公众号、H5
2.Web与Internet
Internet:全球性计算机互联网,俗称:因特网、国际互联网…
互联网有很多的应用,网站见得最多的应用 —— WEB
3.浏览器
百度、夸克、UC、360、QQ…
谷歌、火狐、Edge、Safari、欧朋
4.编辑器
记事本、Editplus、vscode、hbuilder、Dreamweaver、sublime
二、 HTML入门
1.前端开发涉及到的三个语言
HTML: 负责网页的基本内容结构
CSS: 负责网页美化
JS: 负责网页的行为/交互效果
2.HTML概述
HTML : 超文本标记语言,可以简单理解就是一个网页
HTML语言,标记也称为标签,运行在浏览器
-> <标记名称>
超文本:文本、图片、视频、声音、超链接…
3.HTML特点
以.html或者.htm为后缀名
浏览器会解析执行html文件多中的代码(从上往下,从左往右)
三、 HTML语法规范
1.语法基础
标签格式:用尖括号来包裹
<标签名称>
分类:
(1)双标签形式
<标签名称>内容部分</标签名称>
(2)单标签形式
既是开始,又是结束
<标签名称> 或者 <标签名称 />
HTML5以后推荐使用第1种
2.文档类型声明
写在第1行,声明当前HTML版本为HTML5,浏览器就会按照这个规范来解析
3.网页结构
head之间可以放的内容
四、HTML标签
1.文本样式标签
文字 加粗
文字 倾斜
文字 下划线
文字 删除线
HTML提供了一组有语义的标签
strong 加粗 em 倾斜 ins 下划线 del 删除
说明:如果有文字的话,通常选择后边有语义的标签。
2.换行标签
或者
单标签形式
3.标题标签
h1 ~ h6
单独占一行,文字h1最大,h6最小,有加粗效果,上下方向有边距
4.段落标签
段落内容
单独占一行,上下方向有边距 5.水平线标签或者
单标签 会在页面中出现一条独占一行的分割线 6.图片标签 常见的图片格式:jpg/jpeg、png、gif 单标签 属性: src=”图片资源的路径” width=”图片的宽度,单位是像素(px)或者百分比” height=”图片的高度,单位是像素(px)或者百分比” alt=”图片加载失败时显示的文字” 如果只是设置宽度或者高度,另一个方向会等比例缩放。 如果宽度和高度同时设置,可能会出现比例失真 7.路径(URL) (1)相对路径 相对于当前的html 兄弟资源 直接写资源名称 兄弟资源的儿子 先找兄弟再找儿子 兄弟/儿子 找父亲:../ (2)绝对路径 是一个完整的路径,使用网络资源的时候,就会使用绝对路径 https://n.sinaimg.cn/default/crawl/48/w550h298/20220801/01b4-49b8d133ce3457eadcba26190d8e214b.png 优点 节省本服务器的存储空间 缺点 资源不稳定,一旦远程服务器删除图片资源,本地服务器也就无法访问 8.标签的属性 <标签名称 属性名=”属性值” 属性名=”属性值”>
五、链接
1.空链接
同时会跳转到顶部
2.锚点链接
步骤1:定义锚点,在任意标签中添加属性id=”锚点名称”
六、分区标签
1.div —— 块分区
七、表格
用于格式化数据
1.表格的语法
table 表格标签,所有内容都要放到这个里边
tr 行标签,要写在table中
td 列标签,要写在tr中
2.可选标签
caption 表格的标题
thead 表头部分
tbody 表格的主体部分
th 列标签,加粗/居中效果
3.表格的属性
table的属性
border=”” 设置边框
width=”” 设置宽度
4.不规则表格(单元格合并)
rowspan=”n” 跨行 ,从当前开始,向下合并n个单元格(删除被合并)
colspan=”n” 跨列,从当前开始,向右合并n个单元格(删除被合并)
八、列表
1.有序列表
- 有序列表
- 列表项1
- 列表项2
- …
- 无序列表
- 列表项1
- 列表项1
- …
-
自定义列表
被解释的名称
- 列表——对以上名称的解释 …
CSS
一、表单——关联控件(label)
用于进行form中文本与控件的关联
二、CSS概述
CSS: 层叠样式表/级联样式表
1995年诞生,2010年推出了CSS3
样式:颜色、背景、位置、大小、边框、阴影、动画…
总结:CSS用于控制HTML标签样式
三、CSS的书写位置
1.行内/内联样式
<开始标签 style=”color: red; background: pink;”></结束标签>
style=”给当前的标签设置样式”
color 属性名 pink属性值
属性名和属性值之间用冒号隔开,一个属性写完以英文的分号结束。
2.内部样式
在html中的head标签之间加入style标签,在标签内部写CSS样式
3.外部样式
把CSS样式写在外部的一个CSS文件中
在html中head标签之间加入link标签,引入一个外部CSS文件
(4)获取文本框的输入焦点
input:focus{
CSS样式
}
8.属性选择器
通过标签的属性来查找标签
input[type]{
}
查找input标签中含有type属性
[type]{
}
查找所有标签中含有type属性的
[type=”text”]{
}
查找所有标签中含有type属性,并且值是text的
五、选择器
9.后代选择器
选中某个标签的子孙后代
.box span{ } 选择box类下表所有的后代span
注意事项:空格就是后代选择器
10.直接子代选择器
在标签中直接找儿子
.box2>span{ }
.box2>p>span{ }
11.兄弟选择器
往后找兄弟标签
h1~p{ } 查找h1标签后,兄弟标签为p的
12.相邻兄弟选择器
往后找紧邻的第一个兄弟
h4+p{ } 查找h4标签后紧邻的p标签
注意事项:紧邻选择器后边不能有其它的标签
13.并列选择器
标签同时被多个选择器查找到
p.c1{ } 同时满足被选择器p和选择器.c1找到
注意事项:选择器之间不能有空格
14.伪元素
是附加在标签中的一种选择器,会生成一个行内分区
标签::before{ } 在标签开始的位置插入内容
标签::after{ } 在标签结束的位置插入内容
content 表示要生成的行内分区的内容(必须添加)
可以设置生成内容的样式
六、CSS样式
边框样式 border: 宽度 线的类型 颜色;
border: 1px solid red;
实线
宽度 width
高度 height
七、CSS样式优先级
1.不同选择器样式不同
当多个选择器选中同一个元素,不同的样式都会生效,它们之间不会产生冲突,样式会叠加。
2.不同选择器样式相同
权重相同的情况下,后边的把前边的给覆盖
CSS中有一些样式可以继承的,父元素的样式会传递给子元素
3.选择器权重计算
选择器 权重
继承样式 无
通用选择器 0
标签选择器 1
类(伪类)选择器 10
ID选择器 100
行内样式 style=”” 1000
!important 优先级最高 10000
总结:
选择器权重会叠加,但注意权重叠加不会越级
例如:11个类选择器不会超过一个id选择器
常用的选择器:
标签选择器、类选择器、后代选择器、直接子代选择器、群组选择器、伪类选择器、伪元素选择器…
八、CSS中的值和单位
1.颜色值(写法)
颜色 单词 rgb rgba 16进制 16进制简写
红色 red rgb(255,0,0) rgba(255,0,0,1) #FF0000 #F00
rgba 分别表示 红色,绿色,蓝色,透明度
颜色值范围0~255 透明度范围0~1
2.尺寸写法
像素(px):电脑屏幕上的一个发光点
百分比(%):占父元素的尺寸的比例
em 倍率:相对于父元素字体大小的倍率
3.CSS属性
font-size 字体大小
text-indent: 2em; 文本缩进,缩进两个文字是2em
九、流和文档(标准)流
流:标签的有序排列
文档流,网页中每个元素都会按照各自的特征进行排列
例如:每个div会独占一行
1.所有的标签分为三种显示形态
块级元素:会独占一行,有宽高属性 div h1~h6 p ul ol li dl dt dd
行内元素:会和其它的行内共处一行,没有宽高属性 span b u I s a…
行内块元素:会和其它的行内共处一行,有宽度属性 input select textarea
img 图片标签是一种特殊的,行内替换元素。
2.改变显示模式
display: inline; 转为行内元素
display: block; 转为块状元素
display: inline-block; 转为行内块元素
小技巧:去除图片底部空隙,给图片添加 display:block
十、盒子模型
1.边框
border-top/right/bottom/left: 宽度 线的类型 颜色
3个属性顺序不分先后
线的类型:solid 实线、dashed 虚线、 dotted 点状线
border-width 边框宽度
border-color 边框颜色 transparent 透明色
border-style 边框样式(线的类型)
border:none; 去除边框
2.内边距
padding: 10px; 上下左右相同
padding: 10px 20px; 上下 左右
padding: 10px 20px 30px; 上 左右 下
padding: 10px 20px 30px 40px; 上 右 下 左
标准(W3C)盒模型
盒子实际宽度=内容宽度+左右内边距+左右边框
盒子实际高度=内容高度+上下内边距+上下边框
怪异盒模型
盒子实际宽度就是内容的宽度(width)
盒子实际高度就是内容的高度(height)
3.切换盒模型
box-sizing: content-box; 内容盒子(标准盒模型) —— 默认的
box-sizing: border-box; 边框盒子(怪异盒模型)
4.外边距
margin: 10px; 上下左右相同
margin: 10px 20px; 上下 左右
margin: 10px 20px 30px; 上 左右 下
margin: 10px 20px 30px 40px; 上 右 下 左
margin-top/right/bottom/left 控制其中一个方向
上 右 下 左
5.盒子在网页中占的空间大小
水平方向:左右的外边距 + 盒子实际宽度
垂直方向:上下的外边距 + 盒子实际高度
十一、行内元素的内边距
行内元素的水平方向的内边距正常生效;垂直方向会产生“视觉生效”,实际上没有生效。
十二、外边距特点
1.外边距合并
(1)在文档流中,垂直方向的两个盒子之间的外边距会产生合并,取最大值。
(2)在父元素的第一个子元素中,设置上边距,会出现在父元素顶部
解决方法:
1.改用给父元素添加内边距
2.给父元素添加上边框
3.给父元素添加溢出隐藏属性
overflow:hidden;
2.通过外边距实现盒子水平居中
版心:指的是页面布局中主体内容所在的区域
盒子水平居中 margin: 0 auto;
3.外边距取值
正负值都可以使用,正值会增加距离,负值会减少,缩短距离
0距离是紧挨着
负值一旦使用可能会产生重叠的现象。
十三、去除标签样式
标签中有自带的内外边距,需要去除这些样式
*{
margin: 0;
padding: 0;
}
text-align: 盒子文本水平对齐方式 left/center/right
HTML特殊字符
在网页中产生空格
< <
> >
© 产生版权分号©
https://blog.csdn.net/jack_rose_me/article/details/124603494
十四、元素中内容溢出
当前标签中如果内容出现溢出,通常是盒子宽高固定的情况才会出现溢出。
overflow: visible; 溢出可见
overflow: hidden; 溢出隐藏
overflow: scroll; 显示滚动条,强制出现滚动条
overflow: auto; 自动出现滚动条,根据内容多少自动出现的
十五、元素的显示和隐藏
1.脱离文档流的隐藏
display: none; 元素隐藏后,不再保留空间
如果要让元素显示出来,可以添加 display: block;
2.不脱离文档流的隐藏
visibility: hidden; 元素隐藏后,还会保留空间
visibility: visible; 默认值,可见
3.不脱离文档流 —— 元素透明
opacity: 0; 元素透明, 还会保留空间
值的范围 0~1 1是不透明
注意事项:包括元素中的内容
十六、背景
background-color 背景颜色
background-image 背景图像,通过url() 设置图像的路径
background-repeat 背景图像的平铺方式
Repeat 整个重复,把盒子铺满
Repeat-x 横向重复
Repeat-y 纵向重复
No-repeat 不重复,只显示一张图片
background-position: 水平方向 垂直方向; 背景图像定位
正值往右、往下移动;负值往左、往上移动
特殊的值
水平方向: left/center/right
垂直方向: top/center/bottom
以上四个属性可以综合到一起
background: 颜色 图像 定位 重复;
顺序上不分先后顺序,可以是一个值或者多个值。
十七、精灵图
CSS Sprite,翻译过来叫做精灵图/雪碧图,图片处理的一种方式
UI设计会把网页上一些修饰性的图标整合到一张图片上,需要哪一部分,通过背景定位查找对应的位置
优点:减少了对服务器请求次数
用法:
(1)将精灵图作为背景图
(2)通过背景定位定位到对应的图标部分
十八、行高
line-height 设置一行所占高度的值
作用:
(1)让一行文本在盒子中垂直居中(盒子的高度和行高相同)
(2)控制段落中(多行文本)行间距
十九、背景渐变
渐变通常线性渐变用的最多
Background-image: linear-gradient(颜色1,颜色2,颜色3…)
角度设置
Background-image: linear-gradient(角度deg, 颜色1,颜色2,颜色3…)
范围设置
Background-image: linear-gradient(角度deg, 颜色1 百分比,颜色2百分比,颜色3 百分比…)
二十、背景图片大小
没有设置默认是图片本身的大小
background-size: 水平方向 垂直方向
background-size: 100% 100%; 使用图片将盒子铺满,可能会出现变形
background-size: cover; 将整个盒子铺满,多余的部分被裁减,不变形
background-size: contain; 至少将图片完全显示,可能会有空白区域
二十一、元素的美化和装饰
1.边框的圆角
Border-radius: 10px; 四个角度相同
Border-top-left-radius: 可以设置其中一个角度
Border-radius: 20px 40px; 左上/右下 右上/左下
Border-radius: 20px 30px 40px; 左上 右上/左下 右下
Border-radius: 10px 20px 30px 40px; 左上 右上 右下 左下
Border-radius: 50%; 正圆 或者 椭圆
Border-radius: 高度的一半; 胶囊型
2.盒子阴影
Box-shadow:
值1:必须,水平方向的偏移量
值2:必须,垂直方向的偏移量
值3:可选,羽化,值越大模糊度越强
值4:可选,扩展半径
值5:可选,颜色,默认黑色
值6:可选,内外侧阴影,内侧inset,默认是外侧
3.去除表单中自带的外轮廓线
Outline: none;
二十二、浮动
float: left/right
目的:为了让多个盒子成一行展示
特点:会脱离文档流,不再占位
浮动产生的结果
父盒子中,如何子盒子都浮动起来,父盒子不能再被子盒子撑开 —— 高度塌陷
浮动盒子如果不设置宽度,宽度就是内容的宽度
可以让行内元素块状化,具有了宽高属性
浮动可以去除图片空白边距
浮动可以解决了外边距合并(父盒子中第一个子盒子的上边距合并)
浮动影响后边的盒子,通常父盒子中如果有一个子盒子浮动,就都浮动。
二十三、解决高度塌陷 —— 清除浮动
1.给父盒子设置高度
适用于在网页布局中,高度是确定的情况,例如:网页头部、导航条…
2.清除浮动 —— 溢出隐藏法
在浮动盒子的父盒子中添加溢出隐藏属性
overflow: hidden;
不足:有些定位到外部的盒子也会被隐藏
3.清除浮动 —— 额外标签法
在所有浮动盒子的最后边添加一个空的div,然后给div添加样式clear:both;
不足:会多出一个空标签
注意:只能添加一个块状标签,不能使用行内标签
4.清除浮动 —— 伪元素
.clearfix::after{
content: “”;
display: block;
clear: both;
}
在所有浮动盒子的父盒子中调用clearfix
二十四、去除列表自带的样式
ul {
list-style: none;
}
二十五、文本处理
1.字号(字体大小)
font-size
谷歌浏览器默认文字大小16px,最小不能小于12px
可以继承的
em 相对于父元素的文字大小
rem 相对于根元素html的文字大小
2.字体家族
font-family: 字体1, 字体2,….
值可以写一种或者多种;如果是多种,先查找第1个,如果没有这种会往后查找…
注意:字体是有版权,如果是中文需要用引号包裹
3.字体体重(重量)
font-weight: 字体体重
normal 正常大小
bold 加粗
100~900之间,是100的倍数,默认是400
4.颜色
color: 文字颜色
5.文本水平对齐方式
text-align: left(左侧) / center(居中) / right(右侧)
6.行高
line-height
文本在盒子垂直居中:行高和高度相同
控制段落的行间距
7.文本修饰线
text-decoration: underline 下划线
text-decoration: line-through 删除线
text-decoration: none 无线条(用于取消自带的修饰线)
8.首行缩进
text-indent: 首行缩进
CSS属性查找
https://www.w3school.com.cn/css/index.asp
二十六、布局标签
header 定义头部
nav 定义导航
section 定义一个区域
aside 定义侧边栏
article 定义内容(文章)
footer 定义底部
二十七、定位
使用定位改变盒子的位置
静态定位(默认)、相对定位、绝对定位、固定定位、粘性定位
常用的定位:相对定位、绝对定位、固定定位
1.相对定位
position: relative
相对于元素原来的位置进行定位,可以使用left/right 、top/bottom来控制水平位置和垂直的位置
(1)相对定位没有脱离文档流,还会保留原来的位置,撑开父盒子,不影响父盒子
(2)对比外边距
外边距会影响到后边的盒子,相对定位不会挤开后边的盒子0
2.绝对定位
position: absolute
绝对定位会脱离文档流,不再占位
使用绝对定位的盒子会参照离自己最近有“非静态定位”的祖先元素。
通过left/top、top/bottom控制水平和垂直位置
如果要相对于父盒子,通常给父盒子设置相对定位:子绝父相
垂直居中
top:50%; margin-top: 自身高度一半;
水平居中
Left:50%; margin-left: 自身宽度一半;
(1)行内元素定位后会块状化,具有了宽高属性
(2)定位中出现了重叠,通过z-index控制层级,值是一个整数,越大越靠前,默认是0
二十八、浮动特殊情况
在文档流下,浮动盒子的父盒子如果不设置高度,会出现高度塌陷
如果浮动盒子的父盒子也设置浮动,则会被子盒子撑开,不会出现高度塌陷
二十九、行内块
1.行内块水平居中
给父盒子设置文本水平居中 text-align:center;
2.去除行内块自带外边距
给父盒子设置字体大小为0 font-size:0;
三十、固定定位
position: fixed;
会脱离文档流,相对于当前的窗口
三十一、高级选择器
1.属性选择器
标签[属性名] 查找标签中含有指定属性
标签[属性名=”属性值”] 查找标签中属性为固定值的
标签[属性名^=”属性值”] 查看属性中以指定的值开始的元素
标签[属性名$=”属性值”] 查看属性中以指定的值结束的元素
标签[属性名*=”属性值”] 查找属性中含有某个值的元素
2.结构伪类选择器
查找第1个
:nth-child(1) 或者 :first-child
查找最后1个
:nth-child(最后一个的编号) 或者 :last-child
查找第n个
:nth-child(n)
查找倒数第n个
:nth-last-child(n)
查找奇数
:nth-child(odd) 或者 :nth-child(2n+1) 或者 :nth-child(2n-1)
查找偶数
:nth-child(even) 或者 :nth-child(2n)
查找倍数
:nth-child(3n)
3.目标伪类选择器
:target
通过a标签的href属性触发目标伪类选择器,通过关联元素的id来进行查找,在目标元素上添加 :target
文字1
三十二、弹性布局
之前接触的布局方式:流失布局、浮动布局、定位布局。
弹性布局(flex布局):flexbox,弹性盒模型
优势:自动分配空间,不需要计算
劣势:父盒子需要高度
- 开启弹性布局图片
在父盒子中添加属性 display: flex
2.主轴的排列方向
flex-direction
分为行(横向)模式和列(纵向)模式
row 行模式,正向排列 (默认的)
row-reverse 行模式,反向排列
column 列模式,正向排列
column-reverse 列模式,反向排列
说明:主轴可以是水平,也可以是垂直;如果设置主轴为水平,垂直方向为交叉轴,如果设置主轴为垂直,水平方向为交叉轴。
3.容器和项目
父盒子叫做容器,给父盒子开启弹性布局
子盒子叫做项目,会将行内元素块状化
4.主轴的对齐方式
Justify-content 定义项目在主轴上的对齐方式
flex-start 主轴起点对齐
flex-end 主轴终点对齐
center 居中对齐
space-between 两端对齐
space-around 每个项目平均分配间距
space-evenly 项目之间的间距是相同的
5.项目的换行
flex-wrap
no-wrap 不换行,默认的
wrap 换行,当容器的宽度小于项目宽度,会出现换行
wrap-reverse 在换行的同时,反向排列
6.主轴排列和项目换行的综合写法
flex-flow: 主轴排列 项目换行
例如: row wrap
7.交叉轴对齐方式
align-items:
flex-start 起点对齐
flex-end 终点对齐
center 居中对齐
注意事项:只是针对于交叉轴只有一行
三十三、弹性布局
1.交叉轴对齐
用于交叉轴有多行的情况
align-content:
flex-start 开始对齐
flex-end 结束对齐
center 居中对齐
space-between 两端对齐
space-around 每个项目左右平均分配边距
space-evenly 项目之间平均分配边距
2.项目排序规则
order
默认值是0,可以是负数,数字越小,排序越靠前
3.项目的增长规则
flex-grow 用于对剩余空间的分配
默认为0,有剩余空间的时候,不会分配
如果设置为1,有剩余空间的时候,会自动放大,占全部剩余空间
如果每个项目中都有这个属性,则表示要分配剩余空间的比例
第1个项目1,第2个项目2,第3个项目1
1/(1+2+1) 2/(1+2+1) 1/(1+2+1)
4.项目的收缩规则(了解)
flex-shrink
项目在容器中的收缩规则,只有项目总的宽度超过了容器才会使用这个属性
默认值1,当容器空间不足时,项目默认收缩
如果值0,当容器空间不足时,项目不会收缩
当值为n,表示空间不足的时候,项目收缩的比例
例如:项目1收缩值1,项目2收缩值1,项目3收缩值2
1/(1+1+2) 1/(1+1+2) 2/(1+1+2)
5.项目的初始尺寸(了解)
flex-basis
项目在主轴上的初始尺寸,一旦这个属性设置以后原来宽度(高度)就会失效
如果主轴在水平方向,宽度会失效
如果主轴在垂直方向,高度会失效
6.综合写法
flex: 增长规则 收缩规则 初始尺寸;
如果只写一个值,表示增长规则,例如 flex:1
三十四、过渡
表示元素两种样式的变化过程
Transition: 要过渡的属性 总时长 延时 运行曲线
过渡的属性: all 代表所有的属性 可以省略
总时长:整个过渡的时长,单位是秒(s)
延时:在过渡执行前要等待的时长 可以省略
运动曲线:运动速度,通常使用匀速linear;默认是ease(先快再慢)
cubic-bezier.com
注意事项:除了总时长和延时两者有先后之分,其它不分先后顺序。
https://developer.mozilla.org/zh-CN/docs/Web/CSS/css_animated_properties
三十五、转换(2D)
包含有位移、旋转、缩放、倾斜(斜切)
1.位移
transform: translate(水平方向, 垂直方向)
transform: translateX(水平方向)
transform: translateY(垂直方向)
转换的特点
不会脱离文档流,继续占位
属性值中使用的百分比相同对自身的值
只有行内块和块状元素可以使用,行内元素不能使用
2.旋转
transform: rotate(角度deg) 沿着中心点旋转
transform: rotateX(角度deg) 沿着x轴旋转
transform: rotateY(角度deg) 沿着y轴旋转
3.设置转换中心点
transform-origin: 水平方向 垂直方向;
4.缩放
transform: scale(倍数) 等比例缩放
transform:scaleX(倍数) 沿着x轴缩放
transform: scaleY(倍数) 沿着y轴缩放
5.倾斜(斜切) —— 了解
transform: skew(水平方向, 垂直方向)
如果只写一个值表示水平方向
transform: skewX(水平方向)
transform: skewY(垂直方向)
三十六、动画
1.定义动画
@keyframes 自定义动画名称{
from {
动画的开始属性
}
to {
动画结束的属性
}
}
多组动画
@keyframes 自定义动画名称 {
0%{ }
20% { }
…
100% { }
}
2.调用动画
animation: 动画名称 总时长 延时 运动曲线 运动次数 是否反向 播放状态
运动次数默认是1,无限循环infinite
是否交替,默认是不交替,交替是alternate
播放状态,默认是播放,running,暂停是paused
控制动画暂停
animation-play-state: running/paused;
三十七、兼容性
针对于低版本的浏览器,CSS中加入了浏览器专属前缀
谷歌/Safari -webkit-
火狐 -moz-
欧朋 -o-
三十八、文字阴影
text-shadow: 水平 垂直 羽化 颜色
响应式网页:根据设备的宽度自动切换
三十九、媒体查询
@media (min-width: 576px) { }
@media (min-width: 768px) { }
@media (min-width: 992px) { }
@media (min-width:1200px) { }
@media (min-width:1400px) { }
四十、视口标签
为了让网页的宽度为设备的宽度
快捷键 meta:vp
四十一、bootstrap
是Twitter公司的开发的UI框架,用于响应式网站开发的一款框架
使用文档
https://v5.bootcss.com/docs/5.1/getting-started/introduction/
1.容器
container 用于设置响应式的版心
container-fluid 宽度为100%的容器
2.断点
已经写好的媒体查询
3.表格
table是基础的类,也可以根据需要添加不同的类
table-striped 条纹效果,隔行换色
em 相对于父元素的文字大小
rem 相对于根元素(html)的文字大小
四十二、栅格化布局
将一个盒子分成了12份,在不同的设备宽度下,可以设置占的份数(n)
1400以上 col-xxl-{n}
1200以上 col-xl-{n}
992以上 col-lg-{n}
768以上 col-md-{n}
576以上 col-sm-{n}
设置盒子的偏移量
让盒子左侧留出空白列
offset-{n}
四十三、图标字体
1.下载图标字体和对应的CSS文件
2.在网页中引入CSS文件
3.查找图标对应的代码,粘贴即可
四十四、SCSS
CSS预处理器,可以让CSS成为一种编程语言
增加了变量、函数、循环、判断… 让CSS编程变的更加简洁清晰
除了SCSS以后,还有less、stylus等CSS预处理器
网址 www.sasscss.com
1.编译
(1)版本
早起SCSS文件的后缀名 .sass,版本3开始后缀名 .scss
(2)步骤
新建一个.scss文件
使用scss插件编译文件,就会生成css文件
四十五、SCSS规则
1.注释
//注释的内容
2.嵌套
后代选择器可以嵌套在内
.box {
span{ }
}
编译后
.box span{ }
四十六、SCSS的基本语法
1.变量
使用 $声明变量;用于保存重复使用的值
$width: 200px; 变量保存了一个长度值
$shadow: 5px 7px 5px rgba(0,0,0,0.5); 变量保存了一个阴影的值
.box {
width: $width;
box-shadow: $shadow;
}
2.父选择器
使用&代表上一级的选择器,也就是父选择器
搭配伪类、子代等选择器
.box{
&:hover{ }
&>span{ }
}
.box:hover{ }
.box>span{ }
四十七、混入
@mixin 创建混合指令的语法
@include 调用混合指令
@mixin boa(
a
,
a,
a,b,$c) {
width: $a;
height: $b;
border-radius: $c;
}
.box {
@include boa(400px,200px,5px); //混入进来
}
MYSQL
一.数据的存储方式有哪些
特定的文件/内存/第三方云服务器/数据库服务器
二.什么是数据库
数据库按照一定的形式来组织存储数据,目的是为了便于操作数据 —— 增删改查
三.数据库发展历史
网状数据库 -> 层次型数据库 -> 关系型数据库 -> 非关系型数据库(NoSQL)
关系型数据库逻辑结构
Server -> Database -> Table -> Row -> Column
数据库服务器 数据库 数据表 行 列
四.mysql数据库
oracle:MySQL
马丁:MariaDB
xampp
服务器套装,保护多款服务器端软件,包含mysql,…
1.mysql部署结构
(1)服务器端:负责存储、维护数据 —— 银行的数据库服务器
C:/xampp/mysql/bin/mysqld.exe 启动文件
占用端口3306
(2)客户端:负责连接服务器,对数据进行操作 —— 银行的ATM机
C:/xampp/mysql/bin/mysql.exe
2.使用客户端连接服务器端
mysql.exe -h127.0.0.1 -P3306 -uroot -p
-h 连接的服务器,IP地址/域名 127.0.0.1/localhost 自己电脑的IP地址和域名
-P mysql所占用的端口
-u 提供用户名,root是mysql的管理员账户
-p 提供root对应的密码,xampp下root密码为空
mysql -uroot 简写形式
连接命令结束不能加分号
练习:反复的尝试连接,连接后退出连接。
3.常用的管理命令
quit; 退出服务器的连接
show databases; 显示所有的数据库
use 数据库名称; 进入指定的数据库
show tables; 显示所有的数据表
desc 数据表名称; 描述指定的数据表的表头有哪些项
五.SQL命令
结构化查询语言,用于操作关系型数据库服务器,主要对数据进行增删改查
1.SQL命令运行方式
(1)交互模式
客户端输入一行,点击回车,服务器就执行一行,适用于临时性的查看数据。
(2)脚本模式
把要执行的所有命令写在一个脚本文件中,一次性的提交给服务器执行,适用于批量的操作数据。
mysql -uroot<拖拽要提交的脚本文件 回车
2.SQL命令的语法规范
(1)一条SQL命令可以跨越多行,以英文的分号作为结束
(2)SQL命令不区分大小写,习惯上关键字大写,非关键字小写
(3)假设某一条SQL命令出现语法错误,则此条命令往后所有命令不再执行
(4)分为单行注释和多行注释
– 单行注释
#单行注释
/* 多行注释 */
六.常见的SQL命令
1.丢弃数据库,如果存在
drop database if exists 数据库名称;
2.创建新的数据库
create database 数据库名称;
3.进入创建的数据库
use 数据库名称;
4.创建数据表
create table 数据表名称(
列名称 列类型,
…
);
mysql单词
http://www.codece.com/archives/152
七、数据操作
1.插入数据
insert into 数据表名称 values(…);
2.删除数据
delete from 数据表名称 where 条件;
3.修改数据
update 数据表名称 set 列名称=值, … where 条件;
4.查询数据
select * from 数据表名称;
八、计算机存储字符
1.如何存储英文字符
ASCII:对所有的英文及其符号进行编码,总共有128个
Latin-1:对欧洲字符进行了编码,总共有256个,兼容ASCII;MySQL默认使用这种编码
2.如何存储中文字符
GB2312:对6000多汉字进行了编码,兼容ASCII
GBK:对2万多汉字进行了编码,兼容GB2312
Unicode:对世界上主流国家常用的语言进行了编码,具体有三种存储方案,utf-8,utf-16,utf-32
3.解决中文乱码
(1)确保脚本文件的编码是utf8
(2)设置客户端连接服务器端编码为utf8
set names utf8;
(3)设置服务器端创建数据库存储字符的编码为utf8
charset=utf8
4.针对于个别情况,还是出现乱码
退出交互模式
执行 chcp 65001 将命令行编码改为utf-8
重新进入交互模式查询数据
MySQL可视化操作
链接:https://pan.baidu.com/s/1H83zMsr0lavOGymYzmdD8w
提取码:ga2x
九、列类型
在创建数据表的时候,指定的列存储的数据类型
create table t1(
nid 列类型
);
1.数值型
tinyint 微整型,占1个字节,范围-128~127
smallint 小整型,占2个字节,范围-32768~32767
int 整型,占4个字节,范围-2147483648~2147483647
bigint 大整型,占8个字节,范围
float 单精度浮点型,占4个字节,存储的值越大精度越低
double 双精度浮点型,占8个字节,存储的值越大精度越低
decimal(M,D) 定点小数,占16个字节,M代表总的有效位数,D代表小数点后的位数
boolean 布尔型,只有两个值,分别是true和false,存储只有两个值的数据,例如:性别、是否为会员、是否为推荐商品…
true和false是关键字,不能加引号
布尔型在使用的时候会转为tinyint,true转为1,false转为0,也可以直接插入1或者0
2.日期时间型
date 日期型 格式 ‘2022-10-30’
time 时间型 格式 ‘14:55:30’
datetime 日期时间型 格式 ‘2022-10-30 14:55:30’
3.字符串型
varchar(M) 变长字符串,不会产生空间浪费,数据操作速度相对慢,常用于存储变化长度的数据,例如:姓名、文字标题、详情… M的最大值是65535
char(M) 定长字符串,可能会产生空间浪费,数据操作速度相对快,常用于存储固定长度的数据,例如:手机号码、身份证号码… M的最大值是255
text(M) 大型变长字符串,M的最大值4G
varchar(5) char(5)
a a\0 a\0\0\0\0
ab ab\0 ab\0\0\0
一二三 一二三\0 一二三\0\0
选择合理列类型
create table t1(
id int,
title varchar(64),
birthday date,
age tinyint,
phone char(11),
sex boolean
);
数据库存储图片,存储的是图片的路径
img/1.jpg
img/huawei.png
十、列约束
mysql可以对插入的值进行验证,例如:编号不能出现重复、性别只能是男或者女、一个人的成绩范围0~100之间… 只有符合条件才允许插入
create table t1(
pid int 列约束
);
1.主键约束 —— primary key
声明了主键约束的列上,不允许插入重复的值,一个表中只能有一个主键约束,通常加在编号列,会加快数据的查询速度
null 表示一个暂时无法确定的值,例如:暂时无法确定商品的价格、无法确定一个员工的手机、家庭住址…
null 是关键字,不能加引号
主键约束禁止插入null
2.非空约束 —— not null
声明了非空约束的列,禁止插入null。
3.唯一约束 —— unique
声明了唯一约束的列不允许插入重复的值,一个表中可以使用多次唯一约束
允许插入null,甚至多个null
一旦使用了唯一约束,可能会影响到数据的默认排序
4.检查约束 —— check
也称为自定义约束,可以自己指定约束条件
create table student(
score tinyint check(score>=0 && score<=100)
);
mysql不支持检查约束,极大影响数据插入速度。
5.默认值约束 —— default
(1)设置默认值
create table ht_event(
ctime date default ‘2022-8-31’
);
如果不设置默认值,则为null
(2)应用默认值
①在插入值的位置,使用default关键字,就会自动应用默认值
insert into ht_event values(3,‘事件测试’, default);
②给指定的列提供值,没有出现的列会自动应用默认值
insert into ht_event(eid, title) values(4,‘事件测试’);
6.外键约束
声明了外界约束的列插入的值必须在另一个表的主键列出现,目的确保两个表之间建立关联。
外键列要和对应的主键列的类型要保持一致
foreign key(外键列) references 另一个表(主键列)
十一、自增列
auto_increment:自动增长,声明了自增列,只需要赋值为null,就会获取最大值然后加1插入
注意事项:必须添加在整数型的主键列
十二、简单查询
1.查询特定的列
实例:查询出所有员工的编号和姓名
select eid,ename from emp;
练习:查询出所有员工的姓名,性别,生日,工资
select ename,sex,birthday,salary from emp;
2.查询所有的列
select * from emp;
3.给列起别名
示例:查询出所有员工的编号,姓名,使用一个字母作为别名
select eid as a,ename as name from emp;
练习:查询出所有员工的姓名,性别,工资,使用1个字母作为别名
select ename as a,sex as b,salary as c from emp;
select ename a,sex b,salary c from emp;
4.显示不同的记录
示例:查询出员工都分布在哪些部门
select distinct deptid from emp;
练习:查询出都有哪些性别的员工
5.查询时执行计算
示例:查询出所有员工的姓名及其年薪
select ename,salary*12 from emp;
练习:假设每个员工增长2000,年终奖30000,查询出所有员工的姓名及其年薪,使用一个字母作为别名;
select ename,(salary+2000)1280+30000 as s from emp;
6.查询的结果排序
示例:查询出所有的部门,结果按照编号升序排列
select * from dept order by did asc;
示例:查询出所有的部门,结果按照编号降序排列
desc -> descendant 降序的
desc -> descrobe 描述
select * from dept order by did desc;
练习:查询出所有的员工,结果按照工资的降序排列
select * from emp order by salary desc;
练习:查询出所有的员工,结果按照年龄从大到小排序
select * from emp order by birthday asc;
练习:结果按照名字排序
select * from emp order by ename asc;
练习:查询出所有的员工,结果按照工资降序排列,如果工资相同,就按照姓名降序排列
select * from emp order by salary desc,ename;
练习:查询出所有的员工,结果按照性别升序排列,如果性别相同按照年龄从大到小排列
select * from emp order by sex asc,birthday;
7.条件查询
查询出编号为5的员工
select * from emp where eid=5;
练习:查询姓名为原批的员工
select * from emp where ename=‘原批’;
练习:查询出所有的女员工
select * from emp where sex=0 order by ename desc;
练习:查询出20号部门的员工
select * from emp where deptid=20;
练习:查询出公司在8000以上的员工有哪些
select * from emp where salary>8000;
比较运算符:> < >= <= !=(不等于)
练习:查询出不在20号部门的员工
select * from emp where deptid!=20;
练习:查询出没有明确部门的员工
select * from emp where deptid is NULL;
练习:查询出有明确部门的员工
select * from emp where deptid is not NULL;
练习:查询出工资在8000~10000之间的员工有哪些
select *from emp where salary>=8000 && salary <= 10000;
练习:查询出8000以下的男员工
select * from emp where salary<8000 && sex=1;
select * from emp where salary<8000 and sex=1;
练习:查询出10000以上或者8000以下的员工有哪些
select * from emp where salary>10000 || salary<8000;
练习:查询出20号部门或者30号部门的员工有哪些
select * from emp where deptid=20 or deptid=30;
select * from emp where deptid in(20,30);
练习:查询出不在20号部门并且不在30号部门的员工
select * from emp where deptid not in(20,30);
练习,全部保留注释写一遍
练习 查询出工资在6000在10000之间的男员工,要求结果按照工资的降序排列
select * from emp where salary>=6000 && salary<=1000 && sex = 1
order by salary desc;
8.模糊条件查询
示例:查询出姓名中含有字母e的员工
select *from emp where ename like ‘%e%’;
练习:查询出姓名中以e结尾的员工
select *from emp where ename like ‘%e’;
练习:查询出姓名中倒数第2个字母是e的员工
selece *from emp where ename like ‘%e_’;
9.分页查询
查询的结果有太多,一次显示不完
需要有两个已知的条件,当前页码、每页的数据量
每页开始查询的值=(当前页码-1)*每页的数据量
语法:
select * from emp limit 开始查询的值,每页的数据量;
练习:假设每页显示5条数据,查询出前4页
第1页
select *from emp order by salary limit 0,6;
第2页
select *from emp limit 6,6;
第3页
select *from emp limit 12,6;
第4页
select from emp limit 18,6;
注意事项:不能写计算,不能打引号
十三、复杂查询
1.聚合查询,需要一组聚合函数
count() sum() avg() max() min()
数量 总和 平均 最大 最小
示例:查询出所有员工的数量
select count() from emp;
练习:使用编号列查询数量;
select count(eid) from emp; – 21
练习:使用所属部门列查询数量
select count(deptid) from emp; – 20
练习:查询出所有女员工的工资总和
select sum(salary) from emp where sex=0;
练习:查询出20号部门的平均工资
select avg(salary) from emp where deptid=20;
练习:查询出10号部门的最高工资
select max(salary) from emp where deptid=10;
练习:查询出年龄最大的女员工
select min(birthday) from emp where sex=0;
2.分组查询
示例:查询出男女员工的数量,工资总和分别是多少
select count(eid),sum(salary),sex from emp group by sex;
练习:查询出各部门的平均工资,最高工资,最低工资
select avg(salary),max(salary),min(salary),deptid from emp group by deptid;
函数 year() 获取日期中的年份部分
select year(‘2022-09-01’) ;
示例:查询出1990年出生的员工
select * from emp where year(birthday)=1990;
练习:查询出每个员工的姓名及其出生的年份
select ename,year(birthday) from emp;
3.子查询:多个查询命令的组合,把一个查询的结果作为另一个的查询条件
示例:查询出年龄最大的女员工
步骤1:查询出年龄最大的女员工的生日
select min(birthday) from emp where sex=0
步骤2:通过生日查询员工
select *from emp where birthday = ‘1983-07-15’;
综合
select *from emp where birthday=(select min(birthday) from emp where sex=0)
练习:查询出高于平均工资的员工有哪些
select *from emp where salary>(select avg(salary) from emp);
练习:查询出和xin同一个部门的员工
select *from emp where deptid=(select deptid from emp where ename=‘xin’);
select *from emp where deptid=(select deptid from emp where ename=‘xin’) && ename!=‘xin’;
练习:查询出和tom同一年出生的员工有哪些
select *from emp where year(birthday)=(select year(birthday) from emp where ename=‘tom’) && ename!=‘tom’;
4.多表查询,要查询的列分布在多个表中
示例:查询出所有员工的姓名及其部门名称
select ename,dname from emp,dept where deptid=did;
select emp.ename,dept.dname from emp,dept where emp.deptid=dept.did;
内连接
select ename,dname from emp inner join dept on deptid=did;
JS
一、JS概述
1.历史
1995年,JS最早出现在网景的浏览器中
1996年,IE中也开始出现了JS
1997年,制定了JS的标准规范,ECMAScript
2009年,JS开始向后端发展,出现了Node.js
2.JS的学习步骤
了解背景知识 > 搭建开发环境 > 打印输出hello world > 变量和常量 > 数据类型 > 运算符 > 逻辑结构 > 函数和对象 > 第三方的库和框架 > vue react 小程序 > 个人项目
有基础的可以看
程序员必做50题
JavaScript高级程序设计
二、运行方式
1.内部写法
2.外部写法
(1)先创建01.js文件
(2)引入外部文件
三、JS语法规范
1.区分大小写
2.每行代码结束的分号可以省略
3.分为单行注释(//)和多行注释(/* */)
四、变量
用于存储数据的容器
1.声明
var x=1 声明一个变量
var a=2, b=3 声明多个变量
使用关键字var来声明变量,x表示变量名称,会在内存中开辟空间,然后把后边的值1存进去。
2.变量的命名规则
(1)变量名称可以由字母、数字、下划线(_)、美元符号($)组成
(2)不能以数字开头
(3)不能使用关键字
(4)不推荐使用汉字
语义化:看到变量名称就知道存的是什么内容。
username email
多个单词之间命名方式
user_name 下划线命名 userName 驼峰命名
yongHuMing
3.变量的赋值
变量声明不赋值为undefined(未定义),是一个空值
变量允许多次赋值,并且赋不同类型的值(这是弱类型语言特点),后边会把前边的给覆盖
JS单词
http://www.codece.com/archives/90
/* CSS注释 /
// JS单行注释
/ JS多行注释 */
五、常量
和变量一样,都是存储数据的容器
(1)声明后必须赋值,不允许为空
(2)不允许重新赋值
六、数据类型
分为原始类型和引用类型
原始类型分为数值型、字符串型、布尔型、未定义型、空
1.数值型
10进制
1 2 3 4 5 6 7 8 9 10 … 15 16
8进制:以0开头的数字,例如012
1 2 3 4 5 6 7 10 11 12…
16进制:以0X开头的数字,例如0XF 不区分大小写
1 2 3 4 5 6 7 8 9 a … f 10
浮点型
3140
3.14E3
31.4E2
2.字符串型
被引号所包裹的值,引号不区分单双引号
检测数据类型
typeof 值
‘number’/‘string’/‘boolean’/‘undefined’/‘object’
查看任意一个字符的编码
‘a’.charCodeAt()
3.布尔型
只有两个值,分别是true和false,表示真和假,用于保存只有两个值的数据,例如是否登录,是否为会员,是否已婚…
4.未定义型
只有一个值是undefined,表示一个空值;例如声明变量未赋值就是undefined
5.空
只有一个值是null,常和引用类型的数据一起使用
七、数据类型转换
分为隐式转换和强制转换
1.隐式转换
运算过程中,自动产生的转换
(1)数字+字符串 数字转为字符串
2 +’3’ //‘23’
(2)数字+布尔型 布尔型转为数字 true->1 false->0
2+true //3
2+false //2
(3)字符串+布尔型 布尔型转为字符串
‘2’+true //‘2true’
JS中加号(+)的作用
数字之间的加法运算
字符串之间的拼接运算
NaN : Not a Number 不是一个数字,是在将一个值转换为数字的过程中,没有成功的得到数字结果就是NaN;NaN和任何数字执行数学运算结果还是NaN
函数:是一个功能体,提供若干的数据,返回结果。—— 饺子机
所有的隐式转换为数字会自动调用函数Number
2.强制转换
(1)强制转换为数字
Number()
Number(‘3’) //3
Number(‘3a’) //NaN
Number(true) //1
Number(false) //0
Number(undefined) //NaN
Number(null) //0
(2)强制转换为整型
parseInt()
用于将小数或者字符串转为整型,其它类型转换结果为NaN
parseInt(3.5) //3
parseInt(‘6a’) //6
parseInt(‘a6’) //NaN
(3)强制转换为浮点型(小数)
parseFloat()
用于将字符串转为浮点型,其它类型转换结果为NaN
parseFloat(‘3.14a’) //3.14
parseFloat(‘75’) //75
parseFloat(‘a3.14’) //NaN
(4)转字符串(了解)
toString()
用于将数字和布尔型转为字符串
var n=2
n.toString() //‘2’
八、运算符
表达式:由运算符连接的操作数据组成的格式,最终会是一个值
运算符分为算术运算符、比较运算符、逻辑运算符、位运算符、赋值运算符、三目运算符
1.算术运算符
-
-
- / % ++ –
% 取余
++ 自增,变量的值自动加1
– 自减,变量的值自动减1
var n2=3
// 先把n2的值赋给n3,然后n2再执行自增
var n3=n2++
var n4=3
// 先让n4执行自增,然后再把自增结果赋给n5
var n5=++n4
2.比较运算符
- / % ++ –
-
< >= <= == != === !==
== 等于,比较两个值是否相同
!= 不等于,比较两个值是否不相同
=== 全等于,不仅比较两个值是否相同,还会比较类型是否相同
!== 不全等于,比较的是两个值不相同或者类型不相同
(1)数字和字符串比较,字符串转为数字
3>‘10’ //false
(2)字符串之间比较,比较的是字符的编码
‘3’>‘10’ //true
‘3’ -> 51 ‘1’ -> 49
NaN和任何值比较(> < >= <= == ===)结果都是false
3.逻辑运算符
&& 逻辑与,关联的两个条件都是true结果是true,否则是false
|| 逻辑或,关联的两个条件有一个是true,结果是true,否则false
! 逻辑非,取反向 !true -> false !false -> true
短路逻辑
&& 当第一个条件为false,最终结果就是false,不再执行第二个条件
|| 当第一个条件为 true,最终结果就是true,不再执行第二个条件
4.位运算符(了解)
模拟计算机底层的运算,先把值转为2进制再进行运算,运算完再把结果转回成10进制
10进制 1 2 3 4 5 6 7
2进制 1 10 11 100 101 110 111
& 按位与,上下两位比较,都是1结果是1,否则是0
| 按位或,上下两位比较,有一个是1结果是1,否则是0
^ 按位异或,上下两位比较,不同是1,否则是0
5&7 3&5 7|13 9^15
101 011 0111 1001
111 101 1101 1111
——— ——— ——— ———
101 001 1111 0110
5 1 15 6
5.赋值运算符
= += -= *= /= %= …
赋值 运算赋值:先执行运算再执行赋值
6.三目(元)运算符
一目运算符:由一个运算符连接了一个表达式 ++ – !
二目运算符:由一个运算符连接了两个表达式
三目运算符:由两个运算符连接了三个表达式
条件表达式 ? 表达式1 : 表达式2
当条件表达式为true,执行表达式1
当条件表达式为false,执行表达式2
九、操作网页元素
1.查找网页元素
给标签设置id属性,一个网页中id的值不能出现重复的
按钮
2.给按钮绑定事件,监听用户操作
btn.οnclick=function(){ 点击事件
一旦监听到用户的操作,要执行的内容
}
cont.οnfοcus=function(){ } (输入框)获取光标
cont.οnblur=function(){ } (输入框)失去光标
3.弹出警示框
alert()
4.修改标签之间的内容(修改HTML)
cont.innerHTML=值
5.修改标签的CSS样式
cont.style.样式名称=值 例如:cont.style.display='none' cont.style.fontSize='20px' 属性名如果是多个单词组成,采用驼峰命名法程序=数据+算法
程序的执行方式:顺序执行、选择执行、循环执行
十、流程控制(选择执行)
if语句
满30减15
if(条件表达式){
语句块
}
如果if后的语句块中只有一行语句,则大括号可以省略
以下值作为条件表达式会转为false: 0 NaN ‘’ undefined null
十一、流程控制
1.if-else语句
if(条件表达式) {
语句块1
}else{
语句块2
}
2.if-else嵌套
是多项判断
if(条件表达式1){
语句块1
}else if(条件表达式n){
语句块n
}else{
语句块n+1 // 以上所有的条件都是false
}
3.switch-case语句
是一种特殊的多项分支语句,条件只能进行全等于的比较
switch(表达式){
case 值1: //如果表达式和值1比较相同
语句块1
break //结束,跳出整个switch-case语句
case 值n:
语句块n
break
default: //表达式和每个值比较的都是false
语句块n+1
}
说明:如果表达式在和case的值比较过程中,一旦为true,就不再和后边case的值进行比较了。
十二、循环
循环是重复的执行相同或者相似的代码
循环的两个要素
循环条件:控制循环是否往后执行
循环体:要重复执行的相同或者相似代码
1.while循环
while(循环条件){
循环体
}
2.break
用于循环体,作用是强制结束循环
3.do-while循环
do{
循环体
}while(循环条件)
第一次执行循环体没有判断
从第二次开始才会进行判断循环条件
4.for循环
for(初始值; 循环条件; 增量){
循环体
}
5.break和continue
两者都是用于循环体
break 用于结束循环
continue 用于跳过剩余的循环体,还会继续往后执行
6.循环嵌套
在一个循环的循环体中出现了另一个循环,任意两种循环之间都可以相互嵌套
十三、函数
parseInt()/parseFloat()/Number()…
函数:是一个功能体,提供若干数据,返回结果
函数分为系统函数和自定义函数
自定义函数:用于封装要重复执行的代码
1.创建自定义函数
function 函数名称(){
函数体 —— 重复执行的代码
}
调用
函数名称() //就会执行一次函数体中的代码
2.创建带有参数的函数
function 函数名称(参数列表){ //用于接收外部传递的值
函数体
}
调用
函数名称(参数列表) //就是实际传递的值
创建函数时的参数叫做形参,调用函数时的参数叫做实参,实参会赋值给形参,两者的数量可以不匹配,如果形参未被赋值则为undefined
素数(质数)
在1以上的整数中,除了1和自身以外,不能被其它的数字整除。
9
1 2 3 4 5 6 7 8 9
3.创建带有返回值的函数
function 函数名称(参数列表){
函数体
return值 //返回值,外部调用后得到的结果
}
调用
函数名称(参数列表) //得到函数的返回值
return用于返回函数调用后的结果
如果函数中没有写return,或者return后没有值返回的结果是undefined
一旦return执行,就会结束函数的调用
对比return和break
return用于函数中,结束函数的调用
break用于循环和switch-case,结束循环或者switch-case语句
十四、变量的作用域
全局作用域,在函数以外的作用域,只有一个全局作用域
函数作用域,在函数以内的作用域,可能有多个函数作用域
全局变量,在全局作用域下声明的变量,可以在任意作用域下访问到
局部变量,在函数作用域下声明的变量,只能在所在的函数作用域访问到
在函数内,不加var声明的变量是全局变量
在程序执行前,会将var声明的变量提升到所在作用域的最前边,只是提升声明部分,赋值不提升
形参属于是局部变量,只能在函数内访问
十五、函数的作用域
全局函数,在全局作用域下创建的函数,可以在任意的作用域下调用
局部函数,在函数作用域下创建的函数,只能在当前的函数作用域下调用
作用域链:作用域之间嵌套所形成的作用域结构;在查找变量的时候,先往当前作用域下查找,如果没有会沿着作用域链往上一级不断查找。
函数提升,程序执行前,会将函数整体提升到所在作用域的最前边
十六、匿名函数
function(){ }
1.创建函数
函数声明
function fn(){
}
函数表达式
var fun=function(){
}
变量名称就是函数名称
以上两种写法是等价
正常的情况下,函数先提升,变量声明再提升
如果函数名称和变量名称相同,函数提升后,变量声明就不再提升了
(1)对比函数名称和函数名称()
函数名称,本质上是一个变量,变量中保存了一个函数类型的值
函数名称(),在调用函数,执行函数体中的代码
(2)对比函数声明和函数表达式区别
函数声明存在函数的整体提升,可以先写调用再写创建
函数表达式只是存在声明提升,必须先写创建再写调用
函数本身也是一个值,类型是’function’
部署到云服务器 = 前端+后端
2.解决全局污染
全局作用域:在一个html中script标签下,默认就是全局作用域;每一个外部的js文件,也都是在全局作用域下。
全局污染:全局变量的出现带来的影响
解决全局污染:匿名函数自调用
;(function (){ (注意开头的;)
在函数作用域,变量都是局部变量
})()
3.回调函数
就是把一个函数类型的值作为参数传递,传递的函数就称作回调函数;回调函数会自动调用
function xin(madai){
madai() //调用传递进来的函数
}
function ming(){
}
xin(ming)
xin(function(){ })
回调函数的作用:用于获取函数调用后的结果
获取函数调用后结果两种方式
①通过返回值
②通过回调函数,把值放入到回调函数的参数中
十七、递归
递归是函数内调用自身这个函数
递归使用不当会产生内存泄露(把分配的内存空间占满,无法运行其它程序)
递归本身是一个死循环,用递归解决循环的问题。
如何使用递归:要有边界条件,结合着return来使用
斐波那契数列:第1、2项的值是1,从第3项开始,每一项是前两项相加的和。
1 1 2 3 5 8 13 21 34 55
1 1 1 1 1 1
1 1 1 1
1 1 1
1 1
1 1
1
1
1
递归课后拓展
http://www.codece.com/archives/102
十八、系统函数
isNaN( ) 用于检测用户输入的值是否含有非数字, 有->true 没有->false
十九、对象
是一组属性和方法的集合
一部手机:属性有颜色、尺寸、品牌、CPU、内存… 方法有打电话、玩游戏、看视频、听音乐、办公…
一辆汽车:属性有颜色、品牌… 方法有代步、拉货…
万物皆对象
1.JS对象分类
自定义对象:自己创建的对象
内置对象:JS提供的对象,可以直接使用
宿主对象:根据不同的环境划分
2.创建自定义对象(字面量)
使用{ }创建空对象
{ 属性名: 属性值, 属性名: 属性值, … }
属性名如果含有特殊字符,必须添加引号
3.访问属性
对象.属性名
对象[‘属性名’]
如果属性不存在结果是undefined
undefined出现位置:变量声明未赋值,函数没有返回值,函数中没有传参
4.创建自定义对象 (内置构造函数)
new Object( ) 创建一个空对象{},需要单独添加属性。
5.遍历属性
依次访问对象中的每个属性
for(var k in 对象){
k 属性名
对象[k] 属性值
}
6.检测属性是否存在
对象.属性名===undefined true -> 不存在 false -> 存在
对象.hasOwnProperty(‘属性名’) true -> 存在 false -> 不存在
‘属性名’ in 对象 true -> 存在 false -> 不存在
二十、模板字符串
反引号之间的内容就是模板字符串${JS表达式}
解决了字符串的拼接
二十一、对象中的方法
就是一个函数
var p={
name: ‘新哥’,
tan: function(){
this 指向调用当前方法的对象
}
}
p.tan() //调用方法
二十二、数据的存储
1.原始类型
直接将数据存储到栈内存
2.引用类型
包含函数、对象、数组
会将值存储到堆内存中,会自动生成一个地址
Var xin={ }
把对象的生成的地址保存到栈内存
引用类型数据如果不被任何的地址所指向就会自动销毁
null 是一个空地址,没有指向任何堆内存数据
如果要销毁引用类型的数据,只需要赋值为null即可
二十三、数组
数组是一组数据的集合,每个数据是一个元素
1.创建 —— 数组字面量
[元素1, 元素2, … ]
2.访问数组元素
下标(索引):是JS自动为每个元素添加的编号,从0开始的一个整数 >=0
数组[下标]
如果元素不存在,返回的结果是undefined
3.数组的长度
数组.length 获取元素的个数
(1)在数组的末尾添加元素
数组[数组.length] = 值
(2)清空数组
数组.length = 0
4.创建数组 —— 内置构造函数
new Array(元素1, 元素2, …)
new Array(3) 初始化长度值,可以添加更多个元素
5.数组的分类
关联数组:以字符串作为下标 (了解)
索引数组:以>=0的整数作为下标
6.数组和对象的区别
两种都可以存储一组数据,对象是通过属性存储每个值,数组是通过元素存储每个值
对象存储数据是无序的,可以不分先后顺序;数组存储的数据有序的,可以进行排列。
7.遍历数组元素
依次访问每个元素
for(var k in 数组){
k 下标
数组[k] 元素
}
for(var i=0;i<数组.length;i++){
i 下标
数组[i] 元素
}
二十四、数组
API:是JS中预定义的函数和方法
1.数组的API
数组中提供的方法
toString()
将数组转为字符串,元素之间用逗号分隔
join()
将数组转为字符串,可以指定元素之间的分隔符号
concat(数组1,数组2,…) 拼接多个数组
如何学习一个API:知道它的作用、参数、返回值
数组API还需要查看原数组是否会发生变化。
slice(start,end) 截取数组元素,start开始下标,end结束下标,end为空会截取到最后,如果下标为负数表示倒数,不包含结束的这一项。返回截取到元素,元素组不会发生变化。
reverse() 翻转数组元素,原数组会发生变化
sort() 对数组元素进行排序,默认是按照编码排序
sort( function(a,b){
return a-b //按照数字从大到小排列
return b-a //按照数字从小到大排列
})
push() 在数组的末尾添加元素,返回数组长度,原数组会发生变化
pop() 删除数组末尾的一个元素,返回删除的元素,原数组会发生变化
unshift() 在数组的开头添加元素,返回数组长度,原数组会发生变化
shift() 删除数组开头的一个元素,返回删除的元素,原数组会发生变化
indexOf() 检测数组汇总是否含有某个元素,存在返回下标,不存在返回-1
2.二维数组
用于对一组数据进行二次分类,数组中的元素还是数组
[[ ],[ ],[ ]]
3.字符串对象
包装对象
目的是让字符像对象一样,具有属性和方法;JS提供了三种包装对象,分别是字符串对象、布尔对象、数字对象。
new String() 将一个字符串包装为对象
String() 将一个值转为字符串
(1)转义字符
改变字符本身的意义
\’ 将具有特殊意义的引号转为普通字符
\n 将字符n转为换行符
\t 将字符t转为制表符(多个连续空格,Tab键功能)
(2)API
length 获取字符串的长度
charArt(下标) 通过下标获取某一个字符,也可以使用数组写法 字符串[下标]
indexOf() 查找某个字符串第一次出现位置,返回下标,找不到返回-1
lastIndexOf() 查找某个字符串最后一次出现位置,返回下标,找不到返回-1
toUpperCase() 英文字母转大写
toLowerCase() 英文字母转小写
所有的字符串API都不会影响到原来的字符串
slice(start,end) 截取字符串,start 开始的下标,end 结束的下标,end为空截取到最后,不包含end本身,下标为负数表示倒数
split() 将字符串转为数组
二十五、Math对象
数学对象,提供了一组数学运算的API
不需要通过new来创建对象,就可以使用API
圆周率 Math.PI
绝对值 absolute Math.abs(-3)
取整 parseInt(3.14)
向上取整 Math.ceil(1.2)
向下取整 Math.floor(1.2)
四舍五入取整 Math.round(1.2)
计算x的y次方 pow(x,y)
获取一组数字最大值,不能直接写数组 max()
获取一组数字最小值,不能直接写数组 min()
获取随机数,范围>=0 & <=1 random( )
二十六、Date对象
用于日期时间的存储和计算
1.创建
new Date(‘2022/9/6 11:38:30’)
new Date( 2022,8,6,11,38,30 ) 第2个参数月份存储的值0~11 对应 1~12月
new Date( ) 存储当前操作系统的时间
new Date( 16300000000 ) 存储的是距离计算机元年的毫秒数
2.转为本地字符串
toLocaleString( ) 存在兼容性问题,只能用于项目开发调试
3.获取存储的值
getFullYear( ) 获取年
getMonth( ) 获取月份 月份的值0~11
getDate( ) 获取日期
getHours( ) 获取小时
getMinutes( ) 获取分钟
getSeconds( ) 获取秒
getMilliseconds( ) 获取毫秒
getDay( ) 星期,范围0~6 对应日~六
getTime( ) 获取Date对象时间戳
Date.now( ) 获取当前时间的时间戳
4.设置存储的值
SetFullYear( ) 设置年
setMonth( ) 设置月
setDate( ) 设置日
setHours( ) 设置小时
setMinutes( ) 设置分
setSeconds( ) 设置秒
setMilliseconds( ) 设置毫秒
5.拷贝Date对象
new Date( Date对象 )
二十七、Number对象
New Number( ) 将一个数字包装为对象
Number( ) 将一个值强制转为数字
toFixed( n ) 保留小数点后n位
二十八、Boolean对象
New Boolean( ) 将一个布尔值包装为对象
Boolean( ) 将一个值强制转换为布尔型
!!值 将一个值隐式转换为布尔型
二十九、错误处理
1.常见错误
语法错误(SyntaxError):出现了中文符号,缺号半块括号等,代码书写不符合语法规范。
引用错误(ReferenceError):使用了未声明的变量
类型错误(TypeError):当前调用的不是一个函数类型
范围错误(RangerError):超出了JS的规定范围,例如:递归使用不当
自定义错误:程序员自己指定的错误
throw 错误内容
2.错误处理
即使出现了错误,不会阻止后续代码执行
try{
尝试执行,可能会产生错误,出现错误不会阻止后续代码执行
}catch(err){
一旦try中出现错误,就会捕获错误,将错误信息放入到err中
}
NodeJS
一、ES6新特性
ECMAScript JS标准规范
ECMAScript6 -> ES6,是JS的第6套标准
ES2015 ES2016 … ES2022
1.块级作用域
let声明的变量也会提升,进入到暂时性的死区,只有在赋值后才允许访问
不允许重复声明
大括号之间的语句块就是块级作用域:例如:if、else、while、for… 在块级作用域下,let和const声明的只能在块级作用域下访问,是局部变量或者常量。
2.参数增强
可以给参数设置默认值
function add(a,b,c=0){
// es6之前设置默认值的方式
b=b || 0
}
add(5000)
逻辑运算符赋值,选择把其中一个表达式赋给变量;
如果执行了第一个表达式,没有执行第二个表达式,就会把第一个表达式赋给变量
如果执行了第一个表达式,又执行了第二个表达式,就会把第二个表达式赋给变量
var n1 =1 || 2
var n2 =3&&2
console.log(n1,n2)// 1,2
3.箭头函数
( )=>{ }
简化了匿名函数,不等价于匿名函数
sort( ( a,b )=>{
return a-b
} )
如果箭头函数的函数体中只有一行代码,并且是return形式,可以进一步简化
sort( (a,b)=>a-b )
二、Node.js概述
Node.js是JS的一种运行环境,通过这个环境可以让JS实现后端开发。
www.nodejs.org
1.对比JS
(1) JS运行在客户端浏览器,存在多种解释器,有代码兼容性问题;Node.js运行在服务器端,只有一种谷歌V8引擎解释器,没有代码兼容性问题。
(2) 两者都有相同的内置对象、自定义对象,不同的宿主对象。
(3) JS用于操作网页元素,完成网页交互;Node.js用于服务器端操作,访问数据库、调用其他的服务器。
2.运行JS
都是在命令行下完成
(1)脚本模式
node 拖拽脚本文件
(2)交互模式
node 回车 进入交互模式
两次ctrl+c 或者 一次ctrl+d 退出交互模式
3.特点
属于单线程运行逻辑
三、全局对象
在任意作用域下,可以直接访问的对象
1.global对象
用来检测一个变量或者函数是否为全局的
var a=1
console.log( global.a )
JS下global名称为:window
Node.js下,每个文件都是一个局部作用域下,不存在全局污染
JS下,每个文件都是在全局作用域下,存在全局污染
2.console对象
控制台对象,提供了一组用于控制台输出的API
console.log(1) //打印日志
console.info(2) //打印消息
console.warn(3) //打印警告
console.error(4) //打印错误
console.time( ) //开始计时
console.timeEnd( ) //结束计时
3.process对象
进程:计算机上的每个软件都是进程
process.arch 查看当前cpu的架构
process.platform 查看当前的操作系统
process.pid 查看当前的进程编号
process.kill( ) 结束指定编号的进程
4.Buffer对象
缓冲区,用于临时存储数据,是一个内存空间。
//创建buffer,分配空间大小(单位字节),并存储字符串
var buf=Buffer.alloc(7,‘ycSB哈’) //汉字占3个字节
console.log(buf)
console.log( buf.toString( ) ) // 将Buffer数据转字符串
四、 模块
每一个文件就是一个模块,每个模块都是一个功能体。
module.exports 当前模块暴露的对象,默认是一个空对象
require( ) 是一个函数,用于引入其他模块,得到暴露的对象
主模块:
//引入功能模块08_yan.js
//注意事项:引入同一级目录下的模块,必须写路径
//引入成功后,得到的是该模块暴露的对象
var obj=require(‘./08_yan.js’)
console.log(obj.ss)
功能模块:
08.yan.js
console.log(‘这是袁超的眼睛模块’)
//暴露输出一个圆的面积
var r=0
function S®{
return rr3.14
}
module.exports={ (这里的等号很容易忘,注意!)
ss:S, (这里一个逗号不能忘,否则报错)
}
模块下的局部变量
console.log(__filename)//当前模块的绝对路径+绝对名称
console.log(__dirname) //当前模块所在目录的绝对路径
五、模块分类
模块分为自定义模块、核心模块、第三方模块
以路径开头 不以路径开头
文件模块 require(‘./circle.js’)
用于引入自定义模块
目录模块 require(‘./02_wenjian’)
会到目录下去寻找package.json中main属性对应的文件,如果找不到会自动寻找index.js require(‘02_wenjian’)
会自动到当前目录的node_modules目录中寻找02_wenjian目录模块,会一直往上一级目录的node_modules目录中寻找。用于引入第三方模块
六、包和NPM
CommonJS:是一种模块化规范,Node.js就是采用了这种规范,例如:引入模块用require,暴露用modile.exports
包(package):指的是第三方模块,需要下载安装才可以使用,是目录的形式。
NPM:是用来管理包的工具模块,在Node.js安装的时候已经附带安装
npm –v 查看版本号
网站:npm (npmjs.com)
常用的NPM命令
npm init –y 初始化一个package.json文件,作为项目描述文件
npm install 包名称 下载安装指定的包,会将所有包保存到node_modules目录,如果不存在会自动创建;在package.json中记录安装的这个包;还会生成package-lock.json文件,记录所有包的相关信息。
npm install 自动安装package.json中记录的包
七、网址(URL)
URL:统一资源定位,互联网上的任 何资源(网页、图片、CSS、JS、视频、声音)都有对应的网址用于获取对应的资源
http://www.codeboy.com:9999/products.html?kw=小米#two
传输协议 域名/IP地址 端口号 文件路径 查询字符串 锚点
查询字符串:前端往后端传递参数的一个形式,包含参数名和参数值两部分
参数名=参数值&参数名=参数值
user = admin&pwd =123456
new URL( ) 将一个网址转换为对象,可以获取网址中各个部分
searchParams 获取网址中的查询字符串部分
get( 参数名 ) 通过参数名获取参数值
八、定时器模块
提供一组定时器相关的全局函数
1.一次性定时器
开启
var timer=setTimeout( 回调函数,间隔时间 )
当间隔时间到了,会调用一次回调函数,时间单位是毫秒
清除
clearTimeout(timer)
2.周期性定时器
开启
var timer=setInterval( 回调函数,间隔时间)
每隔一段时间,调用一次回调函数
清除
clearInterval(timer)
3. 立即执行定时器
开启
var timer=setlmmediate( 回调函数 )
清除
clearlmmediate(timer)
第二种立即执行定时器 开启
如果和上面的一起执行,那么这个定时器会排在首位
process.nextTick( 回调函数 )
定时器中的回调函数会放入到主程序后的事件队列(一组回调函数组成)
同步和异步方法
同步:在主程序中执行,会组织主程序后续代码的执行;通过返回值获取结果。
异步:在一个独立的线程执行,不会阻止主程序后续代码的执行;通过回调函数获取结果
九、文件系统模块(fs)
用于操作服务器端的文件:例如:已经上传的图片、音乐,可以通过客户端删除。
需要先引入模块,才可以使用API
const 函数名=require(‘函数名’)
官方建议:const fs=require(‘fs’)
以下代码为 同步方法 / 异步方法
1.查看文件状态
statSync(‘文件的路径’) / stat(‘文件的路径’,回调函数)
isFile( ) //是否为文件
isDirectroy( ) //是否为目录
2.清空写入文件
writeFileSync(‘文件的路径’,写入的值) / write(‘文件的路径’,写入的值,回调函数)
如果文件不存在,会创建文件然后写入值
如果文件已经存在,会先清空文件的内容然后写入值
3.追加写入文件
appendFileSync(‘文件的路径’,写入的值) / appendFile(‘文件的路径’,写入的值,回调函数)
如果文件不存在,会创建文件然后写入值
如果文件已经存在,会在文件的末尾追加写入值
4. 读取文件
readFileSync(‘文件的路径’) / readFile(‘文件的路径’,回调函数)
读取的数据格式为Buffer
5.删除文件
unlinkSync(‘文件的路径’) / unlink(‘文件的路径’,回调函数)
6. 检测文件是否存在
existsSync(‘文件的路径’) 返回一个布尔型的值
7. 文件流
createReadStream(‘文件路径’) 以流的方式读取文件,会将文件分成多端
createWriteStream(‘文件路径’) 创建可写入的流
pipe() 管道,可以将读取的流添加到写入的流,完成文件拷贝
on(‘事件名称’,回调函数) 监听事件,一旦监听到事件会自动调用函数;事件名称是固定的字符串格式。
十、http协议
超文本传输协议,是客户端和WEB服务器之间的通信协议
1. 常规(通用消息头)
请求方法:要对服务器端资源的操作方式,常用方法有GET/POST/DELETE/PUT
状态码:查看响应的结果
1**:服务器接收到部分请求,还会继续其它的请求
2**:成功的响应
3**:响应的重定向,跳转到另一个资源
4**:客户端错误
5**:服务器端错误
2. 响应标头(响应报文) —— response
Location:设置要跳转的网址
Content-Type:设置响应的内容类型,解决中文乱码 text/html;charset=utf-8
3. 请求标头(请求消息头)—— request
4. HTTP请求过程
(1) 在浏览器中输入网址:服务器(域名/IP地址),端口
(2) 浏览器与服务器建立连接:三次握手
(3) 连接建立后,浏览器开发向服务器发送请求消息
(4) 服务器端接收到消息,处理请求,将消息响应给浏览器
(5) 浏览器与服务器断开连接,四次挥手
(6) 浏览器解析响应的消息,将数据渲染成网页呈现给用户
5. 请求的消息
(1)消息的格式
请求行:请求的方法、请求的地址 、协议版本号
请求头部:
请求头部名:请求头部值
请求主体:有的有请求主体(post、put),有的没有请求主体(get、delete)
(2)请求行解析
请求方法: get post delete put
请求的地址:要请求的服务器端的资源
协议版本号:HTTP/1.1
(3)请求头部解析
host:要请求的服务器端
Content-Type:请求的内容类型,post请求必须设置为
application/x-www-form-urlencoded
User-Agent:告诉服务器,当前浏览器版本和系统的一些参数
(4) 请求主体解析
GET请求是没有请求主题,因为把请求的参数放在了URL中
POST请求才会将参数放入到请求主体,格式为
参数名=参数值&参数名=参数值
6. 响应消息
(1)状态行
协议版本 状态码 原因短句
(2)响应的头部
Location 要跳转的地址
Content-Type 设置响应的内容类型
(3)响应主体
服务器端响应给客户端的结果;可能是html,js,css,json…
7.post请求,内容的编码类型
在传递参数的过程中,对数据进行的编码
application/x-www-form-urlencoded 允许任意的字符,编码格式
user=admin&pwd=123456
multipart/form-data 上传文件设置的编码格式
text/plain 纯文本格式
8.数据渲染
1.获取要渲染的HTML标签位置,给标签设置id值
2.修改标签的值,将指定的内容渲染 id值.innerHTML= 新的值
十一、http模块
是一个核心模块,可以用来创建WEB服务器
createServer( ) 创建WEB服务器
listen( ) 设置端口
通过事件监听浏览器的请求,一旦请求自动调用函数
on(‘request’,(req,res)=>{
res 响应对象
res.setHeader( ) 设置响应的消息头
res.write( ) 设置响应到浏览器的内容
res.end( ) 结束并发送响应
req 请求对象
req.url 请求的资源,格式 ‘/xxx’
req.method 请求的方法
} )
十二、express框架
基于Node.js平台,快速、开放、极简的WEB开发框架
https:\www.expressjs.com.cn
属于是第三方模块,需要先下载安装
npm install express
1.创建WEB服务器
const express=require(‘express’)
const app=express() //创建WEB服务器
app.listen(3000) //设置端口
2.路由
用来监听特定的一种请求;路由包含有三部分:请求的URL、请求的方法、回调函数
res 响应的对象
res.send() 设置响应的内容并发送
res.redirect() 设置响应的重定向
res.sendFile() 设置响应的文件,文件必须使用绝对路径 _dirname
req 请求的对象
req.method 获取请求的方法
req.url 获取请求的资源
req.query 获取get传递的参数
十三、路由传参
传参方式 格式 路由获取
get传递 http://127.0.0.1:3000/search?a=1&b=2 req.query{a:1,b:2}
十四、表单标签
表单用于提交按钮点击后,向服务器发请求 action 设置请求的URL method 设置请求的方法,默认是get 表单控件中的name,用于设置参数名,用来接收用户输入的值。 十五、使用插件将post传参转对象 在路由前边使用 app.use( express.urlencoded ( { extended: true //内部是否使用第三方模块转对象 }) ) 十六、params传递 格式:http://127.0.0.1:3000/search/1/2 设置参数名 app.get(‘/search/:kw’,(req,res)=>{ req.params 获取params传递参数 }) http://127.0.0.1:3000/search/小米 十七、路由器 用来管理路由,包含一组路由;防止不同路由之间URL冲突 路由器 //1.引入express模块 const router=express.Router( ) //2.创建路由器对象 //3.往路由器对象添加路由 module.exports = router //4.暴露路由器对象 1 WEB服务器 //1.引入路由器模块 //2.挂载路由器,添加前缀 app.use(‘/pro’,引入的路由器)十八、中间件(插件)
用于拦截对服务器的请求;分为应用级中间件、路由级中间件、内置中间件、第三方中间件、错误处理中间件
1.应用级中间件
是一个函数,一旦拦截到以后会自动调用这个函数
function fn(req,res,next){
next() //往后执行,可能是下一个路由或者中间件
}
app.use( 拦截的URL, fn )
2.路由级中间件
就是路由器的使用,拦截到URL以后,到指定的路由器下寻找路由
app.use( URL, 路由器 )
3.内置中间件
express中提供的中间件,可以直接使用
(1)将post传参转为对象
app.use( express.urlencoded({
extended: true
}) )
(2)托管静态资源
静态资源:包括html、css、js、图片 … 都是固定的文件
托管静态资源:客户端如果要请求静态资源,不需要通过路由响应文件,而是让客户端自动的到指定的目录下寻找。
app.use( express.static(‘托管的目录’) )
4.第三方中间件
以第三方模块的形式出现,需要先下载安装才能使用
后期用到中间件 cors
5. 错误处理中间件
在所有路由/路由器后边;拦截所有路由错误
app.use((err,req,res,next)=>{
err 路由传递的错误
res.send({code:500,msg:’服务器端错误’})
} )
在路由中,执行
next(err) 就可以往后请求到错误处理中间件
下图示例:
十九、mysql模块
在项目中使用
mysql.exe -h127.0.0.1 -P3306 -uroot -p
mysql -uroot
增删改查
insert into 数据表名称 values(一组值);
delete from 数据表名称 where 条件;
update 数据表名称 set 列=值, 列=值 where 条件;
select * from 数据表名称 where 条件;
是Node.js下专门用于操作mysql数据库的模块
属于第三方模块,需要先下载安装
npm install mysql
createConnection() 创建连接对象
connect() 测试连接
query(SQL命令, 回调函数) 执行SQL命令,通过回调函数获取结果
createPool( ) 创建连接池对象,产生多个连接
query( SQL 命令,数组,回调函数 ) 执行SQL命令,通过回调函数获取结果,数组中存放的是一组要被过滤的值,会自动替换SQL命令中的占位符。
上述写完后,在其他js引入
1.mysql模块开启执行多个SQL命令
在创建连接池对象中添加指令:multipleStatements:true可以开启一次执行多个SQL命令
占位符(?):在SQL命令中负责占位,会被过滤的值替换
更简洁的方法:
SQL注入:用户提供的值中含有特殊的字符(一半是引号),会破坏原有的SQL命令,加入新的SQL命令;
mysql模块使用占位符就可以防止SQL注入
2.SQL命令成功的结果
查询数据:结果是数组
插入数据:结果是对象
删除数据:结果是对象,需要通过affectedRows判断,如果值为0说明删除失败,否则说明删除成功
修改数据:结果是对象,需要通过changedRows判断,如果值为0说明修改失败,否则说明修改成功
二十、接口
后端提供给前端的动态资源
RESTful接口:是一种接口的规范。
1.返回结果
格式为JSON(字符串形式对象,,包括状态码和消息说明,如果需要返回数据,还需添加查询的数据,例如
{“code”:400,”msg”:”该员工不存在”}
{“code”:200,”msg”:”查询成功”,”data”:查询的数据}
send方法会自动将JS对象转为JSON
2.接口地址
包含有版本号和资源名称
资源名称使用复数形式
http://127.0.0.1:3000/v1.0/emps
用户登录
http://127.0.0.1:3000/v1/users/login
Error [ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are sent to the client
以上错误:多次执行了send方法
解决:只能执行一次
3.请求方法
get 获取资源(查询数据)
post 新建资源(插入数据)
delete 删除资源(删除数据)
put 修改资源(修改数据)
练习:添加一个删除员工的接口(delete /v1/emps),get传递员工的编号,执行SQL命令,删除编号对应的员工
使用APIPost,新建接口,测试删除员工接口
4. 传参方式
get传递
用来过滤数据
例如:QQ音乐,歌手过滤; 分页过滤
http://127.0.0.1:3000/v1/emps?pno=1&count=10
页码 每页数据量
post传递
新建资源和修改资源
parms传递
传递单个资源
练习:添加修改员工数据接口(put /v1/emps),post传递的值有编号(修改条件),姓名、性别、生日、工资、部门;获取post传递的参数,执行SQL命令,修改编号对应的员工;如果修改失败响应{code:400,msg:’修改失败’},否则{cide:200,msg:’修改成功’}
新建接口测试
练习:添加员工列表接口(get /v1/emps/list),get传递当前的页码pno和每页的数据量count,执行SQL命令,进行分页查询;最后响应{code:200,msg:’查询成功’,data:查询的数据
练习:添加新闻详情的接口(get /detail),params传递新闻的编号(nid),获取传递的编号,查询编号对应的这条新闻,如果没有编号对应的数据,响应{code:400,msg:’该新闻不存在’}否则响应{code:200,msg:’查询成功’data:数据}
二十一、APIPost
专门用于接口测试的工具,会生成接口文档
二十二、AJAX
异步的JS和XML
使用AJAX可以实现局部渲染,增加用户体验
XML技术已经被JSON取代,成为前后端数据交换的一种格式。
JSON: 字符串对象,通常只放数组或者对象,对象的属性名必须用双引号,值是字符串也必须用双引号。 —— 也称为对象的序列化
1. 创建一个能够发起HTTP请求的对象
var xhr=new XMLHttpRequest()
2. 通过xhr打开服务器连接(要请求的接口)
xhr.open(参数1,参数2,参数3)
参数1:对应接口的请求的方法,例如:GET/POST 必须用大写
参数2:对应接口的地址
参数3:是否为异步请求,true->是 flase->否 默认为true
3. 添加事件,监听是否有服务器端响应,一旦响应会自动调用函数
xhr.onload = function(){
xhr.reponseText 接口响应的文本内容
}
4. 向服务器端发送
xhr.send() 发送的请求消息,没有请求主体
二十三、expres跨域的问题
两个服务器之间端口不同会产生跨域,不允许别的服务器请求
- 引入cors模块,属于第三方中间件
const cors=require(‘cors’)
2.使用cor中间件
app.use( cors() )
二十四、JSON
JS对象表示法,是前后端数据交换的一种格式
JSON.parse( ) 将JSON转为JS
JSON.stringify( ) 将JS转为JSON
通常JSON只有数组和对象
完成删除功能,点击删除,获取传递的编号,请求删除的接口(DELETE http://127.0.0.1:3000/v1/emps/拼接编号),如果删除成功,警示框弹出“删除成功”,否则弹出“删除失败”
完成员工列表,直接请求接口(get http://127.0.0.1:3000/v1/emps/list?pno=当前页码&count=每页数据量),完成效果
二十五、跨域错误
二十六、POST请求
Ajax中,post请求传递的参数放入到了请求主体,还需设置请求的内容类型
xhr.setRequestHeader(‘Context-Type’,’application/x-www-form-urlencoded’) 设置请求的内容类型,传递参数编码为 a=1&b=2 (数据库表头=数据)
xhr.send(‘a=1&b=2’) 传递的参数放入到了请求主体
注意事项:post和put两种都是将参数放入到请求主体
添加员工,点击按钮,获取用户输入的值,请求添加员工的接口(post http://127.0.0.1/v1/emps),警示框弹出“添加成功”
完成修改员工,点击提交,获取用户输入的值,请求接口(put http://127.0.0.1:3000/v1/emps),如果修改成功,警示框弹出‘修改成功’,否则‘修改失败’
二十七、正则表达式
专门描述字符串中字符出现规则的表达式
正则表达式验证的是字符串格式,不是固定死字符串内容
字符集[]:[0123456789]=[0-9],[a-z],[A-Z]
预定义字符集:\d
量词:{6}代表最多6位
位置匹配:开始^,结束$
正则表达式函数:
test() 验证是否符合规则
repalce(/wo/ig, ‘**’) 查找并替换 i忽略大小写,g全局查找
trim() 去除字符串两端的空格
http://www.codece.com/archives/273 常用正则表达式
Gitee
一.VCS系统
版本控制系统,用于项目中文件的存储、共享、历史回退、合并、代码追踪文件历史。
常用的软件
CVS 2000年以前
SVN 2010年以前
Git 2010年以后
二.Git中的常用概念
工作目录:是一个目录,用于保存项目中所有的文件
暂存区:是内存中的一个区域,用于临时存储项目中文件的编号
Git仓库:是一个特殊的目录,保存项目中所有的文件变化记录
三.Git中的常用命令
打开git命令行窗口:在项目所在目录的空白位置,单击鼠标右键 -> 点击“git bash here”
git --version 查看当前git的版本号
1.第一次使用Git软件前,告诉Git你是谁
git config --global user.name “自定义用户名”
git config --global user.email “用户邮箱”
2.查看配置列表
git config --list
3.初始化一个Git仓库,用来管理当前项目
git init
会在当前的工作目录下创建.git目录,保存项目中所有的文件
注意事项:一定要在项目所在的目录下打开命令行。
4.查看Git系统的状态
git status
可以追踪到文件的变化,例如:新文件出现、修改了文件、删除了文件…
5.将工作目录的文件添加到暂存区
git add 文件名称 将指定的文件添加到暂存区
git add . 将所有变化的文件添加到暂存区
6.将暂存区文件提交到Git仓库
git commit -m “提交说明”
提交说明给自己后期恢复用的,可以使用汉字
7.查看所有的提交日志
git log 只能查看之前的提交
git reflog 查看所有的提交和回退记录…
8.历史回退
git reset --hard 提交ID
从Git仓库恢复到工作目录
9.忽略文件
有些文件不需要Git系统来管理,可以忽略掉
使用编辑器创建文件 .gitignore,把要忽略的文件路径写进去
例如:node_modules目录通常就是要忽略的文件。
四.分支
在不影响主线的情况下,实现并行开发,Git默认只有一个主分支master
1.查看所有的分支
git branch
2.创建新的分支
git branch 分支名称
3.切换分支
git checkout 分支名称
4.合并分支
git merge 分支名称
5.删除分支
git branch -d 分支名称 删除已经合并的分支
git branch -D 分支名称 强制删除分支,不管合并与否
www.gitee.com
五.远程仓库(代码托管平台)
国内最大(码云):www.gitee.com
国际最大:www.github.com
删除Windows记录的用户名和密码
控制面板 -> 凭据管理器 -> Windows凭据
git push 仓库地址 分支名称 将Git仓库推送到远程仓库
git clone 仓库地址 将仓库下载到本地(本地没有仓库)
git pull 仓库地址 分支名称 将某一个分支拉取到本地(本地有仓库)
JS code