性能测试自动化平台（二）前端页面vuejs

最新推荐文章于 2024-10-24 09:27:09 发布
最新推荐文章于 2024-10-24 09:27:09 发布
阅读量740 收藏 1
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Theahe/article/details/115954376
版权

前端页面我是用vue.js搭了个脚手架。
下载了网上的demo：https://github.com/PanJiaChen/vue-admin-template，然后再修改。

实现方式

1、使用Vue CLI搭建脚手架
npm install -g @vue/cli
vue create 项目名
npm run serve
（node版本最新版会有一系列问题，建议版本不要太高）
2、使用组件实现上传、对话框
https://element.eleme.cn/#/
zh-CN/component/upload
3、调后端服务接口实现相应逻辑

页面介绍

做了两个菜单，一个菜单是配置性能测试参数与上传脚本文件；另一个就是在线修改脚本
在这里插入图片描述

性能测试菜单

在这里插入图片描述
在这里插入图片描述

在线修改脚本

在这里插入图片描述

代码介绍

涉及到修改的文件如下图所示
在这里插入图片描述

\vue-admin-template-master\src\router\index.js文件修改

删掉多余的目录菜单，修改留下两个菜单。
性能测试菜单就是对应/views/table/index，想要修改这个菜单就要修改\vue-admin-template-master\src\views\table\index.vue文件。
在线修改脚本菜单就是对应/views/tree/index，则修改\vue-admin-template-master\src\views\tree\index.vue文件。

  {
    path: '/example',
    component: Layout,
    redirect: '/example/table',
    name: 'Example',
    meta: { title: '菜单', icon: 'el-icon-s-help' },
    children: [
      {
        path: 'table',
        name: '性能测试',
        component: () => import('@/views/table/index'),
        meta: { title: '性能测试', icon: 'table' }
      },
      {
        path: 'tree',
        name: '在线修改脚本',
        component: () => import('@/views/tree/index'),
        meta: { title: '在线修改脚本', icon: 'tree' }
      }
    ]
  },

\vue-admin-template-master\src\views\tree\index.vue文件


<template>

  <div class="app-container">
    <el-form
      :inline="true"
      :model="formInline"
      class="demo-form-inline"
    >
      <el-form-item label="脚本名称">
        <el-input
          v-model="formInline.user"
          placeholder="脚本名称"
        ></el-input>
      </el-form-item>

      <el-form-item>
        <el-button
          type="primary"
          @click="onSubmit(formInline.user)"
        >查询</el-button>
      </el-form-item>
    </el-form>

    <!-- 脚本名称：
    <el-input
      placeholder="请输入内容"
      prefix-icon="el-icon-search"
      v-model="input2"
      clearable
    >
    </el-input>
    <el-button
      type="primary"
      icon="el-icon-search"
    >搜索</el-button> -->
    <el-table
      :data="tableData"
      border
      fit
      highlight-current-row
      style="width: 100%"
    >
      <el-table-column
        fixed
        prop="id"
        label="序号"
        width="200"
      >
      </el-table-column>
      <el-table-column
        prop="jmxname"
        label="脚本名称"
        width="1000"
      >
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        width="400"
      >
        <template slot-scope="scope">
          <el-button
            @click="handleClickget(scope.row)"
            type="primary"
          >查看</el-button>
          <!-- <el-button
            @click="handleClickupdate(scope.row)"
            type="primary"
          >编辑</el-button> -->
          <el-button
            type="primary"
            @click="handleClickupdate(scope.row)"
          >编辑</el-button>

          <el-button
            @click="handleClickupload"
            type="primary"
          >上传</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      title="提示"
      :visible.sync="jmxdialogVisible"
      width="30%"
      :before-close="jmxhandleClose"
    >
      <span>无此脚本，请输入正确的脚本名称。</span>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="jmxdialogVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="jmxdialogVisible = false"
        >确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog
      title="脚本内容"
      :visible.sync="jmxdatadialogFormVisible"
    >
      <el-input v-model="input"></el-input>
      <!-- <el-form :model="form">
        <el-form-item
          label="脚本内容"
          :label-width="formLabelWidth"
        >
          <el-input
            v-model="form.jmx_data"
            autocomplete="off"
          ></el-input>
        </el-form-item>
      </el-form> -->
    </el-dialog>
    <el-dialog
      title="修改与调试脚本"
      :visible.sync="dialogFormVisible"
    >
      <el-form :model="form">
        <el-form-item
          label="脚本内容"
          :label-width="formLabelWidth"
        >
          <el-input
            type="textarea"
            autosize
            v-model="form.name"
            autocomplete="off"
          ></el-input>
        </el-form-item>

      </el-form>
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button
          type="primary"
          @click="savejmeterdata(form.name)"
        >保存</el-button>
        <el-button
          type="primary"
          @click="runjmeter"
        >调试</el-button>
        <!-- <el-button
          type="primary"
          @click="runjmeterresult"
        >查看调试结果</el-button> -->
        <!-- <el-button
          type="primary"
          @click="dialogFormVisible = false"
        >确定修改</el-button> -->
        <el-button
          type="primary"
          onclick="window.location.href='http://localhost:8091/HTTPrequest/'"
        >查看调试结果</el-button>
      </div>
    </el-dialog>
  </div>

</template>


<script>
import {
  getjmxdata,
  getjmxfile,
  runjmetercmd,
  savejmeter,
  uploadtogit,
} from "@/api/table";
export default {
  data() {
    return {
      // input2: "",
      tableData: [],
      formInline: {
        user: "",
      },
      jmxdialogVisible: false,
      jmxdatadialogFormVisible: false,
      dialogFormVisible: false,
      // form: [],
      input: "",
      form: {
        name: "",
      },
      formLabelWidth: "120px",
    };
  },
  watch: {
    filterText(val) {
      this.$refs.tree2.filter(val);
    },
  },

  methods: {
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    onSubmit(user) {
      const params = {
        jmx_name: user,
      };
      console.log(params);
      getjmxfile(params).then((res) => {
        console.log(res);
        if (res == "000") {
          this.jmxdialogVisible = true;
        } else {
          //要展示脚本名称与序号
          this.tableData = [{ id: "1", jmxname: user }];
        }
      });
    },
    jmxhandleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    handleClickget(row) {
      const params = {
        jmx_name: row.jmxname,
      };
      getjmxdata(params).then((res) => {
        this.$msgbox(res, "脚本内容", {
          type: "info",
        });
      });
    },
    handleClickupdate(row) {
      this.dialogFormVisible = true;
      const params = {
        jmx_name: row.jmxname,
      };
      getjmxdata(params).then((res) => {
        this.form.name = res;
      });
    },
    runjmeter() {
      runjmetercmd().then((res) => {
        console.log(res);
        const h = this.$createElement;

        this.$notify({
          title: "调试结果",
          message: h("i", { style: "color: teal" }, res),
          type: "success",
        });
      });
    },
    savejmeterdata(name) {
      console.log(name, "121221");
      const params = {
        jmx_data: name,
      };

      savejmeter(params).then((res) => {
        const h = this.$createElement;

        this.$notify({
          title: "保存结果",
          message: h("i", { style: "color: teal" }, res),
          type: "success",
        });
      });
    },
    handleClickupload() {
      uploadtogit().then((res) => {
        const h = this.$createElement;

        this.$notify({
          title: "上传结果",
          message: h("i", { style: "color: teal" }, res),
          type: "success",
        });
      });
    },
  },
};
</script>

<style lang="scss">
.el-message-box__wrapper .el-message-box {
  width: 1280px;
}
.el-message-box__message p {
  margin: 0;
  line-height: 24px;
  height: 817px;
  overflow-y: scroll;
}
</style>

\vue-admin-template-master\src\views\table\index.vue文件

<template>
  <div class="app-container">
    <el-button
      type="primary"
      @click="dialogFormVisible = true"
    >新增性能测试场景</el-button>

    <el-dialog
      title="新增性能测试场景"
      :visible.sync="dialogFormVisible"
    >
      <el-form :model="form">
        <el-form-item
          label="脚本名称"
          :label-width="formLabelWidth"
        >
          <el-input
            v-model="form.jmx_name"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="测试工号"
          :label-width="formLabelWidth"
        >
          <!-- <el-select v-model="form.region" placeholder="请选择活动区域">
        <el-option label="区域一" value="shanghai"></el-option>
        <el-option label="区域二" value="beijing"></el-option>
      </el-select> -->
          <el-input
            v-model="form.author_id"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="定时任务时间"
          :label-width="formLabelWidth"
        >
          <el-input
            v-model="form.time"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="总线程数"
          :label-width="formLabelWidth"
        >
          <el-input
            v-model="form.thread"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="开始线程数"
          :label-width="formLabelWidth"
        >
          <el-input
            v-model="form.start_thread"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="多少秒内增加多少线程之多少秒"
          :label-width="formLabelWidth"
        >
          <el-input
            v-model="form.seconds"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="多少秒内增加多少线程之多少线程"
          :label-width="formLabelWidth"
        >
          <el-input
            v-model="form.add_thread"
            autocomplete="off"
          ></el-input>
        </el-form-item>

        <el-upload
          class="upload-demo"
          action="后端暴露出来的上传接口"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :before-remove="beforeRemove"
          multiple
          :limit="3"
          :on-exceed="handleExceed"
          :file-list="fileList"
        >
          <el-button
            size="small"
            type="primary"
          >点击上传</el-button>
          <div
            slot="tip"
            class="el-upload__tip"
          >请上传脚本文件</div>
        </el-upload>

      </el-form>
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="handleSave"
        >确 定</el-button>
      </div>
    </el-dialog>

    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
      style="width: 100%"
    >

      <!-- 
      <el-table-column align="center" label="ID" width="95">
        <template slot-scope="scope">
          {{ scope.$index }}
        </template>
      </el-table-column> -->
      <el-table-column
        label="脚本名称"
        width="150"
        prop="jmx_name"
      >
        <!-- <el-input v-model="jmx_name" autocomplete="off" /> -->
      </el-table-column>
      <el-table-column
        label="测试工号"
        width="150"
        align="center"
        prop="author_id"
      >
        <!-- <template slot-scope="scope">
          <span>{{ author_id }}</span>
        </template> -->
      </el-table-column>
      <el-table-column
        label="定时任务时间"
        width="210"
        align="center"
        prop="time"
      >
        <!-- <template slot-scope="scope">
          {{ time }}
        </template> -->
      </el-table-column>
      <el-table-column
        label="线程数"
        width="210"
        align="center"
        prop="thread"
      >
        <!-- <template slot-scope="scope">
          {{ time }}
        </template> -->
      </el-table-column>
      <el-table-column
        label="开始线程数"
        width="210"
        align="center"
        prop="start_thread"
      >
        <!-- <template slot-scope="scope">
          {{ start_thread }}
        </template> -->
      </el-table-column>
      <el-table-column
        label="开始线程数"
        width="210"
        align="center"
        prop="seconds"
      >
        <!-- <template slot-scope="scope">
          {{ start_thread }}
        </template> -->
      </el-table-column>
      <el-table-column
        label="开始线程数"
        width="210"
        align="center"
        prop="add_thread"
      >
        <!-- <template slot-scope="scope">
          {{ start_thread }}
        </template> -->
      </el-table-column>

      <el-table-column
        class-name="status-col"
        label="测试报告"
        width="210"
        align="center"
      >
        <template slot-scope="scope">
          <el-button
            @click="handleClick(scope.row)"
            type="primary"
          >测试报告</el-button>

        </template>
        <!-- <el-button
          type="primary"
          onclick="window.location.href='http://localhost:8091/result0108/'"
        >测试报告</el-button> -->
        <!-- <button onclick="window.location.href='http://localhost:8091/result0108/'">按钮</button> -->

        <!-- <template slot-scope="scope">
          <el-tag :type="scope.row.status | statusFilter">{{ scope.row.status }}</el-tag>
        </template> -->

      </el-table-column>
    </el-table>
    <!-- <el-button
      type="text"
      @click="dialogVisible = false"
    >点击打开 Dialog</el-button> -->

    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <span>脚本还未执行完成，报告未生成，请稍后再来。</span>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="dialogVisible = false"
        >确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getList, getreport, updateJekins } from "@/api/table";

export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: "success",
        draft: "gray",
        deleted: "danger",
      };
      return statusMap[status];
    },
  },
  data() {
    return {
      list: [],
      listLoading: false,
      // fileList: [{name:file.name,url:'',}]
      dialogTableVisible: false,
      dialogFormVisible: false,
      dialogVisible: false,
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
      formLabelWidth: "120px",
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      // this.listLoading = true
      const cacheData = JSON.parse(localStorage.getItem("storage_name"));
      if (cacheData) {
        this.list = cacheData;
      }

      console.log(this.list, "xxx");
      // this.time = cacheData?.time ?? ''
      // this.jmx_name = cacheData?.jmx_name ?? ''
      // this.author_id = cacheData?.author_id ?? ''
      // this.thread = cacheData?.thread ?? ''
      // this.start_thread = cacheData?.start_thread ?? ''
      // this.seconds = cacheData?.seconds ?? ''
      // this.add_thread = cacheData?.add_thread ?? ''

      // getList().then(response => {
      //   this.list = response.data.items
      //   this.listLoading = false
      // })
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      );
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    handleSave() {
      const params = {
        jmx_name: this.form.jmx_name,
        time: this.form.time,
        author_id: this.form.author_id,
        thread: this.form.thread,
        start_thread: this.form.start_thread,
        seconds: this.form.seconds,
        add_thread: this.form.add_thread,
      };
      console.log(this.list, "111212");
      this.list.push(params);
      console.log(this.list, "111");
      const storage = window.localStorage;

      storage.setItem("storage_name", JSON.stringify(this.list));

      updateJekins(params).then((res) => {
        this.dialogFormVisible = false;
      });
    },

    handleClick(row) {
      const params = {
        jmx_name: row.jmx_name,
      };

      getreport(params).then((res) => {
        console.log(res);
        if (res == "000") {
          this.dialogVisible = true;
        } else {
          window.location.href = "http://localhost:8091/" + row.jmx_name;
        }
      });
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
  },
};
</script>

\vue-admin-template-master\src\api\table.js文件

import request from '@/utils/request'

export function getList(params) {
  return request({
    url: '/vue-admin-template/table/list',
    method: 'get',
    params
  })
}



export function updateJekins(params) {
  return request({
    url: '后端暴露出来的更新Jenkins接口',
    method: 'post',
    headers: {
      'Content-Type': 'application/json'
    },
    data: params


  })
}

export function getreport(params) {
  return request({
    url: '后端暴露出来的匹配测试报告文件接口',
    method: 'post',
    headers: {
      'Content-Type': 'application/json'
    },
    data: params



  })
}

export function getjmxfile(params) {
  return request({
    url: '后端暴露出来的匹配jmx文件接口',
    method: 'post',
    headers: {
      'Content-Type': 'application/json'
    },
    data: params



  })
}

export function getjmxdata(params) {
  return request({
    url: '后端暴露出来的读取jmx文件接口',
    method: 'post',
    headers: {
      'Content-Type': 'application/json'
    },
    data: params



  })
}


export function runjmetercmd() {
  return request({
    url: '后端暴露出来的执行jmeter接口',
    method: 'post',
    headers: {
      'Content-Type': 'application/json'
    },
    // data: params



  })
}

export function savejmeter(params) {
  return request({
    url: '后端暴露出来的保存jmx文件接口',
    method: 'post',
    headers: {
      'Content-Type': 'application/json'
    },
    data: params



  })
}


export function uploadtogit() {
  return request({
    url: '后端暴露出来的上传文件到git的接口',
    method: 'post',
    headers: {
      'Content-Type': 'application/json'
    },



  })
}
thea2020
关注
vuejs前端页面开发总结共7页.pdf.zip
10-29
Vue CLI是Vue.js的命令行工具，它提供了快速搭建项目、自动化生成组件、执行单元测试等功能，极大地加速了开发流程。Vue生态系统还包括一系列优秀的库和工具，如`axios`用于HTTP请求，`element-ui`或`bootstrap-vue`...
前端自动化测试（一）Vue Test Utils + Jest
JarryNeverGiveup的博客
10-31 1965
Vue Test Utils：vue+jest前端单元测试，已有项目集成jest，包含jest.config.js文件的详细配置。
JMeter—(二)如何做接口测试入门篇
qq_37200262的博客
11-13 1017
使用jmeter一步一步进行接口测试，案例为无参接口的调用，简单做个接口实战的入门级练习，后续会有更加复杂的场景，敬请期待！！！！！！！！
Vue2开发工具：从调试到性能优化的全面介绍
weixin_36483050的博客
10-04 1142
本文还有配套的精品资源，点击获取 简介：Vue2 Dev-Tools是Vue.js第二版的专用浏览器扩展，支持组件树视图、状态管理、性能分析等功能。用户可以使用它来检查组件细节、调试Vuex应用、优化性能，并查看组件间的数据流动。安装时需要注意安全性和来源。扩展的使用能够提升开发效率，简化调试过程，提高Vue2应用开发的满意度。 1. Vue.js框架介绍 ...
Vue测试
weixin_45811730的博客
12-08 2229
​ 长期以来，前端开发的单元测试并不是在前端的开发过程中所必须的，也不是每个前端开发工程师所注意和重视的，甚至扩大到软件开发过程中单元测试这一环也不是在章程上有书面规定所要求的。但是随着每个工程的复杂化、代码的高复用性要求和前端代码模块之间的高内聚低耦合的需求，前端工程中的单元测试流程就显得很有其必要。首先我们要明确测试是什么：​ 对于前端开发过程来说，这里的特定目标就是指我们写的代码，而工具就是我们需要用到的测试框架(库)、测试用例等。检测处的结果就是展示测试是否通过或者给出测试报告，这样才能方便问题的排
面试官问 Vue 性能优化，我该怎么回答(1)，中高级前端面试中你不得不会的知识点
sfdsfgdgd的博客
04-14 715
我们在项目进行打包后，会将开发中的多个文件代码打包到一个文件中，并且经过压缩、去掉多余的空格、babel编译化后，最终将编译得到的代码会用于线上环境，那么这样处理后的代码和源代码会有很大的差别，当有 bug的时候，我们只能定位到压缩处理后的代码位置，无法定位到开发环境中的代码，对于开发来说不好调式定位问题，因此 sourceMap 出现了，它就是为了解决不好调式代码问题的。在正式环境中不要使用 eval-source-map, 因为它会增加文件的大小，但是在开发环境中，可以试用下，因为他们打包的速度很快。
第一章 介绍Vue应用的测试
Sam的博客
12-18 2160
任何有价值的学术论文会在深入讨论前定义它使用的概念。所以，就像一个好的学者一样，我将会在教你关于不同测试技术前，定义我所指的应用测试。应用测试一个简单的定义就是检查应用正确行为的过程。无疑你应该检查的应用行为的正确性，但当讨论到不同的测试技术时，这个话题就变得有趣了。有两个主要的方案来进行测试：手工测试和自动化测试。手工测试就是你自己和应用交互，自己检查程序是否正确工作。自动化测试通常做法是写程序来为你执行检查。本书绝大部分是关于自动化测试。但是要理解自动化测试的收益，你必须理解手工测试。
使用Vuejs开发跨平台应用的前端框架
08-13
而“使用Vuejs开发跨平台应用的前端框架”这一主题，主要涉及到的技术是Vue.js的拓展工具——uni-app。 uni-app 是一个基于 Vue.js 的多端开发框架，由HBuilderX团队开发维护。它允许开发者编写一次代码，通过uni-...
test:一个vuejs测试商城
04-02
总的来说，这个"test:一个vuejs测试商城"项目提供了一个实践Vue.js特性和最佳实践的机会，同时涵盖了前端开发中的常见流程，如依赖管理、热重载开发服务器、生产环境构建等。对于学习Vue.js和前端开发的人来说，这是...
testmall:对vuejs的测试
04-16
Vue.js 是一个流行的轻量级前端JavaScript框架，用于构建用户界面。它的核心理念是通过声明式数据绑定和组件化来简化Web应用的开发。在"testmall"项目中，我们看到的是一个基于Vue.js的电商应用，名为"超级商场"。...
基于Eggjs后端Vuejs前端实现的JavaScript全栈系统
08-09
Vue.js的组件化设计使得前端页面的组织和复用更为高效。 **项目结构** `role-manage-platform-master` 这个文件名暗示了该项目可能是一个角色管理平台，可能涉及到用户角色的创建、编辑、删除以及权限分配等功能。...
如何测量vue应用运行时的性能
12-13
在上一篇文章中，我们讨论了如何提高大型数据的性能。但是我们还没有测量它提高了多少。 我们可以使用Chrome DevTools 的性能选项来实现这一点。但是为了获取准确数据，我们必须在Vue上激活性能模式。 我们可以在main.js或者插件中设置全局变量，代码如下： Vue.config.performance = true; 如果你设置了正确的 NODE_ENV 环境变量，那么可以使用非生产环境做判断。 const isDev = process.env.NODE_ENV !== "production"; Vue.config.performance = isDev; 这将在V
VuePerformanceDevtool是一个用于检查Vue组件性能的浏览器扩展
08-10
Vue Performance Devtool是一个用于检查Vue组件性能的浏览器扩展
关于前端调试与性能优化
Mr古技术分享
05-18 838
一、使用vue-devTool调试 二、生成包分析报告 三、进行拆包优化
vue3 + jest 使用记录
xiao_cheng_的博客
02-17 1017
vue3 + jest + VTU使用问题记录 1、判断dom元素中是否包含某个元素 import addEditUser from '@/views/UserManage/addUser.vue' import ElementPlus from 'element-plus' import { mount } from '@vue/test-utils' describe('addEditUser', () => { const wrapper = mount(addEditUser, {
通过jmeter进行用户并发（vu/s）测试
azzx666的博客
02-03 1249
通过jmeter进行用户并发（vu/s）测试 用户并发：通过线程模拟并发用户 线程：一边启动一边调度请求 同步定时器（Synchronizing Timer ） ：保证线程集合完毕才同步发起请求 一、执行步骤 打开jmeter 新建线程组 配置好对应的线程数、Ramp-Up时间；勾选“延迟创建线程直到需要”（可不勾选，根据具体需求来） 线程数：所需要的线程数 Ramp-Up时间：表示多少时间内（单位：秒）把线程数全部都启动 延迟创建线程直到需要：最大保证内存足以支撑线程完全运行； 勾选：线程
vue 组件测试
文摘资讯
07-31 409
Vue Test Utils 是 Vue.js 官方的单元测试实用工具库。它在浏览器和 Node.js 环境中皆可运行，并能配合任何 test runner 使用。选择一个测试运行器测试运行器 (test runner) 就是运行测试的程序。主流的 JavaScript 测试运行器有很多，但 Vue Test Utils 都能够支持。它是与测试运行器无关的。当然在我们选用...
Vue 3项目的性能监测和优化
最新发布
DHLSP15的博客
10-24 901
Vue 项目的性能检测和优化方法
vue 应用测试（一） --- 介绍
JackZhouMine
06-12 1511
前端测试简介组件测试Jest 测试框架简介其他测试框架第一个测试避免误报如何组织测试代码组件挂载Vue2 组件挂载的方式Vue3 的挂载方式挂载选项如何调试测试用例参考小结软件测试：检查软件是否按照预期工作的过程。测试分类：手动测试：需要人工操作，比如点击按钮，输入文字等。自动测试：写代码测试其他代码，不需要人亲自手动测试每一个功能。端到端测试测试整个应用，从用户角度出发，浏览器自动测试整个应用是否按照预期工作。是自动执行的手动测试，加快手动测试的速度。优点：测试全面，测试结果可靠。
旅游景点导游平台开发全流程实录
- 前端路由控制，实现页面间的平滑跳转，提升用户体验。 - 前端状态管理，使用Vuex管理应用状态，维护全局状态一致性。 2. 后端开发细节 - SpringBoot的RESTful API设计，方便前端调用服务。 - 利用Spring Data...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值