Merge pull request #189 from qishibo/serialize_key

Serialize key
qishibo · Apr 17, 2020 · ce4d760 · ce4d760
2 parents 191160e + 863d581
commit ce4d760
Show file tree

Hide file tree

Showing 14 changed files with 175 additions and 72 deletions.
diff --git a/src/components/FormatViewer.vue b/src/components/FormatViewer.vue
@@ -9,6 +9,7 @@
         :value="item.value">
       </el-option>
     </el-select>
+    <span v-if='binary' class='formater-binary'>Hex</span>
     <br>
 
     <component
@@ -44,13 +45,14 @@ export default {
     float: {default: 'right'},
     content: {default: ''},
     textrows: {default: 6},
+    binary: {default: false},
   },
 }
 </script>
 
 <style type="text/css">
   .format-selector {
-    width: 120px;
+    width: 122px;
   }
   .format-selector .el-input__inner {
     height: 22px;
@@ -90,4 +92,9 @@ export default {
     float: right;
     padding: 9px 0;
   }
+  .formater-binary {
+    padding-left: 5px;
+    color: #7ab3ef;
+    font-size: 80%;
+  }
 </style>
diff --git a/src/components/KeyContentHash.vue b/src/components/KeyContentHash.vue
@@ -12,10 +12,12 @@
       <el-dialog :title='dialogTitle' :visible.sync="editDialog">
         <el-form>
           <el-form-item label="Field">
+            <span v-if='editLineItem.binaryK' class='content-binary'>Hex</span>
             <el-input v-model="editLineItem.key" autocomplete="off"></el-input>
           </el-form-item>
 
           <el-form-item label="Value">
+            <span v-if='editLineItem.binaryV' class='content-binary'>Hex</span>
             <FormatViewer :content.sync='editLineItem.value'></FormatViewer>
           </el-form-item>
         </el-form>
@@ -93,11 +95,16 @@ export default {
   },
   methods: {
     initShow() {
-      this.client.hgetall(this.redisKey).then((reply) => {
+      this.client.hgetallBuffer(this.redisKey).then((reply) => {
         let hashData = [];
 
-        for (const i in reply) {
-          hashData.push({ key: i, value: reply[i] });
+        for (let i of reply) {
+          hashData.push({
+            key: this.$util.bufToString(i[0]),
+            value: this.$util.bufToString(i[1]),
+            binaryK: !this.$util.bufVisible(i[0]),
+            binaryV: !this.$util.bufVisible(i[1]),
+          });
         }
 
         this.hashData = hashData;
@@ -120,10 +127,17 @@ export default {
         return;
       }
 
-      client.hset(key, after.key, after.value).then((reply) => {
+      client.hset(
+        key,
+        before.binaryK ? this.$util.xToBuffer(after.key) : after.key,
+        before.binaryV ? this.$util.xToBuffer(after.value) : after.value
+      ).then((reply) => {
         // edit key && key changed
         if (before.key && before.key !== after.key) {
-          client.hdel(key, before.key).then((reply) => {
+          client.hdel(
+            key,
+            before.binaryK ? this.$util.xToBuffer(before.key) : before.key
+          ).then((reply) => {
             this.initShow();
           });
         }
@@ -144,10 +158,13 @@ export default {
         this.$t('message.confirm_to_delete_row_data'),
         {type: 'warning'}
       ).then(() => {
-        this.client.hdel(this.redisKey, row.key).then((reply) => {
+        this.client.hdel(
+          this.redisKey,
+          row.binaryK ? this.$util.xToBuffer(row.key) : row.key
+        ).then((reply) => {
           if (reply === 1) {
             this.$message.success({
-              message: `${row.key} ${this.$t('message.delete_success')}`,
+              message: this.$t('message.delete_success'),
               duration: 1000,
             });
 

diff --git a/src/components/KeyContentList.vue b/src/components/KeyContentList.vue
@@ -12,6 +12,7 @@
       <el-dialog :title="dialogTitle" :visible.sync="editDialog">
         <el-form>
           <el-form-item label="Value">
+            <span v-if='editLineItem.binary' class='content-binary'>Hex</span>
             <FormatViewer :content.sync='editLineItem.value'></FormatViewer>
           </el-form-item>
         </el-form>
@@ -81,11 +82,14 @@ export default {
   },
   methods: {
     initShow() {
-      this.client.lrange([this.redisKey, 0, -1]).then((reply) => {
+      this.client.lrangeBuffer([this.redisKey, 0, -1]).then((reply) => {
         let listData = [];
 
         for (const i of reply) {
-          listData.push({ value: i });
+          listData.push({
+            value: this.$util.bufToString(i),
+            binary: !this.$util.bufVisible(i),
+          });
         }
 
         this.listData = listData;
@@ -108,12 +112,19 @@ export default {
         return;
       }
 
-      client.rpush(key, after.value).then((reply) => {
+      client.rpush(
+        key,
+        before.binary ? this.$util.xToBuffer(after.value) : after.value
+      ).then((reply) => {
         // reply return list length if success
         if (reply > 0) {
           // edit key remove previous value
           if (before.value) {
-            client.lrem(key, 1, before.value).then((reply) => {
+            client.lrem(
+              key,
+              1,
+              before.binary ? this.$util.xToBuffer(before.value) : before.value
+            ).then((reply) => {
               this.initShow();
             });
           }
@@ -134,7 +145,11 @@ export default {
         this.$t('message.confirm_to_delete_row_data'),
         { type: 'warning' }
       ).then(() => {
-        this.client.lrem(this.redisKey, 1, row.value).then((reply) => {
+        this.client.lrem(
+          this.redisKey,
+          1,
+          row.binary ? this.$util.xToBuffer(row.value) : row.value
+        ).then((reply) => {
           if (reply === 1) {
             this.$message.success({
               message: this.$t('message.delete_success'),

diff --git a/src/components/KeyContentSet.vue b/src/components/KeyContentSet.vue
@@ -12,6 +12,7 @@
       <el-dialog :title="dialogTitle" :visible.sync="editDialog">
         <el-form>
           <el-form-item label="Value">
+            <span v-if='editLineItem.binary' class='content-binary'>Hex</span>
             <el-input type="textarea" :rows="6" v-model="editLineItem.value" autocomplete="off"></el-input>
           </el-form-item>
         </el-form>
@@ -79,11 +80,14 @@ export default {
   },
   methods: {
     initShow() {
-      this.client.smembers(this.redisKey).then((reply) => {
+      this.client.smembersBuffer(this.redisKey).then((reply) => {
         let setData = [];
 
         for (const i of reply) {
-          setData.push({ value: i });
+          setData.push({
+            value: this.$util.bufToString(i),
+            binary: !this.$util.bufVisible(i),
+          });
         }
 
         this.setData = setData;
@@ -106,12 +110,18 @@ export default {
         return;
       }
 
-      client.sadd(key, after.value).then((reply) => {
+      client.sadd(
+        key,
+        before.binary ? this.$util.xToBuffer(after.value) : after.value
+      ).then((reply) => {
         // add success
         if (reply === 1) {
           // edit key remove previous value
           if (before.value) {
-            client.srem(key, before.value).then((reply) => {
+            client.srem(
+              key,
+              before.binary ? this.$util.xToBuffer(before.value) : before.value
+            ).then((reply) => {
               this.initShow();
             });
           }
@@ -140,7 +150,10 @@ export default {
         this.$t('message.confirm_to_delete_row_data'),
         { type: 'warning' }
       ).then(() => {
-        this.client.srem(this.redisKey, row.value).then((reply) => {
+        this.client.srem(
+          this.redisKey,
+          row.binary ? this.$util.xToBuffer(row.value) : row.value
+        ).then((reply) => {
           if (reply === 1) {
             this.$message.success({
               message: this.$t('message.delete_success'),

diff --git a/src/components/KeyContentString.vue b/src/components/KeyContentString.vue
@@ -2,7 +2,12 @@
 <el-form class='key-content-string'>
   <!-- key content textarea -->
   <el-form-item>
-    <FormatViewer :content.sync='content' float='left' :textrows=12></FormatViewer>
+    <FormatViewer
+      :content.sync='content'
+      :binary='binary'
+      float='left'
+      :textrows=12>
+    </FormatViewer>
   </el-form-item>
 
   <!-- save btn -->
@@ -19,39 +24,37 @@ export default {
   data() {
     return {
       content: '',
+      binary: false,
     };
   },
   props: ['client', 'redisKey'],
   components: { FormatViewer },
   methods: {
     initShow() {
-      this.client.get(this.redisKey).then((reply) => {
-        // character not visible
-        if (!this.$util.isVisible(reply)) {
-          this.content = this.$util.toUTF8(reply);
-        }
-
-        else {
-          this.content = reply;
-        }
+      this.client.getBuffer(this.redisKey).then((reply) => {
+        this.content = this.$util.bufToString(reply);
+        this.binary = !this.$util.bufVisible(reply);
       });
     },
     execSave() {
       const key = this.redisKey;
 
-      this.client.set(key, this.content).then((reply) => {
+      this.client.set(
+        key,
+        this.binary ? this.$util.xToBuffer(this.content) : this.content
+      ).then((reply) => {
         if (reply === 'OK') {
           this.initShow()
 
           this.$message.success({
-            message: `${key} ${this.$t('message.modify_success')}`,
+            message: this.$t('message.modify_success'),
             duration: 1000,
           });
         }
 
         else {
           this.$message.error({
-            message: `${key} ${this.$t('message.modify_failed')}`,
+            message: this.$t('message.modify_failed'),
             duration: 1000,
           });
         }

diff --git a/src/components/KeyContentZset.vue b/src/components/KeyContentZset.vue
@@ -12,6 +12,7 @@
       <el-dialog :title="dialogTitle" :visible.sync="editDialog">
         <el-form>
           <el-form-item label="Member">
+            <span v-if='editLineItem.binaryM' class='content-binary'>Hex</span>
             <el-input v-model="editLineItem.member" autocomplete="off"></el-input>
           </el-form-item>
           <el-form-item label="Score">
@@ -91,12 +92,16 @@ export default {
   },
   methods: {
     initShow() {
-      this.client.zrange([this.redisKey, 0, -1, 'WITHSCORES']).then((reply) => {
+      this.client.zrangeBuffer([this.redisKey, 0, -1, 'WITHSCORES']).then((reply) => {
         let zsetData = [];
         const { length } = reply;
 
         for (var i = 0; i < length; i += 2) {
-          zsetData.push({ member: reply[i], score: Number(reply[i + 1]) });
+          zsetData.push({
+            score: Number(reply[i + 1]),
+            member: this.$util.bufToString(reply[i]),
+            binaryM: !this.$util.bufVisible(reply[i]),
+          });
         }
 
         this.zsetData = zsetData;
@@ -119,10 +124,17 @@ export default {
         return;
       }
 
-      client.zadd(key, after.score, after.member).then((reply) => {
+      client.zadd(
+        key,
+        after.score,
+        before.binaryM ? this.$util.xToBuffer(after.member) : after.member
+      ).then((reply) => {
         // edit key member changed
         if (before.member && before.member !== after.member) {
-          client.zrem(key, before.member).then((reply) => {
+          client.zrem(
+            key,
+            before.binaryM ? this.$util.xToBuffer(before.member) : before.member
+          ).then((reply) => {
             this.initShow();
           });
         }
@@ -142,10 +154,13 @@ export default {
         this.$t('message.confirm_to_delete_row_data'),
         { type: 'warning' }
       ).then(() => {
-        this.client.zrem(this.redisKey, row.member).then((reply) => {
+        this.client.zrem(
+          this.redisKey,
+          row.binaryM ? this.$util.xToBuffer(row.member) : row.member
+        ).then((reply) => {
           if (reply === 1) {
             this.$message.success({
-              message: `${row.member} ${this.$t('message.delete_success')}`,
+              message: this.$t('message.delete_success'),
               duration: 1000,
             });
 

diff --git a/src/components/KeyDetail.vue b/src/components/KeyDetail.vue
@@ -83,4 +83,10 @@ export default {
   .el-tooltip__popper {
     max-width: 50%;
   }
+
+  .content-binary {
+    color: #7ab3ef;
+    font-size: 80%;
+    float: left;
+  }
 </style>