2016-10-12 95 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 

我不知道爲什麼這個工作,所以如果有人想提供一些線索這光,這將不勝感激。