提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  其它

当前栏目

用flask搭建一个测试数据生成器(v1.0)

一个 搭建 Flask 生成器 v1.0 测试数据
2023-09-11 14:21:25 时间

很久之前用tkinter写过一些GUI工具，比如调百度翻译接口的翻译器、爬虫音乐、图片等等的一些小工具等

然后上个周末时又用tkinter写了一个界面工具：自动生成一些测试数据，如下：

点击不同按钮，生成对应的数据

但是这种GUI工具不太好分享给其他人使用（要么把代码给别人，要么转成exe程序，2种方法都比较麻烦）

刚好这段时间看了flask，所以就产生了一个想法：使用flask把这个功能做成web页面

OK，下面来看整个实现过程。注意，本文不讲基础的flask配置，直接从具体实现入手～

 一、编写生成测试数据的后台处理逻辑

首先创建一个flask项目，然后在app.py中编写视图函数以及构造测试数据的逻辑代码（主要利用faker库来生成诸如手机号码、身份证id、人名等数据）

1、首先创建一个视图函数，作为程序访问入口

@app.route('/index')
def index():
    return render_template("base.html")

base.html 是我在templates目录下创建的模板（先放在这里，等下再编写对应的html代码）

2、编写生成电话号码的逻辑代码

def create_phone():
    """生成电话"""
    phones = [fake.phone_number() for _ in range(5)]  # 列表推导，把生成的数据组成一个列表

    return " ".join(phones)


@app.route('/phone', methods=['GET'])
def phone():
    data = create_phone()
    return data

create_phone() 函数实现生成电话号码的处理逻辑；

视图函数 phone() 则调用 create_phone() 函数 把生成的测试数据返回出去，当用户访问这个url（xxx/phone）时则会触发 phone() 函数

按照上述方式依次编写好生成身份证id、人名的逻辑代码，完整的app.py如下

 1 from flask import Flask, render_template
 2 import random
 3 import faker
 4 import emoji
 5 
 6 app = Flask(__name__)
 7 fake = faker.Faker(locale='zh_CN')  # 初始化，指定生成中文格式数据
 8 
 9 
10 @app.route('/index')
11 def index():
12     return render_template("base.html")
13 
14 
15 def create_phone():
16     """生成电话"""
17     phones = [fake.phone_number() for _ in range(5)]  # 列表推导，把生成的数据组成一个列表
18     return " ".join(phones)
19 
20 
21 @app.route('/phone', methods=['GET'])
22 def phone():
23     data = create_phone()
24     return data
25 
26 
27 def create_id():
28     """生成身份证"""
29     identity_ids = [fake.ssn() for i in range(5)]
30     return " ".join(identity_ids)
31 
32 
33 @app.route('/id', methods=['GET'])
34 def id():
35     data = create_id()
36     return data
37 
38 
39 def create_name():
40     """生成姓名"""
41     names = [fake.name() for i in range(50)]  # 生成多个
42     return " ".join(names)
43 
44 
45 @app.route('/name', methods=['GET'])
46 def name():
47     data = create_name()
48     return data
49 
50 
51 def create_text():
52     """生成一段文本"""
53     paragraph = fake.paragraphs(nb=5)  # 生成多段话
54     paragraphs = ''.join(paragraph)  # 组合成一句话
55     return " ".join(paragraphs)
56 
57 
58 @app.route('/text', methods=['GET'])
59 def text():
60     data = create_text()
61     return data
62 
63 
64 def create_special():
65     """生成特殊字符"""
66     chars1 = ['~', '`', '!', '@', '#', '$', '%', '^', '&', '*', '(', ')', '_', '-', '+', '=', ',', '<', '>', '.', '?',
67               '/', '<h1 test>',
68               '￥', '  ', '    ', '{', '}', '[', ']', '|', '\\', ':', '"', 'α', 'π', '★', 'Ⅰ', 'Ⅱ', 'Ⅲ', 'Ⅳ', 'Ⅴ']
69     chars2 = ['囃囄', '冁囆囇', '壅壆', '壈壌', '壍壐', '嬽嬾', '孁孂孄', '廗廘', '廙廛廜', '懚懛', '懜懝', '怼懠', '灖灗', '濲灙灚', '燿爀', '爁爂爃']
70 
71     c1 = random.sample(chars1, 20)
72     c2 = random.sample(chars2, 1)
73     return ''.join(c1) + c2[0]
74 
75 
76 @app.route('/special', methods=['GET'])
77 def special():
78     # return_dict = {'statusCode': '200', 'message': 'successful!', 'result': create_phone()}
79     # return json.dumps(return_dict, ensure_ascii=False)
80     data = create_special()
81     return data
82 
83 
84 
85 if __name__ == '__main__':
86     app.run()
View Code

二、编写前端页面+调整样式

 在templates下创建一个html模板：base.html

按照预先设想的页面布局，html代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='base.css') }}" type="text/css">
</head>
<body>
    <div class="b1"><button type="button" id="b01" >手机号码</button></div>
    <div class="b1"><button  type="button" id="b02">身份证ID</button></div>
    <div class="b1"><button type="button" id="b03">人名</button></div>
    <div class="b1"><button type="button" id="b04">一段文字</button></div>
    <div class="b1"><button type="button" id="b05">特殊字符</button></div>
    <div class="b1"><button type="button" id="b07">清空输出</button></div>
    <div ><label for="result"></label><textarea class="textera" name="" id="result" cols="103" rows="20"></textarea></div>

</body>
</html>

另外需要调整下样式，在static目录下创建一个css文件，base.css，代码如下：

.b1 {
    float: left;
    /*display: inline;*/
    /*background-color: #7ED321;*/
    margin-right: 20px;
    margin-left: 50px;
    margin-top: 20px;
}

.textera {
    position:absolute;
    left: 60px;
    top: 80px;
}

 页面如下

三、调通前后端

通过上面2步，分别把后端处理逻辑和前端样式写好了，接下来需要做的是把前后端联动：

点击按钮-后台生成数据-把数据显示到前端

利用 jquery 实现上述功能

把下载好的 jquery-3.5.1.js文件放到static目录下

引入js文件

<script type="text/javascript" src="{{ url_for('static', filename='jquery-3.5.1.js') }}"></script>

添加js代码，给按钮绑定事件，并把结果输出到<textarea>标签

例如，触发电话号码的js脚本如下

$(document).ready(function(){
          $("#b01").click(function(){
          htmlobj=$.ajax({url:"http://127.0.0.1:5000/phone",async:false});
          $("#result").html(htmlobj.responseText);
          });
        });

$.ajax后的url表示要请求的url，当请求这个url时，就会触发对应的phone()视图函数

参考了jquery-ajax() 方法：https://www.w3school.com.cn/tiy/t.asp?f=jquery_ajax2

点击清空按钮要清掉输入框的内容，js代码如下

$(document).ready(function(){
          $("#b07").click(function(){
          $("#result").empty();
          });
        });

最终改动后的html代码如下

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <link rel="stylesheet" href="{{ url_for('static', filename='base.css') }}" type="text/css">
 7     <script type="text/javascript" src="{{ url_for('static', filename='jquery-3.5.1.js') }}"></script>
 8 </head>
 9 <body>
10     <div class="b1"><button type="button" id="b01" >手机号码</button></div>
11     <div class="b1"><button  type="button" id="b02">身份证ID</button></div>
12     <div class="b1"><button type="button" id="b03">人名</button></div>
13     <div class="b1"><button type="button" id="b04">一段文字</button></div>
14     <div class="b1"><button type="button" id="b05">特殊字符</button></div>
15     <div class="b1"><button type="button" id="b07">清空输出</button></div>
16 
17     <div ><label for="result"></label><textarea class="textera" name="" id="result" cols="103" rows="20"></textarea></div>
18 
19     <script type="text/javascript">
20         $(document).ready(function(){
21           $("#b01").click(function(){
22           htmlobj=$.ajax({url:"http://127.0.0.1:5000/phone",async:false});
23           $("#result").html(htmlobj.responseText);
24           });
25         });
26 
27         $(document).ready(function(){
28           $("#b02").click(function(){
29           htmlobj=$.ajax({url:"http://127.0.0.1:5000/id",async:false});
30           $("#result").html(htmlobj.responseText);
31           });
32         });
33 
34         $(document).ready(function(){
35           $("#b03").click(function(){
36           htmlobj=$.ajax({url:"http://127.0.0.1:5000/name",async:false});
37           $("#result").html(htmlobj.responseText);
38           });
39         });
40 
41         $(document).ready(function(){
42           $("#b04").click(function(){
43           htmlobj=$.ajax({url:"http://127.0.0.1:5000/text",async:false});
44           $("#result").html(htmlobj.responseText);
45           });
46         });
47 
48         $(document).ready(function(){
49           $("#b05").click(function(){
50           htmlobj=$.ajax({url:"http://127.0.0.1:5000/special",async:false});
51           $("#result").html(htmlobj.responseText);
52           });
53         });
54 
55         $(document).ready(function(){
56           $("#b07").click(function(){
57           {#htmlobj=$.ajax({url:"http://127.0.0.1:5000/special",async:false});#}
58           $("#result").empty();
59           });
60         });
61 
62     </script>
63 </body>
64 </html>
View Code

整体效果如下

 

相关文章