当前位置：首页 > VUE

vue 实现redis管理页面

2026-02-25 00:07:00VUE

实现思路

使用Vue.js构建Redis管理页面需要结合后端服务进行数据交互。前端负责展示Redis数据和操作界面，后端负责与Redis服务器通信。

技术栈选择

前端框架：Vue 3 + Composition API
UI组件库：Element Plus
HTTP客户端：Axios
后端接口：Node.js/Express或Spring Boot

前端核心功能实现

安装依赖

npm install vue axios element-plus

Redis连接配置组件 创建连接配置表单，保存Redis服务器信息：

<template>
  <el-form :model="connectionForm">
    <el-form-item label="Host">
      <el-input v-model="connectionForm.host"/>
    </el-form-item>
    <el-form-item label="Port">
      <el-input v-model.number="connectionForm.port"/>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="connect">Connect</el-button>
    </el-form-item>
  </el-form>
</template>

<script setup>
import { reactive } from 'vue'
import axios from 'axios'

const connectionForm = reactive({
  host: 'localhost',
  port: 6379
})

const connect = async () => {
  try {
    await axios.post('/api/redis/connect', connectionForm)
  } catch (error) {
    console.error('Connection failed', error)
  }
}
</script>

Redis键值浏览组件 展示Redis键列表和值查看功能：

<template>
  <el-table :data="keys">
    <el-table-column prop="key" label="Key"/>
    <el-table-column label="Type">
      <template #default="{row}">{{ row.type }}</template>
    </el-table-column>
    <el-table-column label="Actions">
      <template #default="{row}">
        <el-button @click="viewValue(row.key)">View</el-button>
      </template>
    </el-table-column>
  </el-table>

  <el-dialog v-model="valueDialogVisible">
    <pre>{{ currentValue }}</pre>
  </el-dialog>
</template>

<script setup>
import { ref } from 'vue'
import axios from 'axios'

const keys = ref([])
const currentValue = ref('')
const valueDialogVisible = ref(false)

const fetchKeys = async () => {
  const res = await axios.get('/api/redis/keys')
  keys.value = res.data
}

const viewValue = async (key) => {
  const res = await axios.get(`/api/redis/value?key=${encodeURIComponent(key)}`)
  currentValue.value = res.data
  valueDialogVisible.value = true
}

// 初始化加载
fetchKeys()
</script>

后端接口示例（Node.js）

Express路由配置

const express = require('express')
const redis = require('redis')
const router = express.Router()

let client = null

router.post('/connect', async (req, res) => {
  const { host, port } = req.body
  client = redis.createClient({ host, port })
  await client.connect()
  res.sendStatus(200)
})

router.get('/keys', async (req, res) => {
  const keys = await client.keys('*')
  const results = []
  for (const key of keys) {
    const type = await client.type(key)
    results.push({ key, type })
  }
  res.json(results)
})

router.get('/value', async (req, res) => {
  const { key } = req.query
  const type = await client.type(key)

  let value
  switch(type) {
    case 'string':
      value = await client.get(key)
      break
    case 'list':
      value = await client.lRange(key, 0, -1)
      break
    case 'hash':
      value = await client.hGetAll(key)
      break
    default:
      value = 'Unsupported type'
  }

  res.json(value)
})

module.exports = router