股票交易详情接口-react对接口获取数据篇_ 股票程序化软件自动交易接口

基于antd的后台管理系统数据接口对接

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,
  });
}
复制代码

以上是调接口的方式，默认情况下是get请求,get请求可以直接写接口，因为$后面是发送请求携带的参数。

在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
复制代码

在我的认知里面，models下面的这个文件就是把接口封装一下，方便其他地方调用

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

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

第一步

// 后面会用到
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) => (
          
        ),
      },
      {
        title: '昵称',
        dataIndex: 'name',
        render: (text, record) => {record.tc_user.name},
      },
      {
        title: '内容',
        dataIndex: 'content',
      },
      {
        title: '已拉黑',
        dataIndex: 'is_black',
        render: text => {text === 0 ? '未拉黑' : '已拉黑'},
      },
      {
        title: '分类',
        dataIndex: 'category',
        render:(text)=>(
          {text.name}
        ),
      },
      // 返回的菜品是一个数组，里面单独的一项是text ,map一定要一个key，key里面的值保证唯一就行
      {
        title: '菜品列表',
        dataIndex: 'cart',
        render:(arr)=>{
          return arr.map((text)=>({text}
)) 
        },
      },
      // 返回的是一个对象
      {
        title: '配送地址',
        dataIndex: 'address',
        render:(text)=>(
          
            {text.userName}

            {text.telNumber}

            {text.provinceName+text.cityName+text.countyName+text.detailInfo}
//拼接
          
        ),
      },
      // 三元运算
      {
        title: '是否显示',
        dataIndex: 'is_show',
        render:(text)=>(
          { text === 1? '显示' : '隐藏'}
        ),
      },
      {
        title: '操作',
        dataIndex: 'operation',
        render: (text,obj) => ( // obj 就是个参数，写成record也行
          
            {obj.is_black === 0 ?  : }
          
        ),
      },
    ];
    const { data } = this.state;//在此时data已经获取了，存在state里面
    return (
      
        
      
    );
  }

复制代码

步骤dispatch->effects->apjs->reducers,这是我自己的理解

以上都是根据我自己理解所整理的，作为一个前端菜鸟，刚学会调接口，所有的东西都带有我自己个人理解的方式，希望这篇文章能对于有需要的的朋友带来一定的帮助，同时也希望前辈们指出我的不足，我会继续努力的。

文章为作者独立观点，不代表股票程序化软件自动交易接口观点