Development of webapp imitating QQ music by react

Time:2021-1-14

preface

Because of my previous work, I studied first Vue.js But always right React.js They are very interested, especially react native. They want to learn how to develop cross platform solutions. Moreover, the company is gradually using RN to develop with native app, but it’s not very urgent, so it’s still going to learn first React.js 。

The interface is mainly developed with reference to the interface of QQ music. The data source also uses the API of QQ music, and most of the interfaces are through theJSONPTo visit, among themGet song list detailsandGet song lyricsThe two interfaces need to be implemented through back-end proxy forwarding, which is used hereNodeA simple development is carried out.

Source code

Talk is cheap. Show me the code.

Online access

  1. Direct accesshttp://music.tdon.site (when accessing PC, please turn on debugging and use mobile mode for better effect)
  2. Mobile phone code scanning direct access

    Development of webapp imitating QQ music by react

Technology stack

React.js + React-Router + Redux + ES6 + Webpack

Running projects

git clone https://github.com/XNAL/listen-music.git

cd listen-music

npm install

node  proxyServer.js   //(get song list and lyrics, and use node to forward them)

npm start

//Visit http://localhost :3000

design sketch

  1. recommend

    Development of webapp imitating QQ music by react

  2. singer

    Development of webapp imitating QQ music by react

  3. Singer details

    Development of webapp imitating QQ music by react

  4. Ranking List

    Development of webapp imitating QQ music by react

  5. List details

    Development of webapp imitating QQ music by react

  6. search

    Development of webapp imitating QQ music by react

  7. search result

    Development of webapp imitating QQ music by react

  8. Play page

    Development of webapp imitating QQ music by react

  9. Lyrics page

    Development of webapp imitating QQ music by react

Recommended Today

Using kotlin to develop Android Applications (4) – common basic controls

Some Base Widget in Android App Some common controls in Android Applications Several basic properties of control ID control ID layout_ Width: Wrap_ Content or match_ parent layout_ Height: Wrap_ Content or match_ parent Background: color / picture 1. Display control Textview text <TextView android:id=”@+id/tv_user_label” android:layout_width=”wrap_content” android:layout_height=”50dp” android:text= “User name” android:gravity=”center” android:textSize=”24sp” android:textColor=”#0000FF” android:textStyle=”normal” android:singleLine=”true” […]