以前の記事の間違いを考えて、Habr用のアプリケーションをデプロイするためにドメイン名を登録し、サーバーをレンタルしました。
完全なソースリポジトリ
デプロイされたアプリケーション
挑戦する
次の機能を備えたフォーラムを作成します。
- ユーザーは登録してログインできる必要があります。
- ユーザーには役割があります。 現時点では、システムには管理者とモデレーターの 2つの役割があります
- 管理者はグループを作成し、これらのグループにテーマを設定できます
- ユーザーは既存のトピックにトピックを作成し、これらのトピックに投稿を書くことができます。
- モデレーターは投稿とユーザートピックを削除できます
- モデレーターと管理者は不注意なユーザーをブロックできます
- 各ユーザーの評価は、他の参加者によって決定されます。
- ユーザーはアバターをアップロードできる必要があります
- 検索はフォーラムで提供されるべきです
選択された技術
配列とハッシュを保存する機能が必要なため、 PostgreSQLをデータベースとして使用します。 検索には、 Sphinx検索エンジンが使用されます。 古き良き伝統によるサーバーでの画像処理はImageMagickを通過します。
この記事では、補助キャッシュツールを使用せず、RailsとPostgresqlの機能のみを使用して取得しようとします。
使用された宝石
gem 'active_model_serializers', '0.9.4' gem 'pg' gem 'slim' gem 'slim-rails' gem 'devise' gem 'gon' gem 'carrierwave' gem 'mysql2', '~> 0.3.18', :platform => :ruby gem 'thinking-sphinx', '~> 3.1.4' gem 'mini_magick' gem "oxymoron" gem 'kaminari' gem 'oj' gem 'file_validators'
データベースの説明
要件に基づいて、おおよそのデータベーススキーマを作成できます。
適切なモデルとそれらへの移行を作成します。
rails g model Group rails g model Theme rails g model Topic rails g model Post
Devise gemを使用してユーザーモデルを生成します。
rails g devise:install rails g devise User
移行コンテンツ：
create_groups.rb
class CreateGroups < ActiveRecord::Migration def change create_table :groups do |t| t.string :title t.timestamps null: false end end end
create_themes.rb
class CreateThemes < ActiveRecord::Migration def change create_table :themes do |t| t.string :title t.integer :group_id t.index :group_id t.integer :posts_count, default: 0 t.integer :topics_count, default: 0 t.json :last_post t.timestamps null: false end end end
create_topics.rb
class CreateTopics < ActiveRecord::Migration def change create_table :topics do |t| t.string :title t.text :content t.integer :user_id t.index :user_id t.integer :group_id t.index :group_id t.integer :theme_id t.index :theme_id t.json :last_post t.integer :posts_count, default: 0 t.timestamps null: false end end end
create_posts.rb
class CreatePosts < ActiveRecord::Migration def change create_table :posts do |t| t.string :title t.text :content t.integer :user_id t.index :user_id t.integer :topic_id t.index :topic_id t.integer :theme_id t.index :theme_id t.boolean :delta, default: true t.timestamps null: false end end end
create_users.rb
class DeviseCreateUsers < ActiveRecord::Migration def change create_table :users do |t| ## Database authenticatable t.string :email, null: false, default: "" t.string :encrypted_password, null: false, default: "" ## Recoverable t.string :reset_password_token t.datetime :reset_password_sent_at ## Rememberable t.datetime :remember_created_at ## Trackable t.integer :sign_in_count, default: 0, null: false t.datetime :current_sign_in_at t.datetime :last_sign_in_at t.string :current_sign_in_ip t.string :last_sign_in_ip ## Confirmable # t.string :confirmation_token # t.datetime :confirmed_at # t.datetime :confirmation_sent_at # t.string :unconfirmed_email # Only if using reconfirmable ## Lockable # t.integer :failed_attempts, default: 0, null: false # Only if lock strategy is :failed_attempts # t.string :unlock_token # Only if unlock strategy is :email or :both # t.datetime :locked_at t.string :name t.boolean :banned, default: false t.integer :avatar_id t.string :avatar_url, default: "/default_avatar.png" t.integer :rating, default: 0 t.integer :votes, array: true, default: [] t.integer :posts_count, default: 0 t.integer :topics_count, default: 0 t.string :role t.timestamps null: false end add_index :users, :email, unique: true add_index :users, :reset_password_token, unique: true # add_index :users, :confirmation_token, unique: true # add_index :users, :unlock_token, unique: true end end
サーバーへのファイルのアップロードの問題を解決するために、私は常に別個のモデルを作成し、アップローダーをその上に置きます。 この場合、これはアバターモデルです。
rails g model avatar
create_avatar.rb
class CreateAvatars < ActiveRecord::Migration def change create_table :avatars do |t| t.string :body t.timestamps null: false end end end
モデル組織
モデルに必要なすべての接続と検証を示します。
モデル/ group.rb
class Group < ActiveRecord::Base has_many :themes, ->{order(:id)}, dependent: :destroy has_many :topics, through: :themes, dependent: :destroy has_many :posts, through: :topics, dependent: :destroy end
モデル/ theme.rb
class Theme < ActiveRecord::Base has_many :topics, dependent: :destroy has_many :posts, dependent: :destroy belongs_to :group end
モデル/ topic.rb
class Topic < ActiveRecord::Base has_many :posts, dependent: :destroy belongs_to :theme, :counter_cache => true belongs_to :user, :counter_cache => true validates_presence_of :theme, :title, :content end
モデル/ post.rb
class Post < ActiveRecord::Base belongs_to :topic, :counter_cache => true belongs_to :theme, :counter_cache => true belongs_to :user, :counter_cache => true validates :content, presence: true, length: { in: 2..300 } end
モデル/ user.rb
class User < ActiveRecord::Base devise :database_authenticatable, :registerable, :recoverable, :rememberable, :trackable, :validatable belongs_to :avatar has_many :posts has_many :topics validates :name, :uniqueness => {:case_sensitive => false}, presence: true, length: { in: 2..10 } end
モデル/ avatar.rb
class Avatar < ActiveRecord::Base belongs_to :user end
トピックモデルおよびテーマモデルの場合、last_postフィールドに作成された最後の投稿を設定する必要があります。 これは、after_create Postモデルコールバックで行うのが最適です。
モデル/ post.rb
class Post < ActiveRecord::Base belongs_to :topic, :counter_cache => true belongs_to :theme, :counter_cache => true belongs_to :user, :counter_cache => true validates :content, presence: true, length: { in: 2..300 } after_create :set_last_post private def set_last_post last_post = self.as_json(include: [:topic, :user]) topic.update(last_post: last_post) theme.update(last_post: last_post) end end
トピックを作成したら、トピックのタイトルと内容を含む最初の投稿を作成する必要があります。
モデル/ topic.rb
class Topic < ActiveRecord::Base has_many :posts, dependent: :destroy belongs_to :theme, :counter_cache => true belongs_to :user validates_presence_of :theme, :title, :content after_create :create_post private def create_post self.posts.create self.attributes.slice("title", "content", "user_id", "theme_id") end end
アバターモデルに取り掛かりましょう。 最初のステップは、ロードされたアバターの処理に使用されるアップローダーを生成することです。 私は搬送波を使用しています：
rails g uploader Avatar
アップローダーに、アップロードされたすべての画像をサムバージョン（150x150px）に圧縮し、MiniMagick（ImageMagickのラッパー）で圧縮するように指示します。
アップローダー/ avatar_uploader.rb
class AvatarUploader < CarrierWave::Uploader::Base include CarrierWave::MiniMagick storage :file def store_dir "uploads/#{model.class.to_s.underscore}/#{mounted_as}/#{model.id}" end version :thumb do process :resize_to_fill => [150, 150] end def extension_white_list %w(jpg jpeg gif png) end end
次に、AvatarUploaderをAvatarモデルに接続し、ダウンロードしたファイルのサイズが2 MB以下であることを示します。
モデル/ avatar.rb
class Avatar < ActiveRecord::Base mount_uploader :body, AvatarUploader belongs_to :user validates :body, file_size: { less_than: 2.megabytes }, file_content_type: { allow: ['image/jpg', 'image/jpeg', 'image/png', 'image/gif'] } end
サーバーへのファイルのアップロード
Oxymoronにはfileuploadディレクティブがあります。 ファイルをサーバーに送信するには、 入力[type = "file"]タグで定義する必要があります
input type="file" fileupload="'/uploads/avatar'" ng-model="result_from_server" percent-completed="percent"
応答として配列が必要です。 必要に応じて、複数属性を指定できます。 multipleが指定されていない場合、配列の最初の要素がresult_from_server変数に格納され、そうでない場合は配列全体が格納されます。
サーバーにファイルをアップロードするUploadsControllerを生成します。
rails g controller uploads
アバターをロードするためのロジックを制御するアバターメソッドを作成しましょう：
class UploadsController < ApplicationController before_action :authenticate_user! def avatar avatar = Avatar.new(body: params[:attachments].first) if avatar.save avatar_url = avatar.body.thumb.url current_user.update(avatar_id: avatar.id, avatar_url: avatar_url) render json: Oj.dump([avatar_url]) else render json: {msg: avatar.errors.full_messages.join(", ")} end end end
投稿で検索
全文検索には、Sphinxとthinking_sphinx gemを使用します。 最初のステップは、sphinx.confに変換されるthinking_sphinxの設定ファイルを作成することです。 そのため、アスタリスク（オートコンプリート）による検索機能と3文字以上のクエリを備えた刺激検索が必要です。 thinking_sphinx.ymlでこれを説明します：
config / thinking_sphinx.yml
development: &generic mem_limit: 256M enable_star: 1 expand_keywords: 1 index_exact_words: 1 min_infix_len: 3 min_word_len: 3 morphology: stem_enru charset_type: utf-8 max_matches: 100000 per_page: 100000 utf8: true mysql41: 9421 charset_table: "0..9, A..Z->a..z, _, a..z, \ U+410..U+42F->U+430..U+44F, U+430..U+44F, U+401->U+0435, U+451->U+0435" staging: <<: *generic mysql41: 9419 production: <<: *generic mysql41: 9450 test: <<: *generic mysql41: 9418 quiet_deltas: true
次に、投稿のインデックスを作成します。 タイトルとコンテンツにインデックスを付ける必要があります。 結果は作成日とは逆の順序で並べ替えられるため、フィルターの形式で指定する必要があります。
アプリ/インデックス/ post_index.rb
ThinkingSphinx::Index.define :post, {delta: true} do indexes title indexes content has created_at end
sphinx設定を生成し、1つのコマンドでsearchdデーモンを実行します。
rake ts:rebuild
再構築が成功すると、コンソールにデーモンが正常に起動したというメッセージが表示されます。
Postモデルに検索メソッドを追加します。 検索メソッドはthinking_sphinxを使用したため、look_forを使用しました。
def self.look_for query return self if query.blank? or query.length < 3 search_ids = self.search_for_ids(query, {per_page: 1000, order: 'created_at DESC'}) self.where(id: search_ids) end
検索を担当するコントローラーを生成し、検索ロジックを処理するインデックスメソッドを定義します。
rails g controller search index
このメソッドは後で定義します。
キャプチャreCAPTCHA
ファッションに追いつくために、新しいreCAPTCHAをアプリケーションに接続します。 登録後、パブリックとプライベートの2つのキーにアクセスできます。 これらのキーの両方をsecrets.ymlに入れます。 ここで、アプリケーションの可能なすべてのAPIキーを保存します。
config / secrets.yml
apikeys: &generic recaptcha: public_key: your_recaptcha_public_key secret_key: your_recaptcha_secret_key # generate your_secret_key_base by `rake secret` development: <<: *generic secret_key_base: your_secret_key_base test: <<: *generic secret_key_base: your_secret_key_base production: <<: *generic secret_key_base: your_secret_key_base
ApplicationContollerでcaptchaを検証するプロテクトメソッドを記述します
protected def verify_captcha response result = RestClient.post( "https://www.google.com/recaptcha/api/siteverify", secret: Rails.application.secrets[:recaptcha]["secret_key"], response: response) JSON.parse(result)["success"] end
このメソッドは、ApplicationControllerから継承されたすべてのコントローラーで使用できるようになりました。
承認と登録
クリーンなSPAアプリケーションがあります。 login / razloginを使用してもページをリロードしません。 JSON APIに基づいてセッションと登録を管理するコントローラーを作成します。
controllers / auth / sessions_controller.rb
class Auth::SessionsController < Devise::SessionsController skip_before_action :authenticate_user! after_filter :set_csrf_headers, only: [:create, :destroy] def create if verify_captcha(params[:user][:recaptcha]) self.resource = warden.authenticate(auth_options) if self.resource sign_in(resource_name, self.resource) render json: {msg: " ", current_user: current_user.public_fields} else render json: {msg: "Email , "}, status: 401 end else render json: {msg: " "}, status: 422 end end def destroy Devise.sign_out_all_scopes ? sign_out : sign_out(resource_name) render json: {msg: " "} end protected def set_csrf_headers cookies['XSRF-TOKEN'] = form_authenticity_token if protect_against_forgery? end end
controllers / auth / registrations_controller.rb
class Auth::RegistrationsController < Devise::RegistrationsController skip_before_action :authenticate_user! def create if verify_captcha(params[:user][:recaptcha]) build_resource(sign_up_params) resource.save unless resource.persisted? render json: { msg: resource.errors.full_messages.first, errors: resource.errors, }, status: 403 else sign_up(resource_name, resource) render json: { msg: " !", current_user: current_user.public_fields } end else render json: {msg: " "}, status: 422 end end private def sign_up_params params.require(:user).permit(:name, :email, :password) end end
ここにコメントはありません。 set_csrf_headersに注意を払う必要がない限り。 ページは更新されないため、 CSRF攻撃に対して脆弱にならないように、サーバーから「新鮮な」CSRFトークンを受信する必要があります。 ActionControllerの場合、Oxymoronはこれを自動的に行います。 ActionControllerをバイパスする他のすべてのコントローラーの場合、CookieのCSRFトークンの現在の値を設定する必要があります['XSRF-TOKEN']。
ここで、認証が必要なすべてのページをブロックする必要があります。 これを行うには、 authenticate_userメソッドを再定義する必要があります！ 。 ApplicationControllerで実行しましょう。
before_action :authenticate_user!, only: [:create, :update, :destroy, :new, :edit] private def authenticate_user! unless current_user if request.xhr? render json: {msg: " "}, status: 403 else redirect_to root_path end end end
アプリケーションのルーティング
もうすぐ戻らないように、routes.rbファイルをすぐに説明します。 したがって、 ユーザー 、 グループ 、 テーマ 、 トピック 、 投稿の 5つのリソースがあります 。 /アップロード/アバターおよび/検索ルートもあります。 さらに、ユーザーのオンラインを判断し、ユーザーの評価やその他の統計を取得するためのユーザーリソースのメソッドが必要です。
Rails.application.routes.draw do root to: 'groups#index' devise_for :users, controllers: { sessions: 'auth/sessions', registrations: 'auth/registrations', } post "uploads/avatar" => "uploads#avatar" get "search" => "search#index" resources :groups resources :themes resources :topics resources :posts resources :users, only: [:index, :show] do collection do get "touch" # touch current_user, get "metrics" # end member do put "rate" # put "ban" # put "unban" # end end end
連載
ActiveModelSerializerのシリアル化の哲学は好きですが、特にHabraffectの前は、サーバーの容量が非常にcr屈です。 したがって、可能な限り高速なシリアル化のためのメカニズムを考え出さなければなりませんでした。これは、現在のプロジェクトのフレームワーク内でのみ可能です。 シリアル化の前に私が提示した主な基準は、5〜10ミリ秒を超えないことです。
さらに読むものはすべて、異質で、奇妙で、間違っているように見えるかもしれません。
結合されたテーブルの選択されたフィールドのみをデータベースから直接クライアントに送信するという考え方です。 これとともに、シリアライザーの名前をクライアントに送信します。これは、回答に適用する必要があります。 Angularでは、すべての要求と回答をインターセプトし、必要に応じて変更できます。 したがって、コールバック要求を乱雑にすることなく、クライアント上でオブジェクトをシリアル化できます。
要求インターセプターは次のとおりです。
javascripts /シリアライザー/ interceptor.js
app.factory('serializerInterceptor', ['$q', function ($q) { return { response: function (response) { // , if (response.data.serializer) { // var serializer = window[response.data.serializer]; // , if (serializer) { // var collection = serializer(response.data.collection); // , collection, resource if (response.data.single) { response.data.resource = collection[0] } else { response.data.collection = collection; } } else { console.error(response.data.serializer + " is not defined") } } // return response || $q.when(response); } }; }]) // serializerInterceptor http-, Angular .config(['$httpProvider', function ($httpProvider) { $httpProvider.interceptors.push('serializerInterceptor'); }])
共同テーブルに従って、選択の結果をクライアントに転送します。 たとえば、投稿とともに、それを作成したユーザーも転送します。
collection = Post.joins(:user).pluck("posts.id", "posts.title", "posts.content", "users.id", "users.name") render json: { collection: collection, serializer: "ExampleSerializer" }
結果は、対応する列を持つテーブル、またはJSON表現で表になります。これは、配列で構成される配列です。 シリアライザーを書きましょう：
シリアライザーの例
function ExampleSerializer (collection) { var result = []; collection.forEach(function(item) { id: item[0], title: item[1], content: item[2], user: { id: item[3], name: item[4] } }) return result }
このシリアライザはコレクションに自動的に適用され、$ http-requestの応答で、すでにシリアライズされた結果が表示されます。
ここで、各モデルがpluck_fieldsメソッドを作成する必要があります。このメソッドは、selectのフィールドを返します。
モデル/ group.rb
class Group < ActiveRecord::Base has_many :themes, ->{order(:id)}, dependent: :destroy has_many :topics, through: :themes, dependent: :destroy has_many :posts, through: :topics, dependent: :destroy def self.pluck_fields ["groups.id", "groups.title", "themes.id", "themes.title", "themes.posts_count", "themes.topics_count", "themes.last_post"] end end
モデル/ post.rb
class Post < ActiveRecord::Base belongs_to :topic, :counter_cache => true belongs_to :theme, :counter_cache => true belongs_to :user, :counter_cache => true after_create :set_last_post validates :content, presence: true, length: { in: 2..300 } def self.pluck_fields ["posts.id", "posts.title", "posts.content", "users.id", "users.created_at", "users.name", "users.rating", "users.posts_count", "users.avatar_url", "topics.id", "topics.title"] end def self.look_for query return self if query.blank? or query.length < 3 search_ids = self.search_for_ids(query, {per_page: 1000000, order: 'created_at DESC'}) self.where(id: search_ids) end private def set_last_post last_post = self.as_json(include: [:topic, :user]) topic.update(last_post: last_post) theme.update(last_post: last_post) end end
モデル/ theme.rb
class Theme < ActiveRecord::Base has_many :topics, dependent: :destroy has_many :posts, dependent: :destroy belongs_to :group def self.pluck_fields [:id, :title] end end
モデル/ topic.rb
class Topic < ActiveRecord::Base has_many :posts, dependent: :destroy belongs_to :theme, :counter_cache => true belongs_to :user validates_presence_of :theme, :title, :content after_create do Post.create(title: title, content: content, user_id: user_id, theme_id: theme_id, topic_id: id) end def self.pluck_fields ["topics.id", "topics.title", "topics.last_post", "topics.posts_count", "users.id", "users.name", "themes.id", "themes.title"] end end
モデル/ user.rb
class User < ActiveRecord::Base # Include default devise modules. Others available are: # :confirmable, :lockable, :timeoutable and :omniauthable devise :database_authenticatable, :registerable, :recoverable, :rememberable, :trackable, :validatable belongs_to :avatar has_many :posts validates :name, :uniqueness => {:case_sensitive => false}, presence: true, length: { in: 2..10 } def self.pluck_fields [:id, :created_at, :updated_at, :name, :avatar_url, :posts_count, :rating, :banned] end def public_fields self.attributes.slice("id", "email", "rating", "name", "created_at", "updated_at", "posts_count", "banned") end end
これらのメソッドをコントローラーで使用して、pluckメソッドに渡します。
コントローラー
前の記事「AngularJSとRuby on Railsに基づいた単一ページアプリケーションを構築するためのアーキテクチャ」で、 「典型的なRailsコントローラー」の例を紹介しました。 典型的な意味は、毎回同じロジックを記述する必要がないことです。 最も一般的なコントローラーを記述し、それから継承してオーバーライドするか、必要なメソッドをオーバーライドするだけで十分です。 私はそのようなコントローラーを作成せず、関心のある一般的なロジックを取り出しました。
結果として生じる懸念は非常に異常に見えます。
コントローラー/懸念事項/ spa.rb
module Spa extend ActiveSupport::Concern # @model – ( ), # @resource – # included do before_action :set_model before_action :set_resource, only: [:show, :edit, :update, :destroy] def index respond_to do |format| format.html format.json { collection = @model.where(filter_params) if params[:filter] render json: Oj.dump({ total_count: collection.count, serializer: serializer, collection: collection.page(params[:page]).per(10).pluck(*pluck_fields), page: params[:page] || 1 }) } end end def show respond_to do |format| format.html format.json { @resource = @model.where(id: params[:id]).pluck(*pluck_fields) render json: Oj.dump({ collection: @resource, serializer: serializer, single: true }) } end end def new new_params = resource_params rescue {} @resource = @model.new(new_params) authorize @resource, :create? respond_to do |format| format.html format.json { render json: Oj.dump(@resource) } end end def edit authorize @resource, :update? respond_to do |format| format.html format.json { render json: Oj.dump(@resource) } end end def create @resource = @model.new resource_params authorize @resource if @resource.save @collection = @model.where(id: @resource.id).pluck(*pluck_fields) result = { collection: @collection, serializer: serializer, single: true, }.merge(redirect_options[:update] || {}) render json: Oj.dump(result) else render json: {errors: @resource.errors, msg: @resource.errors.full_messages.join(', ')}, status: 422 end end def update authorize @resource if @resource.update(resource_params) render json: {resource: @resource, msg: "#{@model.name} "}.merge(redirect_options[:update] || {}) else render json: {errors: @resource.errors, msg: @resource.errors.full_messages.join(', ')}, status: 422 end end def destroy authorize @resource @resource.destroy render json: {msg: "#{@model.name} "} end private def set_resource @resource = @model.find(params[:id]) end def pluck_fields @model.pluck_fields end def redirect_options {} end def filter_params params.require(:filter).permit(filter_fields) end def serializer serializer = "#{@model.model_name}Serializer" end end end
したがって、それに基づいてPostsControllerを作成します。
class PostsController < ApplicationController include Spa private # def set_model @model = Post.joins(:user, :topic).order(:created_at) end # , def filter_fields [:theme_id, :topic_id] end # , def resource_params # , , topic = Topic.find(params[:post][:topic_id]) title = params[:post][:title] params.require(:post).permit(:content, :title, :topic_id) .merge({ theme_id: topic.theme_id, user_id: current_user.id, title: title.present? ? title : "Re: #{topic.title}" }) end end
これは、スパと区別するためのコントローラーコード全体です。 同様に、残りのコントローラーを作成します。
controllers / groups_controller.rb
class GroupsController < ApplicationController include Spa private def set_model @model = Group.joins("LEFT JOIN themes ON themes.group_id = groups.id").order("groups.id") end def redirect_options { create: { redirect_to_url: root_path }, update: { redirect_to_url: root_path } } end def resource_params params.require(:group).permit(:title) end end
controllers / themes_controller.rb
class ThemesController < ApplicationController include Spa private def set_model @model = Theme.order(:created_at) end def redirect_options { create: { redirect_to_url: root_path }, update: { redirect_to_url: root_path } } end def resource_params params.require(:theme).permit(:title, :group_id) end end
コントローラー/topics_controller.rb
class TopicsController < ApplicationController include Spa private def set_model @model = Topic.joins(:theme, :user).order("topics.updated_at DESC") end def filter_fields [:theme_id] end def redirect_options { create: { redirect_to_url: topic_path(@resource) }, update: { redirect_to_url: topic_path(@resource) } } end def resource_params params.require(:topic).permit(:title, :content, :theme_id) .merge({ user_id: current_user.id }) end end
コントローラー/ users_controller.rb
class UsersController < ApplicationController include Spa def touch current_user.touch if current_user render json: {} end def rate if current_user.votes.include?(params[:id].to_i) return render json: {msg: " "}, status: 422 end current_user.votes.push(params[:id].to_i) current_user.save set_resource if params[:positive] @resource.increment!(:rating) else @resource.decrement!(:rating) end render json: {rating: @resource.rating} end def metrics result = current_user.attributes.slice("posts_count", "rating") if current_user render json: result || {} end def ban authorize @resource @resource.update(banned: true) render json: {msg: " "} end def unban authorize @resource, :ban? @resource.update(banned: false) render json: {msg: " "} end private def set_model @model = User end end
SearchControllerは懸念スパを使用しないため、完全に説明します。
SearchController
class SearchController < ApplicationController def index respond_to do |format| format.html format.json { collection = Post.look_for(params[:q]).joins(:user, :topic).order("created_at DESC") render json: Oj.dump({ total_count: collection.count, serializer: "PostSerializer", collection: collection.page(params[:page]).per(10).pluck(*Post.pluck_fields), page: params[:page] || 1 }) } end end end
アクセス権の差別化
私は意図的にユーザーロールを整理するためにRolifyを使用しませんでした。この場合、これは正当化されないからです。 フォーラムには組み合わせた役割はありません。 すべての制御は役割フィールドを通過します。 アクセス権を区別するには、 Punditを使用します。 gemの説明には、その使用に関するすべての情報が含まれています。
要件に基づいて、アプリケーションのすべてのポリシーを作成します。
app / policies / group_policy.rb
class GroupPolicy def initialize(user, group) @user = user @group = group end def create? @user.role == "admin" end def update? @user.role == "admin" end def destroy? @user.role == "admin" end end
app / policies / post_policy.rb
class PostPolicy def initialize(user, post) @user = user @post = post end def create? true end def update? ["admin", "moderator"].include?(@user.role) || @user.id == @post.user_id end def destroy? ["admin", "moderator"].include?(@user.role) || @user.id == @post.user_id end end
app / policies / theme_policy.rb
class ThemePolicy def initialize(user, theme) @user = user @theme = theme end def create? @user.role == "admin" end def update? @user.role == "admin" end def destroy? @user.role == "admin" end end
アプリ/ポリシー/topic_policy.rb
class TopicPolicy def initialize(user, topic) @user = user @topic = topic end def create? true end def update? @user.id == @topic.user_id || ["admin", "moderator"].include?(@user.role) end def destroy? @user.id == @topic.user_id || ["admin", "moderator"].include?(@user.role) end end
アプリ/ポリシー/ user_policy.rb
class UserPolicy def initialize(user, resource) @user = user @resource = resource end def ban? ["admin", "moderator"].include? @user.role end end
デフォルトでは、テストが失敗した場合、PunditはPundit :: NotAuthorizedError例外をスローするため、JSON APIを使用して動作するように構成する必要があります。これを行うには、ApplicationControllerでこの例外を処理します。
rescue_from Pundit::NotAuthorizedError, with: :user_not_authorized private def user_not_authorized if request.xhr? render json: {msg: " "}, status: 403 else redirect_to root_path end end
クライアント側に進む前に、現在のユーザーをGonに渡してApplicationControllerを終了します。これにより、ページをロードした直後に、必要なすべての情報を取得できます。
コントローラー/ application_controller.rb
class ApplicationController < ActionController::Base include Pundit protect_from_forgery with: :exception rescue_from Pundit::NotAuthorizedError, with: :user_not_authorized before_action :authenticate_user!, only: [:create, :update, :destroy, :new, :edit] # ajax- layout proc { if request.xhr? false else set_gon "application" end } protected def verify_captcha response result = RestClient.post("https://www.google.com/recaptcha/api/siteverify", secret: Rails.application.secrets[:recaptcha]["secret_key"], response: response) JSON.parse(result)["success"] end private def set_gon gon.current_user = current_user.public_fields if current_user end def authenticate_user! unless current_user if request.xhr? render json: {msg: " "}, status: 403 else redirect_to root_path end end end def user_not_authorized if request.xhr? render json: {msg: " "}, status: 403 else redirect_to root_path end end end
クライアント部
Oxymoron , .
AngularJS- . :
javascripts/controllers/groups_ctrl.js
app.controller('GroupsCtrl', ['$scope', 'Group', 'action', 'Theme', function ($scope, Group, action, Theme) { var ctrl = this; action('index', function () { ctrl.groups = Group.get(); ctrl.destroy_theme = function (theme) { if (confirm(" ?")) Theme.destroy({id: theme.id}) } ctrl.destroy_group = function (group) { if (confirm(" ?")) Group.destroy({id: group.id}) } }) action('new', function () { ctrl.group = Group.new(); ctrl.save = Group.create; }) action('edit', function (params) { ctrl.group = Group.edit(params); ctrl.save = Group.update; }) }])
javascripts/controllers/themes_ctrl.js
app.controller('ThemesCtrl', ['$scope', 'Theme', 'Topic', 'action', '$location', function ($scope, Theme, Topic, action, $location) { var ctrl = this; action('show', function (params) { var filter = { theme_id: params.id } ctrl.theme = Theme.get(params); ctrl.query = function (page) { Topic.get({ filter: filter, page: page }, function (res) { ctrl.topics = res; }); } ctrl.query($location.search().page || 1) ctrl.destroy = function (topic) { if (confirm(" ?")) Topic.destroy({id: topic.id}) } }) action('new', function () { Theme.new(function (res) { ctrl.theme = res; ctrl.theme.group_id = $location.search().group_id; }); ctrl.save = Theme.create; }) action('edit', function (params) { ctrl.theme = Theme.edit(params); ctrl.save = Theme.update; }) }])
javascripts/controllers/topics_ctrl.js
app.controller('TopicsCtrl', ['$scope', '$location', 'Topic', 'action', 'Post', 'Theme', function ($scope, $location, Topic, action, Post, Theme) { var ctrl = this; action('show', function (params) { var filter = { topic_id: params.id } ctrl.post = { topic_id: params.id } ctrl.topic = Topic.get(params); ctrl.query = function (page, callback) { Post.get({filter: filter, page: page}, function (res) { ctrl.posts = res; if (callback) callback(); }); } ctrl.query(1) ctrl.send = function () { Post.create({post: ctrl.post}, function (res) { ctrl.post = { topic_id: params.id } ctrl.query(Math.ceil(ctrl.posts.total_count/10)) }) } }) action('new', function () { var theme_id = $location.search().theme_id; ctrl.theme = Theme.get({id: theme_id}); ctrl.topic = Topic.new({topic: {theme_id: theme_id}}); ctrl.save = Topic.create; }) action('edit', function (params) { ctrl.topic = Topic.edit(params, function (res) { ctrl.theme = Theme.get({id: res.theme_id}); }); ctrl.save = Topic.update; }) }])
javascripts/controllers/users_ctrl.js
app.controller('UsersCtrl', ['$scope', 'User', 'action', function ($scope, User, action) { var ctrl = this; action('index', function () { ctrl.query = function (page) { User.get({page: page}, function (res) { ctrl.users = res; }); } ctrl.query(1) }) action('show', function (params) { ctrl.user = User.get(params); }) ctrl.ban = function (user) { User.ban({id: user.id}) user.banned = true; } ctrl.unban = function (user) { User.unban({id: user.id}) user.banned = false; } }])
javascripts/controllers/search_ctrl.js
app.controller('SearchCtrl', ['$scope', '$location', '$http', function ($scope, $location, $http) { var ctrl = this; ctrl.query = function (page) { var params = { page: page || 1 } if (ctrl.q) { params.q = ctrl.q } $http.get(Routes.search_path(params)).then(function (res) { ctrl.posts = res.data; }) } $scope.$watch(function () { return $location.search().q }, function (q) { ctrl.q = q; ctrl.query() }) }])
javascripts/controllers/sign_ctrl.js
app.controller('SignCtrl', ['$scope', '$http', '$interval', 'User', function ($scope, $http, $interval, User) { var ctrl = this; ctrl.title = { in: "", up: "" } ctrl.sign = { in: function () { $http.post(Routes.user_session_path(), {user: ctrl.user}) .success(function (res) { gon.current_user = res.current_user; }) }, out: function () { $http.delete(Routes.destroy_user_session_path()) .success(function () { gon.current_user = undefined; }) }, up: function () { $http.post(Routes.user_registration_path(), {user: ctrl.user}) .success(function (res) { gon.current_user = res.current_user; }) } } $scope.$watch(function () { return gon.current_user }, function (current_user) { if (current_user) { ctrl.method = 'user'; ctrl.title.user = current_user.name; } else { ctrl.method = 'in'; } }) $interval(function () { User.metrics(function (res) { angular.extend(gon.current_user, res); }) }, 10000) }])
, . .
app/views/components render.html.slim :
- Dir[File.dirname(__FILE__) + '/_*.html*'].each do |partial| script type="text/ng-template" id="#{File.basename(partial).gsub('.slim', '').gsub(/^_/, '')}" = render file: partial
このテンプレートは、コンポーネントディレクトリ内のすべての解析をレンダリングし、AngularJSのテンプレートタグにラップします。メインレイアウトで修正する必要があります。これにより、ディレクティブを使用した作業が自動化されます。
= render template: "components/render"
application / layout.html.slim
html ng-app="app" head title base href="/" = stylesheet_link_tag 'application' body ng-controller="MainCtrl as main" ng-class="gon.current_user.role" .layout.body .search input.form-control placeholder="" type="text" ng-model="main.search" ng-model-options="{debounce: 300}" .bredcrumbs ng-yield="bredcrumbs" .wrapper .content ui-view .sidebar = render "layouts/sidebar" = render template: "components/render" = Gon::Base.render_data script src="https://www.google.com/recaptcha/api.js?onload=vcRecaptchaApiLoaded&render=explicit" async="" defer="" = javascript_include_tag 'application'
postディレクティブを作成しましょう：
javascripts / directives / post_directive.js
app.directive('post', ['Post', function(Post){ return { scope: { post: "=" }, restrict: 'E', templateUrl: 'post.html', replace: true, link: function($scope, iElm, iAttrs, controller) { $scope.gon = gon; $scope.destroy = function () { if (confirm(" ?")) Post.destroy({id: $scope.post.id}) } } }; }]);
コンポーネント/ _post.html.slim
.post.clearfix .post__user .middle-ib a.post__user-avatar ui-sref="user_path(post.user)" img ng-src="{{post.user.avatar_url}}" width="75" .middle-ib .post__user-name a.link.text-red ui-sref="user_path(post.user)" ng-bind="post.user.name" rating user="post.user" .post__user-role .text-gray ng-bind="post.user.role" .post__user-metrics.text-gray .post__user-metric span.bold : | span ng-bind="post.user.posts_count" .post__user-metric span.bold : | span ng-bind="post.user.created_at | date:'dd.MM.yyyy'" .post__content a.post__title ng-bind="post.title" ui-sref="topic_path(post.topic)" div ng-bind="post.content" .post__actions.only-moderator a.btn.btn-danger.btn-sm ng-click="destroy()"
_post.html.slimテンプレートは、postディレクティブによって自動的にプルされます。
同じ類推を使用して、評価ディレクティブを作成します。
javascripts / directives / rating_directive.js
app.directive('rating', ['User', function (User) { return { scope: { user: "=" }, restrict: 'E', templateUrl: 'rating.html', replace: true, link: function($scope, iElm, iAttrs, controller) { $scope.rate = function (positive) { User.rate({id: $scope.user.id, positive: positive}, function (res) { $scope.user.rating = res.rating; }) } } }; }]);
コンポーネント/ _rating.html.slim
span.rating span.text-red.rating__control ng-click="rate()" | ▼ span.rating__count ng-bind="user.rating" span.text-green.rating__control ng-click="rate(true)" | ▲
孤立した作業ロジックが含まれており、アプリケーション内のさまざまな場所で使用されているため、投稿と評価を別々のディレクティブに移動しました。これにより、DRYパターンをより適切に追跡できます。
オンライントラッキングの場合、online.jsを作成します。ここで、5分ごとにユーザーのオンライン時間を更新するリクエストを送信します。
javascripts / online.js
app.run(['$interval', 'User', function ($interval, User) { User.touch(); $interval(function () { User.touch(); }, 5*60*1000) }])
サーバー側では、reCAPTCHAを実装しています。今度は、クライアントでも同様にこれを実行します。私は、Angular Recaptchaスクリプトを使用しました。これには、recaptchaを便利に使用するためのディレクティブが含まれています。一般的には、次のようになります。
div ng-model="ctrl.user.recaptcha" vc-recaptcha="" key="'#{Rails.application.secrets[:recaptcha]["public_key"]}'"
クライアントシリアライザーを記述するのは残り、プロジェクトの準備は完了です。ExampleSerializerの例に基づいて、すべてのモデルのシリアライザーを作成しました。
javascripts /シリアライザー/ post_serializer.js
function PostSerializer (collection) { var result = []; _.each(collection, function (item) { result.push({ id: item[0], title: item[1], content: item[2], user: { id: item[3], created_at: item[4], name: item[5], rating: item[6], posts_count: item[7], avatar_url: item[8] || "/default_avatar.png" }, topic: { id: item[9], title: item[10] } }) }) return result }
javascripts /シリアライザー/ theme_serializer.js
function ThemeSerializer (collection) { var result = []; _.each(collection, function (item) { result.push({ id: item[0], title: item[1] }) }) return result }
javascripts /シリアライザー/ topic_serializer.js
function TopicSerializer (collection) { var result = []; _.each(collection, function (item) { result.push({ id: item[0], title: item[1], last_post: item[2], posts_count: item[3], user: { id: item[4], name: item[5] }, theme: { id: item[6], title: item[7] } }) }) return result }
javascripts /シリアライザー/ user_serializer.js
function UserSerializer (collection) { var result = []; _.each(collection, function (item) { result.push({ id: item[0], created_at: item[1], updated_at: item[2], name: item[3], avatar_url: item[4], posts_count: item[5], rating: item[6], banned: item[7] }) }) return result }
javascripts /シリアライザー/ group_serializer.js
function GroupSerializer (collection) { var result = [], groups = _.groupBy(collection, function (el) { return el[0] }); _.each(groups, function (group) { result.push({ id: group[0][0], title: group[0][1], themes: _.map(group, function (item) { return { id: item[2], title: item[3], posts_count: item[4], topics_count: item[5], last_post: item[6] } }) }) }) return result }
キャッシング
お気づきかもしれませんが、アプリケーションのビューにはサーバー側のテンプレート要素はありません。ゴンを除く。したがって、実稼働環境のレイアウト全体をキャッシュできます。
ネタバレ見出し
= cache_if Rails.env.production?, $cache_key html ng-app="app" head title base href="/" = stylesheet_link_tag 'application' body ng-controller="MainCtrl as main" ng-class="gon.current_user.role" .layout.body .search input.form-control placeholder="" type="text" ng-model="main.search" ng-model-options="{debounce: 300}" .bredcrumbs ng-yield="bredcrumbs" .wrapper .content ui-view .sidebar = render "layouts/sidebar" = render template: "components/render" script src="https://www.google.com/recaptcha/api.js?onload=vcRecaptchaApiLoaded&render=explicit" async="" defer="" = javascript_include_tag 'application' = Gon::Base.render_data
サーバーの再起動/デプロイ時にキャッシュをリセットするために、動的なグローバル変数$ layout_cacheを使用して初期化子を作成し、cache_key関数を実行します。
config / initializers / layout_cache.rb
$layout_cache = "layout_#{Time.now.to_i}"
まとめ
Single Page Application , , API. . .