Reac学习笔记_reactSPA学习

后台管理系统学习笔记

SearchBar 组件：

• 查询字段： fields={this.searchFields()}
• 点击查询： onSubmit={this.onSearch}

Table 组件：

• 操作事件 onCtrlClick={ this.tableAction }
• 是否分页 pagination={ true }
• 每页显示 pageSize={10}
• 表头 header={ this.tableHeader() }
• 数据 data={ songArray }
• 加载中 loading={ musicList.loading }
• 滚动 scroll={{y: 385 }}
• 操作

action={row => [{key: 'edit',name: '修改',color: 'blue',icon: 'edit',}, {key: 'delete',name: '删除',color: 'red',icon: 'delete'}]}

FormModal 弹窗组件：

• modalKey="Edit"
• 是否可见 visible={this.state.modalShowEdit}
• 标题 title="修改音乐"
• 编辑页面字段 fields={this.fieldsEdit()}
• 保存事件: onOk={this.onOkEdit}
• 取消事件：onCancel={this.onCancelEdit}
• 按钮名称：okText="保存"

请求ajax加载数据

页面发起请求：

import { fetchMusicList } from 'actions/music'    componentDidMount() {        fetchMusicList({  // 默认是热歌版            method: 'baidu.ting.billboard.billList',            size: 100,            type: 2,        })(this.props.dispatch)    }

music Action

• 设置 ajaxAPI 调用：
• 设置发送请求前的 action
• 设置请求成功后的Ation

import { createAction } from 'redux-actions'import { music } from 'api'import { createAjaxAction } from 'utils'export const requestMusicList = createAction('request music list')export const receiveMusicList = createAction('receive music list')export const fetchMusicList = createAjaxAction(music.musicList, requestMusicList, receiveMusicList)

utils

• 设置API、发送请求前的 action、请求成功后的Atio
• 请求数据、dispatch

import * as ajaxFun from './ajax'export const ajax = ajaxFunexport const createAjaxAction = (api, startAction, endAction) => (data, cb) =>    (dispatch) => {        let respon        dispatch(startAction(data))        return new Promise((resolve, reject) => {            api(data)                .then(checkStatus)                .then(response => response.json())                .then(response => {                    respon = response                    dispatch(endAction({ req: data, res: response }))                })                .then(() => {                    if (respon.status === 1) {                        cb && cb(respon)                    }                })                .catch(catchError)        })    }function catchError(error) {    console.log(error)}function checkStatus(response) {    if ((response.status >= 100 && response.status < 300) || response.status === 500 || response.json) {        return response    }    const error = new Error(response.statusText)    error.response = response    throw error}

ajax.js 请求

import fetchJsonp from 'fetch-jsonp'export function fetchJSON(url, params) {    params = {        ...params,    }    return fetchJsonp(url, params)}export const fetchJSONByGet = url => query => {    const params = {        method: 'GET',    }    let getQuery = '?'    let getUrl = ''    if (query) {        for(let name in query) {            getQuery = `${getQuery}${name}=${query[name]}&`        }    }    getUrl = url + (query ? getQuery.substring(0, getQuery.length - 1) : '')    return fetchJSON(getUrl, params)}