104- آموزش جاوااسکریپت | پروژه عملی قسمت 5 از 8: اتصال فرانت‌اند به JSON Server و نمایش پست‌ها در Micro Posts

حالا که یک REST API آزمایشی در بک‌اند داریم، وقت آن رسیده که فرانت‌اند را به آن متصل کنیم. در این بخش، از کتابخانه EasyHTTP که قبلا ساخته بودیم استفاده می‌کنیم تا داده‌ها را از API دریافت کنیم و در رابط کاربری نمایش دهیم.

انتقال فایل EasyHTTP به پروژه

در این پروژه از نسخه‌ای از EasyHTTP استفاده می‌کنیم که با async/await پیاده‌سازی شده است. ابتدا فایل مربوط به آن را به پوشه src منتقل می‌کنیم و نام آن را http.js می‌گذاریم.

سپس در انتهای فایل، یک نمونه از کلاس می‌سازیم و آن را export می‌کنیم تا در فایل‌های دیگر قابل استفاده باشد:

class EasyHTTP {
  async get(url) {
    const response = await fetch(url);
    const resData = await response.json();
    return resData;
  }

  async post(url, data) {
    const response = await fetch(url, {
      method: "POST",
      headers: {
        "Content-type": "application/json"
      },
      body: JSON.stringify(data)
    });

    const resData = await response.json();
    return resData;
  }

  async put(url, data) {
    const response = await fetch(url, {
      method: "PUT",
      headers: {
        "Content-type": "application/json"
      },
      body: JSON.stringify(data)
    });

    const resData = await response.json();
    return resData;
  }

  async delete(url) {
    await fetch(url, {
      method: "DELETE",
      headers: {
        "Content-type": "application/json"
      }
    });

    return "Resource Deleted...";
  }
}

export const http = new EasyHTTP();

وارد کردن ماژول HTTP در فایل اصلی

حالا در فایل اصلی برنامه، ماژول http را وارد می‌کنیم:

import { http } from "./http";

این کار به ما اجازه می‌دهد متدهایی مثل get، post، put و delete را در بخش‌های مختلف برنامه فراخوانی کنیم.

دریافت پست‌ها هنگام بارگذاری صفحه

اولین هدف ما این است که به‌محض بارگذاری صفحه، پست‌ها از API خوانده شوند. برای این کار از رویداد DOMContentLoaded استفاده می‌کنیم:

document.addEventListener("DOMContentLoaded", getPosts);

function getPosts() {
  http
    .get("http://localhost:3000/posts")
    .then(data => console.log(data))
    .catch(err => console.log(err));
}

در این مرحله فقط داده‌های برگشتی را در کنسول نمایش می‌دهیم تا مطمئن شویم ارتباط با API درست برقرار شده است.

ساخت ماژول UI

بعد از اطمینان از دریافت داده‌ها، باید آن‌ها را در صفحه نمایش دهیم. برای این کار یک فایل جدید به نام ui.js می‌سازیم و یک کلاس برای مدیریت رابط کاربری در آن قرار می‌دهیم.

class UI {
  constructor() {
    this.posts = document.querySelector("#posts");
    this.titleInput = document.querySelector("#title");
    this.bodyInput = document.querySelector("#body");
    this.idInput = document.querySelector("#id");
    this.postSubmit = document.querySelector(".post-submit");
    this.formState = "add";
  }
}

export const ui = new UI();

نمایش پست‌ها در رابط کاربری

حالا یک متد به نام showPosts به کلاس UI اضافه می‌کنیم تا آرایه پست‌ها را بگیرد و آن‌ها را به HTML تبدیل کند:

class UI {
  constructor() {
    this.posts = document.querySelector("#posts");
    this.titleInput = document.querySelector("#title");
    this.bodyInput = document.querySelector("#body");
    this.idInput = document.querySelector("#id");
    this.postSubmit = document.querySelector(".post-submit");
    this.formState = "add";
  }

  showPosts(posts) {
    let output = "";

    posts.forEach(post => {
      output += `
        <div class="card mb-3">
          <div class="card-body">
            <h4 class="card-title">${post.title}</h4>
            <p class="card-text">${post.body}</p>
            <a href="#" class="edit card-link" data-id="${post.id}">
              <i class="fa fa-pencil"></i>
            </a>
            <a href="#" class="delete card-link" data-id="${post.id}">
              <i class="fa fa-remove"></i>
            </a>
          </div>
        </div>
      `;
    });

    this.posts.innerHTML = output;
  }
}

export const ui = new UI();

در اینجا برای هر پست، یک کارت Bootstrap ساخته می‌شود که شامل عنوان، متن، و آیکن‌های ویرایش و حذف است.

استفاده از ماژول UI در فایل اصلی

حالا باید ماژول ui را در فایل اصلی وارد کنیم و به‌جای console.log از متد showPosts استفاده کنیم:

import { http } from "./http";
import { ui } from "./ui";

document.addEventListener("DOMContentLoaded", getPosts);

function getPosts() {
  http
    .get("http://localhost:3000/posts")
    .then(data => ui.showPosts(data))
    .catch(err => console.log(err));
}

با این کار، پست‌های دریافتی از API مستقیما در رابط کاربری نمایش داده می‌شوند.

استفاده از data-id برای عملیات بعدی

برای هر دکمه ویرایش و حذف از ویژگی data-id استفاده می‌کنیم:

<a href="#" class="edit card-link" data-id="${post.id}">
  <i class="fa fa-pencil"></i>
</a>

<a href="#" class="delete card-link" data-id="${post.id}">
  <i class="fa fa-remove"></i>
</a>

این ویژگی به ما کمک می‌کند در مراحل بعدی، شناسه هر پست را برای ویرایش یا حذف در اختیار داشته باشیم.

افزودن فایل استایل سفارشی

برای شخصی‌سازی ظاهر برنامه، یک فایل CSS جدید در مسیر assets/css/style.css می‌سازیم و رنگ آیکن حذف را قرمز قرار می‌دهیم:

.delete {
  color: red;
}

سپس این فایل را در index.html اضافه می‌کنیم:

<link rel="stylesheet" href="assets/css/style.css" />

بعد از این کار، آیکن حذف با رنگ قرمز نمایش داده می‌شود.

جمع‌بندی

در این بخش، چند قسمت مهم از پروژه را تکمیل کردیم:

• ماژول http را به پروژه اضافه کردیم.
• پست‌ها را از JSON Server دریافت کردیم.
• ماژول UI را برای مدیریت رابط کاربری ساختیم.
• داده‌های دریافتی را در صفحه نمایش دادیم.
• برای هر پست، دکمه‌های ویرایش و حذف اضافه کردیم.
• یک فایل استایل سفارشی به پروژه افزودیم.

در بخش بعدی، امکان افزودن پست جدید از طریق فرم را پیاده‌سازی می‌کنیم و داده‌ها را به API ارسال خواهیم کرد.