web基础运用

目录

• web框架
  • web应用本质
    • Web应用程序的优点
    • Web应用程序的缺点
    • BS架构优点
  • web框架的分类
    • web框架包含了三部分
    • web框架分类
  • Http协议
  • 路由系统
  • 自定制的web框架案例
    • index.html
    • time.html
    • user.html
    • user1.html

web框架

web应用本质

web应用程序是一种可以通过web访问的应用程序，程序的最大好处就是用户很容易访问应用程序，用户只需要浏览器就可以，不需要再安装其它软件。

在我们之前的网络编程中，有学过三种架构，单机架构，C/S架构和B/S架构

• socket网络编程：
  • 架构：C/S架构
  • 协议：TCP/UDP协议
  • OSI七层：传输层
• web应用：
  • 架构：B/S架构
  • 协议：Http协议
  • OSI七层：应用层

Web应用程序的优点

• 网络应用程序不需要任何复杂的‘展开’过程，只需要一个浏览器就可以了；
• 网络应用程序通常耗费很少的用户硬盘空间，或者一点都不耗费；
• 网络应用程序和服务端的网络产品都很容易结合，如email功能和搜索功能；
• 因为他们在网络浏览器窗口运行，所以大多数情况下他们是跨平台使用的（如Windows，Mac等）

Web应用程序的缺点

• 网络应用程序强调浏览器的适用性。如果浏览器方没有提供特定的功能，或者弃用特定的平台或操作系统版本（导致不适用），就会影响大量用户；
• 网络应用依靠互联网远程服务器端的应用文件。因此，当连接出问题时，应用将不能正常使用。
• 许多网络应用程序不是开源的，只能依赖第三方提供的服务，因此不能针对用户定制化、个性化，而且大多数情况下用户不能离线使用，因而损失了很多灵活性；
• 它们完全依赖应用服务商的可及性。如果公司倒闭，服务器停止使用，用户也无法追索以前的资料。对比而看，即使软件制造商倒闭了，传统的安装软件也可以继续运行，尽管不能再更新或有其他用户服务；
• 相似地，提供方公司对软件和其功能有了更大的控制权。只要他们愿意就能为软件添加新特性，即使用户想等bugs先被解决再更新。跳过较差的软件版本也不可能了。公司可以强加不受欢迎的特性给用户，也可以随意减少带宽来削减开支。
• 公司理论上可以检索任何的用户行为。这有可能引起隐私安全问题。

BS架构优点

浏览器/服务器架构（Browser/Server,简称B/S）能够很好地应用在广域网上，成为越来越多的企业的选择。浏览器/服务器架构相对于其他几种应用程序体系结构，有如下3方面的优点：

• 这种架构采用Internet上标准的通信协议（通常是TCP/IP协议）作为客户机同服务器通信的协议。这样可以使位于Internet任意位置的人都能够正常访问服务器。对于服务器来说，通过相应的Web服务和数据库服务可以对数据进行处理。对外采用标准的通信协议，以便共享数据。
• 在服务器上对数据进行处理，就处理的结果生成网页，以方便客户端直接下载。
• 在客户机上对数据的处理被进一步简化，将浏览器作为客户端的应用程序，以实现对数据的显示。不再需要为客户端单独编写和安装其他类型的应用程序。这样，在客户端只需要安装一套内置浏览器的操作系统，直接安装一套浏览器，就可以实现服务器上数据的访问。而浏览器是计算机的标准设备

web框架的分类

web框架包含了三部分

​ a. socket服务端，进行网络通讯

​ b. 路由系统，进行url映射到具体的功能

​ c. 模板引擎渲染

​ 1. 自己定义的规则

​ 2. 使用第三方的工具

web框架分类

第一种维度的分类：

1. socket服务端，路由系统，模板引擎全部是自己完成，如tornado
2. socket服务端调用第三方，路由系统和模板引擎自己完成，如django(wsgiref/uwsgi)
3. socket服务端和模板引擎引入第三方，路由系统自己完成，如flask

第二种维度的分类：

1. Django，功能强大，适合做大批量前端网页开发，里面包含了ORM框架，session，form表单验证等功能
2. 其他类型，适合用于前端页面较少的开发，比如一些轻量级框架，flask、tornado

Http协议

Http协议也是遵循请求响应模型的，在发出请求时包含了请求头，请求体，客户端响应时也包含了响应头，响应体

• 请求头：主要包含了请求的方式（get/post)，http协议版本，网络地址……，这里面最主要的就是下面的**的内容

  1. GET /** HTTP/1.1
  2. Host: 127.0.0.1:8080
  3. Connection: keep-alive
  4. Cache-Control: max-age=0
  5. Upgrade-Insecure-Requests: 1
  6. User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3770.142 Safari/537.36
  7. Accept:text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3Accept-Encoding: gzip, deflate, br
  8. Accept-Language: zh-CN,zh;q=0.9

• 请求体：请求的内容，如jdkvgfb

• 响应头：主要包含了http协议版本，状态码（200表示请求成功），OK，如HTTP/1.1 200 OK

• 响应体：就是展现给用户的内容，如"hello world"

路由系统

将客户端请求的url映射到相应的函数，然后调用函数就可以获取内容

自定制的web框架案例

import socket
import time
import pymysql
from jinja2 import Template


# 建立数据库连接
def mysql(sql):
    conn = pymysql.connect(
        host='127.0.0.1',
        port=3306,
        user='root',
        password='123',
        database='t2'
    )

    cursor = conn.cursor(pymysql.cursors.DictCursor)
    cursor.execute(sql)

    data = cursor.fetchall()
    return data

# 读取html文件内容
def read_html(filepath):
    with open(filepath, 'r', encoding='utf-8') as fr:
        data = fr.read()

    return data

# 直接返回内容
def f1():
    return 'xxxxxx'

# 返回一个html页面，但不对html页面进行操作
def index():
    filepath = 'time.html'

    return read_html(filepath)

# 通过占位符将动态内容添加到html页面中
def times():
    filepath = 'time.html'
    data = read_html(filepath)

    ctime = time.strftime('%Y-%m-%d %X')
    data = data.replace('@@content@@', ctime)

    return data

# 从数据库中取出数据返回到页面中
def user():
    sql = 'select * from user'
    users = mysql(sql)

    user_list = []
    for user in users:
        user_list.append(f"<tr><td>{user['id']}</td><td>{user['name']}</td><td>{user['age']}</td></tr>")

    user_str = ''.join(user_list)

    res = read_html("user.html")
    data = res.replace("@@content@@", user_str)

    return data

# 通过jinja2第三方库操作
def user1():
    sql = 'select * from user'
    users = mysql(sql)
    res = read_html("user1.html")

    template = Template(res)
    data = template.render(users=users)
    return data

# 路由系统
routes = [
    ('/index', index),
    ('/xxx', f1),
    ('/time', times),
    ('/user', user),
    ('/user1', user1),
]

# 建立通信
def run():
    server = socket.socket()
    server.bind(('127.0.0.1', 9504))
    server.listen(5)

    print('strat...')
    while True:
        # 建立连接
        conn, _ = server.accept()

        # 获取请求数据
        req = conn.recv(1024)
        # print(req)
        data = str(req, encoding='utf-8')
        # print(data)
        url = data.split(' ')[1]
        # print(url)

        # 获取功能名字，实现不同请求返回不同内容
        for item in routes:
            if item[0] == url:
                func_name = item[1]
                break
        else:
            func_name = None

        # 获取响应内容
        if func_name:
            resp = func_name()
        else:
            resp = '<h1 style="text-align: center; color: red;">404 not found</h1><hr>'

        # 发送响应数据
        conn.send(bytes("HTTP/1.1 200 OK

", encoding="utf-8"))
        conn.send(bytes(resp, encoding="utf-8"))
        conn.close()


if __name__ == '__main__':
    run()

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>静态HTML页面</title>
    <style>
        /*h1 {*/
            /*text-align: center;*/
            /*color: red;*/
        /*}*/
    </style>
</head>
<body>
    <h1>这个页面不需要进行修改</h1>
</body>
</html>

time.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>实时显示时间</title>
</head>
<body>
    现在时间为：@@content@@
</body>
</html>

user.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>手撸HTML</title>
    <style>
        h1 {
            text-align: center;
        }
        table {
            height: 200px;
             300px;
            font-size: 20px;
            text-align: center;
        }

    </style>
</head>
<body>
    <h1>不借助第三方库进行表格显示</h1>
    <table border="1" cellspacing="0">
        <tbody>
            <tr style="background: #73a4cc; font-size: 30px;">
                <th>id</th>
                <th>name</th>
                <th>age</th>
            </tr>
            @@content@@
        </tbody>
    </table>
</body>
</html>

user1.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>非手撸</title>
    <style>
        h1 {
            text-align: center;
        }
        table {
            height: 100px;
             150px;
            font-size: 14px;
            text-align: center;
        }

    </style>
</head>
<body>
    <h1>借助jinja2库进行内容输入</h1>
    <table border="1" cellspacing="0">
        <tbody>
            <tr style="background: #73a4cc; font-size: 20px;">
                <th>id</th>
                <th>name</th>
                <th>age</th>
            </tr>
            {% for item in users %}
                <tr>
                    <td>{{ item.id }}</td>
                    <td>{{ item.name }}</td>
                    <td>{{ item.age }}</td>
                </tr>
            {% endfor %}
        </tbody>
    </table>
</body>
</html>