Ahri-珊

day11将分享使用React+Redux编写的音乐播放器搜索功能的实现。

源码地址:https://github.com/shannuo/tryFe/tree/master/player

API地址:https://github.com/Binaryify/NeteaseCloudMusicApi

初始化项目

1.使用create-react-app生成一个配置好webpack的基础项目。

2.加入redux

别人的教程

关键组件

搜索框

需要将参数keyword传递到生成action的函数里。

Card

显示歌曲信息。

// JavaScript Document

import React from 'react';
import {Link} from 'react-router';
import { connect } from 'react-redux';// 引入connect 

import { fetchUrl } from './actions/count';//获取播放地址

import './Demo.css';

class Card extends React.Component{
	constructor(props) {
    super(props);
    this.state = {};
	}
    render(){
		const { fetchUrl } = this.props;
        return(
				<div className="col-sm-3 col-xs-6 card">
					<div className="card_box">
					  <img src={this.props.img} alt={this.props.name} />
					  <div  className="card_content">
						  <p>{this.props.singer}</p>
						  <h3>{this.props.name}</h3>
						  <div>
						  	<span className="glyphicon glyphicon-play" onClick={() => fetchUrl(this.props.id)}></span>
							<span className="time">{this.props.time}</span>
							<span className="glyphicon glyphicon-share"></span>
						  </div>
					  </div>
				  	</div>
				</div>
        )
    }
}

const changeText = state => {
    return {
        text: state.update.text
    }
}

export default connect(
    changeText,
    { fetchUrl }
)(Card)

action生成

function fetchPosts(keyword) {
	var url = 'http://localhost:3000/search?keywords='+keyword;
    return dispatch => {
        return fetch(url, {
    method: 'GET',
    mode: 'cors',
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
    	},
	})
            .then((res) => { console.log(res.status); return res.json() })
            .then((data) => {
				var action = getSuccess(data);
                dispatch(action)
            })
            .catch((e) => { console.log(e.message) })
        }
}

export function fetchPostsIfNeeded(keyword) {
    return (dispatch, getState) => {
        return dispatch(fetchPosts(keyword))
    }
}

export const getSuccess = (json) => {
	var data = [];
	console.log(json);
	for(var i=0;i<json.result.songs.length;i++)
	{
		data[i] = {name:'',time:'',lrc:'',img:'',url:'',singer:'',id:''};
		if(!json.result.songs[''+i].hMusic)
			data[i].time = "00:00";
		else
			{
				var ms = json.result.songs[''+i].hMusic.playTime;
				var s = Math.floor(ms/1000);
				var m = Math.floor(s/60);
				data[i].time = ''+m+':'+(s%60);
			}
		if(!json.result.songs[''+i].album)
			data[i].img = "music01.jpg"
		else
			data[i].img = json.result.songs[''+i].album.blurPicUrl;
		data[i].name = json.result.songs[''+i].name;
	 	data[i].id = json.result.songs[''+i].id;
		data[i].url = fetchUrl(data[i].id);
		data[i].singer = json.result.songs[''+i].artists["0"].name;
	}
    return {
        type: GETSUCCESS,
        data
    }
}

END