前端学习——Vue (Day6)

news2024/9/24 5:30:10

路由进阶

路由的封装抽离

在这里插入图片描述

在这里插入图片描述

//main.jsimport Vue from 'vue'
import App from './App.vue'
import router from './router/index'

// 路由的使用步骤 5 + 2
// 5个基础步骤
// 1. 下载 v3.6.5
// 2. 引入
// 3. 安装注册 Vue.use(Vue插件)
// 4. 创建路由对象
// 5. 注入到new Vue中，建立关联

Vue.config.productionTip = false


new Vue({
  render: h => h(App),
  router
}).$mount('#app')


//index.js
// 2个核心步骤
// 1. 建组件(views目录)，配规则
// 2. 准备导航链接，配置路由出口(匹配的组件展示的位置) 
import Find from '@/views/Find'
import My from '../views/My'
import Friend from '../views/Friend'

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter) // VueRouter插件初始化

const router = new VueRouter({
  // routes 路由规则们
  // route  一条路由规则 { path: 路径, component: 组件 }
  routes: [
    { path: '/find', component: Find },
    { path: '/my', component: My },
    { path: '/friend', component: Friend },
  ]
})

export default router

声明式导航 - 导航链接

在这里插入图片描述

<template>
  <div>
    <div class="footer_wrap">
      <router-link to="/find">发现音乐</router-link>
      <router-link to="/my">我的音乐</router-link>
      <router-link to="/friend">朋友</router-link>
    </div>
    <div class="top">
      <!-- 路由出口 → 匹配的组件所展示的位置 -->
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style>
body {
  margin: 0;
  padding: 0;
}
.footer_wrap {
  position: relative;
  left: 0;
  top: 0;
  display: flex;
  width: 100%;
  text-align: center;
  background-color: #333;
  color: #ccc;
}
.footer_wrap a {
  flex: 1;
  text-decoration: none;
  padding: 20px 0;
  line-height: 20px;
  background-color: #333;
  color: #ccc;
  border: 1px solid black;
}
.footer_wrap a.router-link-active {
  background-color: purple;
}
.footer_wrap a:hover {
  background-color: #555;
}
</style>

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

声明式导航 - 两个类名

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

声明式导航 - 跳转传参

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

动态路由参数可选符

在这里插入图片描述

Vue路由 - 重定向

在这里插入图片描述

import Home from '@/views/Home'
import Search from '@/views/Search'
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter) // VueRouter插件初始化

// 创建了一个路由对象
const router = new VueRouter({
  routes: [
    { path: '/', redirect: '/search' },
    { path: '/home', component: Home },
    { path: '/search/:words?', component: Search }
  ]
})

export default router

Vue路由 - 404

在这里插入图片描述

import Home from '@/views/Home'
import Search from '@/views/Search'
import Vue from 'vue'
import VueRouter from 'vue-router'
import NotFound from '@/views/NotFound.vue'
Vue.use(VueRouter) // VueRouter插件初始化

// 创建了一个路由对象
const router = new VueRouter({
  routes: [
    { path: '/', redirect: '/search' },
    { path: '/home', component: Home },
    { path: '/search/:words?', component: Search },
    { path: '*', component: NotFound }
  ]
})

export default router

<template>
  <div>
    <h1>404 Not Found</h1>
  </div>
</template>

<script>
export default {

}
</script>

<style>

</style>

仅测试
在这里插入图片描述

Vue路由 - 模式设置

在这里插入图片描述

import Home from '@/views/Home'
import Search from '@/views/Search'
import Vue from 'vue'
import VueRouter from 'vue-router'
import NotFound from '@/views/NotFound.vue'
Vue.use(VueRouter) // VueRouter插件初始化

// 创建了一个路由对象
const router = new VueRouter({
//一旦使用history模式，地址栏就没有#，需要后台配置访问规则
    mode:'history',
  routes: [
    { path: '/', redirect: '/search' },
    { path: '/home', component: Home },
    { path: '/search/:words?', component: Search },
    { path: '*', component: NotFound }
  ]
})

export default router

在这里插入图片描述

编程式导航 - 基本跳转

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

<template>
  <div class="home">
    <div class="logo-box"></div>
    <div class="search-box">
      <input type="text" />
      <button @click="goSearch">搜索一下</button>
    </div>
    <div class="hot-link">
      热门搜索：
      <router-link to="/search/黑马程序员">黑马程序员</router-link>
      <router-link to="/search/前端培训">前端培训</router-link>
      <router-link to="/search/如何成为前端大牛">如何成为前端大牛</router-link>
    </div>
  </div>
</template>

<script>
export default {
  name: "FindMusic",
  methods: {
    goSearch() {
      // 第一种写法
      // this.$router.push("./search");
      // 第二种写法
      this.$router.push({
        path: "./search",
      });
    },
  },
};
</script>

<style>
.logo-box {
  height: 150px;
  background: url("@/assets/logo.jpeg") no-repeat center;
}
.search-box {
  display: flex;
  justify-content: center;
}
.search-box input {
  width: 400px;
  height: 30px;
  line-height: 30px;
  border: 2px solid #c4c7ce;
  border-radius: 4px 0 0 4px;
  outline: none;
}
.search-box input:focus {
  border: 2px solid #ad2a26;
}
.search-box button {
  width: 100px;
  height: 36px;
  border: none;
  background-color: #ad2a26;
  color: #fff;
  position: relative;
  left: -2px;
  border-radius: 0 4px 4px 0;
}
.hot-link {
  width: 508px;
  height: 60px;
  line-height: 60px;
  margin: 0 auto;
}
.hot-link a {
  margin: 0 5px;
}
</style>

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

<template>
  <div class="home">
    <div class="logo-box"></div>
    <div class="search-box">
      <input type="text" />
      <button @click="goSearch">搜索一下</button>
    </div>
    <div class="hot-link">
      热门搜索：
      <router-link to="/search/黑马程序员">黑马程序员</router-link>
      <router-link to="/search/前端培训">前端培训</router-link>
      <router-link to="/search/如何成为前端大牛">如何成为前端大牛</router-link>
    </div>
  </div>
</template>

<script>
export default {
  name: "FindMusic",
  methods: {
    goSearch() {
      // 第一种写法
      // this.$router.push("./search");
      // 第二种写法
      // this.$router.push({
      //   path: "./search",
      // });

      // 第三种写法 (需要给路由器名字)
      this.$router.push({
        name:'search'
      })
    },
  },
};
</script>

<style>
.logo-box {
  height: 150px;
  background: url("@/assets/logo.jpeg") no-repeat center;
}
.search-box {
  display: flex;
  justify-content: center;
}
.search-box input {
  width: 400px;
  height: 30px;
  line-height: 30px;
  border: 2px solid #c4c7ce;
  border-radius: 4px 0 0 4px;
  outline: none;
}
.search-box input:focus {
  border: 2px solid #ad2a26;
}
.search-box button {
  width: 100px;
  height: 36px;
  border: none;
  background-color: #ad2a26;
  color: #fff;
  position: relative;
  left: -2px;
  border-radius: 0 4px 4px 0;
}
.hot-link {
  width: 508px;
  height: 60px;
  line-height: 60px;
  margin: 0 auto;
}
.hot-link a {
  margin: 0 5px;
}
</style>

在这里插入图片描述

编程式导航 - 路由传参

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

<template>
  <div class="home">
    <div class="logo-box"></div>
    <div class="search-box">
      <input v-model="inpValue" type="text" />
      <button @click="goSearch">搜索一下</button>
    </div>
    <div class="hot-link">
      热门搜索：
      <router-link to="/search/黑马程序员">黑马程序员</router-link>
      <router-link to="/search/前端培训">前端培训</router-link>
      <router-link to="/search/如何成为前端大牛">如何成为前端大牛</router-link>
    </div>
  </div>
</template>

<script>
export default {
  name: "FindMusic",
  data(){
    return {
      inpValue:''
    }
  },
  methods: {
    goSearch() {
      // 第一种写法
      this.$router.push(`./search?key=${this.inpValue}`);
      // 第二种写法
      // this.$router.push({
      //   path: "./search",
      // });

      // 第三种写法 (需要给路由器名字)
      // this.$router.push({
      //   name:'search'
      // })
    },
  },
};
</script>

<style>
.logo-box {
  height: 150px;
  background: url("@/assets/logo.jpeg") no-repeat center;
}
.search-box {
  display: flex;
  justify-content: center;
}
.search-box input {
  width: 400px;
  height: 30px;
  line-height: 30px;
  border: 2px solid #c4c7ce;
  border-radius: 4px 0 0 4px;
  outline: none;
}
.search-box input:focus {
  border: 2px solid #ad2a26;
}
.search-box button {
  width: 100px;
  height: 36px;
  border: none;
  background-color: #ad2a26;
  color: #fff;
  position: relative;
  left: -2px;
  border-radius: 0 4px 4px 0;
}
.hot-link {
  width: 508px;
  height: 60px;
  line-height: 60px;
  margin: 0 auto;
}
.hot-link a {
  margin: 0 5px;
}
</style>

<template>
  <div class="search">
    <p>搜索关键字: {{ $route.query.key }} </p>
    <p>搜索结果: </p>
    <ul>
      <li>.............</li>
      <li>.............</li>
      <li>.............</li>
      <li>.............</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'MyFriend',
  created () {
    // 在created中，获取路由参数
    // this.$route.query.参数名 获取查询参数
    // this.$route.params.参数名 获取动态路由参数
    console.log(this.$route.params.words);
  }
}
</script>

<style>
.search {
  width: 400px;
  height: 240px;
  padding: 0 20px;
  margin: 0 auto;
  border: 2px solid #c4c7ce;
  border-radius: 5px;
}
</style>

在这里插入图片描述

在这里插入图片描述

<template>
  <div class="home">
    <div class="logo-box"></div>
    <div class="search-box">
      <input v-model="inpValue" type="text" />
      <button @click="goSearch">搜索一下</button>
    </div>
    <div class="hot-link">
      热门搜索：
      <router-link to="/search/黑马程序员">黑马程序员</router-link>
      <router-link to="/search/前端培训">前端培训</router-link>
      <router-link to="/search/如何成为前端大牛">如何成为前端大牛</router-link>
    </div>
  </div>
</template>

<script>
export default {
  name: "FindMusic",
  data(){
    return {
      inpValue:''
    }
  },
  methods: {
    goSearch() {
      // 第一种写法
      // this.$router.push(`./search?key=${this.inpValue}`);
      // 第二种写法(完整写法：适合传多个参数)
      this.$router.push({
        path: "./search",
        query: {
          key:this.inpValue
        }
      });
      
       this.router.push({
        path: `/search/${this.inpValue}`
      })

      // 第三种写法 (需要给路由器名字)
      // this.$router.push({
      //   name:'search'
      // })
    },
  },
};
</script>

<style>
.logo-box {
  height: 150px;
  background: url("@/assets/logo.jpeg") no-repeat center;
}
.search-box {
  display: flex;
  justify-content: center;
}
.search-box input {
  width: 400px;
  height: 30px;
  line-height: 30px;
  border: 2px solid #c4c7ce;
  border-radius: 4px 0 0 4px;
  outline: none;
}
.search-box input:focus {
  border: 2px solid #ad2a26;
}
.search-box button {
  width: 100px;
  height: 36px;
  border: none;
  background-color: #ad2a26;
  color: #fff;
  position: relative;
  left: -2px;
  border-radius: 0 4px 4px 0;
}
.hot-link {
  width: 508px;
  height: 60px;
  line-height: 60px;
  margin: 0 auto;
}
.hot-link a {
  margin: 0 5px;
}
</style>

<template>
  <div class="search">
    <p>搜索关键字: {{ $route.params.words }} </p>
    <p>搜索结果: </p>
    <ul>
      <li>.............</li>
      <li>.............</li>
      <li>.............</li>
      <li>.............</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'MyFriend',
  created () {
    // 在created中，获取路由参数
    // this.$route.query.参数名 获取查询参数
    // this.$route.params.参数名 获取动态路由参数
    console.log(this.$route.params.words);
  }
}
</script>

<style>
.search {
  width: 400px;
  height: 240px;
  padding: 0 20px;
  margin: 0 auto;
  border: 2px solid #c4c7ce;
  border-radius: 5px;
}
</style>

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

<template>
  <div class="home">
    <div class="logo-box"></div>
    <div class="search-box">
      <input v-model="inpValue" type="text" />
      <button @click="goSearch">搜索一下</button>
    </div>
    <div class="hot-link">
      热门搜索：
      <router-link to="/search/黑马程序员">黑马程序员</router-link>
      <router-link to="/search/前端培训">前端培训</router-link>
      <router-link to="/search/如何成为前端大牛">如何成为前端大牛</router-link>
    </div>
  </div>
</template>

<script>
export default {
  name: "FindMusic",
  data(){
    return {
      inpValue:''
    }
  },
  methods: {
    goSearch() {
      // 第一种写法
      // this.$router.push(`./search?key=${this.inpValue}`);
      // 第二种写法(完整写法：适合传多个参数)
      // this.$router.push({
      //   path: "./search",
      //   query: {
      //     key:this.inpValue
      //   }
      // });
      // this.router.push({
      //   path: `/search/${this.inpValue}`
      // })

      // 第三种写法 (需要给路由器名字)
      this.$router.push({
        name:'search',
        query: {
           key:this.inpValue,
           params:{
            words:this.inpValue
           }
         }
      })
    },
  },
};
</script>

<style>
.logo-box {
  height: 150px;
  background: url("@/assets/logo.jpeg") no-repeat center;
}
.search-box {
  display: flex;
  justify-content: center;
}
.search-box input {
  width: 400px;
  height: 30px;
  line-height: 30px;
  border: 2px solid #c4c7ce;
  border-radius: 4px 0 0 4px;
  outline: none;
}
.search-box input:focus {
  border: 2px solid #ad2a26;
}
.search-box button {
  width: 100px;
  height: 36px;
  border: none;
  background-color: #ad2a26;
  color: #fff;
  position: relative;
  left: -2px;
  border-radius: 0 4px 4px 0;
}
.hot-link {
  width: 508px;
  height: 60px;
  line-height: 60px;
  margin: 0 auto;
}
.hot-link a {
  margin: 0 5px;
}
</style>

<template>
  <div class="search">
    <p>搜索关键字: {{ $route.params.words }} </p>
    <p>搜索结果: </p>
    <ul>
      <li>.............</li>
      <li>.............</li>
      <li>.............</li>
      <li>.............</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'MyFriend',
  created () {
    // 在created中，获取路由参数
    // this.$route.query.参数名 获取查询参数
    // this.$route.params.参数名 获取动态路由参数
    console.log(this.$route.params.words);
  }
}
</script>

<style>
.search {
  width: 400px;
  height: 240px;
  padding: 0 20px;
  margin: 0 auto;
  border: 2px solid #c4c7ce;
  border-radius: 5px;
}
</style>

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

综合案例

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

自定义创建项目

在这里插入图片描述
shift+鼠标右键——在powershell中打开
vue create + 项目名
在这里插入图片描述
空格表示选中

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

ESlint 代码规范

在这里插入图片描述

代码规范错误

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

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

【Python】批量修改文件名

【Python】批量修改文件名

对指定文件夹中的文件名称修改&#xff1a; import os#文件路径 path D:\大明风华[第01-62集]#获取文件列表 file os.listdir(path)#print(file)#原文件名是 大明风华.Ming.Dynasty.2019.E01.2160p.60FPS.WEB-DL.H265.10bit.AAC-SeeTV.mp4 #预期修改后文件名 大明风华.E01.…
阅读更多...
C语言基础入门详解二

C语言基础入门详解二

前些天发现了一个蛮有意思的人工智能学习网站,8个字形容一下"通俗易懂&#xff0c;风趣幽默"&#xff0c;感觉非常有意思,忍不住分享一下给大家。 &#x1f449;点击跳转到教程 一、C语言多级指针入门 #include<stdio.h> #include<stdlib.h>/**多级指针…
阅读更多...
【报错1】无法找到模块“element-plus/dist/locale/zh-cn.mjs”的声明文件。

【报错1】无法找到模块“element-plus/dist/locale/zh-cn.mjs”的声明文件。

报错&#xff1a;无法找到模块“element-plus/dist/locale/zh-cn.mjs”的声明文件。“e:/codeAll/webProject/Project/vue_ts/project727/node_modules/element-plus/dist/locale/zh-cn.mjs”隐式拥有 "any" 类型。 如果“element-plus”包实际公开了此模块&#x…
阅读更多...
Run主启动类的详解

Run主启动类的详解

package com.kuang.HelloSpringBoot;import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.SpringBootApplication;//本身就是spring的一个组件,也就是注册的bean SpringBootApplication public class HelloSpringBootApplicati…
阅读更多...
使用LangChain构建问答聊天机器人案例实战（二）

使用LangChain构建问答聊天机器人案例实战（二）

使用LangChain构建问答聊天机器人案例实战 逐行解读和验证全生命周期Prompting 现在我们使用GPT-4作为语言模型的驱动力，这个模型将成为整个应用程序的引擎，驱动整个应用程序运行，同时，应用程序也是基于Cpython去实现的，如图14-8所示，Pyodide是CPython到WebAssembly/Emsc…
阅读更多...
教程 - 在 Vue3+Ts 中引入 CesiumJS 的最佳实践@2023

教程 - 在 Vue3+Ts 中引入 CesiumJS 的最佳实践@2023

1. 本篇适用范围与目的 1.1. 适用范围 严格使用 Vue3 TypeScript 的前端项目&#xff0c;包管理器默认使用 pnpm 构建工具使用 Vite4 使用原生 CesiumJS 依赖做应用开发 客户端渲染&#xff0c;因为我不太熟悉 Vue 的服务端渲染&#xff0c;有本篇的介绍后&#xff0c;熟悉…
阅读更多...
06. 管理Docker容器数据

06. 管理Docker容器数据

目录 1、前言 2、Docker实现数据管理的方式 2.1、数据卷&#xff08;Data Volumes&#xff09; 2.2、数据卷容器&#xff08;Data Volume Containers&#xff09; 3、简单示例 3.1、数据卷示例 3.2、数据卷容器示例 1、前言 在生产环境中使用 Docker&#xff0c;一方面…
阅读更多...
在腾讯云服务器OpenCLoudOS系统中安装jdk

在腾讯云服务器OpenCLoudOS系统中安装jdk

1. 创建jdk安装目录&#xff1a; /app/soft/jdk mkdir -p /app/soft/jdk 2. 将linux版本的jdk安装包上传至/app/soft/jdk 3. 解压jdk安装包 tar -zxvf jdk-8u341-linux-x64.tar.gz 4. 复制jdk安装路径 pwd查看jdk当前路径&#xff0c;得到jdk在系统中的安装路径 5. 配置系…
阅读更多...
【力扣周赛】第 356 场周赛（数位DP）

【力扣周赛】第 356 场周赛（数位DP）

文章目录 Q1&#xff1a;6917. 满足目标工作时长的员工数目&#xff08;简单枚举模拟题&#xff09;Q2&#xff1a;6900. 统计完全子数组的数目&#xff08;双指针滑动窗口&#xff09;Q3&#xff1a;6918. 包含三个字符串的最短字符串Q4&#xff1a;6957. 统计范围内的步进数字…
阅读更多...
Vue没有node_modules怎么办

Vue没有node_modules怎么办

npm install 一下 然后再npm run serve 就可以运行了
阅读更多...
AD20. 如何给元器件设计、添加3D模型

AD20. 如何给元器件设计、添加3D模型

Altium Designer学习笔记 - 00.目录​​​​​​​ 零. 前言 本文以HF46F继电器为例展示设计、添加元器件3D模型的流程&#xff0c;其他元器件类似。 一. 操作步骤 从下图可以看到此时继电器还没有添加3D模型&#xff1a; 1. 获取元器件尺寸 这里通过查找元器件的数据手册可以…
阅读更多...
el-select 无限下拉滚动加载数据

el-select 无限下拉滚动加载数据

<template> <div> <el-form ref"saveParameter" :model"saveParameter" inline inline-message style"margin:10px" > <el-form-item label"供应商" prop"lngcustomerid"> <el-select v-model&q…
阅读更多...
装饰器模式——扩展系统功能

装饰器模式——扩展系统功能

1、简介 1.1、概述 对新房进行装修并没有改变房屋用于居住的本质&#xff0c;但它可以让房子变得更漂亮、更温馨、更实用、更能满足居家的需求。在软件设计中&#xff0c;也有一种类似新房装修的技术可以对已有对象&#xff08;新房&#xff09;的功能进行扩展&#xff08;装…
阅读更多...
【Linux命令200例】mattrib用于更改文件或者目录的属性的工具

【Linux命令200例】mattrib用于更改文件或者目录的属性的工具

&#x1f3c6;作者简介&#xff0c;黑夜开发者&#xff0c;全栈领域新星创作者✌&#xff0c;2023年6月csdn上海赛道top4。 &#x1f3c6;本文已收录于专栏&#xff1a;Linux命令大全。 &#x1f3c6;本专栏我们会通过具体的系统的命令讲解加上鲜活的实操案例对各个命令进行深入…
阅读更多...
Java的标记接口（Marker Interface）

Java的标记接口（Marker Interface）

Java中的标记接口&#xff08;Marker Interface&#xff09;是一个空接口&#xff0c;接口内什么也没有定义。它标识了一种能力&#xff0c;标识继承自该接口的接口、实现了此接口的类具有某种能力。 例如&#xff0c;jdk的com.sun.org.apache.xalan.internal.xsltc.trax.Temp…
阅读更多...
SqlServer读写分离对等发布

SqlServer读写分离对等发布

SqlServer读写分离对等发布: 对等发布支持多主复制。发布服务器将事务流式传输到拓扑中的所有对等方。所有对等节点可以读取和写入更改，且所有更改将传播到拓扑中的所有节点。 注意点： 1.各服务器的数据库名字要保证一样。 2.发布名称必须保持一致。 3.各服务器必须都是…
阅读更多...
06-MySQL-基础篇-SQL之DCL语句

06-MySQL-基础篇-SQL之DCL语句

SQL之DCL语句 前言DCL 管理用户查询用户创建用户修改用户密码删除用户说明 权限控制常见权限描述查询权限授予权限撤销权限说明 前言 本篇来学习下SQL中的DCL语句 DCL DCL英文全称是Data Control Language(数据控制语言)&#xff0c;用来管理数据库用户、控制数据库的访问权…
阅读更多...
【VSCode部署模型】导出TensorFlow2.X训练好的模型信息

【VSCode部署模型】导出TensorFlow2.X训练好的模型信息

参考tensorflow2.0 C加载python训练保存的pb模型 经过模型训练及保存&#xff0c;我们得到“OptimalModelDataSet2”文件夹&#xff0c;模型的保存方法(.h5或.pb文件)&#xff0c;参考【Visual Studio Code】c/c部署tensorflow训练的模型 其中“OptimalModelDataSet2”文件夹保…
阅读更多...
测试测试用例方法篇

测试测试用例方法篇

测试|测试用例方法篇 文章目录 测试|测试用例方法篇1.测试用例的基本要素&#xff1a;测试环境&#xff0c;操作步骤&#xff0c;测试数据&#xff0c;预期结果…2.测试用例带来的好处3.测试用例的设计思路&#xff0c;设计方法&#xff0c;具体设计方法之间的关系**设计测试用…
阅读更多...
Zabbix监控ActiveMQ

Zabbix监控ActiveMQ

当我们在线上使用了ActiveMQ 后&#xff0c;我们需要对一些参数进行监控&#xff0c;比如 消息是否有阻塞&#xff0c;哪个消息队列阻塞了&#xff0c;总的消息数是多少等等。下面我们就通过 Zabbix 结合 Python 脚本来实现对 ActiveMQ的监控。 一、创建 Activemq Python 监控…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023