初识前端

前端

        # 什么是前端
            任何与操作系统打交道的界面都可以称之为"前端"
            手机界面(app) 电脑界面(软件) 平板界面(软件)
        # 什么是后端
            不直接与用户打交道，而是控制核心逻辑的运行
            各种编程语言编写的代码(python代码、java代码、c++代码)
        """全栈开发:前后端都会!!!
        优势在于一个人干两个人的活 意味着工资也相当于两个人的薪资
        缺陷在于一个人干两个人的活 有时候会忙不过来压力很大
        """
        # 前端的学习流程
            前端三剑客
            HTML		网页的骨架(没有样式很丑)
            CSS			网页的样式(给骨架美化)
            JS			网页的动态效果(丰富用户体验)

BS架构

        我们在编写TCP服务端的时候 针对客户端的选择可以是自己写的客户端代码也可以是浏览器充当客户端(bs架构本质也是cs架构)

        我们自己编写的服务端发送的数据浏览器不识别 原因在于
            每个人服务端数据的格式千差万别 浏览器无法自动识别
            没有按照浏览器固定的格式发送
            """
            浏览器可以访问很多服务端 如何做到无障碍的与这么多不同程序员开发的软件实现数据的交互
                1.浏览器自身功能强大 自动识别并切换(太过消耗资源)
                2.大家统一一个与浏览器交互的数据方式(统一思想)
            """

HTTP协议

        协议:大家商量好的一个共同认可的结果
        HTTP协议:规定了浏览器与服务端之间数据交互的方式及其他事项
          如果我们开发的时候不遵循该协议 那么浏览器就无法识别我们的网站
          网站就需要自己编写一个客户端(可以不遵循)

        # 1.四大特性
            1.基于请求响应
            服务端永远不会主动给客户端发消息 必须是客户端先发请求
            如果想让服务端主动给客户端发送消息可以采用其他网络协议
          2.基于TCP、IP作用于应用层之上的协议
            应用层(HTTP)、传输层、网络层、数据链路层、物理链接层
          3.无状态
            不保存客户端的状态信息
                早期的网站不需要用户注册 所有人访问的网页数据都是一样的
              "纵使见她千百遍 我都当她如初见"
          4.无连接/短连接
            两者请求响应之后立刻断绝关系
        # 2.数据格式
            请求格式
            请求首行(网络请求的方法)
            请求头(一堆k:v键值对)
            (换行符 不能省略)
            请求体(并不是所有的请求方法都有)

          响应格式
            响应首行(响应状态码)
            响应头(一堆k:v键值对)
            (换行符 不能省略)
            响应体(即将交给浏览器的数据)
        # 3.响应状态码
            用数字来表示一串中文意思
          1XX:服务端已经接受到了数据正在处理 你可以继续发送数据也可以等待
          2XX:200 OK请求成功 服务端返回了相应的数据
          3XX:重定向(原本想访问A页面 但是自动跳转到了B页面)
          4XX:403没有权限访问  404请求资源不存在
          5XX:服务器内部错误
          """
            公司还会自定义状态码 一般以10000开头
                参考:聚合数据
          """

HTML前戏

        import socket


        server = socket.socket()
        server.bind(('127.0.0.1',8081))
        server.listen()

        """
        请求首行
        b'GET / HTTP/1.1\r\n  
        请求头
        Host: 127.0.0.1:8080\r\n
        Connection: keep-alive\r\n
        sec-ch-ua: " Not;A Brand";v="99", "Google Chrome";v="97", "Chromium";v="97"\r\n
        sec-ch-ua-mobile: ?0\r\n
        sec-ch-ua-platform: "macOS"\r\n
        Upgrade-Insecure-Requests: 1\r\n
        User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/97.0.4692.71 Safari/537.36\r\n
        Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9\r\n
        Sec-Fetch-Site: none\r\n
        Sec-Fetch-Mode: navigate\r\n
        Sec-Fetch-User: ?1\r\n
        Sec-Fetch-Dest: document\r\n
        Accept-Encoding: gzip, deflate, br\r\n
        Accept-Language: zh-CN,zh;q=0.9\r\n
        \r\n
        请求体(当前为空)
        '
        """

        while True:
            sock, addr = server.accept()
            while True:
                data = sock.recv(1024)
                if len(data) == 0:break
                print(data)
                # 遵循HTTP响应格式
                sock.send(b'HTTP/1.1 200 OK\r\n\r\n')
                sock.send(b'<h1>hello big baby<h1>')
                sock.send(b'<a href="https://www.jd.com">good see<a>')
                sock.send(b'<img src="https://imgcps.jd.com/ling4/100013209930/54iG5qy-55u06ZmN/6YOo5YiG5q-P5ruhMTk55YePMTAw/p-5bd8253082acdd181d02fa06/a677079b/cr/s/q.jpg"/>')
                # with open(r'data.txt','rb') as f:
                #     data = f.read()
                # sock.send(data)

__EOF__

本文作者：祈安
本文链接：https://www.cnblogs.com/jyc666/p/15845802.html
关于博主：没有收拾残局的能力，就别放纵善变的情绪
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！