专栏首页萝卜大杂烩Vue + Flask 小知识(三)

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 下过滤,否则直接过滤名称。

效果展示

使用测试集过滤

增加名称模糊匹配

本文分享自微信公众号 - 萝卜大杂烩(zhouluoboluandun)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-07-19

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • (33)Vue购物车

    static、relative、absolute、fixed、inherit、sticky

    达达前端
  • ES6 系列之模板字符串

    模板字符串支持嵌入变量,只需要将变量名写在 ${} 之中,其实不止变量,任意的 JavaScript 表达式都是可以的:

    夜尽天明
  • vue项目

    nodejs 使用npm install vue-cli vue init webpack 项目名称构建项目

    sofu456
  • (29)打鸡儿教你Vue.js

    vue.js的基本语法 css3和css的基本语法 静态资源服务器Nginx的搭建方法

    达达前端
  • (27)打鸡儿教你Vue.js

    当含有index时,以前传递的参数顺序是: (index, value)。现在(value, index)

    达达前端
  • (26)打鸡儿教你Vue.js

    <web>组件: <web>组件用于在页面中嵌入一张网页,src用以指定资源地址。

    达达前端
  • (30)打鸡儿教你Vue.js

    1、通过webpack搭建vue工程workflow 2、哪些是学习vue的重点 3、.vue文件开发模式 4、vue使用jsx进行开发的方式 5、vu...

    达达前端
  • 一篇文章教你如何捕获前端错误

    JavaScript代码在用户浏览器中执行时,由于一些边界情况、本地环境的不可控等因素,可能会存在js运行时错误。

    2020labs小助手
  • electron开发app

    npm install 模块名称 --save 或者 --save-dev –save是对生产环境所需依赖的声明(开发应用中使用的框架,库) –save-...

    sofu456
  • Vue教程01(基础入门)

      因为最近需要使用到Vue,所以打算将Vue的学习资料详细整理一份,感兴趣的小伙伴可以一起来哦。

    用户4919348

扫码关注云+社区

领取腾讯云代金券