当前位置: 首页 > news >正文

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.lryc.cn/news/525224.html

相关文章:

  • 2025年最新深度学习环境搭建:Win11+ cuDNN + CUDA + Pytorch +深度学习环境配置保姆级教程
  • FPGA中场战事
  • [Computer Vision]实验二:图像特征点提取
  • TCP状态转移图详解
  • curl简介与libcurl开源库的使用总结
  • Win10系统部署RabbitMQ Server
  • uniapp APP端页面触发调用webview(页面为uniapp开发的H5)里的方法
  • 嵌入式知识点总结 C/C++ 专题提升(七)-位操作
  • 新星杯-ESP32智能硬件开发--ESP32的I/O组成
  • 航空航天混合动力(7)航空航天分布式电推进系统
  • AIGC视频生成明星——Emu Video模型
  • Cyber Security 101-Security Solutions-Firewall Fundamentals(防火墙基础)
  • 备赛蓝桥杯之第十五届职业院校组省赛第一题:智能停车系统
  • Docker核心命令与Yocto项目的高效应用
  • idea plugin插件开发——入门级教程(IntelliJ IDEA Plugin)
  • 61,【1】BUUCTF WEB BUU XSS COURSE 11
  • 开发环境搭建-1:配置 WSL (类 centos 的 oracle linux 官方镜像)
  • Spring Boot MyBatis Plus 版本兼容问题(记录)
  • 26. 【.NET 8 实战--孢子记账--从单体到微服务】--需求更新--用户注销、修改用户名、安全设置
  • 神经网络|(一)加权平均法,感知机和神经元
  • OpenHarmony OTA升级参考资料记录
  • 在 Kubernetes 上快速安装 KubeSphere v4.1.2
  • 【回忆迷宫——处理方法+DFS】
  • 华为OD机试真题---战场索敌
  • 计算机网络 (53)互联网使用的安全协议
  • c++算法贪心系列
  • 【Maui】注销用户,采用“手势”点击label弹窗选择
  • 智慧脚下生根,智能井盖监测终端引领城市安全新革命
  • Word2Vec如何优化从中间层到输出层的计算?
  • 第七篇:vue3 计算属性:computed