Django + MySQL + Vue封装页面Redis增删改查工具

在开发或测试过程中，通常需要运行redis。一个Redis在线下载可能可以满足我们大部分的需求，但可能无法满足团队的需求。分享。下面的例子会给你一个小想法。页面工具呈现re-dis操作。我将介绍如何使用Django、MySQL和Vue封装一个强大的页面Redis增删改查工具。 Redis 是一种快速且功能强大的内存数据库，而 Django 是一种流行的 Python Web 框架，MySQL 是一种常用的关系数据库。通过结合这些技术，我们可以创建一个易于使用且高效的 Redis 工具。

1。介绍

首先，我们简单介绍一下各项技术的作用和好处。

Django：Django 是一个功能齐全且易于使用的 Python Web 框架，为快速 Web 应用程序开发提供了许多工具和功能。我们使用 Django 构建后端 API 来处理与 Redis 数据库的交互。

MySQL：MySQL 是一种广泛使用的开源关系数据库管理系统。我们使用 MySQL 来存储和管理 Redis 相关数据，例如 Redis 键的元数据。

Vue：Vue 是用于构建用户界面的现代 JavaScript 框架。我们使用Vue构建前端界面，让用户可以轻松地与Redis数据库进行交互。

2。准备工作

在开始之前，我们需要安装一些必要的软件和库。

Python：确保已安装Python并且在系统环境变量中配置了正确的路径。

Django：通过运行 pip install Django 命令来安装 Django。

MySQL：安装和配置MySQL 数据库。您可以使用MySQL官网提供的安装程序进行安装。

View：确保已安装 Node.js 和 npm。然后运行 ​​npm install -g @vue/cli 全局安装 Vue CLI。

3。创建Django项目

首先，我们创建一个Django项目来构建后端API。？配置。将redis_api添加到Settings.py文件中的INSTALLED_APPS列表中：

INSTALLED_APPS = [    ...    'redis_api',]

接下来，我们需要定义Redis相关的模型和视图。

在Redis_api/models.py文件中添加以下代码：

from django.db import modelsclass 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)

该模型存储Redis键的元数据，包括键名、键值以及创建和更新时间。

现在，在 Redis_api/views.py 文件中添加以下代码：

from django.shortcuts import get_object_or_404from django.http import JsonResponsefrom django.views.decorators.csrf import csrf_exemptfrom .models import RedisKeyimport redis@csrf_exemptdef create_redis_key(request):    if request.method == 'POST':        key = request.POST.get('key')        value = request.POST.get('value')        try:            redis_client = redis.Redis()            redis_client.set(key, value)            redis_key = RedisKey.objects.create(key=key, value=value)            data = {                'id': redis_key.id,                'key': redis_key.key,                'value': redis_key.value,                'created_at': redis_key.created_at,                'updated_at': redis_key.updated_at            }            return JsonResponse({'status': 'success', 'data': data})        except Exception as e:            return JsonResponse({'status': 'error', 'message': str(e)})@csrf_exemptdef get_redis_key(request, key_id):    if request.method == 'GET':        redis_key = get_object_or_404(RedisKey, id=key_id)        try:            redis_client = redis.Redis()            value = redis_client.get(redis_key.key)            data = {                'id': redis_key.id,                'key': redis_key.key,                'value': value,                'created_at': redis_key.created_at,                'updated_at': redis_key.updated_at            }            return JsonResponse({'status': 'success', 'data': data})        except Exception as e:            return JsonResponse({'status': 'error', 'message': str(e)})@csrf_exemptdef update_redis_key(request, key_id):    if request.method == 'PUT':        redis_key = get_object_or_404(RedisKey, id=key_id)        value = request.POST.get('value')        try:            redis_client = redis.Redis()            redis_client.set(redis_key.key, value)            redis_key.value = value            redis_key.save()            data = {                'id': redis_key.id,                'key': redis_key.key,                'value': redis_key.value,                'created_at': redis_key.created_at,                'updated_at': redis_key.updated_at            }            return JsonResponse({'status': 'success', 'data': data})        except Exception as e:            return JsonResponse({'status': 'error', 'message': str(e)})@csrf_exemptdef delete_redis_key(request, key_id):    if request.method == 'DELETE':        redis_key = get_object_or_404(RedisKey, id=key_id)        try:            redis_client = redis.Redis()            redis_client.delete(redis_key.key)            redis_key.delete()            return JsonResponse({'status': 'success'})        except Exception as e:            return JsonResponse({'status': 'error', 'message': str(e)})

这些视图函数处理创建、获取、更新和删除 Redis 键的操作。我们使用 Redis 库与 Redis 服务器交互，并使用 Django 模型来管理 Redis 键的元数据。

4。创建Vue前端

现在，让我们创建一个Vue前端，以便用户可以轻松地与Redis数据库交互。

在命令行中运行以下命令：

$ vue create redis_tool_frontend$ cd redis_tool_frontend

在Vue项目中安装必要的库：

$ npm install axios

接下来，我们需要.

在 src/components 目录中，创建一个名为 RedisKeyForm.vue 的文件，并添加以下代码：

<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>这个Vue组件渲染一个表单，允许用户输入Redis键的名称和值，并在提交表单时通过发送POST请求来创建Redis键。

接下来，在src/components目录下，创建一个名为RedisKeyList.vue的文件，并添加以下代码：<template>  <div>    <h2>Redis Keys</h2>    <ul>      <li v-for="key in redisKeys" :key="key.id">        <span>{{ key.key }}</span>        <span>{{ key.value }}</span>        <button @click="getRedisKey(key.id)">Get</button>        <button @click="updateRedisKey(key.id)">Update</button>        <button @click="deleteRedisKey(key.id)">Delete</button>      </li>    </ul>  </div></template>

<script>import axios from 'axios';

export default {  data() {    return {      redisKeys: []    };  },  created() {    this.getRedisKeys();  },  methods: {    getRedisKeys() {      axios.get('/api/redis-keys/')        .then(response => {          this.redisKeys = response.data.data;        })        .catch(error => {          console.error(error);        });    },    getRedisKey(keyId) {      axios.get(`/api/redis-keys/${keyId}/`)        .then(response => {          console.log(response.data);          // 处理成功响应        })        .catch(error => {          console.error(error);          // 处理错误响应        });    },    updateRedisKey(keyId) {      // 获取更新后的值      // 发送PUT请求更新Redis键    },    deleteRedisKey(keyId) {      // 发送DELETE请求删除Redis键    }  }}</script>

此 Vue 组件呈现 Redis 键列表，并提供获取、更新和删除 Redis 键的操作。

5。配置路由和视图

现在，我们需要配置路由和视图以在Django中提供API并渲染页面和视图。

首先，在 Redis_tool/urls.py 文件中添加以下代码：

from django.urls import pathfrom redis_api import viewsurlpatterns = [    path('api/redis-keys/', views.create_redis_key),    path('api/redis-keys//', views.get_redis_key),    path('api/redis-keys//', views.update_redis_key),    path('api/redis-keys//', views.delete_redis_key),]

这些 URL 模式映射到我们之前定义的视图函数。

接下来，在 Redis_tool/settings.py 文件中添加以下代码：

INSTALLED_APPS = [    ...    'rest_framework',    'redis_api',]...REST_FRAMEWORK = {    'DEFAULT_RENDERER_CLASSES': [        'rest_framework.renderers.JSONRenderer',    ]}

这样，我们就配置了 Django REST Framework 来处理 API 请求和响应。

6。编译并运行

现在，让我们编译 Vue 前端并运行 Django 服务器。

在命令行中执行以下命令：

$ npm run build$ python manage.py runserver

现在您可以在浏览器中访问http://localhost:8000，看到您的Redis工具的页面。您可以创建、获取、更新和删除 Redis 密钥并与 Redis 数据库交互。

看一百遍还不如自己做呢！

至此，用Django、MySQL、Vue封装了一个强大的页面Redis增删改查工具。