在Django Wagtail CMS中传递本地JSON至Vue.js的规范方案咨询（含Python生成场景）

Great question! Let's break this down based on your two main scenarios—passing local JSON from Wagtail to Vue, and handling the JSON file generated by an external Python program. Here's the industry-standard approach, plus a breakdown of the options you mentioned:

Wagtail runs on Django, so we can leverage Django's templating system and backend capabilities to safely get data to Vue.

Option 1: Template Injection (Best for Static/Pre-Rendered Data) #

If your JSON data is available when the page renders (e.g., fetched from Wagtail's API or a Django model at page load), the safest and simplest way is to inject it directly into the template using Django's json_script filter. This avoids XSS risks and lets Vue access the data immediately.

Example in your Wagtail template:

{% load static %}

<!-- Inject JSON into a safe script tag -->
{{ my_wagtail_json_data|json_script:"vue-app-data" }}

<!-- Vue CDN and your component -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
new Vue({
  el: '#app',
  data() {
    return {
      appData: {}
    }
  },
  mounted() {
    // Read the injected JSON
    const rawData = document.getElementById('vue-app-data').textContent;
    this.appData = JSON.parse(rawData);
  }
})
</script>

This works perfectly for data that doesn't need real-time updates after the page loads.

Option 2: AJAX/Fetch API (Best for Dynamic/Updatable Data) #

If you need to fetch data after the page loads (e.g., user interactions, real-time updates), create a Django view (or use Wagtail's built-in API) to serve the JSON, then use Vue's fetch or axios (via CDN) to retrieve it.

Step 1: Create a Django View (or Wagtail API Endpoint) #

# views.py
from django.http import JsonResponse
from wagtail.core.models import Page

def get_wagtail_data(request):
    # Fetch your data from Wagtail (e.g., a Page's custom fields)
    page = Page.objects.get(slug='your-page-slug')
    data = {
        'title': page.title,
        'custom_field': page.custom_field,
        # Add other fields as needed
    }
    return JsonResponse(data)

Add this view to your urls.py:

from django.urls import path
from . import views

urlpatterns = [
    path('api/wagtail-data/', views.get_wagtail_data, name='wagtail-data-api'),
]

Step 2: Fetch Data in Vue #

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
new Vue({
  el: '#app',
  data() {
    return {
      appData: {}
    }
  },
  async mounted() {
    try {
      const response = await fetch('/api/wagtail-data/');
      this.appData = await response.json();
    } catch (error) {
      console.error('Failed to fetch data:', error);
    }
  }
})
</script>

This is the go-to method for dynamic data, as it lets you refresh data without reloading the page and adds flexibility for authentication/authorization.

For a JSON file that's updated by an independent Python script, you have two solid options:

Option 1: Serve the JSON as a Static File #

Place the generated JSON file in Django's static directory (or a publicly accessible media directory). Then have Vue fetch it directly via its URL.

Notes: #

• Cache Control: Browsers cache static files, so to ensure users get the latest version, add a version hash to the filename (e.g., data-v2.json) when your Python script updates it, or append a query parameter in Vue:

  // Add a timestamp to bypass cache
  const response = await fetch('/static/data/my-data.json?t=' + Date.now());
  

• Security: Only use this for non-sensitive data—static files are publicly accessible.

Option 2: Proxy the JSON via a Django View #

If you need to add access control, modify the data before sending it to Vue, or avoid cache issues more cleanly, create a Django view that reads the JSON file and returns it as a JsonResponse:

# views.py
import json
from django.http import JsonResponse
from django.conf import settings
import os

def get_generated_json(request):
    # Path to your generated JSON file
    json_path = os.path.join(settings.BASE_DIR, 'generated_data', 'output.json')
    with open(json_path, 'r') as f:
        data = json.load(f)
    # Optional: Modify data or add authentication checks here
    return JsonResponse(data)

Then fetch this endpoint in Vue just like the Wagtail API example above.

Let's quickly go through the options you mentioned:

• Django Fixture: Fixtures are designed for seeding database data, not serving data to frontend apps. This is not a suitable approach here.
• ajax/getJson: This is essentially the same as the Fetch API approach I outlined above—this is a standard, valid method for dynamic data.
• vue-router fetch: This works if you're building a Vue SPA with vue-router, using route-level data fetching. However, since you're working with Wagtail (a server-rendered CMS), this is only necessary if you're building a fully decoupled SPA. For most Wagtail + Vue hybrid setups, direct fetch/AJAX is more straightforward.

• For static data available at page load: Use Django's json_script template injection.
• For dynamic or user-specific data: Build a Django/Wagtail API endpoint and fetch it with Vue's Fetch API.
• For externally generated JSON: Serve it as a static file (with cache busting) or proxy it via a Django view (for control/security).

内容的提问来源于stack exchange，提问作者Tcard2