React16.13.1玩转网抑云（第二周）| 播放条组件、路由配置、Api项目双部署

前端

2023-12-06 00:17:04

技术领域：前端开发、React、前端架构、前端部署

各位前端爱好者大家好！这里是React16.13.1系列实战教程，本期我们继续深入学习如何打造一款网抑云音乐播放器，这次我们将学习如何制作播放条组件、配置路由以及部署Api项目。

前言

在开始学习之前，请确保您已经具备了React的基础知识，并对组件和路由有一定的了解。另外，本教程使用的是React16.13.1版本，如果您使用的版本不同，可能需要根据实际情况进行调整。

播放条组件

播放条组件是音乐播放器中一个重要的组成部分，它通常位于播放器底部，包含了播放、暂停、上一曲、下一曲等基本控制按钮，以及进度条和音量调节器。

在React中，我们可以使用useState钩子来管理播放条组件的状态，例如当前播放的歌曲、播放状态（播放/暂停）以及进度条的位置等。然后，我们就可以根据这些状态来渲染播放条组件的界面。

以下是一个简单的播放条组件示例：

import React, { useState } from "react";

const PlayerBar = () => {
  const [isPlaying, setIsPlaying] = useState(false);
  const [currentSong, setCurrentSong] = useState(null);
  const [currentTime, setCurrentTime] = useState(0);

  const handlePlayPause = () => {
    setIsPlaying(!isPlaying);
  };

  const handlePreviousSong = () => {
    // Previous song logic here
  };

  const handleNextSong = () => {
    // Next song logic here
  };

  const handleSeek = (e) => {
    setCurrentTime(e.target.value);
  };

  return (
    <div className="player-bar">
      <button onClick={handlePlayPause}>{isPlaying ? "Pause" : "Play"}</button>
      <button onClick={handlePreviousSong}>Previous</button>
      <button onClick={handleNextSong}>Next</button>

      <input type="range" value={currentTime} onChange={handleSeek} />

      <div className="volume-control">
        <input type="range" value={volume} onChange={handleVolume} />
      </div>
    </div>
  );
};

export default PlayerBar;

路由配置

路由是用于管理应用程序中不同页面或视图的机制。在React中，我们可以使用react-router-dom库来配置路由。

react-router-dom库提供了一个<BrowserRouter>组件，它可以包裹整个应用程序，并负责管理路由。此外，我们还需要定义路由规则，指定不同路由对应的组件。

以下是一个简单的路由配置示例：

import React from "react";
import { BrowserRouter, Route, Switch } from "react-router-dom";

import Home from "./pages/Home";
import About from "./pages/About";
import Contact from "./pages/Contact";

const App = () => {
  return (
    <BrowserRouter>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route path="/contact" component={Contact} />
      </Switch>
    </BrowserRouter>
  );
};

export default App;

Api项目双部署

在开发过程中，我们经常需要在本地和服务器上同时运行项目，以便进行测试和调试。在React中，我们可以使用concurrent-http库来实现Api项目双部署。

concurrent-http库提供了一个createServer()函数，它可以创建一个服务器，并监听指定的端口。然后，我们可以将我们的React应用程序部署到该服务器上，并通过浏览器访问。

以下是一个简单的Api项目双部署示例：

const express = require("express");
const concurrentHttp = require("concurrent-http");

const app = express();

app.use(express.static("public"));

app.get("/api/songs", (req, res) => {
  // Get songs from database or API and send them back to the client
});

const server = concurrentHttp.createServer(app);

server.listen(3000, () => {
  console.log("Server listening on port 3000");
});