Building a Mock Service Tool with Django, MySQL, and Vue

In modern web development, front‑end developers often need a mock backend when the real APIs are not yet ready. This tutorial shows how to build a full‑featured mock service using Django, MySQL, and Vue, enabling developers to simulate, store, and modify API data.

Part 1: Set up the backend environment

Install Django and MySQL: pip install Django Create a Django project and app:

django-admin startproject mockserver
cd mockserver
django-admin startapp mockapp

Configure MySQL in settings.py:

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.mysql',
        'NAME': 'your_database_name',
        'USER': 'your_username',
        'PASSWORD': 'your_password',
        'HOST': 'your_database_host',
        'PORT': 'your_database_port',
    }
}

Define a simple model in mockapp/models.py and create corresponding views in mockapp/views.py to list, save, and update mock data:

from django.db import models
class MockData(models.Model):
    name = models.CharField(max_length=100)
    value = models.CharField(max_length=100)

from django.http import JsonResponse
from .models import MockData

def get_mock_data(request):
    data = MockData.objects.all().values()
    return JsonResponse(list(data), safe=False)

def save_mock_data(request):
    name = request.POST.get('name')
    value = request.POST.get('value')
    if name and value:
        MockData.objects.create(name=name, value=value)
        return JsonResponse({'message': 'Mock data saved successfully'})
    return JsonResponse({'message': 'Invalid data'})

def update_mock_data(request, id):
    name = request.POST.get('name')
    value = request.POST.get('value')
    if name and value:
        try:
            obj = MockData.objects.get(id=id)
            obj.name = name
            obj.value = value
            obj.save()
            return JsonResponse({'message': 'Mock data updated successfully'})
        except MockData.DoesNotExist:
            return JsonResponse({'message': 'Mock data not found'})
    return JsonResponse({'message': 'Invalid data'})

Add URL routes in urls.py:

from django.contrib import admin
from django.urls import path
from mockapp.views import get_mock_data, save_mock_data, update_mock_data

urlpatterns = [
    path('admin/', admin.site.urls),
    path('api/mockdata/', get_mock_data),
    path('api/mockdata/save/', save_mock_data),
    path('api/mockdata/update/<int:id>/', update_mock_data),
]

Part 2: Set up the frontend environment

Install the Vue CLI and create a new project:

npm install -g @vue/cli
vue create mockclient
cd mockclient
npm install axios --save

Create src/views/Mock.vue with a template that lists mock data, allows editing, and adding new entries. The script uses Axios to call the backend APIs:

<template>
  <div>
    <h1>Mock Data</h1>
    <ul>
      <li v-for="item in mockData" :key="item.id">
        {{ item.name }} - {{ item.value }}
        <button @click="editData(item)">Edit</button>
      </li>
    </ul>
    <div v-if="editingData">
      <h2>Edit Data</h2>
      <input type="text" v-model="editingData.name" placeholder="Name" />
      <input type="text" v-model="editingData.value" placeholder="Value" />
      <button @click="saveChanges">Save Changes</button>
    </div>
    <div v-else>
      <h2>Add Data</h2>
      <input type="text" v-model="newData.name" placeholder="Name" />
      <input type="text" v-model="newData.value" placeholder="Value" />
      <button @click="saveData">Save Data</button>
    </div>
  </div>
</template>

<script>
import axios from 'axios';
export default {
  data() { return { mockData: [], newData: { name: '', value: '' }, editingData: null }; },
  mounted() { this.fetchMockData(); },
  methods: {
    fetchMockData() { axios.get('/api/mockdata/').then(r => { this.mockData = r.data; }).catch(console.error); },
    saveData() { axios.post('/api/mockdata/save/', this.newData).then(() => { this.fetchMockData(); this.newData = { name: '', value: '' }; }).catch(console.error); },
    editData(item) { this.editingData = { ...item }; },
    saveChanges() { axios.post(`/api/mockdata/update/${this.editingData.id}/`, this.editingData).then(() => { this.fetchMockData(); this.editingData = null; }).catch(console.error); }
  }
};
</script>

Configure Vue Router in src/router/index.js to route the root path to the Mock component:

import Vue from 'vue';
import VueRouter from 'vue-router';
import Mock from '../views/Mock.vue';
Vue.use(VueRouter);
const routes = [{ path: '/', name: 'Mock', component: Mock }];
const router = new VueRouter({ mode: 'history', base: process.env.BASE_URL, routes });
export default router;

Part 3: Run the project

Start the Django backend: python manage.py runserver Start the Vue development server: npm run serve Visit http://localhost:8080 to see the mock service UI, where you can add, edit, and persist mock data in MySQL.

Conclusion

By combining Django, MySQL, and Vue, you can quickly build a mock service that supports data storage and modification, helping front‑end developers and testers work independently of real APIs and improving overall development efficiency.