Динамичное веб-приложение на основе Laravel, PrettyForms и Backbone.js23.11.2014 13:18

» для Undescore-шаблона, либо id коммента, если это вывод комментария. И так далее везде, где используется эта функция. */ ?>

' : $comment→user→name?> написал в :

В этом коде есть много важных моментов:1. С помощью использования анонимной функции, мы избавились от разделения кода комментариев на код серверной генерации и код описания JS-шаблона. Согласен, выглядит это не так красиво, как на AngularJS, но это — жертва, на которую приходится идти ради того, чтобы объединить коды и обезопасить себя от последующих глупых ситуаций, когда в одном шаблоне было что-то отредактировано, а в другом — нет;2. Для всех операций с комментариями (добавление, редактирование, удаление и голосование) мы, как я и обещал, используем функционал библиотеки PrettyForms. То есть, все запросы на сервер мы будем отправлять с помощью неё, а сервер будет отвечать нам разными командами. Также, она отвечает за простую валидацию и отображение ошибок, присылаемых сервером во время внештатных ситуаций.3. При инициализации нашего Backbone-приложения, мы передаём ему номер текущего пользователя или пустую строку, если пользователь не авторизован. Это нам понадобится для того, чтобы отображать или скрывать кнопки «редактировать» и «удалить» у комментариев. 4. Также, при инициализации Backbone-приложения, мы передаём ему JSON-объект со всеми комментариями. Это тоже одна из жертв, на которую приходится идти ради простоты реализации. Нам необходимо заполнить коллекцию моделей для Backbone-приложения, поэтому нам приходится генерировать, фактически, один и тот же контент два раза: сначала наверху, в виде стандартного DOM-дерева, а потом ниже, в виде JSON-объекта. Но, при большом желании, эту проблему можно решить, написав код, который будет брать данные из DOM-дерева и собирать всё в коллекцию.5. Вместо класса senddata, используемого в PrettyForms в обычных случаях, мы используем немного другой класс: senddata-token. Он делаёт всё тоже самое, только с одним отличием: к параметрам запроса он добавляет токен защиты от CSRF-атак. Таким образом, мы легко обезопасим все наши запросы от одной из известных атак в Интернете.6. К кнопке удаления комментария также добавлен дополнительный класс really, из-за которого, при клике по кнопке, библиотека PrettyForms откроет перед пользователем стандартный диалог, утостоверяющий, действительно ли он желает выполнить данную операцию. Это сделано для того, чтобы обезопасить людей от случайных нажатий на кнопку удаления своего комментария.Далее, нам необходимо написать наше Backbone-приложение.

Код Backbone-приложения var CommentsListView = Backbone.View.extend ({ initialize: function (options) { this.$el = $(options.id); this.el = this.$el.get (0);

// Текущий ID пользователя, либо пустая строка, если зашел гость var current_user_id = options.current_user_id;

// Сохраним в переменную шаблон комментария, // который мы сгенерировали ранее с помощью анонимной функции var comment_template = _.template ($('#article-comment-template').html ());

// Backbone-приложение единичного комментария this.CommentView = Backbone.View.extend ({ events: { 'click .edit': function (event) { this.model.set ('edit', true); }, 'click .edit-cancel': function (event) { this.model.set ('edit', false); }, }, initialize: function (options) { if (options.container) { // Свяжем вьюшку с указанным контейнером // если он был передан this.$el = options.container; this.el = options.container.get (0); } this.model.bind ('change', this.render, this); // При изменении модели заново отрендерим вьюшку this.model.bind ('remove', this.remove, this); // Удалим вьюшку из DOM-дерева при удалении модели }, render: function () { // Отрендерим внешний вид комментария var tmpl_data = this.model.attributes; tmpl_data.current_user_id = current_user_id; this.$el.html ( comment_template (tmpl_data) ); return this; } });

// Модель и коллекция комментариев var CommentModel = Backbone.Model.extend (); var CommentsCollection = Backbone.Collection.extend ({ model: CommentModel });

this.collection = new CommentsCollection; this.collection.reset (options.comments);

// Свяжем данные в коллекции с присутствующими на странице DOM-элементами, // теми, которые изначально были сгенерированы сервером this.collection.each (function (comment){ // Свойство «edit» мы добавляем каждой модели вручную. Это — флаг редактирования комментария, // если он равен true, то js-шаблон отобразит форму редактирования комментария comment.set ('edit', false); new this.CommentView ({ model: comment, container: this.$el.find ('#article-comments-'+comment.get ('id')) }); }, this);

// При добавлении нового элемента в коллекцию, добавим его на страницу this.collection.bind ('add', function (comment) { var view = new this.CommentView ({model: comment}); this.$el.append (view.render ().el); }, this); },

// Установить рейтинг одному из комментариев setCommentRating: function (id, rating) { this.collection.findWhere ({id: id}).set ('rating', rating); }

});

// А теперь — самое интересное. Добавим новые обработчики команд с сервера, // относящиеся к комментариям.

// Добавление нового комментария на страницу PrettyForms.Commands.registerHandler ('add_comment', function (comment){ comment.edit = false; CommentsList.collection.add (comment); });

// Изменения какого-то из комментариев PrettyForms.Commands.registerHandler ('edit_comment', function (comment){ comment.edit = false; CommentsList.collection.findWhere ({id: comment.id}).set (comment); });

// Удаление комментария PrettyForms.Commands.registerHandler ('delete_comment', function (comment_id){ CommentsList.collection.remove (comment_id); });

// Установка нового значения рейтинга PrettyForms.Commands.registerHandler ('set_comment_rating', function (data){ CommentsList.setCommentRating (data.id, data.rating); });

// Отобразим какое-то сообщение, пришедшее с сервера (например, о какой-то ошибке) // Здесь, вместо алерта, можно написать любой код для красивого оповещения PrettyForms.Commands.registerHandler ('message', function (message){ alert (message); }); Самое интересное в этом коде — это отсутствие какого-либо кода, отвечающего за создание, редактирование и удаление наших комментариев. Всё верно: теперь за это у нас отвечает библиотека PrettyForms, и для неё были добавлены обработчики команд с сервера в конце JS-приложения. Второе, что здесь интересно — это то, что мы связываем сгенерированные сервером DOM-объекты с моделями в коллекции сразу же после её заполнения данными в методе инициализации приложения.Нам осталось написать лиш код серверной части, и если точнее — контроллера CommentsController. Напишем его:

Код контроллера, обрабатывающего запросы, связанные с комментариями

use PrettyForms\Commands;

class CommentsController extends BaseController {

public function __construct () { // Все запросы к контроллеру будут отфильтрованы с помощью фильтра защиты от CSRF-атак $this→beforeFilter ('csrf'); }

// Обработка голосований за комментарий function postVote ($id,$opinion) { if (Auth: guest ()) { // Гости не имеют права голосовать return Commands: generate ([ 'message' => 'Пожалуйста, авторизуйтесь перед тем, как голосовать за комментарии' ]); } else { $comment = Comment: with ('user')→find ($id); if ($comment→count ()) {

// Самому себе голосовать нельзя if ($comment→user→id === Auth: user ()→id) { return Commands: generate ([ 'message' => 'Увы, но вы не имеете права голосовать за собственный комментарий' ]); }

// Если пользователь еще не голосовал за этот коммент, так уж и быть: дадим ему это сделать // Но после этого сохраним его действие в таблице «comments_rates» if ($comment→rates ()→where ('user_id','=', Auth: user ()→id)→count () === 0) { $comment_rate = new Comments_Rate; $comment_rate→user_id = Auth: user ()→id; $comment_rate→comment_id = $comment→id; $comment_rate→save ();

if ($opinion === 'up') { $comment→rating = $comment→rating + 1; } else { $comment→rating = $comment→rating — 1; } $comment→save ();

// Возвратим клиенту команду, благодаря которой рейтинг к комментарию на странице динамически обновится return Commands: generate ([ 'set_comment_rating' => [ 'id' => $comment→id, 'rating' => $comment→rating ] ]); } else { return Commands: generate ([ 'message' => 'Вы уже голосовали за данный комментарий, больше нельзя.' ]); } } } }

// Запрос удаления комментария function postDelete ($id) { if (Auth: guest ()) { return Commands: generate ([ 'message' => 'Вы не можете удалить комментарий, так как вы не авторизованы' ]); } else { $comment = Comment: with ('user')→find ($id); /* @var $comment Comment */ if ($comment→count ()) { // Удалять мы можем только свои комментарии if ($comment→user→id!== Auth: user ()→id) { return Commands: generate ([ 'message' => 'Увы, но вы не имеете права удалять чужие комментарии' ]); }

$comment_id = $comment→id; $comment→delete ();

// Возвратим клиенту команду, благодаря которой комментарий на клиентской машине удалится из DOM return Commands: generate ([ 'delete_comment' => $comment_id ]); } } }

// Запрос написания нового комментария function postWrite () { if (Auth: guest ()) { return Commands: generate ([ 'validation_errors' => 'Пожалуйста, авторизуйтесь перед написанием комментария' ]); } else { $comment = new Comment; $comment→user_id = Auth: user ()→id; $comment→article_id = Input: get ('article_id'); $comment→text = Input: get ('text'); $comment→validateAndSave (); return Commands: generate ([ 'add_comment' => Comment: with ('user')→find ($comment→id)→toArray (), ]); } }

// Запрос редактирования function postEdit ($id) { if (Auth: guest ()) { return Commands: generate ([ 'validation_errors' => 'Пожалуйста, авторизуйтесь перед написанием комментария' ]); } else { $comment = Comment: with ('user')→find ($id); /* @var $comment Comment */ if ($comment→count ()) { // Изменять мы можем только свои комментарии if ($comment→user→id!== Auth: user ()→id) { return Commands: generate ([ 'message' => 'Увы, но вы не имеете права редактировать чужие комментарии' ]); }

$comment→text = Input: get ('text'); $comment→save ();

return Commands: generate ([ 'edit_comment' => Comment: with ('user')→find ($comment→id)→toArray (), ]); } } }

} Также, если кому-то интересно посмотреть, вот исходный код модели Comment:

Модель Comment

use PrettyForms\LaravelValidatorTrait;

class Comment extends Eloquent {

use LaravelValidatorTrait;

protected $table = 'comments'; protected $visible = ['id','user','rating','text','date','time']; private $rules = [ 'user_id' => 'exists: users, id', 'text' => 'required', 'article_id' => 'required' ];

public function toArray () { $array = parent: toArray (); $array['date'] = $this→date (); $array['time'] = $this→time (); return $array; }

function date () { return $this→created_at→format ('d.m.Y'); }

function time () { return $this→created_at→format ('G: i'); }

public function user () { return $this→belongsTo ('User'); }

function rates () { return $this→hasMany ('Comments_Rate'); }

} Вот и всё :) Наш функционал полностью закончен. Не правда ли, на сервере у нас всё выглядит очень чисто и просто? Всё это — благодаря тому, что мы теперь можем посылать клиенту простые команды, которые будут обработаны библиотекой PrettyForms.

Если есть желание, можно еще раз посмотреть пример финального приложения или установить готовый пример на свой компьютер для того, чтобы увидеть рабочий вариант и поиграться с ним.

Скринкаст работы приложения Давайте перечислим, какие плюсы мы получили из подобной реализации:1. Генерация статического контента, который без проблем будет проиндексирован всеми поисковиками;2. Полностью рабочее динамичное приложение, которое можно и дальше легко дорабатывать и расширять;3. Наше JS-приложение практически полностью избавилось от кода добавления, редактирования и удаления комметариев, оно отвечает теперь практически только за корректное отображение данных на странице;4. Сервер выглядит чистенько, вся логика работы легко читается и воспринимается; кроме того, он возвращает лишь примитивные команды;5. Мы полностью защитили наше приложение от CSRF-атак с помощью фильтрации всего контроллера токеном;6. Также, в качестве дополнительного бонуса, при желании, мы можем очень легко реализовать динамическую реакцию на глобальные изменения на странице другими людьми. Нам понадобится лишь подключиться к серверу с помощью технологии вебсокетов или, например, long polling, и начать принимать те же самые команды для библиотеки PrettyForms, которые мы описали в конце кода Backbone-приложения. Выполнять команды можно через метод PrettyForms.Commands.execute (command, params). Всё просто до банальности.

Единственное реально гнилое место во всей этой реализации — это генерация страницы для поисковиков с одновременным написанием шаблона для JS-приложения. В общем-то, можно написать это дело по отдельности, тогда будет выглядеть намного красивее. Но тогда и теряется одно из достинств: придётся поддерживать два шаблона, а это чревато возникновением ошибок из-за банальной невнимательности, которая присуща каждому из рода человеческого.

На этом всё, и надеюсь, что эта статья принесёт пользу людям. И всего вам хорошего, мои дорогие хабравчане)

© Habrahabr.ru