Python + HTML 实现自定义数据的网页化展示！

我是胖虎啊

发布于 2022-06-27 18:04:25

2.5K0

发布于 2022-06-27 18:04:25

文章被收录于专栏：测试开发卷货

写这篇文章的意义

平常跑完自动化 or 实现一个测试工具, 然后想展示测试结果,一般是生成1个txt文本文件.缺点是不太美观, 如果想展示数据分布情况等,无法直观显示
通过学习本文的小技巧后,可以使用python完成相关的计算逻辑后,将得出的数据更新到html的网页中.同时也可以结合各种前端组件完成自定义展示效果,这样也稍微上点台面了不是
胖虎认为这个小技巧 非常实用且简单 , 所以推荐给各位大佬

相关的python知识点

使用的是python内置模块 string的Template 这个类,使用方法如下:

import string

a = string.Template("This is ${what}")
b = a.substitute({"what": "book"})
print(b)  # This is book

主要使用的功能就是上面的这个示例, 简单讲解一下:

首先需要定义一个字符串模板, 传入到Template的初始化参数中, 同时将想要替代的参数用${}修饰.
然后定义一个字典,字典的key是模板中用${}修饰的变量,value是想要替代的值.
使用上面定义模板的substitute方法,参数传入刚定义的字典,生成的新字符串即为替换变量后的新字符串

扩展知识

如果使用substitute替换不存在的变量时,就会报错

import string

a = string.Template("This is ${what}")
c = a.substitute({"why": "book"})
print(c)  # 结果是报错: KeyError: 'what'

2. 如果想避免上面的问题,可以使用safe_substitute,结果是未替换成功的变量会原样显示在字符串中

import string

a = string.Template("This is ${what}")
d = a.safe_substitute({"why": "book"})
print(d)  # This is ${what}

3. 表示替换变量的符号有2种使用选择

# 表示替换变量的符号可以使用 ${变量}, 也可以使用 $变量
import string

a = string.Template("This is $what")
b = a.substitute({"what": "book"})
print(b)  # This is book

python结合HTML的简单示例

首先准备1个html模板文件,命名为 template.html, 代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>show colors</title>
</head>
<body>
<div id="total">
 <div id="color1">
    <h3>${color1}</h3><br>
</div>
<div id="color2">
    <h3>${color2}</h3><br>
</div>
<div id="color3">
   <h3>${color3}</h3><br>
</div>
<div id="color4">
  <h3>${color4}</h3><br>
</div>
</div>

</body>

</html>
<style>
    #total{
        font-size: 50px;
    }
    #color1{
        color: orange;
    }
    #color2{
        color: lightgreen;
    }
    #color3{
        color: deepskyblue;
    }
    #color4{
        color: mediumpurple;
    }
</style>

2.准备python代码, 代码如下

import string

with open("template.html", "r") as f:
    content = f.read()
    s = string.Template(content)

with open("show.html", "w") as f1:
    f1.write(
        s.substitute({"color1": "orange", "color2": "lightgreen", "color3": "deepskyblue", "color4": "mediumpurple"}))

3. 运行python代码,会在当前目录下,生成show.html.效果图如下

本demo演示的功能: 将模板中的颜色与其描述配对, 并显示出来, 效果是不是很强大!

结合Vue的演示示例

先准备Vue的模板文件,命名为 vue_template.html,代码如下

<!--# <!DOCTYPE html>-->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <title>Vue</title>
</head>
<body>
<div id="app">
    <el-progress :text-inside="true" :stroke-width="40" :percentage=30></el-progress>
    <el-progress :text-inside="true" :stroke-width="40" :percentage=40 status="success"></el-progress>
    <el-progress :text-inside="true" :stroke-width="40" :percentage=20 status="warning"></el-progress>
    <el-progress :text-inside="true" :stroke-width="40" :percentage=10 status="exception"></el-progress>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    var newVue=new Vue({
        el:"#app",
        data:{
        }
    })
</script>
</body>
</html>

说明: 该Vue中引入了Element-UI组件(百分比内显),同时将每个进度条展示的数据定义为特殊标识的变量, 待外部替换

准备python文件,命名为 vue_test.py,代码如下

import string

# 假设经过一系列操作得出的数据为mock_data
mock_data = {"data1": 30, "data2": 40, "data3": 20, "data4": 10}

with open("vue_template.html", "r") as f:
    content = f.read()
    s = string.Template(content)

with open("vue_show.html", "w") as f1:
    f1.write(
        s.substitute(mock_data))