Как добавить innerHTML в статический файл, отправленный с узла JS? - PullRequest
2 голосов
/ 23 октября 2019

Я пытаюсь сделать сайт музыкального плеера. Я отправляю статический файл «Music_file.html» в узел JS, после чего я использую базу данных в nodeJS, чтобы получить список информации, связанной с песнями, и присоединяю ее к классу «song-item». Содержание song-item будет в строке для простоты. Я хочу добавить строку как innerHTML класса 'main-page'.

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);

Ответы [ 3 ]

0 голосов
/ 23 октября 2019

Я бы рекомендовал использовать шаблонизатор. Вот список вариантов 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

Затем в экспрессе,добавьте следующие биты кода:

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 })
});
0 голосов
/ 23 октября 2019

Лучший способ добиться этого - написать API. Затем позвоните в API, чтобы получить песни. В ответе API измените ваш HTML, используя javascript / jquery или любую другую библиотеку / инфраструктуру javascript (angular / реагировать).

0 голосов
/ 23 октября 2019

Вы можете добавить функцию onload в "Music_site.html", которая будет отправлять GET-запрос на ваш сервер nodejs и получать эту строку. Затем добавьте извлеченную строку к любому элементу в дом.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...