react对接口-获取数据篇

react对接口-获取数据篇

一、

import { stringify } from 'qs';//这里都是固定的
import request from '../utils/request';//这里都是固定的
 
// 接口调用
 
// 更新
export async function upCategorySet(params) {
  return request(`/api/user/city/CategorySet/update`, {
    method: 'PUT',
    body: params,
  });
}
// 添加
export async function addCategorySet(params) {
  return request(`/api/user/city/CategorySet/store`, {
    method: 'POST',
    body: params,
  });
}
// 获取数据
export async function getRecordList(params) {
  return request(`/api/user/marketAction/getRecordList?${stringify(params)}`, {
    method: 'GET',
  });
}
// 获取数据
export async function getRecordList(params) {
  return request(`/api/user/marketAction/getRecordList?${stringify(params)}`);
}
// 删除
export async function delCategorySet(params) {
  return request(`/api/user/city/CategorySet/destroy`, {
    method: 'DELETE',
    body: params,
  });
}

二、在models层下面创建一个文件夹，文件夹下面创建一个.js文件，如cityInformation/cityInformation,其实取名也是有规范的

import { message } from 'antd';
import {
getRecordList,
delCategorySet,
} from '../../services/cityInformation'; //cityInformation就是api文件，{}里面的内容就是接口名
 
export default {
  namespace: 'cityInformation',//命名空间，与文件名最好一直，方便其他地方直接调用
  state: { // 初始数据
    msg: null,
    data: {},
  },
  // 一定要有一个effects还有一个reducers
  // effects里面放接口
  // reducers里面放接口返回的数据
  effects: {
    *getRecordList({ payload }, { call, put }) {//*后面的名字与call的第一个参数一致，这里可以说就是真正的接口吧
      const response = yield call(getRecordList, payload); // payload调接口所需的数据
      yield put({
        type: 'dataState', //获取的数据存在dataState
        payload: response, // 返回的数据
      });
      return response; // response就是code msg 的返回，告诉调用接口是否成功，其实这里就是一个promise ,在下面有.then 
    },
    *delCategorySet({ payload }, { call, put }) {
      const response = yield call(delCategorySet, payload);
      yield put({
        type: 'dataState',
        payload: response,
      });
      return response;
    },
  reducers: {
    msgState(state, action) { //除了获取数据不放在这里，其他接口都要写在这里，其他接口返回的数据都放在msgState里面
      let { msg } = action.payload;
      if (!msg) {
        msg = JSON.parse(action.payload).msg;
      }
      if (typeof msg !== 'string') {
        msg = '操作失败';
      }
      message.info(msg);
      return {
        ...state,
        msg,
      };
    },
    dataState(state, action) {//只供获取数据的接口，返回的数据存储在dataStat里面，state里面就是旧的值，这里就是初始值
      const { data } = action.payload; // action就是个对象，里面有很多东西，获取到的data从中解构出来
      return {
        ...state, //获取到的data会覆盖初始值state里面的data
        data,
      };
    },
  },
  所以，reducers里面只要写一个 msgState以及一个dataState

三、到达src/common/router.js文件下面找到具体页面，从浏览器地址栏复制路由，直接搜索,如下

  '/cityInformation/citySetting': { //浏览器地址路由
      component: dynamicWrapper(app, ['chart'], () =>
        import('../routes/CityInformation/CitySetting/CitySetting')//看这个地址找到roters目录下具体页面
      ),
    },
   // 里面chart是一个参数，这就跟命名空间有关系啦，下面就跟我们接口页面联系起来啦
   // 如果在model里面没有文件夹包着，chart就写成'cityInformation'
   // 如果这个页面的多个接口写在不同的Models里面，直接在[]里面加就行
       '/cityInformation/citySetting': { //浏览器地址路由
      component: dynamicWrapper(app, ['cityInformation/cityInformation'], () =>
        import('../routes/CityInformation/CitySetting/CitySetting')//看这个地址找到routers目录下具体页面
      ),
    },

找到具体页面啦，接口调用就从这里开始啦

第一步

// 后面会用到
const getValue = obj =>
  Object.keys(obj)
    .map(key => obj[key])
    .join(',');
// 建立连接
@connect(({ cityInformation, loading }) => ({ //@connect就是装饰器，注意，这里面有三个地方都有命名空间
  cityInformation,
  loading: loading.models.cityInformation,
}))
// 装饰器作用就是把当前页面与接口正式联系起来啦
// 如果当前页面调用的接口存在另外一个models层里的文件，直接在后面加，除了loading: loading.models.cityInformation,不变
@Form.create()

第二步

// 定义初始值
export default class UserManagement extends PureComponent {
  state = { //state里面就是初始值，调接口携带的参数数据也是从这里获取的
    id:null,
    newVisible: false,
    visible: false,
    selectedRows: [],//选中的某一条数据
    formValues: {},
    page: 1, 
    pageNum: 10,
    data: { //所有数据都是以数组的形式包着的，每组里面有很多数据
      list: [],
      pagination: {//定义页码
        current: 1, //当前页
        pageSize: 10,//每页的条数
        total: 0,//总的数据条数
      },
    },
  };

第三步

// 其实获取数据的接口不一定要写在生命周期函数里，只是我个人习惯
componentDidMount() {
    const { page, pageNum } = this.state;//page, pageNum是从state里面解构出来的
    const { dispatch } = this.props; //dispatch这才是调接口的方法，从props里面解构出来的
    const later = dispatch({ //这里开始调接口啦，封装成一个函数
      type: 'cityInformation/getUserLists',// 这里就是 命名空间/*后面的名字
      payload: { // 参数以对象的形式书写 原本page:page,这里写成page,减少代码量
        page,
        page_num: pageNum,
      },
    });
    later.then(() => {//因为调用了数据接口，数据货地了，页面数据更新
      const {
        cityInformation: { data },
      } = this.props; //data是获取的数据，后台返回的，数据获取到了，更新页面
      this.setState({
        data: {
          list: data.lists,
          pagination: {
            current: page,
            pageSize: pageNum,
            total: data.total,
          },
        },
      });
    });
  }

第四步

// 页面刷新，数据也会重新获取
handleStandardTableChange = (pagination, filtersArg, sorter) => {
    const { formValues } = this.state;
    const filters = Object.keys(filtersArg).reduce((obj, key) => {
      const newObj = { ...obj };
      newObj[key] = getValue(filtersArg[key]);
      return newObj;
    }, {});
 
    const params = {
      currentPage: pagination.current,
      pageSize: pagination.pageSize,
      ...formValues,
      ...filters,
    };
    if (sorter.field) {
      params.sorter = `${sorter.field}_${sorter.order}`;
    }
    // 因为pagination发生变化的话，页面会刷新，数据会重新获取，所以会调用接口
    this.setState(
      {
        page: pagination.current,
        pageNum: pagination.pageSize,
      },
      () => {
        this.componentDidMount();
      }
    );
  };
  handleSelectRows = rows => { //选中某行获取某行的数据
    this.setState({
      selectedRows: rows,
    });
  };

第五步

// 页面渲染  
 render() {
    const { loading } = this.props;
    const { selectedRows } = this.state;
    // 下面{}里面的dataIndex一定要与接口返回的属性名一致
    const columns = [
    // 正常情况下跟id这里一样写的
      {
        title: 'ID',
        dataIndex: 'id',
      },
      // img 写成标签才能显示，因为ing返回的是一个图片地址
      // text 是当前dataIndex对应的值，record是整条数据所有的值
      {
        title: '头像',
        dataIndex: 'headimg',
        render: (text, record) => (
          <img src={record.tc_user.headimg} alt="头像" style={{ width: 30, height: 30 }} />
        ),
      },
      {
        title: '昵称',
        dataIndex: 'name',
        render: (text, record) => <span>{record.tc_user.name}</span>,
      },
      {
        title: '内容',
        dataIndex: 'content',
      },
      {
        title: '已拉黑',
        dataIndex: 'is_black',
        render: text => <span>{text === 0 ? '未拉黑' : '已拉黑'}</span>,
      },
      {
        title: '分类',
        dataIndex: 'category',
        render:(text)=>(
          <span>{text.name}</span>
        ),
      },
      // 返回的菜品是一个数组，里面单独的一项是text ,map一定要一个key，key里面的值保证唯一就行
      {
        title: '菜品列表',
        dataIndex: 'cart',
        render:(arr)=>{
          return arr.map((text)=>(<span key={text}>{text}<br /></span>)) 
        },
      },
      // 返回的是一个对象
      {
        title: '配送地址',
        dataIndex: 'address',
        render:(text)=>(
          <div>
            <span>{text.userName}<br /></span>
            <span>{text.telNumber}<br /></span>
            <span>{text.provinceName+text.cityName+text.countyName+text.detailInfo}<br /></span>//拼接
          </div>
        ),
      },
      // 三元运算
      {
        title: '是否显示',
        dataIndex: 'is_show',
        render:(text)=>(
          <span>{ text === 1? '显示' : '隐藏'}</span>
        ),
      },
      {
        title: '操作',
        dataIndex: 'operation',
        render: (text,obj) => ( // obj 就是个参数，写成record也行
          <div>
            {obj.is_black === 0 ? <Button onClick={()=>this.shielding(obj.id,1)}>拉黑</Button> : <Button onClick={()=>this.shielding(obj.id,0)}>取消拉黑</Button>}
          </div>
        ),
      },
    ];
    const { data } = this.state;//在此时data已经获取了，存在state里面
    return (
      <PageHeaderLayout title="用户管理">
        <StandardTable
          rowKey="id"  //这个一定要写，每条数据都有一个id
          selectedRows={selectedRows}
          loading={loading}
          data={data}//这是的data是上面解构出来的，因为要呈现在页面上
          columns={columns}
          onSelectRow={this.handleSelectRows}
        />
      </PageHeaderLayout>
    );
  }

转载于 添加链接描述