zoukankan html css js c++ java

Web应用

web应用

Web应用程序是什么

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

应用程序有两种模式C/S、B/S。C/S是客户端/服务器端程序，也就是说这类程序一般独立运行。而B/S就是浏览器端/服务器端应用程序，这类应用程序一般借助IE等浏览器来运行。WEB应用程序一般是B/S模式。Web应用程序首先是“应用程序”，和用标准的程序语言，如C、C++等编写出来的程序没有什么本质上的不同。然而Web应用程序又有自己独特的地方，就是它是基于Web的，而不是采用传统方法运行的。换句话说，它是典型的浏览器/服务器架构的产物。

Web应用程序的优点

网络应用程序不需要任何复杂的“展开”过程，你所需要的只是一个适用的浏览器；
网络应用程序通常耗费很少的用户硬盘空间，或者一点都不耗费；
它们不需要更新，因为所有新的特性都在服务器上执行，从而自动传达到用户端；
网络应用程序和服务器端的网络产品都很容易结合，如email功能和搜索功能；
因为它们在网络浏览器窗口中运行，所以大多数情况下它们是通过跨平台使用的 (例如Windows，Mac，Linux等等)

Web应用程序的缺点

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

B/S架构优点

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

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

总结一下，本质上：浏览器是一个socket客户端，服务器是一个socket服务端

基于SOCKET写一个web应用

py文件

import socket

def server_run():
    soc = socket.socket()
    soc.bind(('127.0.0.1', 8008))
    soc.listen(5)
    while True:
        conn, addr = soc.accept()
        recv_data = conn.recv(1024)
        print(recv_data)
        # 1 直接在send里写，发送给客户端
        # conn.send(b'HTTP/1.1 200 OK

<h1>hello web</h1><img src="https://gss2.bdstatic.com/9fo3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike92%2C5%2C5%2C92%2C30/sign=5e3814acf9edab64607f4592965fc4a6/14ce36d3d539b600c0c465d0eb50352ac65cb74b.jpg"></img>')
        #2 打开一个html文件，发送给客户端
        # with open('index.html','r',encoding='utf-8') as f:
        #     data=f.read()
        # conn.send(('HTTP/1.1 200 OK

%s'%data).encode('utf-8'))
        # 3 动态网页，字符串替换
        import time
        now=time.strftime("%Y-%m-%d %H:%M:%S", time.localtime())
        print(now)
        with open('index.html','r',encoding='utf-8') as f:
            data=f.read()
        data=data.replace('@@@',now)
        conn.send(('HTTP/1.1 200 OK

%s'%data).encode('utf-8'))
        conn.close()

if __name__ == '__main__':
    server_run()

index.html 文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h2>@@@</h2>

<img src="https://gss2.bdstatic.com/9fo3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike92%2C5%2C5%2C92%2C30/sign=5e3814acf9edab64607f4592965fc4a6/14ce36d3d539b600c0c465d0eb50352ac65cb74b.jpg" alt="">
</body>
</html>

手撸简单web框架

WebServer.py

'''
a socket服务端
b 根据url不同返回不同的内容
    url---视图函数
c 字符串返回给用户
    特殊字符替换

Web框架种类：
a         b   c     Tornado
别人的a   b    c     django（a用的wsgiref）
别人a     b   别人c  flask（c用的jinja2）
另一种分类：
Django和其它

'''
import socket

import pymysql
def index(request):
    return '<img src="https://gss2.bdstatic.com/9fo3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike92%2C5%2C5%2C92%2C30/sign=5e3814acf9edab64607f4592965fc4a6/14ce36d3d539b600c0c465d0eb50352ac65cb74b.jpg"></img>'


def login(request):
    with open('login.html','r',encoding='utf-8') as f :
        data=f.read()
    return data
def time(request):
    import datetime
    now=datetime.datetime.now().strftime('%Y-%m-%d %X')
    with open('time.html','r',encoding='utf-8') as f :
        data=f.read()
    data=data.replace('@@time@@',now)
    return data
def user_list(request):
    # 创建连接
    conn = pymysql.connect(host='127.0.0.1', port=3306, user='root', passwd='123456', db='lqz')
    cursor = conn.cursor(cursor=pymysql.cursors.DictCursor)
    cursor.execute("select id,name,password from user")
    user_list = cursor.fetchall()
    cursor.close()
    conn.close()
    tr_list=[]
    for row in user_list:
        tr='<tr><td>%s</td><td>%s</td><td>%s</td></tr>'%(row['id'],row['name'],row['password'])
        tr_list.append(tr)


    with open('user_list.html','r',encoding='utf-8') as f:
        data=f.read()
    data=data.replace('@@body@@',''.join(tr_list))
    return data

def user_list_new(request):
    # 创建连接
    conn = pymysql.connect(host='127.0.0.1', port=3306, user='root', passwd='123456', db='lqz')
    cursor = conn.cursor(cursor=pymysql.cursors.DictCursor)
    cursor.execute("select id,name,password from user")
    user_list = cursor.fetchall()
    cursor.close()
    conn.close()
    with open('user_list_new.html','r',encoding='utf-8') as f:
        data=f.read()
    from jinja2 import Template
    template=Template(data)
    response=template.render(user_list=user_list)
    # response=template.render({'user_list':user_list})
    return response


urls = [
    ('/index', index),
    ('/login', login),
    ('/time', time),
    ('/user_list', user_list),
    ('/user_list_new', user_list_new),
]


def run():
    soc = socket.socket()
    soc.bind(('127.0.0.1', 8006))
    soc.listen(5)
    while True:
        conn, port = soc.accept()
        data = conn.recv(1024)
        # data=data.decode('utf-8')
        print(data)
        data = str(data, encoding='utf-8')
        request_list = data.split('

')
        head_list = request_list[0].split('
')
        method, url, htt = head_list[0].split(' ')
        # conn.send(b'hello web')
        conn.send(b'HTTP/1.1 200 OK 

')
        print(url)
        func_name = None
        for u in urls:
            if url == u[0]:
                func_name = u[1]
                break
        if func_name:
            response = func_name(data)
        else:
            response = '404 not found'

        conn.send(response.encode('utf-8'))
        conn.close()


if __name__ == '__main__':
    run()

login.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<form action="">
    <p>用户名：<input type="text"></p>
    <p>密码：<input type="password"></p>


</form>
</body>
</html>

time.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>


@@time@@
</body>
</html>

user_list.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户列表</title>
</head>
<body>

<table border="1">
    <thead>
        <tr>
            <th>id</th>
            <th>用户名</th>
            <th>密码</th>
        </tr>
    </thead>
    <tbody>
        @@body@@
    </tbody>


</table>

</body>
</html>

user_list_new.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户列表</title>
</head>
<body>
<table border="1">
    <thead>
    <tr>
        <th>id</th>
        <th>name</th>
        <th>password</th>
    </tr>
    </thead>
    <tbody>

    {% for user in user_list%}
    <tr>
        <td>{{user.id}}</td>
        <td>{{user.name}}</td>
        <td>{{user.password}}</td>
    </tr>
    {%endfor%}


    </tbody>


</table>

</body>
</html>

有架构

架构

1.纯手撸web框架

1.手动书写socket
2.手动处理http格式数据

2.基于wsgiref模块
该模块实现了上面两个手动的过程
根据功能不同拆分成了不同的py文件
urls.py 只放路由与视图函数对应关系
views.py 放视图函数(函数，类)(放的是视图函数(处理业务逻辑的))

templates 模板文件夹(一堆html文件)

拆分完成之后如果想要添加功能，你仅仅只需要在上面两个地方动手脚就可以了

3.动静态网页
静态网页
数据是写死的万年不变
动态网页
数据是实时获取的
eg:
1.后端获取当前时间展示到前端
2.后端获取数据库中的数据展示到前端

疑问：
如何将后端获取的数据传递给html页面

后端获取的数据传递给html页面 >>>: 模板的渲染

jinja2
pip3 install jinja2

模板语法(极其贴近python后端语法)

< p>{{ user }}

< p>{{ user.name }}

< p>{{ user['pwd'] }}

< p>{{ user.get('hobby') }}

{% for user_dict in user_list %}
< tr>
< td>{{ user_dict.id }}
< td>{{ user_dict.name }}
< td>{{ user_dict.pwd }}
< /tr>
{% endfor %}

get_db.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/twitter-bootstrap/3.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <h1 class="text-center">用户列表</h1>
            <table class="table table-bordered table-striped table-hover">
                <thead>
                    <tr>
                        <th>id</th>
                        <th>name</th>
                        <th>pwd</th>
                    </tr>
                </thead>
                <tbody>
                    {% for user_dict in user_list %}
                        <tr>
                            <td>{{ user_dict.id }}</td>
                            <td>{{ user_dict.name }}</td>
                            <td>{{ user_dict.pwd }}</td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>

</div>
</body>
</html>

get_time.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/twitter-bootstrap/3.3.1/js/bootstrap.min.js"></script>
</head>
<body>
$$time$$
</body>
</html>

get_user.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/twitter-bootstrap/3.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<p>{{ user }}</p>
<p>{{ user.name }}</p>
<p>{{ user['pwd'] }}</p>
<p>{{ user.get('hobby') }}</p>
</body>
</html>

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/twitter-bootstrap/3.3.1/js/bootstrap.min.js"></script>

</head>
<body>
<h1>index页面xxx</h1>
</body>
</html>

基于wsgiref.py

from wsgiref.simple_server import make_server
from urls import urls
from views import *




def run(env,response):
    """
    :param env: 请求相关的所有数据
    :param response: 响应相关的所有数据
    :return:
    """
    response('200 OK',[])
    # print(env)
    current_path = env.get('PATH_INFO')
    # if current_path == '/index':
    #     # 很多业务逻辑代码
    #     return [b'index']
    # elif current_path == '/login':
    #     return [b'login']
    # else:
    #     return [b'404 error']
    # 先定义一个变量名 用来存储后续匹配到的函数名
    func = None
    # for循环 匹配后缀
    for url in urls:
        if current_path == url[0]:
            func = url[1]  # 一旦匹配成功 就将匹配到的函数名赋值给func变量
            break  # 主动结束匹配
    # 判断func是否有值
    if func:
        res = func(env)
    else:
        res = error(env)
    return [res.encode('utf-8')]




if __name__ == '__main__':
    server = make_server('127.0.0.1',8080,run)
    # 实时监听该地址  只要有客户端来连接 统一交给run函数去处理
    server.serve_forever()  # 启动服务端

urls.py

from views import *

urls = [
    ('/index',index),
    ('/login',login),
    ('/xxx',xxx),
    ('/get_time',get_time),
    ('/get_user',get_user),
    ('/get_db',get_db),
]

views.py

def index(env):
    return 'index'


def login(env):
    return 'login'

def error(env):
    return '404 error'


def xxx(env):
    return 'xxx'

from datetime import datetime


def get_time(env):
    current_time = datetime.now().strftime('%Y-%m-%d %X')
    with open(r'C:UsersAdministratorDesktopday56代码web框架推导	emplatesget_time.html','r',encoding='utf-8') as f:
        data = f.read()
    data = data.replace('$$time$$',current_time)
    return data

from jinja2 import Template

def get_user(env):
    d = {'name':'jason','pwd':'123','hobby':['read','running','music']}
    with open(r'C:UsersAdministratorDesktopday56代码web框架推导	emplatesget_user.html','r',encoding='utf-8') as f:
        data = f.read()
    temp = Template(data)
    res = temp.render(user=d)  # 将字典d传递给前端页面 页面上通过变量名user就能够获取到该字典
    return res

import pymysql

def get_db(env):
    conn = pymysql.connect(
        host = '127.0.0.1',
        port = 3306,
        user = 'root',
        password = 'root',
        database = 'day56',
        charset = 'utf8',
        autocommit = True
    )
    cursor = conn.cursor(cursor=pymysql.cursors.DictCursor)
    sql = "select * from userinfo"
    cursor.execute(sql)
    res = cursor.fetchall()
    print(res)
    with open(r'C:UsersAdministratorDesktopday56代码web框架推导	emplatesget_db.html','r',encoding='utf-8') as f:
        data = f.read()
    temp = Template(data)
    ret = temp.render(user_list = res)  # 将字典d传递给前端页面 页面上通过变量名user就能够获取到该字典
    return ret

查看全文

相关阅读:
Maxwell的vbs脚本转matlab
maxwell电机直观理解
 maxwell电机转矩扫描与使用MTPA策略绘制效率map图
 maxwell施加均匀外磁场
 maxwell的那些坑&小技巧
 maxwell主从边界
 MySql基础
 数据结构知识结构框架图
 第八章多线程
 软件

原文地址：https://www.cnblogs.com/TMesh/p/11730258.html