Python构建web应用（进阶版）->对网页HTML优化逻辑显示

本篇是承接上一篇web应用（入门级）的内容往下顺延的，阅读后将会了解HTML逻辑显示优化，以下图所示，从杂乱无章的日志文件到一个整齐的列表显示。

—————————————————————————— 我是分割线 —————————————————————————————————

6存储和管理数据

在下面的内容以前须要了解存储和管理数据的知识。

关于web应用，应该记录每一个web请求的数据。这样有利于分析这些问题：

已经响应了多少个请求？最经常使用的字母列表是什么？请求来自哪一个IP地址？哪一个浏览器用的最多？……

打开、处理（process）和关闭文件

 

1.创建一个txt空文件（hh.txt），指定一个变量（a）打开这个文件，后面参数‘a’的含义是采用追加模式打开这个文件。open会返回一个流，赋值给a变量

2.而后打印消息到文件流。

3.完成工做，最后关闭，文件流进行清理。

4.读是open的默认模式，因此不须要提供模式参数，打开文件时仍须要指定一个变量（read），而后open会返回一个文件流赋给read变量。

5.for循环每次循环读取一个数据行，没有数据行即终止。

6.工做完成，关闭文件流进行清理。

 

访问模式：(r w主要针对文本文件)

访问模式	说明
r	以只读方式打开文件，文件的指针会放在文件的开头。（默认模式）
w	以可写方式打开文件，文件存在时:覆盖，不存在时:建立新文件。
a	以追加方式打开文件，文件存在:指针放在文件结尾，不存在时:建立新文件进行写入。
rb	以二进制格式打开一个文件用于只读。
wb	以可读方式打开二进制文件。
ab	以追加方式打开二进制文件。
r+	打开一个文件用于读写，文件指针在开头。
rb+
wb+	以二进制格式打开一个文件用于只读。
ab+
x	打开一个新文件进行写数据，若是文件存在则失败。

上表没有写全，规律：r--read; w--write; a--add to; b--binary; + --读写

 

使用with对文件操做

with open('hh.txt') as a:
　　for chore in a:
　　　　print(chore, end = ' ')

这样能够完成和以前的open相同的操做，而且后面不用close()关闭文件。这些内容是在Python内部有一个上下文管理协议，它完成收尾的工做，在须要时调用close。

以前提到的程序能够在添加内容了，咱们想对这个web应用的数据进行存储记录下来。

回顾以前的程序内容：

在下面添加一个函数

def log_request(req: 'flask_request', res: str) -> None:
    with open('vsearch.log', 'a') as log:
        print(req, res, file=log)

调用这个函数时，req参数做为当前的flask请求对象，res参数做为调用vsearch_for_letters函数的结果.而后函数log_request把req和res的值追加到一个名为vsearch.log的文件。

使用这个函数时，咱们添加到上面的do_search中进行调用，固然在调用以前须要定义函数，因此调整位置后的程序以下：

 

保存后在webapp文件夹中运行cmd，输入python vsearch_for_web.py 

而后打开浏览器输入地址http://127.0.0.1:5000进行测试，试过几回以后会发现生成了一个log文件

 

经过web应用查看日志

下来让日志显示在web浏览器里，因此新建一个URL: /viewlog

在最后面添加代码：

@app.route('/viewlog')
　　def view_the_log() -> str:
　　　　with open('vsearch.log') as log:
　　　　　　contents = log.read()
　　return contents

保存测试后键入http://127.0.0.1:5000/viewlog看到：

这些好像只是浏览器接受和显示最后的结果，并无最开始搜索的内容，检查网页的源代码，直接浏览器中右键

这些内容和刚才的并无太大差异，仍是没有看到搜索的内容，web拒绝显示用户搜索的数据，由于HTML中<Request>是一个不合法的标记，浏览器会将它忽略。

转义数据

Flask包含一个escape函数，调用时提供一个字符串，其中不包含任何特殊字符：

对一些包含特殊字符的字符串使用这个函数，它会将<>转义为&lt和&gt

在第一行调用加入escape而后在后面的return后使用函数：escape（contents）

新的测试结果：

注意到刚才是红色的字变成了黑色字，，不过这些数字并不能看出来什么。

更改代码：

只在最后的print作了修改，把req的内容经过dir()列出而后转成字符输出。

下来测试新的日志记录代码，先完成下列步骤：

1. 修改log_request与上图保持一致。
2. 保存修改后的代码，这回重启咱们的web应用。
3. 找到并删除当前的vsearch.log文件。
4. 经过浏览器输入3个新搜索。
5. 使用/viewlog查看新建立的日志。

仔细看看如今的内容，有意义了吗？

这彷佛有些乱，不过仔细看会发现有一些咱们查找到的值。

如今能够看到每一个请求都有大量的关联方法和属性，记录全部的属性是没有意义的。其中有三个对于日志记录很重要：

• req.form：从web应用的HTML表单提交的数据。
• req.remote_addr：运行web浏览器的IP地址。
• req.user_agent：提交数据的浏览器标识。

下面对代码进行进一步的调整。

记录特定的web请求属性

 

分别输出这些内容，end=‘|’表示把默认的换行符替换为|,这样一个请求的数据就是一行内容。

这是新的日志文件的内容：能够看到数据都在一行并且整齐了不少

上文中的连续四个print好像有些多余，其实能够缩减到一个print语句中，有一个可选的参数sep，它能够设置分隔符，默认为空格。

下来改进那几行print代码：

def log_request(req: 'falsk请求', res: str) -> None:
　　with open('vsearch.log', 'a') as log:
　　　　print(req.form, req.remote_addr, req.user_agent, res, file=log, sep='|')

 继续刚才那五个步骤，就是从新测试的步骤。提示：存代码、删日志、新键入。

而后查看URL：/viewlog会发现少了不少

能够找到里面有搜索的字符串也有结果，看来已经有意义了。但是如何更加规范这些内容呢？

从原始数据到可读的输出

下面是vsearch.log文件中的一个数据行：

ImmutableMultiDict([('phrase', 'this is s test of the posting capability'), ('letters', 'aeiou')])|127.0.0.1|Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/68.0.3440.75 Safari/537.36|{'o', 'a', 'e', 'i'}

三个|分割了四部份内容，第一部分是表单数据。第二部分是远程机器的IP地址。第三部分是web浏览器的标识字符串。最后一部分是函数调用的结果。

 

• 使用join能够将列表转换成字符串。

下来在>>>中进行测试：

join前面的‘|’意思是使用|将每一个字符串链接起来。

• 而split是将字符串转换成列表。

使用给定的|，将字符串分割成一个列表。

 

修改代码：

使用文件打开的open命令，用|将日志中的记录转换成一个列表，这样会看起来更加美观，可读性强。

须要修改的是view_the_log函数。

def view_the_log() -> str:
　　contents = []
　　with open('vsearch.log') as log:
　　　　for lines in log:
　　　　　　contents.append([])
　　　　　　for item in lines.split('|'):
　　　　　　　　contents[-1].append(escape(item))
　　return escape(contents)

有一些地方须要解释：

也许你会对contents[-1].append(escape(item))有疑问，理解这行代码技巧从内向外、从左向右读。首先是外围for循环的item开始，它会传递到escape，在用append将获得的字符串追加到contents末尾 ( [-1] ) 。contents是一个嵌套列表。

 

保存代码而后进行测试：

如今的输出变成了一个嵌套列表，而再也不是一个字符串列表。如今咱们使用一个设计的jinja2模板处理contents，就基本能获得所需的可读的输出了。

用HTML生成可读的输出

HTML提供了一组标记来定义表格的内容：包括<table>：一个表格，<th>：一行表格数据，<tr>：一个表格列标题和<td>：一个表格数据项（单元格）。

每一个标记都有对应的一个结束标记</table>，</tr>，</th>和<td>。

若是发现须要生成HTML，就应该使用jinja2模板引擎，它主要是设计用来生成HTML，这个引擎包含一些基本的编程构造，能够用来“自动实现”须要的显示逻辑。

下面是一个新模板下载的地址仍是以前的http://python.itcarlow.ie/ed2/，名为viewlog.html，它能够将日志文件中的原始数据转换成一个HTML表格，这个模板但愿传入contents嵌套列表做为他的参数。jinja2的for循环构造与Python相似，但须要注意的是行尾不须要冒号，由于%}至关于一个分隔符；每一个循环的代码组用{% endfor %}结束。

能够看到，第一个for循环但愿在一个名为the_row_titles的变量中查找数据，而第二个for循环但愿获得the_data中的数据。第三个for循环但愿数据是一个数据项列表。

整个表在一个<table>标记中，描述性标题<th>中有单独的行<tr>标记。每一个日志数据项放在一个<td>标记中，日志文件中的各行有单独的<tr>标记。（如今可能有些困难，不事后面就会理解这几句话的含义）

 

这个模板须要放在templates文件夹下面。

要让viewlog.html调用render_template（render_template的函数，若是指定一个模板名和所需的参数，调用这个函数时会返回一个HTML串。），为它须要的三个参数分别传入值。下面建立一个描述性的标题元组，并把它赋值给the_row_titles，而后将contents的值赋给the_data。在呈现这个模板以前，还须要给the_title提供一个适当的值，修改函数view_the_log：

def view_the_log() -> 'html':
    contents = []
    with open('vsearch.log') as log:
        for lines in log:
            contents.append([])
            for item in lines.split('|'):
                contents[-1].append(escape(item))
    titles = ('From Data','Remote_addr','User_agent','Results')
    return render_template('viewlog.html', 
                            the_title = 'View Log',
                            the_row_titles = titles,
                            the_data = contents,)

保存后是flask重启web应用，而后进入http://127.0.0.1:5000/viewlog查看日志：

我对这个结果很满意，由于终于获得了想要的输出，而且看起来很整齐。

点击右键查看网页源代码，会看到日志的每个数据项都放在它本身的<td>标记中，每一个数据行也有本身的<tr>标记，整个表放在一个HTML的<table>中。

 

后面的放大来看：

大致上能够看出来一些，如今对于网页的源代码好像有一些眉目了。

回顾整个代码：