人于动物的本质区别就是人能够制造和使用工具。
在日常工具中，我们需要利用一些工具来减少重复，耗时的劳动。有时候这样的工具没有现成的。我们得利用自己的智慧，来造一些工具来提高效率。
比如我们在软件生产和测试过程中，需要造一些数据和场景来验证正确性。容易一点的，有页面交互的工具来直接利用。但是有的时候不能够满足，可以调用一些接口，如果这个都没有，只有写一些脚本来实现。最不容易的是要直接去数据库里面造数据。
不管是调用接口，写脚本，搞爬虫，数据库操作。各种方法都有自己的弊端。 都会面临着操作复杂，步骤繁多，脚本零散，参数记不住，表结构搞不清等各种问题。而且，很多时候，其它人没这个业务知识，没有这个操作环境。
如果自己系统的开发一些集成工具系统，方便操作，利己利民。
以前做过一些，但都很零散，没有形成系统，而且别人如果要用的话，还得搭建环境。 先看一个成果展示最近将自己平时积攒的一些小脚本，用一个界面统一管理了，方便别人利用。
这是利用一个页面，来控制selenium造数据的过程。方便别人没有selenium环境，造数据又很吃力的人。当然这里selenium可以静默。
利用python写一些逻辑控制，用flask搭建框架。然后前端用vue展示出来。这样就很容易操作了。
前端为了精简代码，弄一个layout页面，大约是这个样子：
代码语言：javascript复制<!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. 大致是这样的：
代码语言：javascript复制{% 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 %}
然后遇到了一些问题：
- 布局问题，页面太丑
- cache问题
- 控件的联动性
- 模块的组件化
解决布局问题： 布局：学一点CSS,然后对sematicUI多看一眼官方文档 cache的问题：可以利用localstorage来解决 联动性：因为vue是双向绑定，可以用v-bind,以及watch, computer, method等方式来解决 模块的组件化：为了减少代码，可以自定义一些组件
还有loading状态问题，我在这里花了点时间才找到解决方案 loading, 通过改CSS或者class， 可以利用disable或者button的loading状态，或者hidden状态，解决了：
代码语言：javascript复制 <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爱好部落
