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

2022-03-15 17:00:45 浏览数 (1)

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

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

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

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

刚好这段时间看了flask，所以就产生了一个想法：使用flask把这个功能做成web页面 OK，下面来看整个实现过程。

注意，本文不讲基础的flask配置，直接从具体实现入手～

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

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

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

代码语言：javascript复制
@app.route('/index')
def index():
    return render_template("base.html")

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

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

代码语言：javascript复制
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如下

代码语言：javascript复制
from flask import Flask, render_template
import random
import faker
import emoji

app = Flask(__name__)
fake = faker.Faker(locale='zh_CN')  # 初始化，指定生成中文格式数据


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


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


def create_id():
    """生成身份证"""
    identity_ids = [fake.ssn() for i in range(5)]
    return " ".join(identity_ids)


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


def create_name():
    """生成姓名"""
    names = [fake.name() for i in range(50)]  # 生成多个
    return " ".join(names)


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


def create_text():
    """生成一段文本"""
    paragraph = fake.paragraphs(nb=5)  # 生成多段话
    paragraphs = ''.join(paragraph)  # 组合成一句话
    return " ".join(paragraphs)


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


def create_special():
    """生成特殊字符"""
    chars1 = ['~', '`', '!', '@', '#', '$', '%', '^', '&', '*', '(', ')', '_', '-', ' ', '=', ',', '<', '>', '.', '?',
              '/', '<h1 test>',
              '￥', '  ', '    ', '{', '}', '[', ']', '|', '\', ':', '"', 'α', 'π', '★', 'Ⅰ', 'Ⅱ', 'Ⅲ', 'Ⅳ', 'Ⅴ']
    chars2 = ['囃囄', '冁囆囇', '壅壆', '壈壌', '壍壐', '嬽嬾', '孁孂孄', '廗廘', '廙廛廜', '懚懛', '懜懝', '怼懠', '灖灗', '濲灙灚', '燿爀', '爁爂爃']

    c1 = random.sample(chars1, 20)
    c2 = random.sample(chars2, 1)
    return ''.join(c1)   c2[0]


@app.route('/special', methods=['GET'])
def special():
    # return_dict = {'statusCode': '200', 'message': 'successful!', 'result': create_phone()}
    # return json.dumps(return_dict, ensure_ascii=False)
    data = create_special()
    return data



if __name__ == '__main__':
    app.run()

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

在templates下创建一个html模板：base.html 按照预先设想的页面布局，html代码如下：

代码语言：javascript复制
<!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，代码如下：

代码语言：javascript复制
.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文件

代码语言：javascript复制
<script type="text/javascript" src="{{ url_for('static', filename='jquery-3.5.1.js') }}"></script>

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

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

代码语言：javascript复制
$(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代码如下

代码语言：javascript复制
$(document).ready(function(){
          $("#b07").click(function(){
          $("#result").empty();
          });
        });

最终改动后的html代码如下

代码语言：javascript复制
<!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">
    <script type="text/javascript" src="{{ url_for('static', filename='jquery-3.5.1.js') }}"></script>
</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>

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

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

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

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

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

        $(document).ready(function(){
          $("#b07").click(function(){
          {#htmlobj=$.ajax({url:"http://127.0.0.1:5000/special",async:false});#}
          $("#result").empty();
          });
        });
</script>
</body>
</html>

整体效果如下

flask php jquery html gui

0 人点赞