105- آموزش جاوااسکریپت | پروژه عملی قسمت 6 از 8: افزودن پست جدید و نمایش پیام موفقیت در پروژه Micro Posts

در بخش قبل، ماژول‌های http و ui را ساختیم و توانستیم پست‌ها را از API دریافت کرده و در رابط کاربری نمایش دهیم. حالا نوبت آن است که فرم ثبت پست را به API متصل کنیم تا کاربر بتواند یک پست جدید ایجاد کند.

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

ثبت رویداد ارسال پست

ابتدا در فایل اصلی برنامه، روی دکمه ثبت پست یک رویداد click قرار می‌دهیم و تابعی برای پردازش فرم تعریف می‌کنیم.

document.querySelector(".post-submit").addEventListener("click", submitPost);

function submitPost() {
  // ...
}

نام تابع را submitPost در نظر می‌گیریم، چون در ادامه همین تابع می‌تواند برای ثبت و ویرایش پست‌ها استفاده شود. فعلا فقط بخش افزودن پست را پیاده‌سازی می‌کنیم.

دریافت اطلاعات فرم

حالا باید مقدار فیلدهای title و body را از فرم بگیریم:

function submitPost() {
  const title = document.querySelector("#title").value;
  const body = document.querySelector("#body").value;
}

در این مرحله، داده‌های فرم را برای ارسال به API آماده می‌کنیم.

ساخت شیء داده برای ارسال

اطلاعات فرم را داخل یک آبجکت قرار می‌دهیم تا به متد post در ماژول http ارسال شود:

function submitPost() {
  const title = document.querySelector("#title").value;
  const body = document.querySelector("#body").value;

  const data = {
    title,
    body
  };
}

در اینجا از shorthand property در ES6 استفاده شده است. چون نام کلیدها و متغیرها یکسان است، نیازی به نوشتن title: title و body: body نیست.

ارسال درخواست POST به API

حالا با استفاده از ماژول http، یک درخواست POST به مسیر /posts می‌فرستیم:

function submitPost() {
  const title = document.querySelector("#title").value;
  const body = document.querySelector("#body").value;

  const data = {
    title,
    body
  };

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

بعد از ثبت موفق پست، دوباره تابع getPosts() را اجرا می‌کنیم تا فهرست پست‌ها به‌روزرسانی شود و پست جدید بلافاصله در رابط کاربری نمایش داده شود.

نتیجه ثبت پست

بعد از اجرای این کد، هر بار که فرم را پر کرده و روی دکمه ثبت کلیک کنید:

• پست جدید به db.json اضافه می‌شود.
• فهرست پست‌ها دوباره از API خوانده می‌شود.
• پست جدید در رابط کاربری نمایش داده می‌شود.

این رفتار دقیقا مشابه یک برنامه واقعی است که به بک‌اند متصل شده باشد.

پاک کردن فیلدهای فرم بعد از ثبت

بعد از ثبت موفق پست، بهتر است فیلدهای فرم خالی شوند. برای این کار در ماژول ui یک متد به نام clearFields می‌سازیم:

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";
  }

  clearFields() {
    this.titleInput.value = "";
    this.bodyInput.value = "";
  }
}

این متد مقدار فیلدهای عنوان و متن را خالی می‌کند.

نمایش پیام موفقیت بعد از ثبت پست

برای نمایش پیام موفقیت، در ماژول ui یک متد دیگر به نام showAlert می‌سازیم. این متد یک پیام و کلاس CSS دریافت می‌کند و هشدار را قبل از بخش نمایش پست‌ها قرار می‌دهد.

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;
  }

  showAlert(message, className) {
    this.clearAlert();

    const div = document.createElement("div");
    div.className = className;
    div.appendChild(document.createTextNode(message));

    const container = document.querySelector(".postContainer");
    const posts = document.querySelector("#posts");

    container.insertBefore(div, posts);

    setTimeout(() => {
      this.clearAlert();
    }, 3000);
  }

  clearAlert() {
    const currentAlert = document.querySelector(".alert");

    if (currentAlert) {
      currentAlert.remove();
    }
  }

  clearFields() {
    this.titleInput.value = "";
    this.bodyInput.value = "";
  }
}

export const ui = new UI();

فراخوانی متدهای رابط کاربری بعد از ثبت

حالا در فایل اصلی، بعد از ثبت موفق پست، متدهای showAlert و clearFields را اجرا می‌کنیم:

function submitPost() {
  const title = document.querySelector("#title").value;
  const body = document.querySelector("#body").value;

  const data = {
    title,
    body
  };

  http
    .post("http://localhost:3000/posts", data)
    .then(data => {
      ui.showAlert("Post Added", "alert alert-success");
      ui.clearFields();
      getPosts();
    })
    .catch(err => console.log(err));
}

با این کار، بعد از ثبت هر پست:

• پیام موفقیت نمایش داده می‌شود.
• پیام بعد از 3 ثانیه حذف می‌شود.
• فیلدهای فرم خالی می‌شوند.
• پست جدید در لیست دیده می‌شود.

جمع‌بندی

در این بخش، قابلیت افزودن پست جدید را به پروژه اضافه کردیم. همچنین چند بهبود مهم در رابط کاربری انجام دادیم تا تجربه کار با فرم بهتر شود.

کارهایی که در این آموزش انجام شد:

• ثبت رویداد کلیک روی دکمه ارسال
• دریافت اطلاعات فرم
• ارسال درخواست POST به JSON Server
• به‌روزرسانی لیست پست‌ها بعد از ثبت
• پاک کردن فیلدهای فرم
• نمایش پیام موفقیت موقت در رابط کاربری

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