评论功能基本完成

Gemfile

@@ -23,6 +23,7 @@ gem "mini_magick"
 gem 'carrierwave-mongoid'
 gem 'html_truncator'
 gem 'nokogiri'
+gem 'angularjs-rails'
 
 group :development do
   gem 'quiet_assets'

app/assets/javascripts/angularjs.js.coffee

@@ -0,0 +1,10 @@
+#= require angular
+#= require angular-resource
+#= require_self
+#= require_tree ./angularjs
+
+@app = angular.module('app', [])
+
+@app.config(["$httpProvider", (provider) ->
+    provider.defaults.headers.common['X-CSRF-Token'] = $('meta[name=csrf-token]').attr('content')
+])

app/assets/javascripts/angularjs/comments.js.coffee

@@ -0,0 +1,25 @@
+@app.controller 'CommentsController', ($scope, $http, $location, $timeout)->
+  url = $location.absUrl() + "/comments"
+
+  $http.get(url).success (data)->
+    console.log data
+    $scope.comments = data
+
+  $scope.publish_success = null
+
+  $scope.submit = ->
+    comment = { content: $scope.content, name: $scope.name, email: $scope.email }
+    $http.post(url, comment)
+    .success (res)->
+      if res.success
+        $scope.publish_success = true
+        $scope.content = ''
+        $scope.comments.unshift(res.data)
+      else
+        $scope.publish_success = false
+      $timeout ->
+        $scope.publish_success = null
+      , 3*1000
+        
+    .error (data)->
+      alert(data)

app/assets/javascripts/application.js

@@ -1,6 +1,7 @@
 //= require jquery
 //= require jquery_ujs
 //= require foundation
+//= require angularjs
 //= require 'jquery.html5-fileupload'
 //= require_tree .
 

app/assets/javascripts/blogs.js.coffee

@@ -1,10 +0,0 @@
-# Place all the behaviors and hooks related to the matching controller here.
-# All this logic will automatically be available in application.js.
-# You can use CoffeeScript in this file: http://jashkenas.github.com/coffee-script/
-
-$(document).ready ->
-  $('.pagination').click ->
-    l = window.location.pathname
-    page = $(this).attr('data-page')
-    window.location= l + "?page=#{page}"
-    false

app/assets/javascripts/home.js.coffee

@@ -1,3 +0,0 @@
-# Place all the behaviors and hooks related to the matching controller here.
-# All this logic will automatically be available in application.js.
-# You can use CoffeeScript in this file: http://jashkenas.github.com/coffee-script/

app/assets/javascripts/photos.js.coffee

@@ -1,3 +0,0 @@
-# Place all the behaviors and hooks related to the matching controller here.
-# All this logic will automatically be available in application.js.
-# You can use CoffeeScript in this file: http://jashkenas.github.com/coffee-script/

app/assets/stylesheets/comments.css.scss

@@ -48,3 +48,11 @@
     border-bottom: 1px dashed #8a8a8a;
   }
 }
+
+.comment-success {
+  color: #66FAB5;
+}
+
+.comment-fail {
+  color: #FF7A7A;
+}

app/controllers/comments_controller.rb

@@ -0,0 +1,37 @@
+class CommentsController < ApplicationController
+  layout false
+  helper_method :format_time
+  def index
+    @post = Post.find( params[:blog_id] )
+    res = @post.comments.desc(:created_at).collect { |comment| build_json(comment) }
+    render :json => res
+  end
+
+  def create
+    @post = Post.find( params[:blog_id] )
+    comment = Comment.new(comment_params)
+    comment.post = @post
+    if comment.save
+      render :json=> { success: true, data: build_json(comment) }
+    else
+      render :json=> { success: false }
+    end
+  end
+
+  private
+  def comment_params
+    params.permit(:content, :name, :email)
+  end
+
+  def format_time(time)
+    time.strftime("%Y-%m-%d %H:%M")
+  end
+
+  def build_json(comment)
+    {
+      content: comment.content,
+      name: comment.name,
+      'created_at' => format_time(comment.created_at)
+    }
+  end
+end

app/helpers/blogs_helper.rb

@@ -1,5 +0,0 @@
-module BlogsHelper
-  def format_time(time)
-    time.strftime("%Y-%m-%d %H:%M")
-  end
-end

app/helpers/home_helper.rb

@@ -1,2 +0,0 @@
-module HomeHelper
-end

app/helpers/photos_helper.rb

@@ -1,2 +0,0 @@
-module PhotosHelper
-end

app/models/comment.rb

@@ -11,4 +11,5 @@ class Comment
   validates :name, presence: true
   validates :email, confirmation: true,:format => /@/
   validates :content, presence: true
+  validates_presence_of :post_id
 end

app/views/blogs/_comment.html.slim

@@ -1,18 +1,21 @@
-.row
+.row ng-app="app" ng-controller="CommentsController"
-  .small-12.large-12.columns
+  .small-12.large-8.columns
-    = text_area_tag(:content, nil, placeholder: '发表你的看法')
+    form
-.row
+      .row
-  .small-12.large-6.columns
+        .small-12.large-12.columns
-    = text_field_tag(:name, nil, placeholder: '你的名字')
+          = text_area_tag(:content, nil, placeholder: '发表你的看法', 'ng-model'=> 'content')
-    = text_field_tag(:email, nil, placeholder: '你的邮箱')
+      .row
-button 发表
+        .small-12.large-6.columns
-.comment-diag
+          = text_field_tag(:name, nil, placeholder: '你的名字', 'ng-model'=> 'name')
-  p.name
+          = text_field_tag(:email, nil, placeholder: '你的邮箱', 'ng-model'=> 'email', 'ng-pattern'=>"/@/", 'ng-required'=>"true")
-    | WinDy  • 
+      button ng-click="submit()" ng-disabled="form.$invalid" 发表
-    span.created-at 2014-2-12 13:00
+      p.comment-success ng-show="publish_success" 发布成功
-  p.comment-content 写的好!!
+      p.comment-fail ng-show="publish_success == false" 发布失败
-
+    .comment-diag
-  p.name
+      .comment-wrapper ng-repeat=" comment in comments "
-    | WinDy  • 
+        p.name
-    span.created-at 2014-2-12 13:00
+          |{{ comment.name + "  • " }}
-  p.comment-content 写的好!!
+          span.created-at
+            |{{ comment.created_at }}
+        p.comment-content
+          |{{ comment.content }}

app/views/blogs/show.html.slim

@@ -2,9 +2,7 @@
   .small-12.large-8.columns
     = render partial: "post", :locals=> { :post=> @post }
 .comment-field
-  .row
+  = render partial: 'comment', locals: { comments: @comments, post: @post }
-    .small-12.large-8.columns
-      = render partial: 'comment', locals: { comments: @comments }
   .row
     .small-12.large-8.columns
       - if @prev

app/views/comments/create.html.slim

@@ -0,0 +1,2 @@
+h1 Comments#create
+p Find me in app/views/comments/create.html.slim

app/views/comments/index.html.slim

@@ -0,0 +1,2 @@
+h1 Comments#index
+p Find me in app/views/comments/index.html.slim

config/routes.rb

@@ -4,8 +4,10 @@ WBlog::Application.routes.draw do
     collection do
       get :rss
     end
+    resources :comments, only: [:index, :create]
   end
 
+
   resources :archives
   # photos
   resources :photos, :only=>[:create]

spec/controllers/comments_controller_spec.rb

@@ -0,0 +1,5 @@
+require 'spec_helper'
+
+describe CommentsController do
+
+end

spec/models/comment_spec.rb

@@ -2,13 +2,13 @@ require 'spec_helper'
 
 describe Comment do
   it 'test comment' do
-    a = Comment.new(name: '1',content: '2432423',email: '22@.com')
+    a = Comment.new(name: '1',content: '2432423',email: '22@.com', post_id: 1)
     a.save.should == true
-    b = Comment.new(content: '2432ddd423',email: '22@.com')
+    b = Comment.new(content: '2432ddd423',email: '22@.com', post_id: 1)
     b.save.should == false
-    b = Comment.new(name: '2', email: '22@.com')
+    b = Comment.new(name: '2', email: '22@.com', post_id: 1)
     b.save.should == false
-    b = Comment.new(name: '2', content: '2432ddd423',email: '22.com')
+    b = Comment.new(name: '2', content: '2432ddd423',email: '22.com', post_id: 1)
     b.save.should == false
   end
 end