2016-10-12 68 views
0

我正在创建一个音乐应用程序,用户可以将歌曲添加到播放列表中。我通过关联创建了一个has_many,以便将“playlist_songs”添加到播放列表中,而不是“歌曲”has_many通过Rails AngularJS Restangular'POST'

以下是一些相关的代码,以便为您提供一个更好的主意。

playlist_song.rb

class PlaylistSong < ActiveRecord::Base 
    belongs_to :playlist 
    belongs_to :song 
end 

song.rb

class Song < ActiveRecord::Base 
    belongs_to :album 
    has_many :playlist_songs 
    has_many :playlists, through: :playlist_songs 
end 

playlist.rb

class Playlist < ActiveRecord::Base 
    belongs_to :user 
    has_many :playlist_songs 
    has_many :songs, through: :playlist_songs 
end 

Song.attribute_names

["id", "url", "name", "created_at", "updated_at", "album_id", "song_title"] 

PlaylistSong.attribute_names

["id", "playlist_id", "song_id", "created_at", "updated_at"] 

我所要做的就是添加一个playlist_song到特定的播放列表。我认为最好的方法是简单地创建一个playlist_song,它只有song_id和playlist_id属性。这将引用我需要的歌曲URL,以及歌曲所属的playlist_id。

我想将playlist_song保存到URL,http://localhost:3000/api/user_profiles/1/playlists/8/song_references,显示如下:

[ 
    { 
    "id": 14, 
    "playlist_id": 8, 
    "song_id": 2, 
    "created_at": "2016-09-25T15:43:36.459Z", 
    "updated_at": "2016-09-25T15:43:36.459Z" 
    }, 
    { 
    "id": 15, 
    "playlist_id": 8, 
    "song_id": 3, 
    "created_at": "2016-09-25T15:43:36.460Z", 
    "updated_at": "2016-09-25T15:43:36.460Z" 
    } 
] 

这是URL,http://localhost:3000/api/user_profiles/1/playlists/8/playlist_songs,显示实际的歌曲显着不同的属性相对于一个特定的播放列表:

[ 
    { 
    "id": 3, 
    "url": "https://www.song3url.mp3", 
    "name": "05 Smoke Signal (Original Mix).mp3", 
    "created_at": "2016-09-24T02:33:46.648Z", 
    "updated_at": "2016-09-29T03:44:35.464Z", 
    "album_id": 1, 
    "song_title": null 
    }, 
    { 
    "id": 2, 
    "url": "https://www.song2url.mp3", 
    "name": "07 The Son Of Flynn (Remixed by Moby).mp3", 
    "created_at": "2016-09-24T02:25:52.373Z", 
    "updated_at": "2016-09-24T02:25:52.373Z", 
    "album_id": 1, 
    "song_title": null 
    } 
] 

下面你可以看到我的routes.rb文件的特定API部分:

namespace :api, defaults: { format: :json } do 
    # resources :newsfeed_item 
    resources :chat_rooms do 
     resources :chat_messages 
    end 
    resources :playlists do 
     resources :playlist_songs 
    end 
    resources :songs 
    resources :venue_requests 
    resources :user_profiles do 
     resources :libraries 
     resources :playlists do 
     resources :playlist_songs 
     resources :song_references 
     end 
    end 
    resources :artist_profiles do 
     resources :albums do 
     resources :album_songs 
     end 
    end 
    end 

这里是显示playlist_songs的song_references_controller.rb文件:

class Api::SongReferencesController < ApplicationController 
    def index 
    @playlist = Playlist.find(params[:playlist_id]) 
    @playlist_songs = PlaylistSong.where(playlist_id: params[:playlist_id]) 
    render json: @playlist_songs, status: :ok 
    end 

    def new 
    @playlist_song = PlaylistSong.new 
    end 

    def create 
    @playlist_song = PlaylistSong.new(playlist_song_params) 

    if @playlist_song.save 
     render json: @playlist_song, status: :created 
    else 
     render json: @playlist_song.errors, status: :unprocessable_entity 
    end 
    end 

    def playlist_song_params 
    params.fetch(:song, {}).permit(:song_id, :playlist_id) 
    end 
end 

这里是显示个人播放列表和歌曲,还有$ scope.saveSong功能我的PlaylistCtrl.js文件我使用到playlist_songs保存到播放列表:

(function(){ 
    function PlaylistCtrl($scope, $resource, $interval, Restangular, angularSoundManager) { 
    $scope.addToPlaylistVisible = false; 
    $scope.selectedPlaylist = Restangular.one('api/user_profiles/1/playlists', 8).all('song_references'); 
    $scope.allPlaylists = Restangular.all('api/playlists'); 

    $interval(function(){ 
     $scope.allPlaylists.getList().then(function(playlists) { 
     $scope.playlists = playlists; 
     }); 

     console.log("PLAYLISTS GRABBED"); 
    }, 1000); 

    $scope.basePlaylist = Restangular.one('api/playlists', 8).all('playlist_songs'); 
    $scope.playlistId = '8'; 

    $interval(function(){ 
     $scope.basePlaylist.getList().then(function(songs) { 
     $scope.songs = songs; 
     }); 

     console.log("Playlist Songs GRABBED"); 
    }, 1000); 

    $scope.setPlaylistAttributes = function(playlistId) { 
     $scope.basePlaylist = Restangular.one('api/playlists', playlistId).all('playlist_songs'); 
     $scope.playlistId = playlistId; 
     console.log("CURRENT PLAYLIST ID " + $scope.playlistId) 
    } 

    $scope.setSong = function(songId) { 
     $scope.songId = songId; 
     $scope.addToPlaylistVisible = true; 
     console.log("CURRENT SONG ID " + $scope.songId) 
    } 

    $interval(function(){ 
     $scope.selectedPlaylist.getList().then(function(playlistSongs) { 
     $scope.playlistSongs = playlistSongs; 
     }); 
     console.log("Working"); 
    }, 1000); 


    // CREATE PLAYLIST SONG (song_reference instance) - PLAYLIST ID, SONG ID (NOT SONG, BUT PLAYLIST SONG) 
    $scope.saveSong = function(selectedPlaylistId) { 
     $scope.selectedPlaylist = Restangular.one('api/user_profiles/1/playlists', selectedPlaylistId).all('song_references'); 
     $scope.selectedPlaylistId = selectedPlaylistId; 
     var newSong = { 
      "playlist_id": $scope.selectedPlaylistId, 
      "song_id": $scope.songId, 
     }; 
     $scope.selectedPlaylist.post(newSong).then(function(newSong){ 
     $scope.playlistSongs.push(newSong); 
     console.log(newSong); 
     }) 
    }; 

    $scope.hidePlaylists = function() { 
     $scope.addToPlaylistVisible = false; 
    } 

    } 
    angular 
     .module('PlaylistCtrl', ['angularSoundManager']) 
     .controller('PlaylistCtrl', ['$scope', '$resource', '$interval', 'Restangular', PlaylistCtrl]); 
})(); 

播放列表/ index.html.erb:

<h1>All Playlists</h1> 

<div ng-controller="PlaylistCtrl"> 
    <div> 
    <ul ng-repeat="playlist in playlists"> 
     <li> 
     <a style="cursor:pointer;" ng-click="setPlaylistAttributes(playlist.id);">{{ playlist.name }}</a> 
     </li> 
    </ul> 
    </div> 
    <%= link_to "New playlist", new_user_profile_playlist_path, data: { push: true } %> 
    <br/> 
    <br/> 
    <h3>Selected Playlist</h3> 
    <div> 
    <ul> 
     <li ng-repeat="song in songs"> 
     <a style="cursor:pointer;" music-player="play" add-song="song">{{ song.name }}</a> 
     <button ng-click="setSong(song.id);">ADD TO PLAYLIST</button> 
     </li> 
    </ul> 
    <button play-all="songs" data-play="false">Add all</button> 
    <div ng-if="addToPlaylistVisible"> 
     <a style="cursor:pointer;" ng-click="hidePlaylists();"><img src="/assets/HUD_icons/x.png"/></a> 
     <ul ng-repeat="playlist in playlists"> 
     <li> 
      <a style="cursor:pointer;" ng-click="saveSong(playlist.id);">{{ playlist.name }}</a> 
     </li> 
     </ul> 
    </div> 
    </div> 
</div> 

然而,在选择了要添加的正确歌曲之后,为要添加的歌曲选择播放列表并保存播放列表,这不是与播放列表歌曲一起保存任何属性。

当在轨控制台看,我得到一个对象,它看起来像这样:

=> #<PlaylistSong:0x007f9397d3c700 
id: 48, 
playlist_id: nil, 
song_id: nil, 
created_at: Wed, 12 Oct 2016 00:50:47 UTC +00:00, 
updated_at: Wed, 12 Oct 2016 00:50:47 UTC +00:00> 

但我看到这个在服务器日志:

Started POST "/api/user_profiles/1/playlists/8/song_references" for ::1 at 2016-10-11 20:50:47 -0400 
Processing by Api::SongReferencesController#create as JSON 
    Parameters: {"playlist_id"=>"8", "song_id"=>4, "user_profile_id"=>"1", "song_reference"=>{"playlist_id"=>"8", "song_id"=>4}} 
    (0.1ms) begin transaction 
    SQL (1.1ms) INSERT INTO "playlist_songs" ("created_at", "updated_at") VALUES (?, ?) [["created_at", "2016-10-12 00:50:47.752976"], ["updated_at", "2016-10-12 00:50:47.752976"]] 
    (8.2ms) commit transaction 
Completed 201 Created in 19ms (Views: 0.5ms | ActiveRecord: 9.5ms) 

如果我改变playlist_song_params在song_references_controller.rb文件所以他们读:

def playlist_song_params 
    params.require(:playlist_song).permit(:song_id, :playlist_id) 
    end 

我得到一个400 BAD请求错误,我看到这在服务器日志中:

Started POST "/api/user_profiles/1/playlists/8/song_references" for ::1 at 2016-10-11 20:50:47 -0400 
Processing by Api::SongReferencesController#create as JSON 
    Parameters: {"playlist_id"=>"8", "song_id"=>4, "user_profile_id"=>"1", "song_reference"=>{"playlist_id"=>"8", "song_id"=>4}} 
    (0.1ms) begin transaction 
    SQL (1.1ms) INSERT INTO "playlist_songs" ("created_at", "updated_at") VALUES (?, ?) [["created_at", "2016-10-12 00:50:47.752976"], ["updated_at", "2016-10-12 00:50:47.752976"]] 
    (8.2ms) commit transaction 
Completed 201 Created in 19ms (Views: 0.5ms | ActiveRecord: 9.5ms) 

我完全脱离基地,我应该如何保存我的“playlist_songs”?

如果是这样,是否有人会介绍我如何去配置我的strong_params,以及如何在“$ scope.saveSong”函数中设置“newSong”变量?

让我知道如果您需要我的项目中的任何其他代码,我会很乐意提供它。

回答

0

我找到了答案。我能得到playlist_song属性通过改变playlist_song_params以下保存:

def playlist_song_params 
    params.permit(:playlist_id, :song_id) 
end 

我不知道为什么这个工作,所以如果有人想提供一些线索这光,这将不胜感激。