利用python开发小工具

人于动物的本质区别就是人能够制造和使用工具。

在日常工具中,我们需要利用一些工具来减少重复,耗时的劳动。有时候这样的工具没有现成的。我们得利用自己的智慧,来造一些工具来提高效率。

比如我们在软件生产和测试过程中,需要造一些数据和场景来验证正确性。容易一点的,有页面交互的工具来直接利用。但是有的时候不能够满足,可以调用一些接口,如果这个都没有,只有写一些脚本来实现。最不容易的是要直接去数据库里面造数据。

不管是调用接口,写脚本,搞爬虫,数据库操作。各种方法都有自己的弊端。 都会面临着操作复杂,步骤繁多,脚本零散,参数记不住,表结构搞不清等各种问题。而且,很多时候,其它人没这个业务知识,没有这个操作环境。

如果自己系统的开发一些集成工具系统,方便操作,利己利民。

以前做过一些,但都很零散,没有形成系统,而且别人如果要用的话,还得搭建环境。 先看一个成果展示最近将自己平时积攒的一些小脚本,用一个界面统一管理了,方便别人利用。

这是利用一个页面,来控制selenium造数据的过程。方便别人没有selenium环境,造数据又很吃力的人。当然这里selenium可以静默。

利用python写一些逻辑控制,用flask搭建框架。然后前端用vue展示出来。这样就很容易操作了。

前端为了精简代码,弄一个layout页面,大约是这个样子:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{% block title %}{% endblock %}</title>
    <script src="https://cdn.bootcss.com/vue/2.4.4/vue.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://cdn.bootcss.com/semantic-ui/2.4.0/semantic.min.js"></script>
    <script src="https://cdn.bootcss.com/moment.js/2.22.1/moment.min.js"></script>
    <script src="https://cdn.bootcss.com/clipboard.js/2.0.1/clipboard.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <link href="https://cdn.bootcss.com/semantic-ui/2.4.0/semantic.css" rel="stylesheet">
</head>
<body>
<div class="ui fixed inverted menu" id="main-nav">
  <a class="active item" href="{{url_for('index') }}">331</a>
  <a class="item" href="{{url_for('passprogress') }}" >progress</a>
  <a class="item" href="{{url_for ('test1') }}" data-tooltip="Skip"></a>
</div>
{% block body %} {% endblock %}
{% block script %} {% endblock %}
</body>
</html>

其它页面可以继承,然后页面请求可以用Ajax. 大致是这样的:

{% extends 'layout.html' %}
{% block title %}{{ 'pass 331 for s18' }}{% endblock %}
{% block body %}
    <h5>
        This tool only used in UAT for s18 account pass 331
    </h5>
    <p>please input the memberid</p>
    {% raw %}
    <div id="app">

        <div class="ui segment">
            <div class="label">input memberid</div>

            <div class="ui input">
                <input v-model="message" type="text" placeholder="memberid">
            </div>

            <button class="ui primary button" @click="get_password" v-bind:disable="seen">Submit</button>
            <p v-if="seen">
                {{ password }}
            </p>
        </div>

    </div>
    {%  endraw %}
{% endblock %}

{% block script %}
    <script>

        var app1 = new Vue({
            el: '#app',
            data: {
                message: '',
                password: '',
                seen: false,
                dis: true
            },

            methods: {
                get_password() {
                    axios.get('/accounts', {
                        headers: {
                            'Access-Control-Allow-Origin': '*',
                        },
                        crossDomain: true,
                        contentType: "application/json",
                        params: {
                            account: this.message,//接口配置参数(相当于url?id=xxxx)
                        },
                    })

                        .then((response) => {
                            this.password = response.data['password'];
                            this.seen = true;
                            this.dis = false;
                            console.log(response.data['password']);
                        })
                        .catch((error) => {
                            console.log(error);
                        });
                }
            }

        })

    </script>

{% endblock %}

然后遇到了一些问题:

  1. 布局问题,页面太丑
  2. cache问题
  3. 控件的联动性
  4. 模块的组件化

解决布局问题: 布局:学一点CSS,然后对sematicUI多看一眼官方文档 cache的问题:可以利用localstorage来解决 联动性:因为vue是双向绑定,可以用v-bind,以及watch, computer, method等方式来解决 模块的组件化:为了减少代码,可以自定义一些组件

还有loading状态问题,我在这里花了点时间才找到解决方案 loading, 通过改CSS或者class, 可以利用disable或者button的loading状态,或者hidden状态,解决了:

           <button class="ui primary button" @click="get_password" :class="{loading:loaded}">Submit</button>

        <div class="ui icon message" :class="{hidden: show }">
            <i class="notched circle loading icon"></i>
            <div class="content">
                <div class="header">稍候</div>
                <p>我们正在为您获取内容。</p>
            </div>
        </div>

    <p v-show="seen">
        result: {{ password }}
    </p>
        
    <p v-if="seen">
        {{ password }}
    </p>

再就是一些控件的使用熟练程度了,如下拉列表,单选框,按钮等。 接着就是处理一些后端逻辑,一些交互等。 还遇到一些问题,如默认值不好操控,for循环生成的列表,选中一个,却全选了,最终解决了。 做的一个工具,开始页面是这样的:

执行起来是这样的:

做的过程,感觉是有些细节的东西不是太精,有点卡壳,浪费了一些时间。 然后就是调试很难,只要一点格式,语法错误,就无法正常显示,要靠自己猜。

下一步将界面更加优化, 更加熟练。只有熟,才能生巧。

更多精彩,请关注python爱好部落

原文发布于微信公众号 - python爱好部落(lovesweet2018)

原文发表时间:2019-08-17

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

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券