开发Rest Client实现非WP后台修改WordPress网站内容

Great to hear you’ve made such quick progress in web dev—props to you for getting a site up in a day, and shoutout to Tyler’s content for helping you along the way! Now that you’ve got your PHP REST API for uploads ready, let’s walk through how to build a REST Client to handle content modifications like updating galleries, videos, and text.

Key Prep Steps First #

Before diving into the client code, double-check your PHP API has endpoints for all the operations you need:

• GET to fetch existing content (e.g., /api/gallery, /api/text-content/{id})
• PUT/POST to create or update content (e.g., /api/text-content/edit, /api/gallery/add)
• DELETE to remove content (e.g., /api/video/delete/{id})
  Also, don’t skip authentication—add API keys or JWT tokens to your endpoints to block unauthorized changes to your site.

Example REST Client Implementations #

Since you’re building a custom admin backend, a JavaScript-based client (using native fetch or Axios) is the most straightforward choice. Here are practical examples:

1. Using Native fetch API (No External Libraries)

// Helper function for authenticated API calls
async function callApi(url, method = 'GET', data = null) {
  const headers = {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer YOUR_JWT_TOKEN' // Swap with your auth method, e.g., 'X-API-Key: YOUR_KEY'
  };

  const options = {
    method,
    headers,
    body: data ? JSON.stringify(data) : null
  };

  try {
    const response = await fetch(url, options);
    if (!response.ok) throw new Error(`Request failed: ${response.status}`);
    return await response.json();
  } catch (err) {
    console.error('API Error:', err);
    throw err; // Let your UI handle the error (e.g., show a toast)
  }
}

// Example: Update a text content block
async function updateTextBlock(blockId, newText) {
  const result = await callApi('/api/text-content/edit', 'PUT', {
    block_id: blockId,
    content: newText
  });
  console.log('Text updated:', result);
  // Refresh your UI to show the new content
}

// Example: Upload a gallery image (uses FormData for files)
async function uploadGalleryImage(imageFile) {
  const formData = new FormData();
  formData.append('image', imageFile);

  const headers = {
    'Authorization': 'Bearer YOUR_JWT_TOKEN'
    // Don't set Content-Type here—fetch auto-handles multipart boundaries
  };

  try {
    const response = await fetch('/api/gallery/upload', {
      method: 'POST',
      headers,
      body: formData
    });
    if (!response.ok) throw new Error(`Upload failed: ${response.status}`);
    const result = await response.json();
    console.log('Image added to gallery:', result);
  } catch (err) {
    console.error('Upload Error:', err);
  }
}

2. Using Axios (Simpler Syntax & Built-in Helpers)

If you prefer cleaner code, Axios handles FormData and error responses more smoothly. First add it to your project via CDN:

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

Then implement the client:

// Set default auth headers for all Axios calls
axios.defaults.headers.common['Authorization'] = 'Bearer YOUR_JWT_TOKEN';

// Update text content
async function updateTextBlock(blockId, newText) {
  try {
    const response = await axios.put('/api/text-content/edit', {
      block_id: blockId,
      content: newText
    });
    console.log('Text saved:', response.data);
  } catch (err) {
    console.error('Update failed:', err.response?.data || err.message);
  }
}

// Upload gallery image
async function uploadGalleryImage(imageFile) {
  const formData = new FormData();
  formData.append('image', imageFile);

  try {
    const response = await axios.post('/api/gallery/upload', formData, {
      headers: { 'Content-Type': 'multipart/form-data' }
    });
    console.log('Image uploaded:', response.data);
  } catch (err) {
    console.error('Upload error:', err.response?.data || err.message);
  }
}

Tie It to an Admin UI #

Connect these functions to a simple HTML interface for your backend:

<!-- Text Editor Section -->
<div class="text-editor">
  <h3>Edit Home Page Hero Text</h3>
  <textarea id="hero-text" rows="4">Your existing hero text here...</textarea>
  <button onclick="updateTextBlock('home-hero', document.getElementById('hero-text').value)">Save Changes</button>
</div>

<!-- Gallery Upload Section -->
<div class="gallery-upload">
  <h3>Add Image to Gallery</h3>
  <input type="file" id="gallery-file" accept="image/*">
  <button onclick="uploadGalleryImage(document.getElementById('gallery-file').files[0])">Upload Image</button>
</div>

Critical Security Reminders #

• Sanitize all user input on both client and server to prevent XSS attacks.
• Use HTTPS to encrypt data between your client and API.
• Add rate limiting to your PHP API to stop abuse.

That should give you a solid foundation to build your custom content management workflow. If you hit snags with specific cases (like bulk video uploads or dynamic content previews), feel free to ask for more targeted help!

内容的提问来源于stack exchange，提问作者Rahul S Saksule