前端储备知识

前端储备知识

一、什么是前端

"""
任何与用户直接打交道的操作界面都可以称之为前端
比如:电脑界面 手机界面 平板界面

什么是后端
	后端类似于幕后操作者(一堆让人头皮发麻的代码)
	不直接跟用户打交道
"""

二、为什么学前端

"""
因为我们是全栈开发工程师
	但是前端这一块我们不会学的很详细
	只要求做到能够看得懂基本的前端代码以及能够搭建一些简单的页面即可
	先打下前端的基础 为后续可能需要扩展做准备
"""

三、前端学习历程

""" 
HTML:网页的骨架 没有任何的样式 
CSS:给骨架添加各种样式 变得好看
JS:控制网页的动态效果

前端框架:BOOTSTRAP、JQuery、Vue
  	提前给你封装好了很多操作 你只需要按照固定的语法调用即可
"""

四、软件开发架构

""" 
cs  客户端 服务端
bs  浏览器 服务端
ps:bs本质也是cs
"""

五、浏览器窗口输入网址发生了几件事

"""
1 浏览器朝服务端发送请求
2 服务端接受请求(eg:请求百度首页)
3 服务端返回相应的响应(eg:返回一个百度首页)
4 浏览器接收响应 根据特定的规则渲染页面展示给用户看
"""

浏览器可以充当很多服务端的客户端
	百度 腾讯视频 优酷视频....
 
如何做到浏览器能够跟多个不同的客户端之间进行数据交互？
    1. 浏览器很牛逼 能够自动识别不同服务端做不同处理
    2. 制定一个统一的标准 如果你想要让你写的服务端能够跟客户端之间做正常的数据交互
  那么你就必须要遵循一些规则

六、HTTP协议

"""
超文本传输协议 用来规定服务端和浏览器之间的数据交互的格式...

该协议你可以不遵循 但是你写的服务端就不能被浏览器正常访问 你就自己跟自己玩
你就自己写客户端 用户想要使用 就下载你专门的app即可
"""

# 四大特性
    1. 基于请求响应. 向服务端发送请求, 服务端响应客户端请求.
    2. 基于TCP/IP之上的作用于应用层的协议
    3. 无状态: 不保存用户的信息
        举例: egon这个人来了一千次 你都记不住 每次都当他如初见.
        拓展: 由于HTTP协议是无状态的 所以后续出现了一些专门用来记录用户状态的技术. cookie、session、token...
    4. 无链接&短链接
  	    请求来一次我响应一次 之后我们两个就没有任何链接和关系.
        拓展: 长链接. 之后出现了websocket可以实现长链接, 可以让双方建立连接之后默认不断开. 可以实现: 群聊功能、服务端主动给客户端发送消息
            
            
# 请求数据格式
    请求首行(标识HTTP协议版本，当前请求方式)
    请求头(一大堆k,v键值对)
    \r\n
    请求体(并不是所有的请求方式都有. get没有post有, post存放的是请求提交的敏感数据)            
    
    
# 响应数据格式
    响应首行(标识HTTP协议版本，响应状态码)
    响应头(一大堆k,v键值对)
    \r\n
    响应体(返回给浏览器展示给用户看的数据)   
    
    
# 响应状态码: 用一串简单的数字来表示一些复杂的状态或者描述性信息  例如: 返回响应状态码为404, 则表示请求资源不存在.
    1XX: 信息. 服务器收到请求，需要请求者继续执行操作.
    2XX: 成功. 操作被服务器成功接收并处理.
        200 OK 表明该请求被成功地完成，所请求的资源发送回客户端.
    3XX: 重定向. 需要进一步的操作以完成请求.(比如: 当你在访问一个需要登陆之后才能看的页面 你会发现会自动跳转到登陆页面)
    4XX: 客户端请求错误. 请求包含语法错误或无法完成请求
        404: 请求资源不存在(服务器无法根据客户端的请求找到对应的网页资源)
        403: 服务器理解请求客户端的请求，但是拒绝执行此请求.(当前请求不合法或者不符合访问资源的条件. 比如: 这是千万级别的俱乐部, 只有999万的你被限制无法进入)
    5XX: 服务器内部错误 
        500: 服务器内部错误，无法完成请求
 
	补充: 上述的状态码是HTTP协议规定的，其实到了公司之后每个公司还会自己定制自己的状态及提示信息

        
# 请求方式
    1.get请求: 朝服务端要数据. 
        eg: 输入网址获取对应的内容
    2.post请求: 朝服务端提交数据
        eg: 用户登陆 输入用户名和密码之后 提交到服务端后端做身份校验

    get和post方法的区别:
        1.  GET提交的数据会放在URL之后，以?分割URL和传输数据，参数之间以&相连，如EditPosts.aspx?name=test1&id=123456.  POST方法是把提交的数据放在HTTP包的Body中.
        2. GET提交的数据大小有限制（因为浏览器对URL的长度有限制），而POST方法提交的数据没有限制.
        3. GET方式提交数据，会带来安全问题，比如一个登录页面，通过GET方式提交数据时，用户名和密码将出现在URL上，如果页面可以被缓存或者其他人可以访问这台机器，就可以从历史记录获得该用户的账号和密码.
            
# url: 统一资源定位符(大白话 网址) 
"""
形式: scheme:[//[user:password@]host[:port]][/]path[?query-string][#anchor]

提示: 方框内的是可选部分。
scheme：协议(例如：http， https， ftp)
user : password@用户的登录名以及密码
host：服务器的IP地址或者域名
port：服务器的端口（如果是走协议默认端口，http 80 or https 443）
path：访问资源的路径
query-string：参数，它通常使用键值对来制定发送给http服务器的数据
anchor：锚（跳转到网页的指定锚点位置）
"""

# 总结
"""
四大特性
请求数据格式
响应数据格式
响应状态码
请求方式
"""