我正在創建一個音樂應用程序,用戶可以將歌曲添加到播放列表中。我通過關聯創建了一個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」變量?
讓我知道如果您需要我的項目中的任何其他代碼,我會很樂意提供它。