如何启动开发带API的单页Feed应用？已有前端基础求入门指引

Hey there! Since you already have experience with HTML, CSS, jQuery, and Bootstrap, you’re already halfway there—let’s break this down into actionable, low-friction steps to get you started without overwhelming you.

1. First: Map Out the API’s Behavior (Critical!) #

Before writing any front-end code, you need to understand exactly what the API expects and returns. Grab your browser’s DevTools (Network tab) to test these:

• Send a GET request to http://fe-zadanie.herokuapp.com to see the structure of each feed item. Note key fields like id, content, likes (or whatever the API uses for like counts)—you’ll need these to render and update items.
• Test a PUT request: Try updating an existing feed item (e.g., incrementing its like count). Figure out what data you need to send in the request body, and how the API responds when successful.
• Test a DELETE request: Pick an existing feed item’s id, append it to the URL (e.g., http://fe-zadanie.herokuapp.com/123) and send a DELETE request to confirm it removes the item.
• For creating new feed items: The user mentioned GET/PUT/DELETE, but creation usually uses POST. Test a POST request with sample content to see if the API supports it—if not, check if the API expects PUT to a root endpoint for new items.

2. Build Your Basic Page Layout With Bootstrap #

Leverage what you know to quickly scaffold the UI:

• Create a top section with an input field and a "Add Feed" button for creating new items.
• Add a container below where your feed items will render. Use Bootstrap’s card component for each feed item—include the content, a like button (use Bootstrap’s icon classes like bi-heart), an edit button, and a delete button.
• Make sure each feed item stores its unique id (e.g., in a data-id attribute) so you can reference it later for updates/deletes.

3. Implement Features in Order of Complexity (Start Simple!) #

Tackle one feature at a time to avoid confusion:

A. Fetch and Render the Initial Feed #

• Write a reusable function (e.g., loadFeed()) that uses jQuery’s $.get() to fetch the feed data.
• Loop through the returned data, generate HTML for each feed item (using Bootstrap classes), and append it to your feed container. Example snippet:

  function loadFeed() {
    $.get('http://fe-zadanie.herokuapp.com')
      .done(function(feedItems) {
        $('#feed-container').empty();
        feedItems.forEach(item => {
          const card = `
            <div class="card mb-2" data-id="${item.id}">
              <div class="card-body">
                <p class="card-text">${item.content}</p>
                <button class="btn btn-outline-primary like-btn" data-likes="${item.likes}">
                  <i class="bi-heart"></i> ${item.likes}
                </button>
                <button class="btn btn-outline-secondary edit-btn">Edit</button>
                <button class="btn btn-outline-danger delete-btn">Delete</button>
              </div>
            </div>
          `;
          $('#feed-container').append(card);
        });
      })
      .fail(function() {
        alert('Failed to load feed. Please try again later.');
      });
  }
  

• Call this function when the page loads ($(document).ready(function() { loadFeed(); });).

B. Implement Delete Functionality #

• Bind a click event to all delete buttons (use event delegation since buttons are dynamically added):

  $('#feed-container').on('click', '.delete-btn', function() {
    const itemId = $(this).closest('.card').data('id');
    if (confirm('Are you sure you want to delete this item?')) {
      $.ajax({
        url: `http://fe-zadanie.herokuapp.com/${itemId}`,
        method: 'DELETE'
      })
      .done(function() {
        $(this).closest('.card').remove();
      })
      .fail(function() {
        alert('Failed to delete item.');
      });
    }
  });
  

C. Add Like/Unlike Functionality #

• Bind a click event to like buttons. Track the current like count and toggle it:

  $('#feed-container').on('click', '.like-btn', function() {
    const $btn = $(this);
    const itemId = $btn.closest('.card').data('id');
    const currentLikes = parseInt($btn.data('likes'));
    const newLikes = $btn.hasClass('liked') ? currentLikes - 1 : currentLikes + 1;
  
    $.ajax({
      url: `http://fe-zadanie.herokuapp.com/${itemId}`,
      method: 'PUT',
      data: { likes: newLikes } // Adjust based on API's expected data structure
    })
    .done(function() {
      $btn.data('likes', newLikes);
      $btn.html(`<i class="bi-heart${$btn.hasClass('liked') ? '' : '-fill'}"></i> ${newLikes}`);
      $btn.toggleClass('liked btn-outline-primary btn-primary');
    })
    .fail(function() {
      alert('Failed to update like count.');
    });
  });
  

D. Implement Edit Functionality #

• For editing, you can use Bootstrap’s modal:
  1. Add a hidden modal to your page with an input field and save button.
  2. Bind a click event to edit buttons: Populate the modal’s input with the feed item’s content, and store the item’s id in the modal.
  3. On save button click, send a PUT request with the updated content, then reload the feed or update the specific card’s content.

E. Add New Feed Items #

• Bind a click event to your "Add Feed" button:

  $('#add-feed-btn').click(function() {
    const content = $('#new-feed-input').val().trim();
    if (content) {
      $.ajax({
        url: 'http://fe-zadanie.herokuapp.com',
        method: 'POST', // Or PUT if API expects it
        data: { content: content, likes: 0 }
      })
      .done(function(newItem) {
        $('#new-feed-input').val('');
        loadFeed(); // Or append the new item directly to the top of the feed
      })
      .fail(function() {
        alert('Failed to create new feed item.');
      });
    }
  });
  

4. Key Best Practices to Keep in Mind #

• Handle errors gracefully: Always include fail() handlers for your AJAX requests to show user-friendly messages instead of letting things fail silently.
• Prevent duplicate actions: Disable buttons (e.g., $btn.prop('disabled', true)) while requests are in flight to avoid multiple clicks causing inconsistent data.
• Update DOM efficiently: Instead of reloading the entire feed every time, update only the specific item that changed (e.g., after liking, just update the like count on that button instead of calling loadFeed() again).
• Use Bootstrap utilities: Take advantage of Bootstrap’s spacing, colors, and components (modals, spinners) to make your app look polished without extra CSS work.

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