برنامه Microposts: دریافت و نمایش پست‌ها

در قسمت قبل توانستیم یک REST API محلی را راه اندازی کنیم و حالا باید به سراغ کدنویسی جاوا اسکریپت برویم. این جلسه مخصوص دریافت پست ها از فایل db.json و نمایش آن ها می باشد و من برای این کار از کتابخانه easyHttp استفاده می کنم. ما خودمان در دوره جاوا اسکرپیت نامتقارن آن را از صفر نوشتیم، برای اطلاعات بیشتر به این دوره و مخصوصا به جلسات نسخه اول easyHttp و نسخه دوم easyHttp و نسخه سوم easyHttp سر بزنید. من از نسخه سوم استفاده خواهم کرد اما اگر دوست داشتید قسمت های قبل از آن نیز به شما درک خوبی می دهند.

من درون پوشه src یک فایل به نام http.js ساخته و تمام کدهای نسخه سوم این کتابخانه را در آن paste می کنم. سپس برای آنکه این فایل را تبدیل به یک ماژول کنم از دستور export در انتهای آن استفاده می کنم. محتویات کامل فایل:

/**
 * EasyHTTP Library
 * Library for making HTTP requests
 *
 * @version 3.0.0
 * @author  Brad Traversy
 * @license MIT
 *
 **/

class EasyHTTP {
  // Make an HTTP GET Request 
  async get(url) {
    const response = await fetch(url);
    const resData = await response.json();
    return resData;
  }

  // Make an HTTP POST Request
  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;
   
  }

   // Make an HTTP PUT Request
   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;
  }

  // Make an HTTP DELETE Request
  async delete(url) {
    const response = await fetch(url, {
      method: 'DELETE',
      headers: {
        'Content-type': 'application/json'
      }
    });

    const resData = await 'Resource Deleted...';
    return resData;
  }

 }

 export const http = new EasyHTTP();

حالا به فایل app.js برمی گردیم و آن را به عنوان ماژول import می کنیم:

import { http } from './http';

نکته: قبل از ادامه کار مطمئن باشید که سرور webpack و سرور json-server در ترمینال های شما در حال اجرا شدن هستند.

در خط بعد در همین فایل باید یک Event-listener داشته باشیم که در هنگام بارگذاری صفحه، پست ها را لود کند بنابراین:

// Get posts on DOM load
document.addEventListener('DOMContentLoaded', getPosts);

حالا باید متد GetPosts را تعریف کنیم:

// Get posts on DOM load
document.addEventListener('DOMContentLoaded', getPosts);

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

این متد از کتابخانه EasyHttp ما استفاده می کند بنابراین یک promise را برمی گرداند. برای کار با promise ها هم که مشخص است باید از Then برای دریافت پاسخ و سپس catch برای دریافت خطا ها استفاده کنیم. فعلا برای تست خطاها یا پاسخ سرور محلی خود را log کرده ایم. اگر مرورگر را باز کرده و به قسمت کنسول نگاه کنید به محض نمایان شدن UI باید پست های خودمان را نیز ببینیم. توجه کنید که url پاس داده شده به http.get همان آدرس REST API محلی خودمان است که در جلسه قبل ایجاد کردیم.

حالا که مطمئن شدیم کدها به درستی کار می کند باید یک ماژول دیگر برای UI بسازیم که مسئول نمایش پست ها در مرورگر باشد نه اینکه فقط داده ها را log کنیم. برای این کار یک فایل دیگر درون پوشه src می سازم و نام آن ر ui.js می گذارم. درون این فایل یک کلاس را تعریف می کنیم:

class UI {
  constructor() {
    this.post = 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.forState = 'add';
  }
}

همانطور که می بینید درون این کلاس یک constructor داریم در همان ابتدای کار عناصر UI را دریافت می کند. تمامی این موارد از فایل index.html گرفته شده اند به جز forState که فعلا برایتان آشنا نیست. به طور خلاصه برنامه ما در حالت پیش فرض در حالت add یا نوشتن پست خواهد بود و اگر کسی بخواهد پست خود را ویرایش کند می توانیم از حالت add خارج شده و به حالت edit (ویرایش) وارد شویم. در جلسات بعدی در این مورد بیشتر صحبت می کنیم.

در مرحله بعد متدی به نام Showpost خواهیم داشت که کدهای این فایل را کامل می کند:

class UI {
  constructor() {
    this.post = 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.forState = '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.post.innerHTML = output;
  }
}

export const ui = new UI();

از آنجایی که ممکن است بیش از یک پست داشته باشیم، از حلقه forEach استفاده کرده ام که به ازای هر پست یک بار اجرا شود. محتویات آن به جز مقداری کد HTML چیز دیگری نیست بنابراین درک آن ها ساده می باشد و خودتان می توانید آن ها را بخوانید. در مرحله بعد کدهای HTML درون output را گذاشته ایم و innerHTML مربوط به post را برابر output کرده ایم. نهایتا برای ماژول شدن کدها آن را export کرده ایم. حالا به فایل app.js برگردید تا از آن استفاده کنیم.

من در ابتدا ماژول خود را در app.js وارد می کنم:

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

سپس به جای log کردن داده های ارسالی، از همین ماژول ui استفاده می کنم تا کدهایمان را نمایش بدهم:

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

// Get posts on DOM load
document.addEventListener('DOMContentLoaded', getPosts);

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

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

من می خواهم یک stylesheet شخصی نیز داشته باشم تا برخی استایل های جزئی را تغییر دهم بنابراین در کنار پوشه Src یک پوشه دیگر به نام assets نیز تعریف کنید که حاوی فایلی به نام style.css باشد. فعلا در این فایل کلاس delete را قرمز می کنیم تا آیکون delete ما (علامت ضربدر) قرمز رنگ شود:

.delete {
  color: red;
}

سپس به index.html می رویم تا این فایل را به آن اضافه کنیم:

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

از این به بعد علامت ضربدر برای حذف پست ها به رنگ قرمز در می آید. در قسمت بعدی روی اضافه کردن و نوشتن پست ها تمرکز می کنیم.

دانلود سورس کد این جلسه