路由使用history模式

README.md

@@ -1,8 +1,9 @@
 # kafka可视化管理平台
 ## 功能支持
-* 基于SASL_SCRAM认证授权管理
+* 集群信息
 * Topic管理
 * 消费组管理
+* 基于SASL_SCRAM认证授权管理
 * 运维
 ## 技术栈
 * spring boot 

src/main/resources/application.yml

@@ -7,7 +7,7 @@ server:
 kafka:
   config:
     # kafka broker地址，多个以逗号分隔
-    bootstrap-server: 'localhost:9092'
+    bootstrap-server: '10.100.64.48:9092,10.100.77.250:9092,10.100.73.154:9092'
     request-timeout-ms: 60000
     # 服务端是否启用acl，如果不启用，下面的几项都忽略即可
     enable-acl: true
@@ -21,7 +21,7 @@ kafka:
     # 启动自动创建配置的超级管理员用户
     admin-create: false
     # broker连接的zk地址
-    zookeeper-addr: 'localhost:2181'
+    zookeeper-addr: '10.100.64.48:5181,10.100.77.250:5181,10.100.73.154:5181'
     sasl-jaas-config: org.apache.kafka.common.security.scram.ScramLoginModule required username="${kafka.config.admin-username}" password="${kafka.config.admin-password}";
 
 spring:

ui/src/App.vue

@@ -3,14 +3,16 @@
     <div id="nav">
       <router-link to="/" class="pad-l-r">主页</router-link>
       <span>|</span
-      ><router-link to="/topic" class="pad-l-r">Topic</router-link>
+      ><router-link to="/cluster-page" class="pad-l-r">集群</router-link>
       <span>|</span
-      ><router-link to="/group" class="pad-l-r">消费组</router-link>
+      ><router-link to="/topic-page" class="pad-l-r">Topic</router-link>
+      <span>|</span
+      ><router-link to="/group-page" class="pad-l-r">消费组</router-link>
       <span v-show="config.enableAcl">|</span
-      ><router-link to="/acl" class="pad-l-r" v-show="config.enableAcl"
+      ><router-link to="/acl-page" class="pad-l-r" v-show="config.enableAcl"
         >Acl</router-link
       >
-      <span>|</span><router-link to="/op" class="pad-l-r">运维</router-link>
+      <span>|</span><router-link to="/op-page" class="pad-l-r">运维</router-link>
     </div>
     <router-view class="content" />
   </div>

ui/src/router/index.js

@@ -11,7 +11,7 @@ const routes = [
     component: Home,
   },
   {
-    path: "/acl",
+    path: "/acl-page",
     name: "Acl",
     // route level code-splitting
     // this generates a separate chunk (about.[hash].js) for this route
@@ -20,19 +20,19 @@ const routes = [
       import(/* webpackChunkName: "acl" */ "../views/acl/Acl.vue"),
   },
   {
-    path: "/topic",
+    path: "/topic-page",
     name: "Topic",
     component: () =>
       import(/* webpackChunkName: "topic" */ "../views/topic/Topic.vue"),
   },
   {
-    path: "/group",
+    path: "/group-page",
     name: "Group",
     component: () =>
       import(/* webpackChunkName: "group" */ "../views/group/Group.vue"),
   },
   {
-    path: "/op",
+    path: "/op-page",
     name: "Operation",
     component: () =>
       import(/* webpackChunkName: "op" */ "../views/op/Operation.vue"),
@@ -40,8 +40,8 @@ const routes = [
 ];
 
 const router = new VueRouter({
-  // mode: "history",
+  mode: "history",
-  mode: "hash",
+  // mode: "hash",
   base: process.env.BASE_URL,
   routes,
 });

ui/src/views/group/Member.vue

@@ -113,7 +113,7 @@ const columns = [
     key: "host",
   },
   {
-    title: "分区信息",
+    title: "订阅分区信息",
     dataIndex: "partitions",
     key: "partitions",
     scopedSlots: { customRender: "partitions" },

ui/src/views/topic/Topic.vue

@@ -22,7 +22,7 @@
                 <a-form-item :label="`类型`">
                   <a-select
                     class="type-select"
-                    v-decorator="['type', { initialValue: 'all' }]"
+                    v-decorator="['type', { initialValue: 'normal' }]"
                     placeholder="Please select a country"
                   >
                     <a-select-option value="all"> 所有</a-select-option>
@@ -91,7 +91,7 @@ export default {
   components: { PartitionInfo },
   data() {
     return {
-      queryParam: { type: "all" },
+      queryParam: { type: "normal" },
       data: [],
       columns,
       selectRow: {},