使用AngularJS和Mongoid的CRUD操作部分失败

时间:2014-07-17 08:42:15

标签: ruby-on-rails angularjs mongodb mongoid

我正在尝试将AngularJS集成到我的Mongoid驱动的Rails应用程序中。特别是,我希望让基本的CRUD操作起作用。

1)保存一本书!

2)编辑失败:错误:[$resource:badcfg] Error in resource configuration. Expected response to contain an object but got an array

3)删除失败:DELETE http://localhost:3000/books 404 (Not Found)

我怀疑这些错误是Mongoid特有的,因为我已经尝试了与SQlite和ActiveRecord完全相同的代码而没有任何问题。 Mongoid会出现问题,特别是对于应用于单个记录/文档的CRUD操作。关于什么是错的任何建议?

books_ctrl.js.coffee

myApp.factory "Book", ($resource) ->
  $resource("/books/:id", {id: "@id"}, {update: {method: "PUT"}})

myApp.controller "BooksCtrl", ($scope, Book) ->
  $scope.getBooks = () ->
    Book.query().$promise.then (books) ->
      $scope.books = books

  $scope.edit = (book) ->
    $scope.book = Book.get({id: book.id})

  $scope.delete = (book) ->
    book.$delete ->
      $scope.getBooks()

  $scope.save = () ->
    if $scope.book.id?
      Book.update($scope.book).$promise.then ->
        $scope.getBooks()
    else
      Book.save($scope.book).$promise.then ->
        $scope.getBooks()
    $scope.book = {}

books_controller.rb

class BooksController < ApplicationController
  before_action :set_book, only: [:show, :edit, :update, :destroy]

  # GET /books
  def index
    @books = Book.all

    respond_to do |format|
      format.html {}
      format.json {render json: @books, root: false}
    end
  end

  # GET /books/1
  def show
    respond_to do |format|
      format.html {}
      format.json {render json: @book, root: false}
    end
  end

  # GET /books/new
  def new
    @book = Book.new
  end

  # GET /books/1/edit
  def edit
  end

  # POST /books
  def create
    @book = Book.new(book_params)

    respond_to do |format|
      if @book.save
        format.html {render redirect_to @book, notice: 'Book was successfully created.'}
        format.json {render json: @book}
      else
        format.html {render action: 'new'}
        format.json {render json: @book.errors, status: :unprocessable_entity}
      end
    end
  end

  # PATCH/PUT /books/1
  def update
    respond_to do |format|
      if @book.update(book_params)
        format.html {redirect_to @book, notice: 'Book was successfully updated.'}
        format.json {render json: @book}
      else
        format.html {render action: 'edit'}
        format.json {render json: @book.errors, status: :unprocessable_entity}
      end
    end
  end

  # DELETE /books/1
  def destroy
    @book.destroy

    respond_to do |format|
      format.html {redirect_to books_url, notice: 'Book was successfully destroyed.'}
      format.json {render json: {message: "Book was deleted."}}
    end
  end

  private
    # Use callbacks to share common setup or constraints between actions.
    def set_book
      @book = Book.find(params[:id])
    end

    # Only allow a trusted parameter "white list" through.
    def book_params
      params.require(:book).permit(:title, :author)
    end
end

书籍\ index.html.erb

<div ng-app="myApp" ng-controller="BooksCtrl" ng-init="getBooks()">
  <div class="container">
    <div class="row">
      <div class="span12">
        <form ng-submit="save()">

          <div class="form-group">
            <label>Author</label>
            <input type="text" class="form-control span12" ng-model="book.author"/>
          </div>

          <div class="form-group">
            <label>Title</label>
            <input type="text" class="form-control span12" ng-model="book.title"/>
          </div>

          <button class="btn btn-success">
            Save
          </button>
        </form>

        <hr />

        <ul>
          <li ng-repeat="book in books">
            <div class="btn-group">
              <div class="btn btn-mini btn-danger" ng-click="delete(book)">
                <i class="icon-trash"></i>
              </div>

              <div class="btn btn-mini btn-default" ng-click="edit(book)">
                <i class="icon-edit"></i>
              </div>
            </div>
            {{$index + 1}} {{book.title}} by {{book.author }}
            </li>
        </ul>
      </div>
    </div>
  </div>
</div>

2 个答案:

答案 0 :(得分:1)

问题似乎源于Mongoid的序列化行为。我按照说明操作,并按照建议覆盖了Mongoid的序列化行为。

Mongodb + AngularJS: _id empty in update via resourceProvider

现在解决了我的问题。如果有人能够澄清并提供更彻底的解释,问题是什么以及为什么要这样做,我当然会接受这个答案。

答案 1 :(得分:0)

要解决您的更新问题,请尝试在book_ctrl.js.coffee中修改此问题:

 $resource("/books/:id", {id: "@id"}, {update: {method: "PUT", isArray: true}})

AngularJS需要知道您的API是否要返回数组。您可以使用以下方法解决API代码中的问题:

format.json {render json: [@book]}

因为在出现错误的情况下,我觉得你返回一个数组。您需要为所有情况返回一致的数据。