如何将innerHTML添加到从节点JS发送的静态文件中？
Posted
技术标签:
【中文标题】如何将innerHTML添加到从节点JS发送的静态文件中？【英文标题】：How to add innerHTML into a static file sent from node JS? 【发布时间】：2020-02-19 21:06:15 【问题描述】：我正在尝试做一个音乐播放器网站。我在节点 JS 中发送静态文件“Music_file.html”，然后在节点JS 中使用数据库获取歌曲相关信息列表，并将其附加到类“歌曲项”。为了简单起见，歌曲项目的内容将放在一个字符串中。我想将字符串附加为“主页面”类的 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 的文件： 登录服务器.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);
【问题讨论】：
【参考方案1】：您可以将 onload 函数添加到“Music_site.html”，它将向您的 nodejs 服务器发送 GET 请求并获取该字符串。然后将获取的字符串附加到 dom 中的任何元素。
【讨论】：
【参考方案2】：我建议使用模板引擎。这是选项列表https://colorlib.com/wp/top-templating-engines-for-javascript/ . 帕格很受欢迎：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 )
);
【讨论】：
但是使用 pug 就像制作一个新的 html 文件。我要求的是，如果我在 html 文件中有很多东西，我不想将它写入 pug 文件，我如何将歌曲：行添加到“主页”中。【参考方案3】：实现这一点的更好方法是编写 API。然后调用 api 来获取歌曲。在 API 响应中，使用 javascript/jquery 或任何其他 javascript 库/框架（angular/react）修改您的 html。
【讨论】：
你能发一个示例代码（伪代码）sn-p，以便我得到这个想法。 从 github 克隆这个 (github.com/shivakumara-m/NodeJS-Login-App.) 项目。看看login api是怎么写的，它只发送数据（无论登录成功与否）。基于此 api 响应，您可以修改您的 html 内容。如果你是这方面的初学者，我建议你去 Youtube 上一些关于 jquery “how to call api using jquery”的教程以上是关于如何将innerHTML添加到从节点JS发送的静态文件中？的主要内容，如果未能解决你的问题，请参考以下文章
在 Nuxt.js 中发送每个请求时，如何将对象添加到 apollo 上的数据？