Vue + Flask 小知识（三）
今天继续分享 Vue 系列，多输入框搜索
页面布局
我们做一个简单的页面，两个输入框用来输入搜索条件，一个表格用来展示数据，先看下页面效果
当前只有三条测试数据，用来展示搜索结果已经足够了。 输入框，用来模糊匹配名称 下拉框，用来过滤不同的集合
Vue 代码
我们先来看看页面布局的代码 在新创建的 .vue 文件中，添加布局代码
<template>
<div>
<ToolBar>
<el-button type="primary" icon="el-icon-plus" size="small">添加</el-button>
<div style="float: right">
<el-input
placeholder="搜索用例"
size="small"
style="width: 140px"
v-model="searchParams.casename"
clearable>
</el-input>
<el-select v-model="searchParams.suit" size="small" clearable placeholder="请选择Testsuit" style="width: 140px" v-on:focus="getData()">
<el-option
v-for="item in suits"
:key="item.value"
:label="item.label"
:value="item.label">
</el-option>
</el-select>
<el-button type="success" icon="el-icon-search" size="small" @click="getcase()"></el-button>
</div>
</ToolBar>
<el-table
:data="tableData"
border
style="width: 100%"
>
<el-table-column
type="selection"
width="55">
</el-table-column>
<el-table-column
fiexd="right"
prop="caseid"
label="用例番号"
width="80">
</el-table-column>
<el-table-column
prop="casename"
label="用例名称"
width="100">
</el-table-column>
<el-table-column
prop="content"
label="用例内容"
width="200">
</el-table-column>
<el-table-column
prop="content"
label="预期结果"
width="200">
</el-table-column>
<el-table-column
prop="content"
label="测试结果"
width="200">
</el-table-column>
<el-table-column
fixed="right"
label="操作"
width="120">
<template slot-scope="scope">
<el-button @click="handleClick(scope.row)" type="info" icon="el-icon-info" size="small" circle></el-button>
<el-button @click="handleClick(scope.row)" type="primary" icon="el-icon-edit" size="small" circle></el-button>
</template>
</el-table-column>
</el-table>
</div>
</template>
对于下拉框，绑定了数据到 searchParams.suit 变量上，输入框绑定了 searchParams.casename 变量，而表格则绑定了 tableData 变量。
下面是脚本代码部分
<script>
import ToolBar from '~/components/ToolBar/ToolBar.vue';
import suitdata from '../../api/testsuit.js'
import dealdata from '../../api/data.js'
export default {
data: function() {
return {
suits:[],
searchParams:{
suit:'',
casename:'',
},
tableData: [],
}
},
methods:{
getcase(){
var sname = this.searchParams.suit;
var cname = this.searchParams.casename;
var parm = {suitname: sname, casename: cname}
dealdata.gettestcase(parm)
.then(res => {
if(res.data.code == 200){
var case_list = res.data.message;
console.log(this.tableData);
this.tableData = [];
for (var i=0, len=case_list.length; i<len; i++){
this.tableData.push(case_list[i])
}
console.log(this.tableData);
}else if (res.data.code == 201){
console.log("do nothing");
}
})
.catch(function(error){
console.log(APP.$message.error("网络错误"));
})
},
getData:function(){
let APP = this;
suitdata.getSuit(APP);
},
},
mounted() {
this.getcase();
},
components: {
ToolBar
}
}
</script>
最主要的就是两个函数 getcase 和 getData 其中 getcase 函数，就是今天的主角搜索功能的体现，而 getData 函数，则是用来获取下拉框数据。
对于获取下拉框数据，我们在前面的分享中也提到过，这里直接给出代码了
function getSuit(app){
dealdata.gettestsuit()
.then(res => {
if(res.data.code == 200) {
if (res.data.data.length == 0){
app.suits = []
}else{
app.suits = res.data.data;
}
}else{
console.log("API 调用错误");
}
})
.catch(function(error){
console.log("网络错误");
})
}
然后我们重点看看 getcase 函数。 我这里组装了一个 parm 变量，分别获取到要搜索的名称和 testsuit 名字，然后传递到 API 接口当中。当 API 接口返回正确信息时，再把拿到的数据 push 进变量 tableData 中，那么表格就可以展示 tableData 的数据了。
API 代码
下面我们来看看后台的 API，主要是基于 flask_sqlalchemy 来处理数据。
class CaseListView(Resource):
def get(self):
filter_args = request.args
suitname = filter_args.get('suitname')
casename = filter_args.get('casename')
like_casename = TestCase.casename.ilike("%" + casename + "%")
if suitname:
suit = TestSuit.query.filter_by(testsuitname=suitname).first()
if suit:
if casename:
case_list = TestCase.query.filter_by(testsuit_id=suit.id).filter(like_casename).all()
query_result_list = []
result = {
"code": 200,
"message": query_result_list
}
for case in case_list:
query_result = {}
query_result["caseid"] = case.caseid
query_result["casename"] = case.casename
query_result["preconditions"] = case.preconditions
query_result_list.append(query_result)
return result
else:
case_list = TestCase.query.filter_by(testsuit_id=suit.id).all()
query_result_list = []
result = {
"code": 200,
"message": query_result_list
}
for case in case_list:
query_result = {}
query_result["caseid"] = case.caseid
query_result["casename"] = case.casename
query_result["preconditions"] = case.preconditions
query_result_list.append(query_result)
return result
else:
return {"code": 422, "message": "Wrong TestSuit"}
else:
if casename:
case_list = TestCase.query.filter(like_casename).all()
query_result_list = []
result = {
"code": 200,
"message": query_result_list
}
for case in case_list:
query_result = {}
query_result["caseid"] = case.caseid
query_result["casename"] = case.casename
query_result["preconditions"] = case.preconditions
query_result_list.append(query_result)
return result
else:
case_list = TestCase.query.limit(20).all()
query_result_list = []
result = {
"code": 200,
"message": query_result_list
}
for case in case_list:
query_result = {}
query_result["caseid"] = case.caseid
query_result["casename"] = case.casename
query_result["preconditions"] = case.preconditions
query_result_list.append(query_result)
return result
代码稍微有些长，主要是先校验是否传递了 suitname，如果传递了，就在 suitname 下过滤，否则直接过滤名称。
效果展示
使用测试集过滤
增加名称模糊匹配
本文参与 腾讯云自媒体同步曝光计划，分享自微信公众号。
原始发表：2019-07-19，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
