Day18(图片接口如何做压力测试、QueryWrapper查询两种写法、vue页面调整、自定义注解入门、性能监控（aop及接口监控应用、监控平台druid）、自定义业务测、corn表达式、集合排序)

于 2020-06-15 10:49:06 发布
阅读量728 收藏
点赞数
分类专栏： 杂文 文章标签： QueryWrapper vue 自定义注解 性能监控druid 集合排序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39919087/article/details/106757839
版权
本文探讨了图片接口的压力测试解决方案，包括验证码处理和接口监控。同时，介绍了Vue页面的调整，如字段超长处理、排序功能和权限控制。还涉及了自定义注解、AOP接口监控、Druid监控平台的使用，以及集合排序的两种方法。
摘要由CSDN通过智能技术生成

图片接口如何做压力测试？

第一种：验证码让开发去掉

第二种：写一个万能的验证码

需求：如何对下面的登录做压力测试，如何解决动态验证吗？

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-y1Y9K6mI-1592188248635)(Day18.assets/image-20200518080432918.png)]

万能验证码来喽，验证码是111111直接不用校验

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OMDRVVJ8-1592188248639)(Day18.assets/image-20200518081820990.png)]

注意点，过滤没有token信息的页面 ShiroConfig.java

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-menzroGD-1592188248640)(Day18.assets/image-20200518090102049.png)]

QueryWrapper查询两种写法

QueryWrapper<TestCaseEntity> queryWrapper=new QueryWrapper<TestCaseEntity>();
queryWrapper.lambda().orderByAsc(TestCaseEntity::getOrderNum);
    	if (!StringUtils.isEmpty(key)) {
   
        //	queryWrapper.like("case_name", key);
        	queryWrapper.lambda().like(TestCaseEntity::getCaseName, key);
		}

第一种：需要注意和数据库字段对应

第二种：通过lambda,对象获取属性

vue页面调整

字段超长：show-overflow-tooltip=""

排序：sortable

特殊字段处理：

<el-table-column
​    prop="run"
​    header-align="center"
​    align="center"
​    label="是否开启"
​     :formatter="formatBoolean">
   </el-table-column>

formatBoolean: function (row, column, cellValue) {
                var ret = '否'  //你想在页面展示的值
                if(cellValue=='1'){
                  ret ='是';
                }
                return ret;
}

前端页面调试技巧：在面板中打印内容：console.info();

页面美化

vue结合使用ElementUI

ElementUI 官网

ElementUI布局器： http://lowcode.magicalcoder.com/magicaldrag/index-page.html

新增修改页面调整

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-X4vPlQQ2-1592188248644)(Day18.assets/image-20200518103441933.png)]

<template>
  <el-dialog
    :title="!dataForm.id ? '新增' : '修改'"
    :close-on-click-modal="false"
    :visible.sync="visible">
    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="80px">
    <el-form-item label="是否开启" prop="run">
      <el-switch v-model="dataForm.run" active-color="#00ff00" width="41">
	</el-switch>
    </el-form-item>
    <el-form-item label="案例名称" prop="caseName">
      <el-input v-model="dataForm.caseName" placeholder="案例名称"></el-input>
    </el-form-item>
    <el-form-item label="测试地址" prop="url">
      <el-input v-model="dataForm.url" placeholder="测试地址"></el-input>
    </el-form-item>
    <el-form-item label="类型" prop="type">
      <el-select v-model="dataForm.type" @focus="focus" placeholder="请选择类型" @change="changeSel" >
	      <el-option label="get接口" value="get"></el-option>
        <el-option label="post接口" value="post"></el-option>
        <el-option label="json接口" value="postjson"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="参数" prop="params" v-if="params_visible">
      <el-input v-model="dataForm.params" placeholder="请输入内容" type="textarea" size="medium"></el-input>
    </el-form-item>
    <el-form-item label="头部信息" prop="headers">
      <el-input v-model="dataForm.headers" placeholder="头部信息"></el-input>
    </el-form-item>
    <el-form-item label="检查点" prop="checkpoint">
      <el-input v-model="dataForm.checkpoint" placeholder="检查点"></el-input>
    </el-form-item>
    <el-form-item label="关联" prop="correlation">
      <el-input v-model="dataForm.correlation" placeholder="关联"></el-input>
    </el-form-item>
    <el-form-item label="顺序" prop="orderNum">
      <el-input-number v-model="dataForm.orderNum" :max="100" size="large"></el-input-number>
    </el-form-item>

    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
  export default {
    data () {
      return {
        visible: false,
        params_visible: true,
        dataForm: {
          id: 0,
          run: true,
          caseName: '',
          url: '',
          params: '',
          type: '',
          headers: '',
          checkpoint: '',
          correlation: '',
          orderNum: '',
          testResult: ''
          
        },
        dataRule: {
          run: [
            { required: true, message: '是否开启不能为空', trigger: 'blur' }
          ],
          caseName: [
            { required: true, message: '案例名称不能为空', trigger: 'blur' }
          ],
          url: [
            { required: true, message: '测试地址不能为空', trigger: 'blur' }
          ],
          params: [
            { required: true, message: '参数不能为空', trigger: 'blur' }
          ],
          type: [
            { required: true, message: '类型不能为空', trigger: 'blur' }
          ],
          headers: [
            { required: true, message: '头部信息不能为空', trigger: 'blur' }
          ],
          checkpoint: [
            { required: true, message: '检查点不能为空', trigger: 'blur' }
          ],
          correlation: [
            { required: true, message: '关联不能为空', trigger: 'blur' }
          ],
          orderNum: [
            { required: true, message: '顺序不能为空', trigger: 'blur' }
          ]
        }
      }
    },
    methods: {
      init (id) {
        this.dataForm.id = id || 0
        this.visible = true
        this.$nextTick(() => {
          this.$refs['dataForm'].resetFields()
          if (this.dataForm.id) {
            this.$http({
              url: this.$http.adornUrl(`/testcase/testcase/info/${this.dataForm.id}`),
              method: 'get',
              params: this.$http.adornParams()
            }).then(({data}) => {
              if (data && data.code === 0) {
                this.dataForm.run = data.testCase.run
                this.dataForm.caseName = data.testCase.caseName
                this.dataForm.url = data.testCase.url
                this.dataForm.params = data.testCase.params
                this.dataForm.type = data.testCase.type
                this.dataForm.headers = data.testCase.headers
                this.dataForm.checkpoint = data.testCase.checkpoint
                this.dataForm.correlation = data.testCase.correlation
                this.dataForm.orderNum = data.testCase.orderNum
                this.dataForm.testResult = data.testCase.testResult
              }
            })
          }
        })
      },

      changeSel(selectVal){
        if(selectVal=='get'){
          this.params_visible=false;
        }else{
          this.params_visible=true;
        }
        console.info(selectVal);
      },
      // 表单提交
      dataFormSubmit () {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            this.$http({
              url: this.$http.adornUrl(`/testcase/testcase/${!this.dataForm.id ? 'save' : 'update'}`),
              method: 'post',
              data: this.$http.adornData({
                'id': this.dataForm.id || undefined,
                'run': this.dataForm.run,
                'caseName': this.dataForm.caseName,
                'url': this.dataForm.url,
                'params': this.dataForm.params,
                'type': this.dataForm.type,
                'headers': this.dataForm.headers,
                'checkpoint': this.dataForm.checkpoint,
                'correlation': this.dataForm.correlation,
                'orderNum': this.dataForm.orderNum,
                'testResult': this.dataForm.testResult
              })
            }).then(({data}) => {
              if (data && data.code === 0) {
                this.$message({
                  message: '操作成功',
                  type: 'success',
                  duration: 1500,
                  onClose: () => {
                    this.visible = false
                    this.$emit('refreshDataList')
                  }
                })
              } else {
                this.$message.error(data.msg)
              }
            })
          }
        })
      }
    }
  }
</script>

检查点通过prop定义，required=true，必填项判断，对应的页面会有红点

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-niCjVOdJ-1592188248649)(Day18.assets/image-20200518103836697.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hGfUJ770-1592188248650)(Day18.assets/image-20200518104017846.png)]

页面按钮权限控制

vue页面添加某个功能按钮权限后，需要在后台《菜单管理》，添加对应功能按钮，注意上级菜单要对应。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DrGd1GXx-1592188248651)(Day18.assets/image-20200518111249533.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XV78cMJR-1592188248653)(Day18.assets/image-20200518111432395.png)]

如果不加权限代码 v-if=“isAuth(‘testcase:testcase:apitest’)”，任何用户进入都可以看到批量测试按钮

自定义注解入门

创建一个注解类，new–>Annnotation,填写类名，finish.

注解标识@interface

@Target({
   ElementType.METHOD})
public @interface MyAnnnotation {
   
	String name() default "";
	String value() default "";
}

注解使用类型，ElementType.TYPE使用在方法上，ElementType.METHOD使用在类上

@Target({
   ElementType.TYPE, ElementType.METHOD})

使用如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PIMRDHmV-1592188248654)(Day18.assets/image-20200518115328869.png)]

性能监控

1.aop及接口监控应用

系统日志监控

spring 核心概念 IOC（控制反转，例如把对象放到xml文件中让spring统一管理，实现解耦）

​ DI（依赖注入，例如@Autowired）

​ AOP 面向切面 (监控)

		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-aop</artifactId>
		</dependency>

核心注解@Aspect；@Pointcut，指定要监控的注解类；@Around

import com.google.gson.Gson;
import io.renren.common.annotation.SysLog;
import io.renren.common.utils.HttpContextUtils;
import io.renren.common.utils.IPUtils;
import io.renren.modules.sys.entity.SysLogEntity;
import io.renren.modules.sys.entity.SysUserEntity;
import io.renren.modules.sys.service.SysLogService;
import org.apache.shiro.SecurityUtils;
import org.aspectj.lang.ProceedingJoinPoint;
import org.aspectj.lang.annotation.Around;
import org.aspectj.lang.annotation.Aspect;
import org.aspectj.lang.annotation.Pointcut;
import org.aspectj.lang.reflect.MethodSignature;
import org.springframework.beans.factory.annotation
最低0.47元/天 解锁文章
weixin_39919087
关注
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值