测试开发【提测平台】分享13-远程搜索和路由$route使用实现新建提测需求

微信搜索【大奇测试开】，关注这个坚持分享测试开发干货的家伙。

本篇继续提测平台开发，按惯例先给出学习的思维导图，以便快速了解学习知识和平台功能实现的重点。

基本知识点学习

远程搜索

显示的数据通过输入关键词，从服务器搜索并返回，一般主要用于数据很多服务全部获取显示的，常用selected组件中，比如一个增改操作要指定一个公司的联系人场景，在element-vue 选择组件中主要是通过 :remote-method 调一个方法来实现的，而这个方式实现就是一个接口请求，即输入关键立马请求接口，接口根据关键字返回数据回填，说白了就是多次请求。

 

在Element Input组件中也有这个能力，是使用 :fetch-suggestions 场景是用于输入信息给填写建议。这个远程搜索功能在很多可组件上自己利用判断绑定的值的改变，调方法做相应的操作，这块具体可以参考后边功能开发例子。

vue中$router路由

在之前的页面功能如添加/修改的实现上都是通过抽屉或者弹对话框实现的，其实有些场景涉及到需要一个新的页面来实现，那么这个就要用到this.$router.push()来实现，基本一些使用方法如下： 

1.  跳转页面对象 参数传的是菜单路由的定义的页面名称，比如我想点击某个按钮跳转到提测系统的app管理页面，在按钮出发点事件方法中使用

this.$router(\'apps\')
// 或
this.$router({name: \'apps\'}

2. 跳转通过路径 同样为菜单设置的path 相对应

this.$router.push({path: \'/login});

3.带参数跳转

this.$router({name: \'app\', params: { appId: 101 }})
// 上边是以params隐藏传递过去的，下边是在URL显式参数传的
this.$router.push({path: \'/login?url=\' + this.$route.path});

4. 跳转过来的新页获取传过来的值

// 获取通过params的参数
this.$route.params.appId
// 获取URL中的参数
this.$route.query.appId

5. 返回上一页

this.$router.go(-1)

以上这些是一些基本的vue router的用法，接着将在新建提测需求这个功能得到部分应用。

需求功能实现

按照之前的需求文档，由于提测需要提交的信息很多，所以通过点击新按钮会跳转到一个新的vue页面进行操作，先实现python后端的需求添加接口，之前的需求中写过好多类似的了，插入接口的代码直接上了。

提测添加接口

@test_manager.route("/api/test/create",methods=[\'POST\'])
def createReqeust():
    # 获取传递的数据，并转换成JSON
    body = request.get_data()
    body = json.loads(body)

    # 定义默认返回体
    resp_success = format.resp_format_success
    resp_failed = format.resp_format_failed

    # 判断必填参数
    if \'appId\' not in body:
        resp_failed[\'message\'] = \'appId 提测应用不能为空\'
        return resp_failed
    elif \'tester\' not in body:
        resp_failed[\'message\'] = \'tester 测试人员不能为空\'
        return resp_failed
    elif \'developer\' not in body:
        resp_failed[\'message\'] = \'developer 提测人不能为空\'
        return resp_failed
    elif \'title\' not in body:
        resp_failed[\'message\'] = \'title提测标题不能为空\'
        return resp_failed

    # 使用连接池链接数据库
    connection = pool.connection()

    # 判断增加或是修改逻辑
    with connection:
        try:
            with connection.cursor() as cursor:
                # 拼接插入语句,并用参数化%s构造防止基本的SQL注入
                # 其中id为自增，插入数据默认数据设置的当前时间
                sqlInsert = "INSERT INTO request (title,appId,developer,tester,CcMail,verison,`type`,scope,gitCode,wiki,`more`,`status`,createUser,updateUser) " \
                            "VALUES (%s,%s,%s,%s,%s,%s,%s,%s,%s,%s,%s,%s,%s,%s)"
                cursor.execute(sqlInsert, (
                    body["title"], body["appId"], body["developer"], body["tester"], body["CcMail"], body["version"],
                    body[\'type\'],
                    body["scope"], body["gitCode"], body["wiki"], body["more"], \'1\', body["createUser"],
                    body["updateUser"]))
                # 提交执行保存新增数据
                id = cursor.lastrowid
                connection.commit()            return resp_success
        except Exception as err:
            resp_failed[\'message\'] = \'提测失败了:\' + err
            return resp_failed
 

然后重新启动下服务，来做个接口测试，看插入有没有问题，接下来需要重点看下是这部分代码逻辑，关于如果用户勾选了发邮件，则在需要提交数据进行邮件发送，这就用到之前讲解到的邮件工具那边文章了，如果还没练习的可以先看下 学习Python邮件发送方法&落地有邮件工具类-测试开发【提测平台】分享11 ，实现就在commit()后进行逻辑判断，并且特别注意的是之前还预留个是否发送成功的字段，也就是还需要判断邮件是否发送成功了，再对插入的数据立马进行一次更新操作。

if body[\'isEmail\'] == \'true\':
                # 新建成功发送Email
                if body[\'type\'] == \'1\':
                    version = \'功能测试\'
                elif body[\'type\'] == \'2\':
                    version = \'性能测试\'
                elif body[\'type\'] == \'3\':
                    version = \'安全测试\'

                receivers = body["tester"].split(\',\') + body["developer"].split(\',\')
                if not body["CcMail"] is None:
                    receivers = receivers + body["CcMail"].split(\',\')

                subject = \'【提测】\' + body[\'title\']
                reuslt = sendEmail(receivers, subject, [
                    \'<strong>[提测应用]</strong>\',
                    body[\'appName\'],
                    \'<strong>[提测人]</strong>\',
                    body[\'developer\'],
                    \'<strong>[提测版本]</strong>\',
                    body[\'version\'],
                    \'<strong>[提测类型]</strong>\',
                    version,
                    \'<strong>[测试内容]</strong>\',
                    body[\'scope\'],
                    \'<strong>[相关文档]</strong>\',
                    body[\'wiki\'],
                    \'<strong>[补充信息]</strong>\',
                    body[\'more\']
                ])
                if reuslt:
                    sendOk = 1
                else:
                    sendOk = 2
                with connection.cursor() as cursor:
                    # 更新Emai是否发送成功1-成功 2-失败
                    updateEmail = "UPDATE request SET sendEmail=%s, updateUser=%s,`updateDate`= NOW() WHERE id=%s"
                    cursor.execute(updateEmail, (sendOk, body["updateUser"], id))
                    # 提交修改邮件是否发送成功
                    connection.commit()
            else:
                print(\'不发送邮件！\')

两代码合并后再次运行进行下测试，这里其实是有个性能问题，因为是阻塞需要等待邮件的结果，所以接口的相应会有些慢，大家可以理由异步调用进行优化的，查查资料看怎么实现，体现学习能力的时候到了。 

远程应用搜索接口

还有一个接口，在这里一并先实现了，就是需要为应用的远程搜索单独写个按照条件查询接口，此接口有个和之前条件查询特别的需求，是需要同时支持appid或者描述的任意条件的查询，具体实现请看代码（application.py）：

@app_application.route("/api/application/options", methods=[\'GET\'])
def getOptionsForSelected():

    value = request.args.get(\'value\', \'\')
    response = format.resp_format_success

    connection = pool.connection()

    with connection.cursor() as cursor:

        # 先按appid模糊搜索，没有数据再按note搜索
        sqlByAppId = "SELECT * FROM apps WHERE appId LIKE \'%"+value+"%\'"
        cursor.execute(sqlByAppId)
        dataByppId = cursor.fetchall()
        if len(dataByppId) > 0 :
            response[\'data\'] = dataByppId
        else:
            sqlByNote = "SELECT * FROM apps WHERE note LIKE \'%" + value + "%\'"
            cursor.execute(sqlByNote)
            dataByNote = cursor.fetchall()
            response[\'data\'] = dataByNote

    return response

一个笨方法就先默认按照appId查询，没有再按照note条件查询，如果你有更好的实践方法，欢迎提交流，启动服务对接口进行测试（永远不要忘了测试）

到此后端的内容就这些，完整的代码在新的接口文件 testmanager.py 可以在github对照查看。

 

前端提测需求新建实现

自实现步骤步骤为

1）实现上次的添加按钮功能，利用 this.$router.push 实现

2）跳转的时候需要带个动作标记参数，主要为了区分是添加操作还，后续实现的修改操作

3）自行在element ui官方查询 “header页头” 的组件的使用，并实现 <- 按钮的点击跳回上一页面

4）按照产品原型实现form表单各项控件

5）应用下拉框实现远程关键词搜索，并且还要实现在选择对应的应用后，需要应用配置的时候一些默认信息，反填到其他相关的输入框中

6）实现添加和取消按钮的逻辑功能

7）添加成功后跳回列表并让列表列感知刷新最新数据

 

下边是我的实现参考

1. 新建按钮跳转

创建一个空的提测页面，叫commit.vue，并设置好个不显示的在菜单上的路由，配置好path和name以及跳转地址

{
    path: \'commit\',
    name: \'commit\',
    hidden: true,
    component: () => import(\'@/views/test/manger/commit\'),
    meta: { title: \'需求提测\', icon: \'dashboard\' }
},

然后就是编写提测列表页面的新建按钮的点击触发方法逻辑

doCommit() {
   this.$router.push({ name: \'commit\', params: { action: \'ADD\' }})
},

 

2. 实现提测form表单

这里是个全新的页面，我就不再分解了，直接给出上边3-6的实现代码，必要的注解都已经代码了，可以参照对比自己的实现代码，如果部分不是很完成，还是去下载最新的代码去查看

Template模块代码

重点关注selected远程搜索的处理方法和Header组件的如何使用

<template>
  <div class="app-container">
    <el-header>
      <el-page-header @back="goBack" content="提测"/>
    </el-header>
    <el-main>
      <el-form :model="requestForm" :rules="requestRules" ref="ruleForm" label-width="100px" >
        <el-form-item label="提测标题" prop="title">
          <el-input v-model="requestForm.title" placeholder="提测标题" style="width: 350px"></el-input>
        </el-form-item>
        <el-form-item label="服务应用" prop="appId">
          <el-select
             v-model="requestForm.appId"
             filterable
             remote
             reserve-keyword
             placeholder="请输入关键词（远程搜索)"
             :remote-method="remoteMethod"
             :loading="appIdloading"
             @change="appSelected"
             style="width: 300px">
            <el-option
              v-for="item in appIdList"
              :key="item.id"
              :label="item.appId"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="提测RD" prop="developer">
          <el-input v-model="requestForm.developer" placeholder="提测人研发" style="width: 350px"></el-input>
        </el-form-item>
        <el-form-item label="测试QA" prop="tester">
          <el-input v-model="requestForm.tester" placeholder="测试人" style="width: 350px"></el-input>
        </el-form-item>
        <el-form-item label="关系人" prop="CcMail">
          <el-input v-model="requestForm.CcMail" placeholder="邮件抄送人" style="width: 350px"></el-input>
        </el-form-item>
        <el-form-item label="提测版本" prop="version">
          <el-input v-model="requestForm.version" placeholder="部署版本号/分支/Tag" style="width: 350px"></el-input>
        </el-form-item>
        <el-form-item label="提测类型" prop="type">
          <el-select v-model="requestForm.type" clearable placeholder="请选择..." style="width: 300px">
            <el-option
              v-for="item in opsType"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="测试范围" prop="scope">
          <el-input v-model="requestForm.scope" type="textarea" :rows="3" placeholder="1.功能点 \n 2.测试点 \n 3.回归点" style="width: 350px"></el-input>
        </el-form-item>
        <el-form-item label="代码地址" prop="gitCode">
          <el-input v-model="requestForm.gitCode" placeholder="git代码地址" style="width: 350px"></el-input>
        </el-form-item>
        <el-form-item label="产品文档" prop="wiki">
          <el-input v-model="requestForm.wiki" placeholder="文档说明地址" style="width: 350px"></el-input>
        </el-form-item>
        <el-form-item label="更多信息" prop="more">
          <el-input v-model="requestForm.more" type="textarea" :rows="3" placeholder="其他补充信息" style="width: 350px"></el-input>
        </el-form-item>
        <el-form-item>
          <el-checkbox v-model="requestForm.isEmail" true-label="true">发送邮件</el-checkbox>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">立即创建</el-button>
          <el-button @click="onCancel">取 消</el-button>
        </el-form-item>
      </el-form>
    </el-main>
  </div>
</template>

 

Javacript模块代码

这部分代码逻辑中重点关注

1）mounted 页面初始化时候获取上级页面的传参值；

2）表单规则名称增加一个字符多少的校验；

3）选择应用后数据的反填特殊处理，即如果用户已经手写改过之后，就不能将其覆盖填写其默认值

4）头返回和取消返回分别使用两种方法

5）提交添加成功后也有个跳转到列表的处理，列表需要同样用判断是否有回传的方式，处理是否需要立即刷新最新列表数据

<script>
import { apiAppsIds } from \'@/api/apps\'
import { reqCreate } from \'@/api/test\'
import store from \'@/store\'

export default {
  name: \'Commit\',
  data() {
    return {
      op_user: store.getters.name,
      testAction: \'\',
      appIdloading: false,
      requestForm: {
        id: undefined,
        title: \'\',
        appId: \'\',
        appName: \'\',
        developer: \'\',
        tester: \'\',
        CcMail: \'\',
        version: \'\',
        type: \'\',
        scope: \'\',
        gitCode: \'\',
        wiki: \'\',
        more: \'\',
        isEmail: \'true\',
        createUser: \'\',
        updateUser: \'\'
      },
      requestRules: {
        title: [
          { required: true, message: \'请输入活动名称\', trigger: \'blur\' },
          { min: 3, message: \'长度在大于3个字符\', trigger: \'blur\' }
        ],
        appId: [
          { required: true, message: \'请选择对应的服务应用\', trigger: \'change\' }
        ],
        developer: [
          { required: true, message: \'请填写提测人RD\', trigger: \'change\' }
        ],
        tester: [
          { required: true, message: \'请填写对应的测试人Tester\', trigger: \'change\' }
        ]

      },
      opsType: [
        { label: \'功能测试\', value: \'1\' },
        { label: \'性能测试\', value: \'2\' },
        { label: \'安全测试\', value: \'3\' }
      ],
      appIdList: []
    }
  },
  mounted() {
    if (this.$route.params.action) {
      this.testAction = this.$route.params.action
    } 
  },
  methods: {
    goBack() {
      this.$router.go(-1)
    },
    remoteMethod(query) {
      if (query !== \'\') {
        this.appIdloading = true
        setTimeout(() => {
          apiAppsIds(query).then(resp => {
            this.appIdList = resp.data
          })
          this.appIdloading = false
        }, 200)
      } else {
        this.appIdList = []
      }
    },
    appSelected() {
      // 判断获取选择应用的其他信息
      for (var it in this.appIdList) {
        if (this.appIdList[it].id === this.requestForm.appId) {
          // 以下判断为在字符为空的情况下添加，即认为没有人工再输入，快捷反填已知道信息
          if (!this.requestForm.developer) {
            this.requestForm.developer = this.appIdList[it].developer
          }
          if (!this.requestForm.tester) {
            this.requestForm.tester = this.appIdList[it].tester
          }
          if (!this.requestForm.CcMail) {
            this.requestForm.CcMail = this.appIdList[it].CcEmail
          }
          if (!this.requestForm.wiki) {
            this.requestForm.wiki = this.appIdList[it].wiki
          }
          if (!this.requestForm.gitCode) {
            this.requestForm.gitCode = this.appIdList[it].gitCode
          }
          // 填写appName信息，用于邮件发送不再额外查询
          this.requestForm.appName = this.appIdList[it].appId
        }
      }
    },
    onSubmit() {
      this.$refs[\'ruleForm\'].validate((valid) => {
        if (valid) {
          if (this.testAction === \'ADD\') {
            this.requestForm.id = undefined
            this.requestForm.type = \'1\'
            this.requestForm.createUser = this.op_user
            this.requestForm.updateUser = this.op_user
            reqCreate(this.requestForm).then(response => {
              // 如果request.js没有拦截即表示成功，给出对应提示和操作
              this.$notify({
                title: \'成功\',
                message: this.testAction === \'ADD\' ? \'提测添加成功\' : \'提测修改成功\',
                type: \'success\'
              })
              // 回到列表页面
              this.$router.push({ name: \'test\', params: { needUp: \'true\' }})
            })
          }
        } else {
          return false
        }
      })
    },
    onCancel() {
      this.$router.push(\'test\')
    }
  }
}
</script>

 

3. 提测列表叶刷新代码

即需要对页面判断是否是有对应的回调参数，是否需要刷新，如果有则调用查询方法刷新最新数据。

mounted() {
    if (this.$route.params.needUp && this.$route.params.needUp.needUp === \'true\') {
      this.searchClick()
    }
  }, 

 

最终完成的效果如演示

1）新页面转和form表单

2）远程搜索应用搜索和反填，注意下边请求，在每输入一次关键词后将触发搜索，并将结果回填到form表单中

3）输入所有信息，落库成功后，返回上一页并刷新数据，这就不做GIF了，自己看下自己的成果个吧。 

 

【代码更新】

• 地址：https://github.com/mrzcode/TestProjectManagement

• TAG：TPMShare13

坚持原创，坚持实践，坚持干货，如果你觉得有用，请点击推荐，也欢迎关注我博客园和微信公众号。