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

最新推荐文章于 2023-05-18 19:00:00 发布
最新推荐文章于 2023-05-18 19:00:00 发布
阅读量683 收藏 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
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
VuePerformanceDevtool是一个用于检查Vue组件性能的浏览器扩展
08-10
Vue Performance Devtool是一个用于检查Vue组件性能的浏览器扩展
「可视化搭建系统」——从设计到架构，探索前端领域技术和业务价值
wang_yu_shun的博客
09-13 1053
阿里巴巴集团前端委员会主席 圆心：未来前端的机会在哪里 对前端未来期许有四点：搭建服务， Serverless，智能化，IDE。仔细想想，一个「可视化搭建系统」的想象空间，正能完美命中这些方面。前端的边界在哪里，对于业务的价值又在哪里，我们不妨静下来，一起从知乎会员事业部前端实现「可视化搭建系统」的过去和现在，以及未来规划去思考。—— 有人说前端「可视化搭建系统」说到底只是重复造轮子产生的玩具；有...
大学生web前端期末大作业实例代码 (1500套,建议收藏) HTML+CSS+JS
热门推荐
HTML网页设计 专注大学生网页设计
10-16 2万+
临近期末，大一新生的各种考试和专业结课作业纷至沓来。web实训大作业、网页期末作业、web课程与设计、网页设计等，简直让人头大。你还在为网页设计老师的作业要求感到头大？网页作业无从下手？网页要求的总数量太多？没有合适的模板？等等一系列问题。你想要解决的问题，在这篇博文中基本都能满足你的需求, 废话不多说，直接看效果。📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确
测试平台(三)前端开发(1)前端框架搭建
Mikasa的博客
07-11 454
本章主要讲述【测试平台】的前端实现，前端框架用的是Vue环境前端框架：Vuenode.js V16.15.0 下载地址：https://nodejs.org/dist/VSCode：https://code.visualstudio.com/Download 二、前端框架搭建 1、VSCode常用插件下载 这里是vscode常用的一些插件，按需下载即可.........
得物前端巡检平台的建设和应用（建设篇）
SmartCodeTech的博客
05-18 1025
我们所在的效能团队，对这个需求最原始的来源是在一次“小项目”的评审中，增长的业务同学提出来的，目的在于保障前端页面稳定性的同时减少大量测试人力的回归成本。
前端自动化测试（一）Vue Test Utils + Jest
JarryNeverGiveup的博客
10-31 1707
Vue Test Utils：vue+jest前端单元测试，已有项目集成jest，包含jest.config.js文件的详细配置。
JMeter—(二)如何做接口测试入门篇
qq_37200262的博客
11-13 839
使用jmeter一步一步进行接口测试，案例为无参接口的调用，简单做个接口实战的入门级练习，后续会有更加复杂的场景，敬请期待！！！！！！！！
Vue测试
weixin_45811730的博客
12-08 2141
​ 长期以来，前端开发的单元测试并不是在前端的开发过程中所必须的，也不是每个前端开发工程师所注意和重视的，甚至扩大到软件开发过程中单元测试这一环也不是在章程上有书面规定所要求的。但是随着每个工程的复杂化、代码的高复用性要求和前端代码模块之间的高内聚低耦合的需求，前端工程中的单元测试流程就显得很有其必要。首先我们要明确测试是什么：​ 对于前端开发过程来说，这里的特定目标就是指我们写的代码，而工具就是我们需要用到的测试框架(库)、测试用例等。检测处的结果就是展示测试是否通过或者给出测试报告，这样才能方便问题的排
关于前端调试与性能优化
Mr古技术分享
05-18 678
一、使用vue-devTool调试 二、生成包分析报告 三、进行拆包优化
第一章 介绍Vue应用的测试
Sam的博客
12-18 2079
任何有价值的学术论文会在深入讨论前定义它使用的概念。所以，就像一个好的学者一样，我将会在教你关于不同测试技术前，定义我所指的应用测试。应用测试一个简单的定义就是检查应用正确行为的过程。无疑你应该检查的应用行为的正确性，但当讨论到不同的测试技术时，这个话题就变得有趣了。有两个主要的方案来进行测试：手工测试和自动化测试。手工测试就是你自己和应用交互，自己检查程序是否正确工作。自动化测试通常做法是写程序来为你执行检查。本书绝大部分是关于自动化测试。但是要理解自动化测试的收益，你必须理解手工测试。
如何测量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
前端自动化测试探索
02-25
本文来自于cnblogs，文章主要探讨了前端自动化测试领域的可测试方向和一些开源的工具，并阐述了一些实践经验等。测试是完善的研发体系中不可或缺的一环。前端同样需要测试，你的css改动可能导致页面错位、js改动可能...
dtest自动化测试平台使用说明.pdf
07-13
包含接口自动化，web前端自动化，数据测试自动化
前端自动化测试框架源代码CYPRESS
08-10
前端自动化前端测试框架，CYPRSS. 后selenium时代测试框架，三驾马车（CYPRESS，testcafe，puppeteer）中一个图书的源代码
前端性能测试入门
03-23
性能测试一直是Web应用中非常受关注的部分。目前大多数人对性能的关注还主要...但实际上，对于web应用来说，除了考虑服务端在足够短的时间内返回页面数据之外，还可以从页面前端的角度来考虑性能测试和性能调优。 　目
UPS、蓄电池、空开、电缆配置计算方法.pptx
04-27
5G通信行业、网络优化、通信工程建设资料
node-v7.4.0.tar.xz
最新发布
04-27
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
Unity mesh减面工具 Mesh Simplify 1.12
04-27
Unity mesh减面工具 Mesh Simplify 1.12
基于Springboot+Vue酒店客房入住管理系统-毕业源码案例设计.zip
04-27
网络技术和计算机技术发展至今，已经拥有了深厚的理论基础，并在现实中进行了充分运用，尤其是基于计算机运行的软件更是受到各界的关注。加上现在人们已经步入信息时代，所以对于信息的宣传和管理就很关键。系统化是必要的，设计网上系统不仅会节约人力和管理成本，还会安全保存庞大的数据量，对于信息的维护和检索也不需要花费很多时间，非常的便利。 网上系统是在MySQL中建立数据表保存信息，运用SpringBoot框架和Java语言编写。并按照软件设计开发流程进行设计实现。系统具备友好性且功能完善。 网上系统在让售信息规范化的同时，也能及时通过数据输入的有效性规则检测出错误数据，让数据的录入达到准确性的目的，进而提升数据的可靠性，让系统数据的错误率降至最低。 关键词：vue；MySQL；SpringBoot框架 【引流】 Java、Python、Node.js、Spring Boot、Django、Express、MySQL、PostgreSQL、MongoDB、React、Angular、Vue、Bootstrap、Material-UI、Redis、Docker、Kubernetes
前端自动化测试功能实现
06-08
前端自动化测试是指通过编写程序来模拟用户操作，自动化执行测试用例，检查前端页面的功能和性能是否符合预期。以下是前端自动化测试的实现方式： 1. Selenium WebDriver：这是一个流行的自动化测试框架，支持多种编程语言，可以模拟用户操作，自动化执行测试用例，检查页面是否符合预期。 2. Puppeteer：这是一个由 Google 开发的自动化测试工具，可以模拟用户操作，自动化执行测试用例，可以将页面渲染成图片或 PDF 文件，方便开发人员进行数据分析。 3. TestCafe：这是一个基于 Node.js 的自动化测试框架，可以模拟用户操作，自动化执行测试用例，支持多种浏览器，可以在不同的平台上进行测试。 4. Cypress：这是一个优秀的自动化测试框架，支持多种编程语言，可以模拟用户操作，自动化执行测试用例，提供了可视化的测试结果和报告。 以上是几种常见的前端自动化测试框架和工具，开发人员可以根据具体需求选择合适的工具进行测试。同时，在测试过程中，需要编写好测试用例，保证测试的全面和有效性。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值