我正在尝试创建一个音乐播放器网站。我在nodeJS中发送静态文件"Music_file.html"，然后使用nodeJS中的数据库获取歌曲相关信息的列表，并将其附加到类"歌曲项"中。歌曲项目的内容将以字符串形式显示。我想将字符串附加为类"主页"的innerHTML。
Music_site.html
<html>
<body>
<div class='main-page'>
<div class='song-item'>
<div class='song-item-thumbnail'> <img class='thumbnail' src='./thumbnail/bluedaa.jpg'> </div>
<div class='song-item-song-info'> Blue daa </div>
<div class='song-item-filename'>./songs/bluedaa.mp3</div>
</div>
</div>
</body>
</html>
节点JS的文件：loginserver.js
ar http=require('http')
var fs=require('fs')
var querystring=require('querystring')
var nodemailer=require('nodemailer')
var MongoClient=require('mongodb').MongoClient
var express=require('express');
var app = express();
app.get('/' , function(req,res){
res.writeHead(200,{"Content-Type":"text/html"});
fs.createReadStream("signup.html","UTF-8").pipe(res);
}
);
app.use('/', express.static(__dirname) );
//POST function
app.post('/',function(req,res){
var data=""
req.setEncoding('UTF-8')
req.on('data',function(chunk){
data+=chunk;
});
req.on('end',function()
{
})//req.on
res.writeHead(200,{"Content-Type":"text/html"});
fs.createReadStream("./Music_site.html","UTF-8").pipe(res);
/* Get the song information from the database */
/* append it to the class 'main-page' */
});
app.listen(8000);
获取歌曲信息并将其附加到字符串的伪代码
var content='';
var cur = sqlite3.execute('SELECT * from SONGS');
for row in cur
{
content+="<div class='song-item'> <div class='song-item-thumbnail'> <img class='thumbnail' src=' ";
content+ = row.imgsrc;
content+ = "'> </div> <div class='song-item-song-info'> ";
content+ = row.songname;
content+= "</div> <div class='song-item-filename'> ";
content+ = row.filename;
content+ = "</div> </div>";
}
'.main-page'.append(content);
我建议使用模板引擎。这是选项列表https://colorlib.com/wp/top-templating-engines-for-javascript/。Pug很受欢迎：https://expressjs.com/en/guide/using-template-engines.html
要使Pug工作，请创建一个名为">views/songs.Pug"的模板文件：
html
body
div.main-page
each song in songs
div.song-item
div.song-item-thumbnail
img.thumbnail(href=song.thumbnail)
div.song-item-song-info=song.name
div.song-item-filename=song.filename
然后在express中，添加以下代码位：
app.set('view engine', 'pug')
app.get('/', function (req, res) {
let sql = 'SELECT * from SONGS';
db.all(sql, [], (err, rows) => {
if (err) {
throw err;
}
res.render('songs', { songs: rows })
});
您可以向"Music_site.html"添加onload函数，该函数将向nodejs服务器发送GET请求并获取该字符串。然后将提取的字符串附加到dom中的任何元素。
实现这一点的更好方法是编写API。然后调用api来获取歌曲。在API响应中，使用javascript/jquery或任何其他javascript库/框架(angular/reflect(修改您的html。