常用业务接口界面化 in python flask

背景:

对于业务测试来说,有一些基础业务接口是需要经常调用的,如根据userId查询某人的信息,修改某人的xx属性,一般的接口都有验签(或者说token)机制,使用postman等工具的话,也是需要去自定义解决的,因此决定写个页面更简易化

思路:

为了快速实现功能,决定采用python的flask框架,使用了flask-wtf(form表单),flask-bootstrap(美化界面),ajax

app.py,启动程序

from flask import Flask, render_template,request
from flask_bootstrap import Bootstrap
from works import *
from myForm import ReqForm


app = Flask(__name__)
app.config.from_object('config')
Bootstrap(app)

@app.route("/", methods=['GET', 'POST'])
def index():
    form = ReqForm()
    
    if  request.method == "POST":
        result = getReq(request.form.get( "url", "null"))
        return result
    
    return render_template("index.html", form=form)

if __name__ == "__main__":
    app.run(host='0.0.0.0',debug=True)

form.py 表单对象

from flask_wtf import FlaskForm
from wtforms import StringField, SubmitField, TextAreaField, SelectField
from wtforms.validators import DataRequired


class ReqForm(FlaskForm):
    method = SelectField(u'Method', choices=[('get', 'GET'), ('post', 'POST'), ('delete', 'DELETE')])
    url = StringField('Please enter the URL: ', validators=[DataRequired()])
    reqBody = TextAreaField("Request Body: ",render_kw={'class':'text-body','rows':15})
    submit = SubmitField("Send")

index.html,页面展示层,用来渲染页面的

{% block head %}
<title>test</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="{{ url_for('static', filename='css/bootstrap.min.css') }}" rel="stylesheet">
<link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}" type="image/x-icon">
{% endblock %}

{% import "bootstrap/wtf.html" as wtf %} 

{% block page_content %}
<div class="container">
    <div class="row clearfix">
        <div class="col-md-6 column">
            <form class="form" method="post">
                {{form.hidden_tag()}}
                {{wtf.form_field(form.method)}} 
                {{wtf.form_field(form.url)}}

                {{wtf.form_field(form.reqBody)}}
                {{wtf.form_field(form.submit)}}

        </form>
        </div>
        <div class="col-md-6 column">
            <h3>Result:</h3>
            <textarea id="textarea" class="form-control text-body" rows="21">{{result}}</textarea>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script src="{{ url_for('static', filename='js/jquery-3.2.1.min.js') }}"></script>
<script type=text/javascript>  
var $SCRIPT_ROOT = {{request.script_root|tojson|safe}};  
</script> 
<script type="text/javascript">

$(document).ready(function(){
    $("#submit").click(function(){
        $.post("/",
        {
            url: $( "#url" ).val(),
        },
        function(data,status){
            $( "#textarea" ).text(data);  
        }           
        );
        return false
      });
    });
</script>
{% endblock %}

work.py,实际接口的处理

import requests
import json

def getReq(url):
    r = requests.get(url)
    return json.dumps(json.loads(r.text), indent=4, sort_keys=False, ensure_ascii=False)

大概流程:

app.py启动后,通过实例化一个form表单,然后通过render_template指向到index.html,页面展示OK,页面上的submit绑定了js事件,将页面上的元素组装成post请求指向后台的地址,后台通过request获取到前端页面的值后,通过work.py的业务处理后return值返回前端,再展示会前端,这块使用了ajax

最终页面如下:

可以根据业务处理成如下:

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏吴老师移动开发

Flutter路由跳转及参数传递

做Android/iOS原生开发的时候,要打开一个新的页面,你得知道你的目标页面对象,然后初始化一个Intent或者ViewController,再通过star...

1.1K40
来自专栏技术博文

PHP抓取采集类snoopy

snoopy是一个php类,用来模仿web浏览器的功能,它能完成获取网页内容和发送表单的任务。官方网站 http://snoopy.sourceforge.ne...

81080
来自专栏BinarySec

CVE-2010-2553分析[漏洞战争]

CVE 2010-2553漏洞,也称为MicrosoftWindows Cinepak 编码解码器解压缩漏洞,影响的操作系统版本有:Microsoft Wind...

45360
来自专栏Albert陈凯

MAC上iTerm 2安装与使用

iTerm2是MAC下最好用的终端工具,并且还是免费的。iTerm2 是配置完毕开箱即用的 tmux,有标签变色、智能选中等特色功能。在日常开发中,我们难免会与...

68920
来自专栏小狼的世界

Apache环境下页面乱码的几种可能总结

采用典型的LAMP架构开发的时候,环境中多处涉及到编码的指定,有一个地方忽略,都有可能造成页面汉字乱码的产生,本文将总结这些乱码产生的可能的原因,方便我们排查。

11210
来自专栏前端那些事

起步 - vue-router路由与页面间导航

我们知道路由定义了一系列访问的地址规则,路由引擎根据这些规则匹配找到对应的处理页面,然后将请求转发给页进行处理。可以说所有的后端开发都是这样做的,而前端路由是不...

15400
来自专栏進无尽的文章

扒虫篇-Debug几个实用的方法

Bebug调试程序是开发中最常见的问题,对于一些简单有效的调试技巧的了解是很有必要的。这篇文章就列举Debug中用到的一些简单的技巧。

24510
来自专栏哲学驱动设计

OEA中的AutoUI重构(1) - Command自动生成

    OEA框架的核心之一是AutoUI,其职责是面向领域模型及UI元模型进行生成统一的界面。     在本次的迭代开发中,需要对命令按钮的生成方式进行一些定...

20880
来自专栏hbbliyong

openFileDialog的Filter属性设置

OpenFileDialog对话框的Filter属性说明:          首先说明一个示例,分析一下Filter属性的构成:“ Excel文件|*.xls ...

29170
来自专栏Albert陈凯

2018-09-07 wakatime Intellij IDEA 免费记录Code时间分配的插件jetbrains-wakatimeFor more general troubleshooting

插件源码地址Source Code: 有动画 https://github.com/wakatime/jetbrains-wakatime

26220

扫码关注云+社区

领取腾讯云代金券