web框架

1. 今日目标

2.【了解】WEB框架概念

静态资源：可以提前准备的，不经常改变的资源。（png,jpg,css,js等)
动态资源：不能提前准备的，经常改变的资源。（html）
Web框架：为web服务器提供动态请求服务的程序
WSGI协议（了解）: web服务器和web框架通信规则.

3.【应用】miniWeb框架开发

框架职责：

接收web服务器的动态资源请求，给web服务器提供处理动态资源请求的服务。

判断动态资源
- 根据请求资源路径的后缀名进行判断
  - 如果请求资源路径的后缀名是.html则是动态资源请求, 让web框架程序进行处理。
  - 否则是静态资源请求，让web服务器程序进行处理。
处理客户端的动态资源请求
1. 创建web框架程序
2. 接收web服务器的动态资源请求
3. 处理web服务器的动态资源请求并把处理结果返回给web服务器
4. web服务器把处理结果组装成响应报文发送给浏览器
核心代码：

Web.py

        # 1.根据请求资源路径的后缀判断是否动态资源（.html的资源是动态资源）
        if request_path.endswith(".html"):
            """动态资源请求"""
            # 1.1 准备请求资源信息
            request_info = {
                "request_path": request_path
                # ....
            }

            #   2.如果是动态请求，把动态请求交给web框架处理。
            #   3.WEB框架处理动态请求，把处理结果返回给web服务器
            data = framework.handler_request(request_info)
            status, headers, body = data

            #   4.web服务器把处理结果拼接成响应报文返回给web浏览器
            #   响应行

            #       协议版本 状态码 状态描述
            #   响应头

            #   空行

            #   响应体

            #   响应行

            #       协议版本 状态码 状态描述

            response_line = "HTTP/1.1 %s
" % status

            response_head = ""
            for header in headers:
                # response_head += f"{header[0]}: {header[1]}"
                response_head += "%s: %s
" % header

            response_body = body

            response_data = (response_line + response_head + "
" + response_body).encode("utf-8")

            new_socket.send(response_data)

        else:
            """静态资源请求"""

framework.py



import time


# 返回/index.html的响应数据
def index():
    # 响应状态信息
    status = "200 OK"
    # 响应头信息
    headers = [("Server", "NBW/2.0")]
    # 响应体信息 = 模板 + 数据库数据
    body = time.ctime()

    return status, headers, body


# 返回404页面的响应数据
def not_found():
    # 响应状态信息
    status = "404 Not Found"
    # 响应头信息
    headers = [("Server", "NBW/2.0")]
    # 响应体信息 = 模板 + 数据库数据
    body = "Not Found"

    return status, headers, body



def handler_request(request_info):
    # 2.接收web服务器的动态资源请求
    request_path = request_info['request_path']
    print("web服务器发送的动态请求路径: ", request_path)

    # 3.处理web服务器的动态资源请求并把处理结果返回给web服务器
    if request_path == "/index.html":
        data = index()
        return data

    else:
        data = not_found()
        return data

4.【应用】模板替换

思路

拷贝资源（templates）到工程下

在函数中读取对应的模板文件

with open("template/index.html", "r") as file:
    file_data = file.read()

使用正则替换网页中的内容 {%content%}

body = file_data.replace("{%content%}", time.ctime())

返回替换后的内容
```
return status, headers, body
```

5.【应用】路由列表功能开发（django）

路由是请求的URL到处理函数的映射
路由列表是用来保存每一个设置好的路由
- 在路由列表中添加路由
```
route_list = [
 ("/index.html", index),
 ("/center.html", center)
]
```

用户的动态资源请求通过遍历路由列表找到对应的处理函数来完成。

根据用户请求遍历路由列表处理用户请求

for path, func in route_list:
    if request_path == path:
        data = func()
        return data
        
else:
    data = not_found()
    return data

6.【应用】路由装饰器(flask)

使用带有参数的装饰器对处理函数进行装饰，并完成路由的添加功能。

定义路由列表
```
route_list = []
```

定义带有参数的装饰器

def route(path):

    def decorator(func):
        route_list.append((path, func))
     
     def inner():
         return func()
     return inner
 
 return decorator

装饰处理函数

@route("/index.html")
def index():
    ...
    
@route("/center.html")
def center():
    ...

7.【应用】显示股票信息页面的开发

创建并导入数据到数据库
- 创建数据库 create database stock_db charset=utf8
- 使用数据库 use stock_db
- 导入数据库（先客户端登录）
  - 准备脚本文件
  - 导入脚本 source stock_db.sql

修改index函数

连接数据库，获取数据
- 导入模块
- 建立连接
- 创建游标
- 使用游标执行sql
- 获取查询的结果
```
info_list = cs.fetchall()   # ((),(),(),...)
```
- 关闭资源
  
  先关闭游标，在关闭连接

替换为查询的数据

思路：

把查询的数据进行遍历，并且拼接html格式的文本

 body = ""
 # info : 就是元组类型, 直接实现字符串拼接
 for info in info_list:
     body += """<tr>
                 <td>%s</td>
                 <td>%s</td>
                 <td>%s</td>
                 <td>%s</td>
                 <td>%s</td>
                 <td>%s</td>
                 <td>%s</td>
                 <td>%s</td>
                 <td><input type="button" value="添加" id="toAdd" name="toAdd" systemidvaule="000007"></td>
             </tr>""" % info

替换为拼接后的字符串

 # 3.3.替换模板中的变量为数据
 # replace: 字符串替换函数
 body = file_data.replace("{%content%}", body)

注意：

%s %s %s ---> row # row 是一个元组

核心代码

# 返回/index.html的响应数据
@route("/index.html") # 1.route("/index.html") 2.@decorator -> index=decorator(index)
def index():    # 0x11
 # 响应状态信息
 status = "200 OK"
 # 响应头信息
 headers = [("Server", "NBW/2.0")]
 # 响应体信息 = 模板 + 数据库数据
 body = time.ctime()

 # 2.1.打开模板文件
 with open("template/index.html", "r") as file:
     file_data = file.read()

 # 3.1.1.根据sql语句查询股票信息
 # 1)创建链接对象
 # 2)获取游标
 # 3)执行sql语句
 #   3.1) 提交
 # 4)获取查询的结果
 # 5)关闭游标
 # 6)关闭链接
 conn = pymysql.connect(host='127.0.0.1', port=3306,
                        user="root", password="mysql",
                        database="stock_db", charset="utf8")
 cs = conn.cursor()
 sql = "select * from info;"
 count = cs.execute(sql)
 print("查询到%d行数据" % count)
 info_list = cs.fetchall()
 # ((1, '000007', '全新好', '10.01%', '4.40%', Decimal('16.05'), Decimal('14.60'), datetime.date(2017, 7, 18)), ...)
 print(info_list)      # ((一行数据),(),(),(),...)
 cs.close()
 conn.close()

 # 3.2.替换模板中的变量为数据
 # 3.2.1 使用查询数据转换成前端需要的html代码

 body = ""
 # info : 就是元组类型, 直接实现字符串拼接
 for info in info_list:
     body += """<tr>
                 <td>%s</td>
                 <td>%s</td>
                 <td>%s</td>
                 <td>%s</td>
                 <td>%s</td>
                 <td>%s</td>
                 <td>%s</td>
                 <td>%s</td>
                 <td><input type="button" value="添加" id="toAdd" name="toAdd" systemidvaule="000007"></td>
             </tr>""" % info

 # 3.3.替换模板中的变量为数据
 # replace: 字符串替换函数
 body = file_data.replace("{%content%}", body)

 return status, headers, body

8.【应用】个人中心数据接口的开发

接口开发目的：前后端分离

根据sql语句查询个人中心数据

拼接两张表，显示个人中心数据

 sql = "select i.code,i.short,i.chg,i.turnover,i.price,i.highs,f.note_info from info i inner join focus f on i.id=f.info_id;"

将个人中心数据转成json字符串并返回

创建个人中心列表
```
center_data_list = []
```
遍历每行数据转换成字典

添加字典到列表中

for row in center_list:
 center_dict = {}
 center_dict['code'] = row[0]
 center_dict['short'] = row[1]
 center_dict['chg'] = row[2]
 center_dict['turnover'] = row[3]
 center_dict['price'] = str(row[4])
 center_dict['highs'] = str(row[5])
 center_dict['note_info'] = row[6]
 center_data_list.append(center_dict)

把列表字典转成json字符串, 并在控制台显示

json_str = json.dumps(center_data_list, ensure_ascii=False)
print( type(json_str), json_str)

浏览器通过指定接口地址获取web框架提供的数据。
- ```
127.0.0.1:9090/center_data.html
```

9.【应用】ajax请求数据渲染个人中心页面

根据用户请求返回个人中心空模板文件数据

打开模板文件，读取数据

# 2.1.打开模板文件
with open("template/center.html", "r") as file:
 file_data = file.read()

替换模板文件中的%{content}%

body = ""
# 2.2.替换模板中的变量为数据
# replace: 字符串替换函数
body = file_data.replace("{%content%}", body)

在个人中心模板文件添加ajax请求获取个人中心数据

发送ajax请求获取个人中心页面数据: $.get()

$.get("center_data.html", function (response) {
 console.log(response);
},"JSON").error(function () {
 alert("链接失败，请重新链接.")
});

将个人中心数据在页面完成展示

获取table标签元素对象
```
var $table = $(".table");
```
遍历数据列表获取每一个对象
拼接html格式的文本

拼接的html数据加入table标签中

for(var i = 0; i < response.length; i++){
 // 获取数组对象
 var oBj = response[i];
 // 拼接成html展示的效果.
 var sTr = '<tr>
' +
     '            <td>'+oBj.code+'</td>
' +
     '            <td>'+oBj.short+'</td>
' +
     '            <td>'+oBj.chg+'</td>
' +
     '            <td>'+oBj.turnover+'</td>
' +
     '            <td>'+oBj.price+'</td>
' +
     '            <td>'+oBj.highs+'</td>
' +
     '            <td>'+oBj.note_info+'</td>
' +
     '            <td><a type="button" class="btn btn-default btn-xs" href="/update/000007.html"> <span class="glyphicon glyphicon-star" aria-hidden="true"></span> 修改 </a></td>
' +
     '            <td> <input type="button" value="删除" id="toDel" name="toDel" systemidvaule="000007"></td>
' +
     '        </tr>';
 // 追加到表格标签中
 $table.append(sTr);
}

10.【了解】logging日志

介绍：记录程序运行状态信息
作用：
- 记录程序运行状态信息
- 收集用户的行为和喜好
- 调bug
级别：
1. DEBUG
2. INFO
3. WARNING
4. ERROR
5. CRITICAL

使用：

导入模块
```
import logging
```

输入到控制台

logging.debug("这是一个debug级别信息")
logging.info("这是一个info级别信息")
logging.warning("这是一个warning级别信息")
logging.error("这是一个error级别信息")
logging.critical("这是一个cirtical级别信息")

设置输出级别和格式

logging.basicConfig(level=logging.DEBUG,
                 format="%(asctime)s - %(filename)s[line:%(lineno)d] - %(levelname)s: %(message)s'",
                 filename="log.txt",
                 filemode="w")

logging日志在mini-web项目中应用:
- INFO级别：静态请求或者动态请求
- WARNING级别：参数传递错误
- ERROR级别：404 异常