Building a Web-Based Redis CRUD Tool with Django, MySQL, and Vue

In many development or testing scenarios you need to operate Redis, but a local installation cannot be shared across a team. This article shows how to build a web‑based Redis CRUD tool using Django, MySQL and Vue.

1. Introduction – Django is a full‑featured Python web framework, MySQL provides relational storage for Redis key metadata, and Vue is used to create a modern front‑end UI.

2. Prerequisites – Install Python, Django (via pip install Django), MySQL, Node.js, npm and Vue CLI ( npm install -g @vue/cli).

3. Create Django Project

$ django-admin startproject redis_tool
$ cd redis_tool

Create an app for the Redis API: $ python manage.py startapp redis_api Add redis_api to INSTALLED_APPS in settings.py.

4. Define Model and Views

In redis_api/models.py:

from django.db import models

class RedisKey(models.Model):
    key = models.CharField(max_length=255)
    value = models.TextField()
    created_at = models.DateTimeField(auto_now_add=True)
    updated_at = models.DateTimeField(auto_now=True)

In redis_api/views.py implement CRUD functions that use the redis Python client and the RedisKey model (code omitted for brevity, see original source for full implementation).

5. Create Vue Front‑End

$ vue create redis_tool_frontend
$ cd redis_tool_frontend
$ npm install axios

Create src/components/RedisKeyForm.vue to submit new keys:

<template>
  <div>
    <h2>Create Redis Key</h2>
    <form @submit.prevent="createRedisKey">
      <div>
        <label for="key">Key:</label>
        <input type="text" id="key" v-model="key" required>
      </div>
      <div>
        <label for="value">Value:</label>
        <input type="text" id="value" v-model="value" required>
      </div>
      <button type="submit">Create</button>
    </form>
  </div>
</template>

<script>
import axios from 'axios';
export default {
  data() { return { key: '', value: '' }; },
  methods: {
    createRedisKey() {
      axios.post('/api/redis-keys/', { key: this.key, value: this.value })
        .then(response => console.log(response.data))
        .catch(error => console.error(error));
    }
  }
};
</script>

Also create RedisKeyList.vue to list, get, update and delete keys (code shown in the original source).

6. Configure Routing and API

In redis_tool/urls.py add the API endpoints:

from django.urls import path
from redis_api import views

urlpatterns = [
    path('api/redis-keys/', views.create_redis_key),
    path('api/redis-keys/<int:key_id>/', views.get_redis_key),
    path('api/redis-keys/<int:key_id>/', views.update_redis_key),
    path('api/redis-keys/<int:key_id>/', views.delete_redis_key),
]

Enable Django REST Framework in settings.py by adding 'rest_framework' to INSTALLED_APPS and configuring the default renderer.

7. Build and Run

$ npm run build
$ python manage.py runserver

Visit http://localhost:8000 to use the Redis management UI, where you can create, read, update and delete Redis keys through the web interface.

By following these steps you have wrapped a powerful Redis CRUD tool in a Django‑MySQL backend and a Vue front‑end.