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
}
}
Comments