laihuamin / react-music

vue-music用react重新做一遍

react-router

React Router 4 的每一个部分都是 React 的组件：Router, Route, Link 等等。
react-router实例

jsonp

• 先npm按装jsonp

npm i jsonp --save

• jsonp的使用

jsonp(url, opts, fn)

jsonp一共接收三个参数，第一个是url，代表从哪个api获取参数，第二个是option，也就是data，获取的数据结构，第三个fn，callback回调函数，这个在实际开发过程中可以视具体情况和后端约定。

• jsonp的示例

config.js——存放一些公共的参数，还有公共的回调函数

export const commonParams = {
    g_tk: 5381,
    inCharset: 'utf-8',
    outCharset: 'utf-8',
    notice: 0,
    format: 'jsonp'  
}

export const options = {
    param: 'jsonpCallback'
}

export const ERROR_OK = 0;

singer.js——在这里获取第一个轮播图部分的数据

import jsonp from 'jsonp';
import {commonParams, options} from '../common/js/config.js';
//引入依赖，以及方法

export const getSlider = () => {
    const url = 'https://c.y.qq.com/v8/fcg-bin/fcg_v8_singer_track_cp.fcg',
    const data = Object.assign({}, commonParams, {  //Object.assign是ES6的语法，起到对象合并的作用
        channel: 'singer',
        page: 'list',
        key: 'all_all_all',
        pagesize: 100,
        pagenum: 1,
        hostUin: 0,
        needNewCode: 0,
        platform: 'yqq'
    });
    return jsonp(url, data, options);  //最后return一个jsonp的函数
}

• 这个app中的接口

1、slider轮播图接口

https://c.y.qq.com/v8/fcg-bin/fcg_v8_singer_track_cp.fcg

react-music's Issues

React-router 4.0 初探

基本的router的书写格式

import React, { Component } from 'react';
import {BrowserRouter as Router, Route, Link} from 'react-router-dom';

<Router>
    <div>
        <ul className="app-tab">
            <li className="tab-item"><Link to="/">推荐</Link></li>
            <li className="tab-item"><Link to="/singer">歌手</Link></li>
            <li className="tab-item"><Link to="search">搜索</Link></li>
            <li className="tab-item"><Link to="rank">排行</Link></li>
        </ul>
            <Route exact path="/" component={Recommend} />
            <Route path="/singer" component={Singer} />
            <Route path="/search" component={Search} />
            <Route path="/rank" component={Rank} />
    </div>
</Router>

与router相关的包

• react-router react-router的核心
• react-router-dom 把router渲染成dom的包
• react-router-native 用于react native 的react-router
• react-router-redux 用于集成redux的包
• react-router-config 用于配置静态的router

router详细的书写格式

实例演示地址
源代码地址

• index.js——入口文件

import React from 'react';
import { render } from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import App from './components/app.js';

render((
    <BrowserRouter>
        <App />
    </BrowserRouter>
),document.getElementById('root'));

<BrowserRouter>浏览器路由，使用HTML5 History API (pushState, replaceState,popState事件)来同步UI和URL

<HashRouter> (锚点路由)，使用URL的哈希部分，即(window.location.hash).哈希历史记录不支持 location.key 或 location.state。 在以前的版本中，我们试图缓和行为，但是有一些边缘案例我们无法解决。 任何需要此行为的代码或插件将无法正常工作。 由于此技术仅用于支持旧版浏览器，因此我们建议您将服务器配置为使用 <BrowserHistory>。