版权音乐助手怎么搭建

// src/App.js
import React, { useState } from 'react';
import axios from 'axios';

function App() {
  const [musicList, setMusicList] = useState([]);
  const [searchTerm, setSearchTerm] = useState('');

  useEffect(() => {
    axios.get('/api/music').then(response => {
      setMusicList(response.data);
    });
  }, []);

  const handleSearch = (event) => {
    setSearchTerm(event.target.value);
  };

  return (
    <div>
      <input type="text" placeholder="Search music" onChange={handleSearch} />
      <ul>
        {musicList.filter(music => 
          music.title.toLowerCase().includes(searchTerm.toLowerCase())
        ).map(music => (
          <li key={music.id}>{music.title}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

// server.js
const express = require('express');
const mongoose = require('mongoose');
const bodyParser = require('body-parser');

const app = express();
app.use(bodyParser.json());

mongoose.connect('mongodb://localhost:27017/music_db', { useNewUrlParser: true, useUnifiedTopology: true });

const musicSchema = new mongoose.Schema({
  title: String,
  artist: String,
  copyrightInfo: String,
  filePath: String
});

const Music = mongoose.model('Music', musicSchema);

app.get('/api/music', async (req, res) => {
  const musicList = await Music.find();
  res.json(musicList);
});

app.listen(3000, () => {
  console.log('Server is running on port 3000');
});