web端ActiveMq测试工具

如何用vue3创建简单的web端ActiveMq测试工具?

1、复用vue3模板框架

创建main.js,引入APP文件,createApp创建文件,并加载element插件,然后挂载dom节点

2、配置vue.config.js脚本配置

mport { defineConfig } from "vite";
import viteCompression from "vite-plugin-compression";
import externalGlobals from "rollup-plugin-external-globals";
import vue from "@vitejs/plugin-vue";
import { createSvgIconsPlugin } from "vite-plugin-svg-icons";
import { fileURLToPath, URL } from "node:url";
import path from "path";
import VueSetupExtend from "vite-plugin-vue-setup-extend";
export default ({ mode }) => {console.log("====mode===", mode);return defineConfig({base: "./",plugins: [// basicSSL(),buildTimePlugin(mode),vue(),viteCompression({deleteOriginFile: false, // 删除源文件verbose: true,disable: false,threshold: 10240,algorithm: "gzip",ext: ".gz",}),createSvgIconsPlugin({iconDirs: [path.resolve(process.cwd(), "src/assets/icons")],symbolId: "icon-[dir]-[name]",}),VueSetupExtend(),],resolve: {extensions: [".vue", ".js"],alias: {"@": fileURLToPath(new URL("./src", import.meta.url)),},},css: {postcss: {plugins: [require("tailwindcss"), require("autoprefixer")],},},server: {hmr: true,// https: true,host: "0.0.0.0",cors: true,port: 8888,open: true,proxy: {"^/socketproxy": {target: "ws://192.168.50.201:61614", //实际请求地址changeOrigin: true,ws: true, // 是否代理websocketsrewrite: (path) => path.replace(/^\/socketproxy/, ""),},},},

3、绘制测试页面

<template><div id="container"><h1>web端MQ消费测试工具</h1><div style="display: flex;" class="mq-main"><div><el-form :model="form" label-width="auto" style="max-width: 600px"><el-form-item label="MQ地址"><el-input v-model="form.ip" /></el-form-item><el-form-item label="topic路径"><el-input v-model="form.topic" /></el-form-item><el-form-item ><el-button type="primary" @click="onSubmit">测试</el-button></el-form-item></el-form></div><div><h3>数据展示</h3><div class="show-record"><li v-for="(item, $index) in mqList">第{{ $index+1}}条数据:{{ item }}</li></div></div></div></div>
</template>

左侧是form表单输入MQ的地址和TOPIC名称,右侧是展示的内容

4、编写JS测试代码

主要是用stompjs创建连接,并监听topic数据

import Stomp from "stompjs";
import { nextTick, onMounted, ref } from "vue";
import { ElMessage } from "element-plus";
const form = ref({ip: "192.168.50.201:61614",topic: "/topic/pvg.alert.msg"
})
const mqList = ref([]);
let client=null;
const onSubmit = ()=>{if(!form.value.ip || !form.value.topic){ElMessage.error("请检查输入参数")return}let url = `ws://${form.value.ip}`if(client){client.disconnect();client = null}client = Stomp.client(url);client.connect({}, function (frame) {if(frame)  ElMessage.success("监听模式连接成功")client.subscribe(form.value.topic, function (message) {let _data = null;if(message.body){_data = JSON.parse(message.body)}else{_data = message.body}mqList.value.push(_data)});});
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/68190.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

3.DrawCall的概念

DrawCall是渲染管线中的一个重要概念&#xff0c;指的是CPU向GPU发送的一个绘制命令&#xff0c;告诉GPU&#xff1a;“请根据我提供的数据&#xff0c;画一个物体&#xff08;或一部分物体&#xff09;。” 通俗易懂讲解&#xff1a;DrawCall就像给画师下订单 想象你是一个老…

低代码系统-产品架构案例介绍、简道云(七)

今天分析另外一个零代码、低代码产品-简道云&#xff0c;跟所有低代码产品的架构图一样&#xff0c;高、大、炫、美。 依然是从下至上&#xff0c;从左到右的顺序。 开发层 搭建中心 表单、流程、报表、用户中心&#xff0c;还是这些内容&#xff0c;自定义打印很多平台都有&am…

【Oracle篇】使用Hint对优化器的执行计划进行干预(含单表、多表、查询块、声明四大类Hint干预)

&#x1f4ab;《博主介绍》&#xff1a;✨又是一天没白过&#xff0c;我是奈斯&#xff0c;从事IT领域✨ &#x1f4ab;《擅长领域》&#xff1a;✌️擅长阿里云AnalyticDB for MySQL(分布式数据仓库)、Oracle、MySQL、Linux、prometheus监控&#xff1b;并对SQLserver、NoSQL(…

C# lock使用的逻辑和情景

情景&#xff1a;扣库存&#xff0c;会出现超扣的情况&#xff0c;因为同一个单子会有不同的工作人员使用&#xff0c;要保证数据的一致性。那么就用锁。 优化锁对象管理 使用 Lazy 初始化锁对象&#xff1a; 使用 ConcurrentDictionary 的 GetOrAdd 方法结合 Lazy 确保锁对象只…

LabVIEW项目中的工控机与普通电脑选择

工控机&#xff08;Industrial PC&#xff09;与普通电脑在硬件设计、性能要求、稳定性、环境适应性等方面存在显著差异。了解这些区别对于在LabVIEW项目中选择合适的硬件至关重要。下面将详细分析这两种设备的主要差异&#xff0c;并为LabVIEW项目中的选择提供指导。 ​ 硬件设…

未初始化数据恢复全攻略

没有初始化概述 在日常使用电脑、硬盘、U盘等存储设备时&#xff0c;我们可能会遇到“没有初始化”的提示。这一情况通常发生在存储设备突然无法被系统正常识别或访问时&#xff0c;系统往往要求我们先进行初始化操作。然而&#xff0c;初始化操作意味着对存储设备进行格式化&…

Vue.js组件开发-如何实现全选反选

在 Vue.js 中实现全选和反选功能&#xff0c;可以通过结合v-model、计算属性和事件处理来完成。 实现思路 • 数据绑定&#xff1a;为每个复选框绑定一个选中状态。 • 全选控制&#xff1a;通过一个复选框控制所有复选框的选中状态。 • 反选控制&#xff1a;通过一个按钮或…

Mybatis——sql映射文件中的增删查改

映射文件内的增删查改 准备工作 准备一张数据表&#xff0c;用于进行数据库的相关操作。新建maven工程&#xff0c; 导入mysql-connector-java和mybatis依赖。新建一个实体类&#xff0c;类的字段要和数据表的数据对应编写接口编写mybatis主配置文件 public class User {priva…

Spring MVC (三) —— 实战演练

项目设计 我们会将前端的代码放入 static 包下&#xff1a; 高内聚&#xff0c;低耦合 这是我们在实现项目的设计思想&#xff0c;一个项目里存在很多个模块&#xff0c;每一个模块内部的要求类与类、方法与方法要相互配合紧密联系&#xff0c;这就是高内聚&#xff0c;低耦合…

Typescript泛型类详细解读

代码示例 (() > {// 定义一个类,类中的属性值的类型是不确定,方法中的参数及返回值的类型也是不确定// 定义一个泛型类class GenericNumber<T>{// 默认的属性的值的类型是泛型类型defaultValue: Tadd: (x: T, y: T) > Tconstructor(defaultValue: T) {this.defaul…

OpenCV:图像处理中的低通滤波

目录 简述 什么是低通滤波&#xff1f; 各种滤波器简介与实现 方盒滤波 均值滤波 中值滤波 高斯滤波 双边滤波 各种滤波的对比与应用场景 相关阅读 OpenCV基础&#xff1a;图像变换-CSDN博客 OpenCV&#xff1a;图像滤波、卷积与卷积核-CSDN博客 简述 低通滤波是一…

Vivado生成X1或X4位宽mcs文件并固化到flash

1.生成mcs文件 01.在vivado里的菜单栏选择"tools"工具栏 02.在"tools"里选择"生成内存配置文件" 03.配置参数 按照FPGA板上的flash型号进行选型&#xff0c;相关配置步骤可参考下图。 注意&#xff1a;Flash数据传输位宽如果需要选择X4位宽&am…

rust学习-rust中的保留字

rust学习-rust中的保留字 已使用的保留字未来可能使用的保留字 保留字是语言中预定义的标识符&#xff0c;不能用作变量名、函数名或其他自定义标识符&#xff0c;Rust的保留字大致可以分为两类&#xff1a;已使用的保留字和未来可能使用的保留字 已使用的保留字 as&#xff1…

【第七天】零基础入门刷题Python-算法篇-数据结构与算法的介绍-一种常见的分治算法(持续更新)

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、Python数据结构与算法的详细介绍1.Python中的常用的分治算法2. 分治算法3.详细的分治代码1&#xff09;一种常见的分治算法 总结 前言 提示&#xff1a;这…

奖励模型:解析大语言模型的关键工具

标题&#xff1a;奖励模型&#xff1a;解析大语言模型的关键工具 文章信息摘要&#xff1a; 奖励模型是理解和审核大语言模型(LLM)的重要工具&#xff0c;通过简单的评估方式提供了模型内部表征和性能的深入洞察。它不仅能静态比较模型表现&#xff0c;还可帮助诊断训练问题&a…

[Linux]el8安全配置faillock:登录失败达阈值自动锁定账户配置

前言 本篇文章的配置仅使用于el8版本的Linux&#xff0c;目前已在centos8、BCLinux8上验证成功&#xff0c;其他版本系统是否可行还得考查。 el8中管理用户登录失败锁定账户所用的模块是faillock.so&#xff0c;如果想要将配置应用与其他版本的Linux&#xff0c;建议确认Linux…

【nnUNetv2进阶】二十七、nnUNetv2 魔改网络-小试牛刀-引入FMB模块

nnunet使用及改进教程。 【nnUNetv2实践】一、nnUNetv2安装 【nnUNetv2实践】二、nnUNetv2快速入门-训练验证推理集成一条龙教程 【nnUNe

vue3中自定一个组件并且能够用v-model对自定义组件进行数据的双向绑定

1. 基础用法 在 Vue3 中&#xff0c;v-model 在组件上的使用有了更灵活的方式。默认情况下&#xff0c;v-model 使用 modelValue 作为 prop&#xff0c;update:modelValue 作为事件。 1.1 基本示例 <!-- CustomInput.vue --> <template><input:value"mo…

TCP协议(网络)

目录 TCP协议 TCP协议段格式(报文首部) 原理图​编辑 确认应答(ACK)机制 报头介绍 超时重传机制​编辑 连接管理机制 为什么要三次握手 服务端状态转化: 客户端状态转化: 理解TIME_WAIT状态 解决TIME_WAIT状态引起的bind失败的方法(可以立即链接端口号) setsockop…

【JS|第29期】JavaScript中的事件类型

日期&#xff1a;2025年1月25日 作者&#xff1a;Commas 签名&#xff1a;(ง •_•)ง 积跬步以致千里,积小流以成江海…… 注释&#xff1a;如果您觉得有所帮助&#xff0c;帮忙点个赞&#xff0c;也可以关注我&#xff0c;我们一起成长&#xff1b;如果有不对的地方&#xf…