提问人：Dharmanshu 提问时间：5/17/2023 最后编辑：Dharmanshu 更新时间：5/18/2023 访问量：22
我正在使用 angularjs、nodejs 和 mongoDB 作为播放列表管理器，我收到一些控制台错误，例如播放列表文件的 404 并且 SE 连接成功
i am using angularjs, nodejs ,and mongodb for playlist manager and i get some console error like 404 for playlists file and se is connect successful
问：
index.html
<!DOCTYPE html>
<html>
<head>
<title>Playlist Manager</title>
<script rel="shortcut icon icon" href="#"></script>
<script src="angular.min.js"></script>
<script src="app.js"></script>
<script src="songs.json"></script>
</head>
<body>
<div ng-app="app">
<div ng-controller="MainController">
<h1>Playlist Manager</h1>
<input type="text" ng-model="playlistName" placeholder="Enter a playlist name">
<button ng-click="addPlaylist()">Add Playlist</button>
<table>
<thead>
<tr>
<th>Name</th>
<th>Songs</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="playlist in playlists">
<td>{{playlist.name}}</td>
<td>
<ul>
<li ng-repeat="song in playlist.songs">
{{song.name}}
</li>
</ul>
</td>
<td>
<button ng-click="removePlaylist(playlist)">Remove Playlist</button>
</td>
</tr>
</tbody>
</table>
<h2>Add Song to Playlist</h2>
<select ng-model="songName">
<option ng-repeat="song in songs" value="{{song.name}}">{{song.name}}</option>
</select>
<select ng-model="playlistId">
<option ng-repeat="playlist in playlists" value="{{playlist.id}}">{{playlist.name}}</option>
</select>
<button ng-click="addSongToPlaylist()">Add Song</button>
<h2>Remove Song from Playlist</h2>
<select ng-model="songName">
<option ng-repeat="song in songs" value="{{song.name}}">{{song.name}}</option>
</select>
<select ng-model="playlistId">
<option ng-repeat="playlist in playlists" value="{{playlist.id}}">{{playlist.name}}</option>
</select>
<button ng-click="removeSongFromPlaylist()">Remove Song</button>
</div>
</div>
</body>
</html>
server.js
var express = require('express');
var app = express();
var bodyParser = require('body-parser');
var mongoose = require('mongoose');
app.use(bodyParser.json());
mongoose.connect('mongodb://127.0.0.1:27017/playlists');
var PlaylistSchema = new mongoose.Schema({
name: String,
songs: [
{
name: String,
artist: String
}
]
});
var SongSchema = new mongoose.Schema({
name: String,
artist: String
});
mongoose.model('Playlist', PlaylistSchema);
mongoose.model('Song', SongSchema);
app.get('/playlists', function(req, res) {
var playlists = [];
Playlist.find({}, function(err, docs) {
if (err) {
res.send(err);
} else {
playlists = docs;
res.json(playlists);
}
});
});
app.post('/playlists', function(req, res) {
var playlist = new Playlist({
name: req.body.name
});
playlist.save(function(err) {
if (err) {
res.send(err);
} else {
res.json(playlist);
}
});
});
app.get('/playlists/:id', function(req, res) {
var playlist = Playlist.findOne({
_id: req.params.id
});
if (playlist) {
res.json(playlist);
} else {
res.sendStatus(404);
}
});
app.delete('/playlists/:id', function(req, res) {
Playlist.remove({
_id: req.params.id
}, function(err) {
if (err) {
res.send(err);
} else {
res.sendStatus(200);
}
});
});
app.post('/playlists/:id/songs', function(req, res) {
var playlist = Playlist.findOne({
_id: req.params.id
});
if (playlist) {
var song = new Song({
name: req.body.name,
artist: req.body.artist
});
song.save(function(err) {
if (err) {
res.send(err);
} else {
playlist.songs.push(song);
playlist.save(function(err) {
if (err) {
res.send(err);
} else {
res.json(playlist);
}
});
}
});
} else {
res.sendStatus(404);
}
});
app.delete('/playlists/:id/songs/:songId', function(req, res) {
var playlist = Playlist.findOne({
_id: req.params.id
});
if (playlist) {
var song = Song.findOne({
_id: req.params.songId
});
if (song) {
playlist.songs.remove(song);
playlist.save(function(err) {
if (err) {
res.send(err);
} else {
res.sendStatus(200);
}
});
} else {
res.sendStatus(404);
}
} else {
res.sendStatus(404);
}
});
app.listen(3000, function() {
console.log('App listening on port 3000');
});
app.js
var app = angular.module('app', []);
app.controller('MainController', function($scope, $http) {
$scope.playlists = [];
$http.get('/playlists').then(function(response) {
$scope.playlists = response.data;
});
$scope.addPlaylist = function() {
var playlist = {
name: $scope.playlistName,
songs: []
};
$http.post('/playlists', playlist).then(function(response) {
$scope.playlists.push(response.data);
$scope.playlistName = '';
});
};
$scope.removePlaylist = function(playlist) {
$http.delete('/playlists/' + playlist.id).then(function() {
$scope.playlists = $scope.playlists.filter(function(p) {
return p.id !== playlist.id;
});
});
};
$scope.addSongToPlaylist = function(playlist, song) {
playlist.songs.push(song);
$http.put('/playlists/' + playlist.id, playlist).then(function() {
});
};
$scope.removeSongFromPlaylist = function(playlist, song) {
var index = playlist.songs.indexOf(song);
playlist.songs.splice(index, 1);
$http.put('/playlists/' + playlist.id, playlist).then(function() {
});
};
});
song.json
[
{
"name": "Song 1",
"artist": "Artist 1"
},
{
"name": "Song 2",
"artist": "Artist 2"
},
{
"name": "Song 3",
"artist": "Artist 3"
}
]
这是完整的代码，当我运行此代码时，它会给我这样的错误 GET http://127.0.0.1:5500/playlists 404（未找到），所以基本上我无法访问播放列表填充，因为我收到 404 代码错误，所以问题是我应该怎么做才能删除此错误 我做了很多更改，也检查了数据库名称集合名称，但对我没有任何帮助
答： 暂无答案
评论