chamatt

function DeletarPost(elemento) {
  const post = elemento.parentNode.parentNode.parentNode;
  const id = post.dataset.postId;
  axios.delete(`http://localhost:3000/posts/${id}`).then(() => ObterPosts());
}

chamatt

function EnviarPost(dadosDoFormulario) {
  axios
    .post("http://localhost:3000/posts", dadosDoFormulario)
    .then(() => ObterPosts())
    .catch(e => console.log(e));
}

chamatt

const formulario = document.querySelector("form");

formulario.addEventListener("submit", event => {
  event.preventDefault(); //Previne a atualização da pagina após enviar o formulário
  const dadosDoFormulario = {
    title: formulario.children.title.value,
    body: formulario.children.body.value,
    image: formulario.children.image.value
  }; // Pega os dados do formulário
  EnviarPost(dadosDoFormulario); // Chama a função que vai realizar a requisição

chamatt

function ObterPosts() {
  const secaoblog = document.querySelector("section.blog-container"); // Seleciona o elemento do DOM

  axios.get("http://localhost:3000/posts").then(resposta => {
      // Faz uma Array com os posts no formato do template
      const ListaDePosts = resposta.data.map(post => PostTemplate(post.title, post.body, post.image, post.id)); 
      let PostsJuntos = ListaDePosts.reverse().join(); // Inverte a lista e junta todos os posts em uma string só
      if (ListaDePosts.length == 0) // Checamos se existe pelo menos um post no banco de dados, senão, mostramos uma mensagem.
          PostsJuntos = `<div class="alert alert-info" role="alert"> Nenhum post! Crie um novo! </div>`;
      secaoblog.innerHTML = PostsJuntos; // Insere a string dentro da seção dos posts

chamatt

function PostTemplate(titulo, corpo, imagem, id) {
  return `<article class="blog-post-container" data-post-id="${id}">
        <div class="row">
          <div class="blog-post-image col-3">
            <img src="${imagem || "https://bit.ly/2So2zvB"}" alt="Erro"></img>
          </div>
          <div class="col-7">
            <div class="blog-post-title">${titulo}</div>
            <div class="blog-post-body">${corpo}</div>
          </div>

chamatt

.blog-post-container {
  width: 100%;
  box-shadow: 0px 0px 10px 0.01px rgba(50, 50, 50, 0.1);
  padding: 2em;
  margin-top: 1em;
  margin-bottom: 1em;
}

.blog-post-title {
  padding-left: 1em;

chamatt

    <h1 class="text-center mt-4 blog-title-header">Posts</h1>
    <hr class="blog-title-separator" />
    <section class="blog-container">
        
      <!-- Cada post será um "article" e terá um post-id -->
      <article class="blog-post-container" data-post-id="1">
        <div class="row">
          <div class="blog-post-image col-3">
            <img src="https://bit.ly/2So2zvB"></img>

chamatt

axios
  .post("https://jsonplaceholder.typicode.com/posts", {
    title: "titulo",
    body: "corpo do texto",
    userId: 1
  })
  .then(resposta => FuncaoQueSeraExecutada(resposta));

chamatt

axios
  .get("https://jsonplaceholder.typicode.com/posts")
  .then(resposta => FuncaoQueSeraExecutada(resposta));

chamatt

fetch("https://jsonplaceholder.typicode.com/posts", {
  method: "POST",
  body: JSON.stringify({
    /* Transforma objeto em JSON */
    title: "titulo",
    body: "corpo do texto",
    userId: 1
  }),
  headers: {
    "Content-type": "application/json; charset=UTF-8" // Especifica que será enviado um JSON