Mu class network music player electron write tutorials, code changes follow tutorials (eight)

Rendering the main page of the list

The first is to send a list of information to main.js page index.js

In createWindow function added:

mainWindow.webContents.on ( 'did-finish-load ', () => {// initial load is also rendered page list 
    mainWindow.send ( 'getTracks', myStore.getTrack ()) 
 })

Each time you add music and then have to re-render

ipcMain.on ( 'the Add-Track', (Event, Tracks) => { 
   const = updataedTrack myStore.addTracks (Tracks) .getTrack () // chained calls 
   mainWindow.send ( 'getTracks', updataedTrack) // Render list 
  })

　　

Page build index.html, where the use of an icon library

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">

　At the same time there has been a div box

<div id="tracksList" class="mt-4"></div>

　　Edit index.js

const renderListHTML = (tracks) => {//渲染列表的函数
  const tracksList = $('tracksList')
  const tracksListHTML = tracks.reduce((html, track) => {
    html += `<li class="row music-track list-group-item d-flex justify-content-between align-items-center">
      <div class="col-10">
        <i class="fas fa-music mr-2 text-secondary"></i>
        <b>${track.fileName}</b>
      </div>
      <div class="col-2">
        <i class="fas fa-play mr-3" data-id="${track.id}"></i>
        <i class="fas fa-trash-alt" data-id="${track.id}"></i>
      </div>
  }, '')
    return html
    </> `
  const emptyTrackHTML = '<div class =" Alert-Alert Primary "> has not added any music </ div>'
  tracksList.innerHTML = tracks.length ? `<ul class="list-group">${tracksListHTML}</ul>` : emptyTrackHTML
}
ipcRenderer.on('getTracks', (event, tracks) => {rendererListHTML(tracks)})