Question

我正在构建一个javascript应用程序，其想法是在加载页面时，我从JSON服务器上获得了一些帖子。它工作正常，除了仅显示两个图标之一而又是错误的一个。从ui.js文件中我应该是得到fas fa-edit和fas fa-eraser，相反，我得到了fa-trash-alt。任何帮助将不胜感激。

RE：我已经弄清楚了。我正在使用webpack，并且在此应用上工作时，我以前已经编译过文件。这就是为什么这些图标（尽管保存在代码编辑器中）没有出现在页面上的原因。我不得不再次编译文件我要做的就是在集成终端中输入“ npm run build”，重新启动JSON服务器，并在加载页面图标时出现。

//app.js
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));
}


//http.js
class HTTP {
// 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 HTTP

//ui.js
class UI{
constructor(){
  this.post=document.querySelector("#posts");
}

  showPosts(posts){
    let output="";
    posts.forEach(function(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="fas fa-edit"></i>
      </a>
      
      <a href="#" class="delete card-link" data-id="${post.id}">
      <i class="fas fa-eraser"></i>
      </a>
      </div>
     </div>
      `;
    });
    this.post.innerHTML=output;
  
}
}

export const ui=new UI();

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet"href="style.css">
  <link rel="stylesheet" href="https://bootswatch.com/4/cosmo/bootstrap.min.css">
  <link rel="stylesheet"  href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
  
</head>
<body>
   
   
  <nav class="navbar bg-primary mb-3">
    <div class="container">
      <a href="#" class="navbar-brand text-light">MicroPosts</a>
    </div>
  </nav>

  <div class="container postsContainer">
    <div class="card card-body card-form">
<h1>Say Something</h1>
<p class="lead">What s on your mind?</p>
<div class="form-group">
  <input type="text"class="form-control"id="title"placeholder="Post Title">
</div>
<div class="form-group">
  <textarea class="form-control"id="body"placeholder="Post Body"></textarea>
</div>
<input type="hidden" id="id" value="">
<button class="post-submit btn btn-primary btn-block">Post It</button>
<span class="form-end"></span>
    </div>
    <br>
    <div id="posts"></div>
  </div>

  <footer class="mt-5 p-3 text-center bg-light">
    MicroPosts @copy
  </footer>


<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>


 

  <script src="build/app.bundle.js"></script>
</body>
</html>

真棒字体-我弄错了图标，其他没有显示

0 个答案: