web应用

计算机网络，前端编程，前端框架、网络协议、网络交互页面等。介绍详细，知识全面，希望可以对大家有所帮助！

计算机web

网络分层

物理层

中继器

集线器

数据链路层

网桥

局域网（以太网）交换机

网络层

Internet网际协议

IPv4协议及其相关技术

一种无连接的协议，是互联网的核心，也是使用最广泛的网际协议版本，其后继版本为IPv6

寻址(addressing)

数据报

版本： 4bit ，表示采用的IP协议版本 首部长度： 4bit，表示整个IP数据报首部的长度 区分服务： 8bit ，该字段一般情况下不使用 总长度： 16bit ，表示整个IP报文的长度,能表示的最大字节为2^16-1=65535字节 标识： 16bit ， IP软件通过计数器自动产生，每产生1个数据报计数器加1；在ip分片以后，用来标识同一片分片 标志： 3bit，目前只有两位有意义。 MF，置1表示后面还有分片，置0表示这是数据报片的最后1个； DF，不能分片标志，置0时表示允许分片 片偏移： 13bit，表示IP分片后，相应的IP片在总的IP片的相对位置 生存时间TTL(Time To Live) ：8bit,表示数据报在网络中的生命周期，用通过路由器的数量来计量，即跳数（每经过一个路由器会减1） 协议：8bit，标识上层协议（TCP/UDP/ICMP…） 首部校验和：16bit ，对数据报首部进行校验，不包括数据部分 源地址：32bit，标识IP片的发送源IP地址 目的地址：32bit，标识IP片的目的地IP地址 选项：可扩充部分，具有可变长度，定义了安全性、严格源路由、松散源路由、记录路由、时间戳等选项 填充：用全0的填充字段补齐为4字节的整数倍 ———————————————— 版权声明：本文为CSDN博主「Dreamchaser追梦」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。 原文链接：https://blog.csdn.net/qq_46101869/article/details/118108697

分片(fragmentation)

数据报长度大于传输链路的MTU

分片策略

重组策略

路由器

传输层

传输层中最为常见的两个协议分别是传输控制协议（TCP）和用户数据报协议（UDP）。

传输层提供逻辑连接的建立、传输层寻址、数据传输、传输连接释放、流量控制、拥塞控制、多路复用和解复用、崩溃恢复等服务。

应用层

HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，要比http协议安全。

网络协议

概述

构成

分类

接入

功能

路由

确定数据分组从源到目标所使用的路径（全局操作）

转发

分层模型

OSI参考模型 开放系统互联参考模型 （Open System Interconnection/ Reference Model）

网络协议

HTTP协议 超文本传输协议 由万维网制定(w3c)

浏览器与服务器通讯的应用层协议， 规定了浏览器与服务器之间的交互规则 以及交互数据的格式信息等。

HTTP协议对于客户端与服务端之间的交互规则有以下定义:

要求浏览器与服务端之间必须遵循一问一答的规则，即:浏览器与服务端建立TCP连接后需要先发送一个请求(问)然后服务端接收到请求并予以处理后再发送响应(答)。注意，服务端永远不会主动给浏览器发送信息。

HTTP要求浏览器与服务端的传输层协议必须是可靠的传输，因此是使用TCP协议作为传输层协议的。

HTTP协议对于浏览器与服务端之间交互的数据格式，内容也有一定的要求。

浏览器给服务端发送的内容称为请求Request 服务端给浏览器发送的内容称为响应Response 请求和响应中大部分内容都是文本信息(字符串)，并且这些文本数据使用的字符集为:

ISO8859-1.这是一个欧洲的字符集，里面是不支持中文的!!!。而实际上请求和响应出现的字符也就是英文，数字，符号。

请求Request 请求是浏览器发送给服务端的内容，HTTP协议中一个请求由三部分构成: 分别是:请求行，消息头，消息正文。消息正文部分可以没有。

GET /index.html HTTP/1.1 Host: localhost:8088(CRLF) Connection: keep-alive(CRLF) Upgrade-Insecure-Requests: 1(CRLF) User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.130 Safari/537.36(CRLF) Sec-Fetch-User: ?1(CRLF) Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9(CRLF) Sec-Fetch-Site: none(CRLF) Sec-Fetch-Mode: navigate(CRLF) Accept-Encoding: gzip, deflate, br(CRLF) Accept-Language: zh-CN,zh;q=0.9(CRLF)(CRLF) 1010101101001.....

1:请求行

请求行是一行字符串，以连续的两个字符(回车符和换行符)作为结束这一行的标志。

回车符:在ASC编码中2进制内容对应的整数是13.回车符通常用cr表示。

换行符:在ASC编码中2进制内容对应的整数是10.换行符通常用lf表示。

回车符和换行符实际上都是不可见字符。

请求行分为三部分:

请求方式(SP)抽象路径(SP)协议版本(CRLF) 注:SP是空格

GET /myweb/index.html HTTP/1.1

URL地址格式:

协议://主机地址信息/抽象路径

http://localhost:8088/TeduStore/index.html

GET /TeduStore/index.html HTTP/1.1

2:消息头

消息头是浏览器可以给服务端发送的一些附加信息，有的用来说明浏览器自身内容，有的

用来告知服务端交互细节，有的告知服务端消息正文详情等。

消息头由若干行组成，每行结束也是以CRLF标志。

每个消息头的格式为:消息头的名字(:SP)消息的值(CRLF)

消息头部分结束是以单独的(CRLF)标志。

3:消息正文

消息正文是2进制数据，通常是用户上传的信息，比如:在页面输入的注册信息，上传的附件等内容。

HTTP响应Response 响应是服务端发送给客户端的内容。 一个响应包含三部分:状态行，响应头，响应正文

HTTP/1.1 404 NotFound(CRLF) Content-Type: text/html(CRLF) Content-Length: 2546(CRLF)(CRLF) 1011101010101010101......

1:状态行

HTTP/1.1 200 OK

状态行是一行字符串(CRLF结尾)，并且状态行由三部分组成，格式为 protocol(SP)statusCode(SP)statusReason(CRLF): 协议版本(SP)状态代码(SP)状态描述(CRLF)

状态代码是一个3位数字，分为5类：

1xx:保留

请求的数据量大（如post请求），先请求，然后再传输

2xx: 成功

表示处理成功，并正常响应

200 OK

201 Created

203 Non-Authoritative Information

204 服务器不回应

206

3xx: Redirection重定向

表示处理成功，但是需要浏览器进一步请求

300 Multiple Choices

301 Moved Permanently

302 Found

303 See Other

304 Not Modified

305 Use Proxy

306 (Unused)

307 Temporary Redirect

4xx:客户端错误，表示客户端请求错误导致服务端无法处理

400 Bad Request

请求参数格式错误

401

403：权限不足

404 Not Found

页面不存在

405 Method Not Allowed

请求方式不不正确

5xx:服务端错误，表示服务端处理请求过程出现了错误

500

具体的数字在HTTP协议手册中有相关的定义，可参阅。

状态描述手册中根据不同的状态代码有参考值，也可以自行定义。通常使用参考值即可。

2.响应头:

响应头与请求中的消息头格式一致，表示的是服务端发送给客户端的附加信息。 浏览器接收正文前会根据上述两个响应头来得知长度和类型从而读取出来做对应的处理以显示给用户看。

Content-Type

用来告知浏览器响应正文中的内容是什么类型的数据(图片，页面等等) 不同的类型对应的值是不同的，比如:

文件类型 Content-Type对应的值 html text/html css text/css js application/javascript png image/png gif image/gif jpg image/jpeg

Content-Length

用来告知浏览器响应正文的长度，单位是字节。

3:响应正文:

2进制数据部分，包含的通常是客户端实际向服务器请求的并得到响应的资源内容。

HTTP协议为无状态协议 （一次请求对应一次响应）

会话管理技术

保存客户端数据 如：登录状态、用户名和密码

Cookie（） 记住用户名和密码

数据默认保存在浏览器内存中，浏览器关闭时数据会清除， 可设置保存时间保存到自己的本地磁盘中，时间到之后会从磁盘中删除

只保存字符串类型的数据，数据量只有几k

Session(银行卡) 记录登录状态

数据保存在服务器的内存中，时长为半个小时。 可修改，但不建议，因为内存资源紧张

TCP协议

传输控制协议 TCP是面向连接，数据包有序、无差错到达接收端 属于可靠传输。

FTP文件传输

HTTP、HTTPS

流水线技术

GBN

SR

TCP报文段

（1）端口号：用来标识同一台计算机的不同的应用进程。

客户端根据需要那种服务，从而发送到特定的目的端口

端口划分为三个类别，其范围介于1到65,535之间。

—公认端口（服务器用）：

与通用网络应用程序相关联的目的端口称为公认端口这些端口的范围从1到1023。

—注册端口：

端口1024到49151可作为源端口或目的端口使用。组织可使用这些端口注册即时消息等应用程序。

—私有端口（客户机用）：

端口49152到65535通常作为源端口使用。

总结：服务器端口号小且固定不变；客户机的端口号大（上万）且不固定；

（2）源端口：源端口和IP地址的作用是标识报文的返回地址。

（3）目的端口：端口指明接收方计算机上的应用程序接口。

（4）序号（sequence number）：Seq序号，占32位，用来标识从TCP源端向目的端发送的字节流，发起方发送数据时对此进行标记。

（5）确认号（acknowledgement number）：Ack序号，占32位，只有ACK标志位为1时，确认序号字段才有效，Ack=Seq+1。

URG：1 紧急数据

ACK：1 确认序号有效。

PSH：1 接收方应该尽快将这个报文交给应用层。

RST：1 重置连接。

SYN：1 发起一个新连接。

FIN：1 释放一个连接。

控制位

Stop and Wait

三次握手

三次挥手我们也常称为“请求 -> 应答 -> 应答之应答”的三个回合， 主要就是为了建立连接

第一次握手： 客户端向服务器发送 SYN 报文 (SEQ=x，SYN=1)，并进入 SYN_SENT 状态，等待服务器确认

第二次握手： 实际上是分两部分来完成的，即 SYN+ACK (请求和确认) 报文

服务器收到了客户端的请求，向客户端回复一个确认信息 (ack=x+1)

服务器再向客户端发送一个 SYN 包 (SEQ=y)建立连接的请求，此时服务器进入 SYN_RECV 状态

第三次握手： 客户端收到服务器的回复 (SYN+ACK 报文0)；此时，客户端也要向服务器发送确认包 (ACK)；此包发送完毕客户端和服务器进入 ESTABLISHED 状态，完成 3 次握手

四次挥手

目的就是确保断开连接时双方都是确认结束的状态

第一次挥手: 客户端向服务器端发送断开 TCP 连接请求的 [FIN，ACK] 报文，在报文中随机生成一个序列号 SEQ=u，表示要断开 TCP 连接

此时，客户端进入FIN_WAIT_1 (终止等待1) 状态

第二次挥手: 当服务器端收到客户端发来的断开 TCP 连接的请求后，回复发送 ACK 报文，表示已经收到断开请求。回复时，随机生成一个序列号 SEQ=v；由于回复的是客户端发来的请求，所以在客户端请求序列号 SEQ=u 的基础上加 1，得到 ack=u+1

此时，服务端就进入了CLOSE_WAIT (关闭等待) 状态，客户端收到ACK后，就进入FIN_WAIT_2 (终止等待2) 状态

第三次挥手: 服务器端在回复完客户端的 TCP 断开请求后，不会马上进行 TCP 连接的断开。服务器端会先确认断开前，所有传输到客户端的数据是否已经传输完毕。确认数据传输完毕后才进行断开，向客户端发送 [FIN，ACK] 报文，设置字段值为 1。再次随机生成一个序列号 SEQ=w；由于还是对客户端发来的 TCP 断开请求序列号 SEQ=u 进行回复，因此 ack 依然为 u+1

此时，服务器就进入了LAST_ACK (最后确认) 状态

第四次挥手: 客户端收到服务器发来的 TCP 断开连接数据包后将进行回复，表示收到断开 TCP 连接数据包。向服务器发送 ACK 报文，生成一个序列号 SEQ=u+1；由于回复的是服务器，所以 ACK 字段的值在服务器发来断开 TCP 连接请求序列号 SEQ=w 的基础上加 1，得到 ack=w+1

此时，客户端就进入了TIME_WAIT (时间等待) 状态；注意此时TCP连接还没有释放，必须经过2MSL (最长报文段寿命) 的时间后，当客户端撤销相应的TCB后，才进入CLOSED状态

常用的端口号及其功能

21 FTP FTP服务器所开放的控制端口

23 telnet 用于远程登入，可以远程控制管理目标计算机

25 SMTP SMTP服务器开放的端口，用于发送邮件

80 HTTP 超文本传输协议

110 POP3 用于邮件接收

RFC文档

request for comment

UDP

用户数据报协议 UDP面向无连接，报头开销小协议处理简单，可以尽可能快地发送报文 无建立连接的延迟，不限制发送速率 多数情况下，为不可靠传输，会发生数据包丢失的情况。

容忍丢包但对延迟敏感的应用：

如流媒体

以单次请求/响应为主的应用：

如DNS

若应用要求基于UDP进行可靠传输：

由应用层实现可靠性

UDP报文

源端口号（16） 目标端口号（16） UDP长度（16） UDP校验和（16） 数据报的长度是指包括报头和数据部分在内的总字节数。 UDP协议使用报头中的校验值来保证数据的安全。

常用的端口号及其功能

69 TFTP 简单文件传输协议

111 RPC 远程过程调用

123 NTP 网络时间协议

网络交互页面

HTML

作用: 搭建页面结构 , 类似盖房子(毛坯房) HyperTextMarkupLanguage 超文本标记语言 标记语言格式:<开始标签 属性='值'>标签体</结束标签> 超文本: 指不仅仅是纯文本,还包括字体相关和多媒体相关(音频,视频,图片) 学习HTML主要学习的就是有哪些html标签,以及用法

声明 <!DOCTYPE html>

<html></html>

头<title></title>

<br>标签:换行 <a>双标签:超链接,href属性用于指定连接地址. <table>标签:表格。属性border用于指定边框。 <table>标签中包含<tr>标签用于表示行 <tr>标签中包含<td>标签用于表示列 <td>标签中常见属性: align:对其方式。left左对齐,right右对齐,center剧中对其 colspan:跨列合并列，合并是从左向右合并列 rowspan:跨行合并列，合并是从上向下合并列

身体<body></body>

文本标签

属性+属性值 align 对齐 left（默认）左对齐 center 居中 right 右对齐

标题 <h1></h1>

<h1-h6>双标签:标题独占一行，有1级-6级标题。一级字体最大，自带加粗和外间距

段落 <p></p>

换行 <br/>

水平分割线 <hr/>

加粗 bold <b></b>

斜体 italic <i></i>

删除线 strikethrough <s></s>

列表标签

列表嵌套: 有序列表和无序列表可以任意无限嵌套

无序列表 unordered list <ul></ul>

列表项 list item <li></li>

ul>li*6>a

批量生成

list-style: none;

去圆点

ul li:nth-child(1) a{ color: red; }

有序列表 ordered list <ol></ol>

图片标签

<img/>

src="" 设置资源路径

相对路径：访问站内资源使用

同级：图片名

上级： ../图片名(../../图片名)

下级： 同级目录名/文件名

绝对路径：访问站外资源，称为图片盗链

alt="" 无资源标注

title="" 鼠标滑过显示的标题

width="" 像素 百分比，只设置一项时，另一项等比例缩放

height=""

超链接

<a></a>

href="": 资源路径,作用和src类似

a标签包裹文本为文本超链接,包裹图片为图片超链接

页面内部跳转: 在href属性中添加#xxx 在目的地元素的里面添加id属性值为xxx

text-decoration: none;

去下划线

表格

<table></table>

相关属性:

border=""边框

colspan=""跨列

rowspan=""跨行

行 table row <tr></tr>

表头 table head <th></th>

字体自行加粗并居中

单元格 table data cell <td></td>

表单

form表单 <form></form>

作用: 获取用户输入的内容并提交给服务器

action=""

method="get/post"

action="/regUser" method="get" form表单是用于将用户在页面上输入的信息提交给服务端使用的组件。 form表单中应当包含若干的输入组件. 注意:只有包含早form标签中间的输入组件中用户输入的信息才会提交给服务端!! form上有两个重要的属性: action:用于指定表单提交的路径，该路径需要服务端配合处理 method:表单提交的形式，有两个可选项: GET:地址栏形式提交，表单数据会拼接到地址栏的URL中传递 POST:表单数据会被包含在请求的消息正文中被提交 当表单数据含有用户隐私信息或附件上传时应当使用POST。 method属性不指定时，默认是GET请求提交。 由于请求当前注册页面时，浏览器地址栏上的路径为: http://localhost:8080/reg.html 因此在当前页面上我们定义的表单<form action="/regUser">时，表单提交后的实际请求路径为: http://localhost:8080/regUser 而提交后，我们的服务端拿到该URL中抽象路径(/regUser)后，第一个"/"首先去定位static目录下是否有 该文件，若有则直接发送给浏览器 表单用get形式提交后，浏览器地址栏的样子 http://localhost:8080/regUser?username=fancq&password=123456&nickname=chuanqi&age=22 表单中<form action="/regUser" method="get"> method的值为get时，表达用地址栏形式提交表单数据。 此时表单数据会被拼接到URL的抽象路径中。与抽象路径的请求部分以"?"形式分开 抽象路径格式: 请求路径(action指定的内容)?参数部分 /regUser?username=fancq&password=123456&nickname=chuanqi&age=22 参数部分的格式: 参数名1=参数值1&参数名2=参数值2&... 参数名是表单中某个输入框name属性指定的值 参数值是表单中该输入框用户在其中输入的内容 get请求提交形式: /regUser?username=fancq&password=123456&nickname=chuanqi&age=22 post请求提交时，表单信息会被包含在请求的消息正文中。 <input type="submit" value="注册"> type="submit" 这是一个提交按钮,该按钮点击后会将包含这个按钮的form表单进行提交

文本输入框 <input/>

name=""：命名，尽量全部命名（否则提交时会被忽略）

value="":设置默认值、提交值

placeholder="":占位文本

maxlength="":最大字符长度

readonly:只读(只需要写属性名即可)

type属性=""

<input>标签:用来表示可以在浏览器上获取用户输入信息的组件 输入组件有多种样式,可以通过type属性指定 常见的样式: type="text" : 文本框 type="password" : 密码框 type="button" : 按钮 单选框和多选框要使用name属性分组,名字相同的为一组 type="checkbox" : 多选框 type="radio" : 单选框

text 文本框

password 密码框

radio 单选框 命名相同的选项只有一个 checked 默认选中

checkbox 多选框

date 日期选择器

file 文件选择器

submit 提交按钮

reset 重置按钮

下拉选择

<select> 选择

<option></option> 选项

</select>

文本域

<boxarea></boxarea>

button 自定义按钮

<button></button>

分区标签

<div></div> 独占一行

HTML5的版本中 新增了一些分区标签,这些标签的作用和div一样, 为了提高代码可读性

header 头

main 主体

footer 脚

nav 导航

section 区域

<span></span> 共占一行

CSS 样式

Cascading Style Sheet:层叠样式表 层叠样式表, 作用:美化页面, 相当于装修 通过CSS样式相关代码对页面进行美化

引入

内联样式

sytle="样式代码"

不能复用

内部样式

<sytle>选择器{样式代码}</sytle>

可以复用,但不能多页面复用

外部样式

<link rel="stylesheet" href="xxx.css"/>

外部: 在单独的css样式文件中写样式代码,

在html页面中通过link标签引入

优点：以实现多页面复用, 而且可以将html代码和css样式代码分离开 便于维护

选择器

作用: 通过选择器找到页面中的元素, 找到后再添加样式代码

标签名选择器

标签名{ 属性名: 属性值； ... }

匹配页面中所有同名标签

id选择器

#id{样式代码}

当需要选择页面中某一个元素时使用

类选择器

.class{样式代码}

当需要选择多个不相干的元素的时使用

分组选择器

div,#id,.class{样式代码}

将多个选择器合并成一个选择器

属性选择器

标签名[属性名='值']{样式代码}

通过元素的属性选择元素

任意元素选择器

*{样式代码}

匹配所有元素

子孙后代选择器

body div div p{样式代码}

通过元素之间的层级关系选择元素

子元素选择器

body>div>div>p{样式代码} 没有body会没有下限

匹配的是body里面的div里面的div里面的所有p子元素(不包含后代)

伪类选择器

a:link未访问/hover悬停/active点击或激活/visited访问过{样式代码}

选择的是元素的状态,包括:未访问,访问过,悬停,点击

样式代码

宽高

不设置会根据里面的内容调整

width

height

盒子模型

部分标签自带外边距或内边距 外边距: body自带四个方向的外边距 , h1-h6自带上下外边距, p标签自带上下外边距, 列表标签自带上下外边距 内边距: 列表标签自带内边距

margin外边距

作用:控制元素的显示位置 元素距上级元素或相邻兄弟元素的距离称为外边距 行内元素上下外边距无效 上下相邻彼此添加外边距取最大值, 左右相邻两个值相加 粘连问题: 当元素的上边缘和上级元素的上边缘重叠时,给元素添加上外边距会出现粘连问题,给上级元素添加overflow:hidden解决

margin-left/right/top/bottom: 10px; 单独某一个方向赋值

margin: 50px; 四个方向赋值

margin: 10px 20px; 上下10 左右20 , 居中: 0 auto

margin: 10px 20px 30px 40px; 上右下左 顺时针赋值

border边框

border:粗细 样式 颜色; 四个方向添加边框

border-left/right/top/bottom:粗细 样式 颜色; 单独某个方向添加边框

圆角: border-radius:20px; 值越大越圆, 超过宽高的一半为正圆

背景

background-color: 背景颜色赋值

三原色: 红绿蓝 RGB RedGreenBlue , 每个颜色的取值范围0-255 五种颜色赋值方式: 颜色单词赋值: red/pink/yellow/green.... 6位16进制赋值: #ff0000 3位16进制赋值: #f00 3位10进制赋值: rgb(255,0,0) 4位10进制赋值: rgba(255,0,0,0-1) a=alpha 代表透明度 值越小越透明

background-image:url("路径"); 设置背景图片

background-size:200px 300px; 设置背景图片的尺寸

background-repeat:no-repeat; 禁止重复

background-position: 横向偏移值/百分比 纵向偏移值/百分比; 设置背景图片的位置

padding内边距

作用: 控制元素内容的位置 默认情况下给元素添加内边距会影响元素的宽高, 添加以下样式后则不再影响 box-sizing:border-box;

padding-left/right/top/bottom:10px:单独某个方向赋值

padding:10px; 四个方向赋值

padding:10px 20px; 上下10 左右20

padding:10px 20px 30px 40px; 上右下左 顺时针赋值

context

内容（包括各种控件）

文本

color: 内容颜色赋值

text-align: left/right/center; 设置水平对齐方式

text-decoration: overline/underline/line-through/none; 文本修饰

text-shadow: 颜色 x偏移值 y偏移值 模糊度; 设置文本阴影

行

line-height: 20px; 设置行高，值等于

字体

font-size: 20px; 设置字体大小

font-weight: normal/bold; 设置加粗 和去掉加粗

font-style: italic; 设置斜体

font-family: xxx,xxx,xxx,xxx;设置字体

font: 20px xxx,xxx,xxx; 设置字体大小+字体

元素的显示方式

display

block: 块级元素, 特点: 独占一行,可以修改元素宽高, 包括: div,p,h1-h6

inline: 行内元素, 特点: 共占一行,不能修改元素宽高, 包括: span,a,b,i,u,s

如果行内元素需要修改宽高,可以将显示方式改成块级元素或行内块元素

inline-block:行内块元素,特点: 共占一行,可以修改元素宽高, 包括: input,img

none: 隐藏元素

flex

平行

定位

position

静态定位

static

元素默认的定位方式,也称为文档流定位

显示特点: 元素以左上为基准,块级元素从上往下依次排列, 行内元素从左向右依次排列,一般情况元素无法实现层叠显示的效果

格式: position:static

通过外边距控制元素的位置

相对定位

relative

格式: position:relative;

显示特点: 元素不脱离文档流(不管元素显示到哪里,仍然占着原来的位置,后面的元素不会顶上来)

通过left/right/top/bottom让元素相对于初始位置做偏移

绝对定位

absolute

格式: position:absolute;

显示特点: 元素脱离文档流(不占原来的位置)

通过left/right/top/bottom让元素相对于窗口(默认)或某一个上级元素做位置偏移,如果需要相对于某一个上级元素, 必须将上级元素改成相对定位

固定定位

fixed

格式: position: fixed;

显示特点: 元素脱离文档流,元素固定在窗口的某个位置, 不会随着内容位置的改变改变自身位置

通过left/right/top/bottom相对于窗口做位置偏移

float

浮动定位

格式: float:left/right;

显示特点: 元素脱离文档流,从当前所在行向左或向右浮动, 当撞到上级元素边缘或其它浮动元素时停止移动.

浮动定位一行装不下会自动折行, 折行时有可能被卡住

当某个元素的所有子元素全部浮动时,自动识别的高度为0,后面的元素会顶上来导致显示异常, 通过给元素添加overflow:hidden解决此问题

应用场景: 将纵向排列的元素改成横向排列时使用

justify-content: space-around;

对齐文本

align-items:

center

项目居中

flex-direction:

column;

成行

缩放动画设置

transition-duration：1.5s

设置动画持续时间

transform: scale(1.1)

设置缩放x,y

溢出设置

overflow

visible 显示（默认）

hidden 隐藏

scroll 滚动显示

行内元素的垂直对齐方式

verical-align:

baseline 基线对齐（默认）

top

middle

bottom

元素的显示层级

z-index：

值越大元素显示越靠前，默认值为0

三大特性

继承性

指元素可以继承上级元素文本和字体相关的样式,部分标签自带效果不受继承影响, 比如超链接字体颜色

层叠性

多个选择器可能选择到同一个元素, 如果添加的样式不同,则样式全部层叠生效, 如果作用的样式相同

优先级

选择器的优先级, 选择器作用范围越小 优先级会越高, id>class>标签名>继承(间接选中)

！important; 标记为最高优先级

javaScript 组件

作用: 给页面添加动态效果

语法基础

数据类型

JS语言中只有对象类型，并且类型之间可自动转换

string 字符串: 可以用单引号或双引号修饰 "abc" 'abc'

number数值: 相当于Java中所有数值类型的总和

boolean布尔值: true和false

undefined未定义: 当变量只声明不赋值时,变量的类型为未定义.

变量

JS语言属于弱类型语言, 声明变量时不需要指定类型

let声明的变量作用域类似于Java语言

在作用域之外不会报错但访问不到

var声明的变量 作用域相当于是Java中的全局变量,可以在任何地方调用

运算符

算术运算符: + - * / %

JS 除法运算 会自动根据结果转换整数或小数

java: int x=5; int y=2; int z = x/y; z=2

JS : let x=5; let y=2; let z = x/y; z=2.5 , x=6 z=3

关系运算符: > < >= <= != ==和===

==: 先统一两个变量的类型再比较值, "666"==666 true

===:先比较类型,类型相同之后再比较值, "666"===666 false

逻辑运算符: && || ! 只支持短路与和短路或

赋值运算符: = += -= *= /= %=

三目运算符: 条件?值1:值2

语句结构

if else

for

while

switch case

语言特点:

1. 属于弱类型语言

2. 属于脚本语言,不需要编译,由浏览器解析执行.

3. 基于面向对象的语言

4. 安全性强: JS语言只能访问浏览器内部的数据,

浏览器以外用户磁盘上面的数据禁止访问

5. 交互性强: JS语言是嵌入到html页面中运行在客户端电脑中的语言,更接近用户所以交互性更强,Java语言是运行在服务器的语言用户要想与之交互必须经过网络

引入

内联: 在标签的事件属性中添加JS代码, 当事件触发时执行

事件: 指系统提供的一些特定时间点

点击事件: 当用户点击元素时触发的时间点

内部

<script>js代码</script>

外部

<script src="xxx.js"></script>

三种声明方法的方式:

function 方法名(参数列表){方法体}

let 方法名 = function(参数列表){方法体}

let 方法名 = new Function("参数1","参数2","方法体");

方法可直接执行

JavaScript对象分类

内置对象: 指string,number,boolean等

JS语言自带的供开发者使用的对象，提供了一些常用的或是最基本而必要的功能。

Math对象

Date对象

Array对象

String对象

BOM

BrowserObjectModel浏览器对象模型, 包含和浏览器相关的内容

window对象

顶层对象，属于golbal对象，是所有变量的父亲 此对象中的属性和方法称为全局属性或全局方法, 访问时可以省略掉window.

window对象中常见的方法

isNaN() 判断变量是否是NaN(not a number)

parseInt()/parseFloat() 将字符串转成整数或小数, 将小数转成整数

alert("xxx") 弹出提示框

confirm("xxx") 弹出确认框

prompt("xxx") 弹出文本框

let timer = setInterval(方法名,时间间隔) 开启定时器

clearInterval(timer); 停止定时器

setTimeout(方法名,时间间隔) 开启只执行一次的定时器

history历史

history.length 得到历史页面数量

history.forward() 前往下一页面

history.back() 返回上一页面

history.go(n) n正值是前进 负值是后退 0是刷新

location位置

location.href="" 获取和修改浏览器的请求地址

location.reload() 刷新页面

location.search 相当于： ?+参数

localStorage

本地存储 localStorage 是 永久存储 的， 除非 手动清除 ，否则一直存在。 只能存储 字符串类型 数据。 如果是其他类型，则会自动转成字符换格式存储。

setItem(key: string, value: string): void;

添加

DOM

DocumentObjectModel文档对象模型, 包含和页面相关的内容

document

document.cookie 保存的用户数据

通过选择器查找页面中的元素对象

let 元素对象 = document.querySelector("css选择器");

获取或修改元素的文本内容

元素对象.innerText

元素对象.innerText = "xxx";

获取或修改控件的值

控件对象.value

空间对象.value = "xxx";

创建元素对象

let 元素对象 = document.createElement("标签名");

把元素添加到某个元素中

元素对象.append(新元素对象);

自定义对象

实例化空对象

let 自定义对象 = {}

属性/方法=值

实例化自带属性和方法的对象

let 自定义对象 = {属性/方法: 值}；

框架

前端MVC设计模式

MVC设计模式 是将实现前端某业务的代码划分为三部分

Model: 模型, 对应的是数据模型

View: 视图, 对应的是页面标签相关代码

Controller: 控制器, 对应的是将数据展示到页面中的过程代码

前端MVC设计模式弊端: 在Controller控制器部分 把数据展示到页面中时,需要频繁进行DOM操作(查找元素,创建元素等),影响执行的效率, MVVM设计模式可以解决此问题

MVVM设计模式

Model: 模型, 对应的是数据模型

View: 视图, 对应的是页面标签相关代码

VM: 视图模型, 将页面中可能发生改变的元素和某个变量在内存中进行绑定,并且会对变量进行监听, 当变量的值发生改变时,VM视图模型会自动从内存中找到对应的元素,这样就避免了每次通过DOM操作遍历查找元素了, 从而提高了执行效率

VUE

VUE是目前最流行的前端框架, 基于MVVM设计模式

VUE框架两种用法:

多页面应用, 在html页面中引入vue.js框架文件

引入外部vue.js文件的方式:

直接引入一个CDN服务器VUE框架的网址

把VUE框架文件（另存为）下载到本地,然后再引入

单页面应用, 通过脚手架的方式使用VUE框架

CDN服务器地址:以下推荐国外比较稳定的两个 CDN， 国内还没发现哪一家比较好，目前还是建议下载到本地。

Staticfile CDN（国内） :

unpkg：

cdnjs :

Vue框架工作原理: Vue对象相当于MVVM设计模式中的VM视图模型, 会将页面中可能发生改变的元素和data里面的某个变量进行绑定, 并且会不断监听变量值的改变, 当变量的值发生改变时,会自动从内存中找到对应的元素,并且将元素的显示内容修改掉.

VUE相关指令

new Vue({范围，属性，方法} ): v

el: "选择器"

data: {属性名:"属性值"， 属性名:"属性值"， 属性名:"属性值"} or data: function(){ return{ 属性名:"属性值"， 属性名:"属性值" } }（适用性更广）

属性

文本相关

{{变量}} : 插值, 让此处的文本内容和变量进行绑定

v-text="变量", 让元素的文本内容和变量进行绑定

v-html="变量", 让元素的标签内容和变量进行绑定

循环遍历

v-for: "变量 in 数组" 循环遍历指令, 遍历的同时生成当前元素

属性绑定

单向绑定

应用于标签属性

v-bind:属性名="变量", 让元素的某个属性的值和变量进行绑定

:属性名="变量" , 简写

双向绑定

一般用于input

v-model="变量", 让控件的值和某个变量进行双向绑定, 变量值改变回影响控件显示的内容,控件的内容发生改变也会影响变量的值

methods: {方法1,方法2,... }

行为

事件绑定

一般用于button 超链接

v-on:事件名="方法", 给元素添加事件

@事件名="方法" , 简写

javascript:void(0)

废掉超链接的功能

若超链接只是"",点击会回到当先页面，相当于一次刷新

eval() 可以将字符串变成代码运行

push(...items: T[]): number 往数组中添加对象

splice(start: number, deleteCount?: number): T[] 删除从下标start开始count个元素

显示隐藏相关

v-if=""

v-if让元素是否显示和变量进行绑定 true显示 false不显示(删除元素)

v-else=""

v-else是和v-if状态取反

v-show=""

v-show让元素是否显示和变量进行绑定 true显示 false不显示(隐藏元素)

created:function () { axios.get("/select").then( function (response) { //当axios框架发现响应的是JSON格式的字符串时，会自动将其转换为数组或js对象 v.arr = response.data } ) }

初始化过程中执行的方法

mounted

前端框架

黑科技

Screenshot-to-code

截图AI生成页面

Vue Cli: Vue脚手架

单页面多视图 专注页面视图的 网络客户端服务器

axios 框架

npm i axios -S

main.js 引入

import axios from 'axios'; Vue.prototype.axios = axios;//属性

this.调用

在Vue脚手架项目中使用axios时，在then()的回调中不可以使用匿名函数，只能使用箭头函数。

this.axios.post(url,formdata).then((response) => { });

跨域问题

当尝试通过axios从前端项目（9000端口的项目）向后端项目（9080端口的项目）发起请求时，在浏览器中会提示错误信息

... ... has been blocked by CORS policy

网络服务器默认情况下，不允许执行跨域请求，即不允许某个项目向部署在另外一个服务器上的项目发起请求！

FormData格式

服务器端接收请求参数时，没有使用@RequestBody注解，客户端提交的请求参数必须是FormData格式的！如果客户端提交的请求参数是对象格式的，则服务器端接收到的各请求参数值均是null

xx=xx&xx=xx&xx=xx

qs框架

实现“将对象转换为FormData格式的数据”。

npm i qs -S

main.js 引入

import qs from 'qs'; Vue.prototype.qs = qs;//属性

this.调用

let formData = this.qs.stringify(this.ruleForm);

当使用qs后，转换得到的formData中，中文会是UrlEncode格式的，例如%E6%B5%8B%E8%AF%95%E7%9B%B8%E5%86%8C1206&description=%E6%B5%8B%E8%AF%95%E7%AE%80%E4%BB%8B&sort=111，这是正常，且服务器端可以正常接收到中文字符！

特征

使用的是“单页面”的设计模式

整个项目中只有1个HTML，而这个HTML是由多个不同的视图组合而成的，每个视图都是可以随时替换为其它视图的，并且，每个视图都由独立的文件来开发。

项目结构

[.idea]

IntelliJ IDEA管理项目时使用到的相关文件

此文件夹不应该手动修改，如果此文件夹中出现错误，将此文件夹删除即可。使用IntelliJ IDEA打开的项目，都会生成此文件夹

[node_modules]

当前项目中的依赖项文件所在的文件夹（Vue脚手架项目的依赖项都在当前项目中，不像Java项目的依赖项统一在.m2\repository下），此文件夹不应该手动修改，在使用GIT管理项目时，此文件夹通常会被配置到.gitignore文件夹，以至于此文件夹不会被提交到GIT服务器，当从其它电脑上拉取项目时，也不会得到此文件夹及内部的文件，则项目是不可以运行的，需要在项目文件夹下执行npm install命令，会自动创建此文件夹，并根据package.json中配置的依赖项来下载所需的所有依赖项

[public]

静态资源文件夹

通常存放.css文件、.js文件、图片等，也可以自行创建文件夹来管理相关文件，当项目启动后，可以以此文件夹作为URL的根路径来访问相关静态资源

favicon.ico

此图标通常会显示在浏览器的标签栏、收藏夹等位置，

此文件的名称是固定的，如果要更换图标文件，必须使用新文件覆盖此文件，文件名不变

index.html

项目中唯一的.html文件

默认会显示此文件，通常不编辑此文件

[src]

项目的源文件文件夹

[assets]：资源文件夹，也可以用于存放.css文件、.js文件、图片等，与[public]不同的地方在于此文件是在编译范围之内的，此文件夹下的文件在使用时，应该是不随着程序运行而发生变化的

[components]：视图组件文件夹，通常用于存放.vue文件

[router]：路由配置文件夹

const routes = [{r1}，{r2}]

配置路由视图—— 数组元素是一个个的路由对象 路由配置 / 路由对象：即配置了path和component的对象

path: '/',

路径

component: HomeView,

视图组件

路径与视图绑定

children: [{r1}，{r2}]

嵌套路由

path: '/sys-admin/temp/admin/add-new',

关于component属性的值，有2种写法：

在当前文件顶部使用import语句导入某个视图组件，并指定名称，component属性的值就是此名称

通常，每个项目只有1个路由配置使用这种方式导入视图组件

import HomeView from '../views/HomeView.vue' ... component: HomeView

使用import()函数导入某个视图组件，作为component属性的值

component: () => import('../views/sys-admin/temp/AdminAddNewView.vue')

[store]：公共存储的数据的文件夹

[views]：一般视图组件的文件夹，通常用于存放.vue文件

HomeView.vue

<router-view/>

子路由视图 此标签表示此处将由别的视图组件来完成显示！具体由哪个视图来显示，取决于当前访问的URL在src/router/index.js中的routes常量中对应的配置！ 在任何一个视图组件中，最多只能有1个<router-view/>标签！

交由其它视图来负责显示

<script> export default { } </script>

App.vue：默认已经绑定到index.html的视图组件，可以理解为是任何一个页面的显示入口

<router-view/>

路由视图

交由其它视图来负责显示

main.js：项目的主配置文件，例如当安装了某个新的软件（添加了新的依赖）后，可能需要在此文件中添加一些配置

.gitignore

使用GIT管理项目都有此文件

用于配置GIT应该“忽略”的文件或文件夹

babel.config.js

Babel的配置文件

jsconfig.json

JavaScript的配置文件

package.json

当前项目的配置文件

在创建项目时需要指定此文件作为配置文件，此文件中主要配置了npm命令的相关脚本、当前项目的依赖项

"scripts": { "serve": "vue-cli-service serve --port 9000", "build": "vue-cli-service build" }

可修改端口号

项目在此开启

package-lock.json

锁定的配置文件

根据package.json自动生成的，不可手动修改

LICENSE

项目是授权许可文件

当把项目提交到GIT并开源时，需要选择某个开源协议，就会生成此文件

README.md

项目的介绍性文件

当第1次打开此项目，或在GITEE主页上，都会显示此文件的内容

vue.config.js

Vue的配置文件

view

template

style

script

import {areaList} from '@vant/area-data'

Ajax

XMLHttpRequest

jQuery

npm仓库

Vant

移动端框架

前端axios框架（配合vue框架）

异步请求

axios.get("/xxx/xxx?参数").then( function(response){ } )

GET: 请求参数在请求地址的后面 可见, 由于参数可见,在传递一些敏感参数时不能使用Get请求,比如涉及密码 , 请求参数大小有限制,只能传递几k的数据

应用场景

一般查询请求都使用get,删除使用Get 因为删除数据时传递的参数一般都只传递个id

axios.post("",参数).then( function(response){ //处理回应的相关代码 } )

应用场景

POST:请求参数在请求体里面 不可见, 参数大小无限制

有敏感信息的请求,

上传请求 因为上传文件比较大 ,

一般传递参数较多时使用.

response.data=C回应的返回值，即响应正文

发送同步请求

单线程依次做几件事 指客户端只有一个主线程, 主线程负责页面渲染和监听操作, 如果需要发请求时,主线程会停止渲染页面(清空页面内容) 只负责发请求, 当服务器响应的数据之后,主线程再次恢复渲染工作, 把服务器响应的数据展示到页面中, 只能实现页面的整体改变(整体刷新),无法实现页面的局部改变(局部刷新)

超链接

href=""

href="hello"

当前页面所处位置

href="/hello"

第一个/，即工程的根目录

href="https://地址：端口/xxx/xxx"

访问站外资源

绝对路径

form表单

action="?"

网址输入

发送异步请求

指主线程只负责渲染页面和监听操作,由子线程负责发请求获取数据,获取到数据后可以将数据展示在原页面的基础之上,这种就称为页面的局部刷新, 只有通过异步请求才能实现页面的局部刷新

前后端分离

在Controller中不再写页面相关内容, 不管前端是浏览器还是手机 都只提供数据, 浏览器需要的页面必须在请求数据之前先发一次请求获得一个静态页面,然后在页面中发出异步请求获取到数据, 把数据展示到页面中(这个过程称为页面的局部刷新), 只有通过异步请求才能实现局部刷新, 这样的话 如果考虑实现前后端分离, 则只能使用异步请求, 因为同步请求不能实现页面的局部刷新.

ElementUI

引入项

css

https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css

js

https://cdn.staticfile.org/element-ui/2.15.9/index.min.js

vue

https://cdn.staticfile.org/vue/2.6.14/vue.min.js

组件

basic

container 布局容器

el-container<><>

可嵌套

<el-header></el-header>

<el-main></el-main>

<el-footer></el-footer>

<el-aside width="200px"></el-aside>

layout 布局

<el-row></el-row> 行

<el-col></el-col> 列

span="" 列跨度共24格

gutter="" 间距

offset="" 分栏偏移

icon

<i></i>

class="el-icon-?"

icon="el-icon-?"

button

<el-button></el-button>

type=""

primary

success

info

warning

danger

plain 朴素

round 圆角

circle 圆形

form

input

keydown.native.enter="login()"

enter 键盘按下事件

select 下拉选框

<el-select></el-select>

<el-option></el-option>

label="" 选项

value="" 选中后显示的值

upload 文件上传

action=""

form表单

<el-form></el-form>

label-width="80px"

<el-form-item>?</el-form-item>

label="商品标题"

data

table

<el-table></el-table>

data 设置表格的全部数据

</el-table-column> 列

prop=property 属性

label 表头内容

<template></template>

自定义列里面必须添加template标签

slot-scope="scope" scope 变量中装着当前行的信息

scope.$index代表当前行的下标

scope.row代表当前行对应的数组里面的对象

notice

.$message（）

默认info("消息")

success("成功消息")

error('错了哦，这是一条错误消息')

{message: '', type: '' }

alert

navigation

navmenu 导航菜单

<el-menu></el-menu>

default-active设置激活位置

mode="horizontal" 设置横向 去掉为纵向

</el-menu-item></el-menu-item>

index="1"

亦可用来发送请求

</el-submenu></el-submenu>

index="2"

</el-menu-item></el-menu-item>

index="2-1"

dropdown 下拉菜单

<el-dropdown @command="handleCommand"></el-dropdown>

<el-dropdown-menu slot="dropdown"></el-dropdown-menu>

<el-dropdown-item></el-dropdown-item>

disabled 禁止使用

divided

command="" 发送指令

others

card

<el-card></el-card>

carousel 走马灯

<el-carousel></el-carousel>

</el-carousel-item>img</el-carousel-item>

Divider 分割线

<el-divider></el-divider>

content-position="left/center/right" 下划线文本位置

direction="vertical" 纵向分割线