Блог

В настоящее время у меня проблема, когда у меня есть страница с изображениями на моей веб-странице, которая динамически загружает изображения, которые пользователь может загрузить. На каждой карточке с картинками есть кнопка, по которой можно щелкнуть, чтобы отобразить новую страницу, содержащую комментарии к этой конкретной картинке. Информация о комментариях и изображениях хранится на сервере в виде массива. Я не уверен, как заставить кнопку на каждой карточке с изображением генерировать новую страницу без кодирования новой HTML-страницы в качестве одностраничного приложения. Кроме того, как бы мне передать значение заголовка рисунка на новую страницу, чтобы я мог фильтровать комментарии, включающие только те, которые относятся к конкретному изображению?У меня уже есть запросы get и post, которые возвращают все фотографии и комментарии с сервера. server.js

 function loadpics() {
    document.getElementById('insertpics').innerHTML='' 
    fetch ('http://127.0.0.1:8090/pics',{
        method: 'GET',
        headers: {
            "Content-Type":"application/json"
        }
     })
    .then((res) => { return res.json(); })
    .then(pics => {
        for (let pic of pics){
            const y= `
            <div class="card" style="width: 18rem;">
            <img class="card-img-top" src=${pic.picurl} alt="Card image cap">
            <div class="card-body">
              <h5 class="card-title">${pic.username}</h5>
              <p class="card-text">${pic.nameofpic}</p>
            <a  class="btn btn-info" href="#" >View Comments on this picture</a>
            </div>
          </div>
            `;

            document.getElementById('insertpics').innerHTML =y;
        }
    })
};
loadpics();


 

Как вы можете видеть, у меня есть кнопка в конце карточки, но я понятия не имею, как заставить ее генерировать пустую страницу только с комментариями, связанными с этой фотографией. Массив изображений имеет такую структуру [{«username»:»username»,»picname»:»nameofpic», «pic»:»pic.png»}], а массив комментариев имеет такую структуру [{«username»: «username», «picname»:»nameofpic»,»комментарий»:»комментарий»}]. Любая помощь будет с благодарностью! редактировать: кто-нибудь, пожалуйста, помогите.

Создайте новую страницу только из одного изображения и комментариев. Добавьте URL-адрес в тег «a». например http://127.0.0.1:8090/viewPic /{идентификатор}