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

冰霜

发布于 2022-03-15 17:01:18

46600

代码可运行

文章被收录于专栏：冰霜的软件测试技术分享冰霜的软件测试技术分享

运行总次数：0

代码可运行

在v1.0版本中实现了"页面点击按钮，生成对应测试数据"的功能，但是在操作页面只有一个按钮，没有提供任何参数(即没有涉及到参数在前后端传递，只是单纯的触发请求)；

这次在前端页面给每个按钮加一个参数，用来控制生成测试数据的个数，更改后的页面大概如下

所以接下来要做如下改造工作：

改造html模版，在每个按钮后添加一个输入框（添加input标签）；
改造视图函数，例如phone()函数，使它能够接收一个参数，控制生成数据的个数；
改造js代码，使它能够接收input标签输入的值；

一、修改 base.html 和 base.css

为每个按钮添加一个输入框，另外调整下整体布局，base.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">
    <script type="text/javascript" src="{{ url_for('static', filename='jquery-3.5.1.js') }}"></script>
</head>
<body>
    <div class="left">
    <div class="b1">
        <form method="get" action="">
            <button  type="button" id="b01">手机号码</button>
            <label>
            <input type="text" name="phone_num" id="pnone_num" value="" placeholder="请输入个数">
        </label>
        </form>

    </div>

    <div class="b1">
        <form method="get" action="">
            <button  type="button" id="b02">身份证ID</button>
            <label>
            <input type="text" name="card_id" id="id_num" value="" placeholder="请输入个数">
        </label>
        </form>
    </div>

    <div class="b1"><button type="button" id="b03">人名</button>
        <label>
            <input type="text" name="name" value="" placeholder="请输入个数">
        </label>
    </div>
    <div class="b1"><button type="button" id="b04">一段文字</button></div>
    <div class="b1"><button type="button" id="b05">特殊字符</button>
        <label for=""><select name="special" id="select">
            <option value="5">5个</option>
            <option value="10">10个</option>
            <option value="20">20个</option>
        </select></label>
    </div>

    <div class="b1"><button style="background-color:darkred;color: #fcfcfc" type="button" id="b07">清空输出</button></div>
    </div>

    <div ><label for="result"></label><textarea class="textera" name="" id="result" cols="103" rows="20"></textarea></div>


</body>
</html>

base.css代码如下

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

div .left {
    float:left;
    color: #f00;
    border: 2px;
}

input .w {
    width: 1px;
}

.textera {
    position:absolute;
    left: 350px;
    top: 20px;
    background-color: #f1f1d1;
}

二、改造视图函数

因为之前当触发按钮时，触发的get请求如下: http://127.0.0.1:5000/phone

现在要加一个参数，假设参数名为num，希望触发的get请求变为如下形式:

http://127.0.0.1:5000/phone?num=

后台路由如果想接收这种形式的参数，例如上面的num，则可以通过下面这种方式:

request.args.get("num")

以phone()视图函数为例，改造后如下

def create_phone(num):
    """生成电话"""

    phones = [fake.phone_number() for _ in range(int(num))] 
 
    return " ".join(phones)


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

    num = request.args.get("num")
    if num == "":  # 如果接收到的num为空，则默认传5
        data = create_phone(5)
    else:
        data = create_phone(num)
    return data

三、改造js代码，使它能够接收input标签输入的值

在实现过程中，一直在想如何从前端获取input标签输入的num参数值，传递给后端路由

经过多方查找资料，还是从jquery入手，可以先用js获取input标签的值，再拼接到url中，如下

$(document).ready(function(){
          $("#b01").click(function(){
              var num = $('input[name=phone_num]').val()  // 获取phone输入框的值
              console.log(num)
          htmlobj=$.ajax({url:"http://10.237.4.83:5000/phone?num="+num,async:false}); // 把参数num的值拼接到url中
          $("#result").html(htmlobj.responseText);
          });
        });

最后看一下实现效果：