Совместное использование данных на стороне сервера в файле JS - PullRequest
Новая
       8

Совместное использование данных на стороне сервера в файле JS

0 голосов
/ 24 сентября 2018

Я создал простой блог-сайт с постами, пользователями и комментариями.Я использую - MongoDB, NodeJS и Express с представлением EJS.Я столкнулся с проблемой, когда пытался создать разделы комментариев.Я хотел использовать JQuery с Ajax-запросами, чтобы создать раздел комментариев, чтобы страница не обновлялась, когда пользователь публикует или редактирует комментарий.

Чтобы получить комментарии к каждому сообщению, япостроен маршрут API, который выглядит следующим образом - www.domain.com/api/messages/:post_id этот URL возвращает JSON, который содержит комментарии к этому сообщению.Я не хотел раскрывать «рискованные» данные об авторе комментария, поэтому заполнил результаты запросом Монго.

Теперь по проблеме - Я хочу добавить редактирование иудалить кнопки для каждого комментария, который будет отображаться только для администратора и автора, конечно.Когда я использую EJS, это просто - я написал что-то вроде этого - 

<% if (user !== null&& (JSON.stringify(user._id) === JSON.stringify(comments[i].author._id) 
|| user.is_admin === true)) { %> 
put the buttons here...

Дело в том, что когда я использую JQuery в своем основном файле scirpt, я не могу получить доступ к пользователю (это объект, которыйбыл отправлен из Nodejs на бэкэнд).Я не уверен, стоит ли мне «отправлять» этот объект в мой js-файл из EJS, я думаю, что это небезопасно и неправильно.

И я не могу также сохранить тот код EJS, который я цитировалнесколько строк назад, потому что при загрузке файла EJS на этой странице нет комментариев (запрос XHR получает их, а JQuery помещает их на страницу).Так что я действительно не знаю, как двигаться дальше.

Редактировать - я думаю, у меня есть решение: может быть, мне следует создать массив идентификаторов в файле EJS, который будет содержать комментарии, которые должны иметь эти кнопкиа потом я как-то отправлю этот массив в файл JS?

Спасибо!

Ответы [ 2 ]

0 голосов
/ 24 сентября 2018

Так что я думаю, что мне удалось преодолеть эту проблему, я опубликую то, что я сделал, надеюсь, это поможет кому-то в будущем.

В файле EJS я назначилмассив, который будет содержать идентификаторы комментариев, которые были опубликованы текущим пользователем (пользователь был отправлен в файл EJS бэкэндом nodejd).

Затем я скопировал этот массив в переменную тега script вEJS-файл. Теперь я могу получить к нему доступ из файла main.js и добавлять кнопки удаления / редактирования только к комментариям с идентификатором в массиве. 

<% var arr = []; %>
<% for(var i = 0; i < comments.length ; i++){ %>
 <% if (user !== null && (JSON.stringify(user._id) === JSON.stringify(comments[i].author._id) || user.is_admin === true)) { %>
 <% arr.push(comments[i].comment_id); %> <% } %>
 <% } %>
 <script> 
var exported_array = <%- JSON.stringify(arr) %>
 </script>
0 голосов
/ 24 сентября 2018

Отправить пользователя и все комментарии в основной файл EJS. 

app.get('/', function (req, res) {
    res.render('index', {
        comments: [{ ... }, { ... }, { ... }], 
        user: { ... }
    });
});

Комментарии могут быть обработаны включением частичного EJS comment.ejs из папки partials в основном EJS файле. 

<% comments.forEach(function(comment){ %>
    <% include partials/comment %>
<% }) %>

В этом partial вы визуализируете комментарий и кнопки.Комментарий прошел до включения.Пользователь уже живет по основному шаблону EJS. 

<div class="comment-container" data-commentid="comment._id">
    <p><% comment.content %></p>
    <% if (user !== null&& (JSON.stringify(user._id) === JSON.stringify(comment.author._id) || user.is_admin === true)) { %> 
        <button class="button_delete" data-commentid="<% comments_id %>">delete</button>
    <% } %>
</div>

Затем создайте route в своем API как www.domain.com/api/messages/delete/:post_id.

app.get('/messages/delete/:post_id', function(req, res){
    // logged on user lives on the server
    // check if user may delete comments
    // delete comment
    // send result
    res.send(true);
});

Когда вы нажимаете button, используйте jQuery для отправки этого идентификатора с data attribute из button на server/api, и оттуда я идентифицирую пользователя, который вошел в систему.Если авторизованный пользователь авторизован, удалите его и отправьте результат.Если все в порядке, используйте jQuery, чтобы удалить div, содержащий все сообщение. 

$('.button_delete').click(function(){
    // retrieve id from data attribute here
    var commentId = $(this).data("commentid");

    $.get('www.domain.com/api/messages/delete/' + commentId, {}, function(result){
        if(result) {
            // delete comment container from html using commentId or refresh
        }
    });
});
...