Создайте форум на форуме за 15 минут, используя Meteor & Angularjs

Мне часто просят создать небольшие форумы для веб-сайтов сообщества и команды поддержки.

Поэтому я решил написать небольшое руководство о том, как сделать это, используя Meteor и Angularjs.

Во-первых, давайте установим Meteor! Вы можете пропустить этот шаг, если у вас уже есть Meteor установлен. Откройте вашу командную строку и вставьте эту команду:

$ curl https://install.meteor.com/ | sh

Или если вы используете Windows, Скачать официальный установщик METEOR.

Теперь давайте создадим новое приложение Meteor.

$ meteor create forum

Откройте новый Форум каталог и удалить автоматически сгенерированный Forum.css , forum.html и forum.js файлы.

$ cd forum
$ rm forum.css forum.html forum.js

Мы собираемся настроить угловой метеор, добавив угловой и удаление ненужный Blaze-HTML-шаблоны , Ecmascript , autopublish и небезопасно пакеты. Поскольку Meteor V1.2, вам также нужно добавить Проверьте вручную, чтобы иметь возможность выполнять базовую входную санитацию. Мы хотим, чтобы наше приложение было легким и безопасным.

$ meteor remove blaze-html-templates ecmascript autopublish insecure
$ meteor add angular check

Давайте создадим два каталога в корне проекта, клиент и Виды Отказ Первый – это специальный каталог Meteor, который содержит код, используемый только на стороне клиента. Хотя в Meteor вы можете написать код, выполненный как на клиент, так и на стороне сервера, Это все еще хорошая идея для разделения какой-либо деловой логики для соображений безопасности. Мы собираемся поставить шаблоны HTML для макета, страниц и директив Angularjs в Виды папка.

$ mkdir client
$ mkdir views

Создать новый index.html Файл в корне в проекте и поместите этот код внутри.


  Angular-Meteor Forum

Это будет загрузить Форум Модуль Angularjs, который еще не существует, а включить Просмотров/Forum.html Шаблон, который также не существует. Давайте исправим это.

Во-первых, модуль Angularjs. Создать новый файл Client/App.js и определить модуль:

angular.module('forum', ['angular-meteor']);

Далее создайте шаблон форума Просмотров/Forum.html Отказ Это будет общее расположение, используемое всеми подстрадателями.


  FORUM

На этом этапе вы можете запустить приложение.

$ meteor

Откройте браузер и перейдите к http://localhost: 3000 Отказ Вы должны увидеть текст Форум Отказ Это все отлично, но не очень впечатляет.

Давайте создадим шаблон Виды/страницы/темы .html Чтобы отобразить темы форума.


  Topics
  
    {{ topic.name }}

Чтобы увидеть этот шаблон в действии, мы установим решение о маршрутизации де-факто в Angularjs, Angular-ui-маршрутизатор и настроить несколько основных маршрутов. Либо выйти Meteor с Ctrl + C или открыть еще одну команду и перейдите к корневому каталогу приложений.

meteor add angularui:angular-ui-router

Наше app.js Это отличное место для настройки маршрутизации и контроллеров. Тем не менее, вы можете захотеть поставить их в разные файлы в реальном применении. Если вы сделаете это, убедитесь, что обратите внимание на приказ о том, как Meteor загружает файлы. Поместите определение модуля в файл под Клиент/lib/ в противном случае он будет загружен после Контроллер/Директива/etc. Определения, запускающие исключение Angularjs.

Заменить содержимое app.js с участием:

angular.module('forum', ['angular-meteor', 'ui.router'])
.config(function($urlRouterProvider, $stateProvider){

  // Set the default route 
  $urlRouterProvider
    .when('/', '/topics')
    .otherwise('/topics');

  // Add states
  $stateProvider.state('topics', {
    url: '/topics',
    templateUrl: 'views/pages/topics.html'
  });
})
.run(function($state){
  // We inject $state here to initialize ui.router 
})

Прежде чем вы сможете увидеть список тем в браузере, Просмотров/Forum.html нуждается в небольшом настройке. Элемент с ui-view Атрибут обязан сделать шаблон, связанный с текущим маршрутом.

Перейдите к http://localhost: 3000 Теперь и обратите внимание, как он мгновенно перенаправляется на страницу темы. Однако у нас еще нет тем. Так как мы, вероятно, захотите добавить или удалить темы позже, Это хорошая идея хранить их в базе данных.

Meteor использует MongoDB для постоянного хранения. Вы можете определить коллекции Mongodb с Новый Meteor.collection (CollectionName) Отказ Это должно присутствовать как на стороне клиента, так и на сервере, поэтому давайте создадим каталог под названием общий и поместите это в Common/db.js :

Topics = new Meteor.Collection('Topics');

В Meteor публикация – это способ создания набора данных для отправки клиенту. Вы звоните Meteor.publish При названии набора данных и функции обратного вызова, которая может или не может иметь аргументов и возвращает курсор MongoDB. Meteor использует немного магии за кулисами, чтобы прочитать изменения от Mongodb Oplog (или опроса базы данных, если Oplog не устанавливается правильно) и обновляет курсор, когда данные добавляются, удалены или изменены.

Публикация должна быть определена в файле только сервера, поэтому давайте создадим каталог, называемый «|» Сервер Отказ Каждый файл JavaScript вы размещаете здесь, будут работать только на сервере. Давайте создадим файл Сервер/publications.js :

Meteor.publish('topics', function(){
  return Topics.find();
});

Meteor.publish('topic', function(id){
  check(id, String);
  return Topics.find({_id: id});
});

Это определит две публикации, один для всех тем, и один для одной темы, запрошенной ID. Кроме того, давайте вставьте некоторые темы по умолчанию, если коллекция пуста. Поставить это в Сервер/defaults.js :

if (Topics.find().count() === 0) {
  _.each(['General Discussion', 'Tutorials', 'Help'],
  function(topicName){
    Topics.insert({name: topicName});
  });
}

Клиент инициирует подписку, которая подключается к публикации и получает эти данные. Давайте посмотрим, как сделать это, используя угловой метеор. В Client/App.js Добавьте опцию контроллера к определению Темы Государство под названием TopicsContoller и определите контроллер после .Рун () :

// ...
  $stateProvider.state('topics', {
    url: '/topics',
    templateUrl: 'views/pages/topics.html',
    controller: 'TopicsContoller'
  });
// ...
.controller('TopicsContoller', function($scope){
  $scope.subscribe('topics');
  $scope.helpers({
    topics: function() {
      return Topics.find({}, {sort: {name:1}});
    }
  });
})

Здесь мы подписываемся на Темы Публикация и добавить помощника по имени Темы Это просто возвращает курсор Mongodb в список тем, отсортированных по имени. Из перспективы Angularjs это будет простой массив, доступный в $ Scope.topics Переменная.

Просмотр вашего форума в браузере. Вы должны увидеть три темы под заголовком. Однако, если вы попытаетесь нажать на них, ничего не происходит. Это потому, что мы не определили наши Тема Государство еще. Давайте сделаем это и определите TopicController также.

// ...
  $stateProvider.state('topic', {
    url: '/topic/:topicId',
    templateUrl: 'views/pages/topic.html',
    controller: 'TopicContoller'
  });
// ...
.controller('TopicContoller', function($scope, $stateParams){
  $scope.subscribe('topic', function(){ 
    return [$stateParams.topicId];
  });
  $scope.helpers({
    topic: function(){
      return Topics.findOne({_id: $stateParams.topicId});
    }
  });
})

Это довольно прямо вперед, но обратите внимание, что мы должны использовать функцию для передачи аргумента ID для Тема публикация и вернуть одну тему с Findone вместо Найти Отказ

Шаблон Виды/страницы/topic.html Будет довольно просто, но не волнуйтесь, мы скоро добавим список потоков.


  {{ topic.name }}

Чтобы использовать форум, мы должны быть в состоянии идентифицировать пользователей. Meteor имеет некоторые полезные пакеты для аутентификации:

База счета : Этот пакет реализует основные функции, необходимые для учетных записей пользователей, и позволяет другим пакетам регистрировать входные услуги.
Счета-пароль : Служба входа в систему, которая обеспечивает безопасный логин на основе паролей.
Dotansimha: учетные записи-UI-угловые : Angularjs Wrapper для пакета учетной записи Meteor.

Давайте установимся:

$ meteor add accounts-base accounts-password dotansimha:accounts-ui-angular

Использовать Dotansimha: учетные записи-UI-угловые Ваш модуль Angularjs должен список Accounts.ui как зависимость:

angular.module('forum', ['angular-meteor', 'ui.router', 'accounts.ui'])

Теперь мы можем добавить аутентификацию, регистрацию, забыть пароль и изменить функции пароля одним строкой. Хорошее место будет в Просмотров/Forum.html , поскольку это корневой макет для всех наших страниц:

Хороший! Пришло время создавать некоторые потоки. Мы собираемся …

Определите коллекцию в Common/db.js :

Threads = new Meteor.Collection('Threads');

Опубликовать темы в Сервер/publications.js :

Meteor.publish('threads', function(topicId){
  check(topicId, String);
  return Threads.find({topicId: topicId});
});

Meteor.publish('thread', function(id){
  check(id, String);
  return Threads.find({_id: id});
});

редактировать Виды/страницы/topic.html Чтобы перечислить темы темы и добавить форму, где пользователи могут создавать новые потоки.


  {{ topic.name }}
  
    
      {{ thread.content }}
      by {{ thread.author }} at {{ thread.createdAt | date }}
    
  

  Create a new thread

И, наконец, изменить TopicController в Client/App.js Так что он подписывается в список потоков, которые принадлежат к текущей теме и созданию нити Hanldes, а также:

.controller('TopicContoller', function($scope, $stateParams, $meteor){
  $scope.subscribe('topic', function(){ return [$stateParams.topicId]; });
  $scope.subscribe('threads', function(){ return [$stateParams.topicId]; });
  $scope.helpers({
    topic: function() {
      return Topics.findOne({_id: $stateParams.topicId});
    },
    threads: function() {
      return Threads.find({topicId: $stateParams.topicId});
    }
  });
  $scope.createThread = function(thread){
    $meteor.call("createThread", $stateParams.topicId, thread.content).then(function(){
      thread.content = '';
    }).catch(function(){
      alert("An error occured while creating the thread!");
    });
  };
})

Увидеть введенные $ METEOR услуга? Мы используем его, чтобы позвонить на стороне сервера CreateThread Метод Meteor, который еще предстоит создать.

Вставьте это в Server/Methods.js :

Meteor.methods({
  createThread: function(topicId, content){
    check(topicId, String);
    check(content, String);
    var user = Meteor.user();
    if (!user) {
      throw new Meteor.Error("You are not logged in!");
    }
    if (!content){
      throw new Meteor.Error("Content is required!");
    }
    var thread = {
      author: user.emails[0].address,
      createdAt: new Date(),
      topicId: topicId,
      content: content
    };
    return Threads.insert(thread);
  }       
});

Meteor.methods Ожидает объект, в котором клавиши являются именами методов, а значения являются определениями метода. Методы могут иметь аргументы и могут вернуть все, что может быть сериализовано для JSON. Метеорные курсоры не являются сериализацией, поэтому избегайте возврата Collection.find (...) Как оно потерпит ваше приложение.

Давайте суммируемся, где мы сейчас находимся сейчас. Мы можем:

Список темы
Открытые темы для списка потоков
Создать темы
Зарегистрируйтесь/In/OUT, Сбросить забытый пароль и измените пароль

Что осталось? Мы должны:

Определите Сообщения Коллекция и опубликовать это Так же, как мы сделали с Потоки
Создать маршрут для одной поток для перечисления его сообщений Так же, как мы сделали с тема
Создать форму, чтобы иметь возможность опубликовать в потоке Так же, как мы сделали с тема
Напишите метод для обработки создания пост Так же, как мы сделали с CreateThread.

Вы готовы к какой-то практике? Не волнуйтесь, вы всегда можете проверить пример в Github Repository Отказ

Topics

{{ topic.name }}

{{ topic.name }}

Create a new thread

Читайте ещё по теме: