react对接口-后续篇

时间 2019-11-24

标签 react 接口续篇栏目 React 繁體版

原文原文链接

这下的3个接口的调用，前面的步骤跟获取数据同样的，只在当前页作改变api

1、删除数据

第一种写法

写在函数里面，哪里须要调用
  del=(id)=>{
    const {dispatch} = this.props;
    const later = dispatch({
      type:'smartRestaurant/delClassificationFood',
        payload:{ //payload里面写成对象的形式
        id,
      },
    });
    later.then(()=>{// 删除以后页面要刷新，还得从新获取数据
      this.componentDidMount()
    })
  }

复制代码

第二种写法

isInteger = obj => {
    return obj % 1 === 0;
  };

  del = id => {
    const { dispatch } = this.props;
    const later = dispatch({
      type: 'cityInformation/delAnnouncement',
      payload: {
        id,
      },
    });
    later.then(pdata => {
      const { page, pageNum, data } = this.state;
      if (this.isInteger([data.pagination.total - 1] / pageNum)) {
        this.setState({
          page: page - 1,
        });
      }
      if (JSON.parse(pdata).code === 1) {
        this.componentDidMount();
      }
    });
  };
复制代码

// Popconfirm 在头部要记得引用，只有确认是否删除菜调用删除接口
   {
        title: '操做',
        dataIndex: 'operation',
        render: (text,record) => (
          <div>
            <Button onClick={()=>this.showModal(2,record)} icon='edit' size='small' />
            <Divider type="vertical" />
            <Popconfirm title="确认是否删除?" onConfirm={()=>this.del(record.id)} >
              <Button icon='delete' size='small' />
            </Popconfirm>,

          </div>
        ),
      },
复制代码

2、添加数据

均是对表单进行操做数组

这是图片上传的时候要写的函数
normFile = (e) => {
    if (Array.isArray(e)) {
      return e;
    }
    return e && e.fileList;
  };

  handleImgChange = (info) => { // info是开始就有的一个对象，若是有问题控制台打印一下
    if (info.file.status === 'uploading') { // 若是选择的图片还在加载中，执行这里
      this.setState({ loading: true });
      return;
    }
    if (info.file.status === 'done') { // 若是已经加载完成了，执行这里
      const { response:{ data } }=info.file; //返回的data里面包含了生成的图片地址url
      this.setState({
        url:data[0], // data是一个数组，我门的图片地址是data[0]
        loading: false, //图片显示了，loading天然要关闭
      });
    }
  };
复制代码

这里有图片上传
newHashslinger (){
    const put=(e)=>{ //把put写在里面的做用是，在当前函数里面调用能够不写成{this.put}
      const { form:{validateFields}, dispatch } =this.props; // validateFields保存当前页面全部表单的value值
      e.preventDefault();
      validateFields((err, value) => { 
      // err表示modal里面没输入完成的，value是modal完成的，err若是为空，证实value里面是所有完成了
        const esvalue=value; // value就是getFieldDecorator里面的第一个参数
        if (!err) { // 只有err为空，说明新增表单数据完成了，那么modal点击确认时调接口
          const {url}=this.state;// 切记url在state里面要赋初始值，
          esvalue.img=url; // 这里的url是地址，是在本地选择图片时就会自动调的接口，根据图片信息生成的图片地址
          const later=dispatch({
            type: 'smartRestaurant/addMenuClassification',
            payload: esvalue,
          });
          later.then(()=>{
            this.setState({
              newVisible:false, // 只有新增成功以后modal关闭
            })
            this.componentDidMount(); // 一样数据会从新获取
          })
        }
      });
    };
复制代码

const FormItem = Form.Item; //只要是表单，这个就得写
复制代码

const RadioGroup = Radio.Group;
    const { getFieldDecorator } = this.props.form;  //getFieldDecorator这个算装饰器，起双向绑定的做用
    const formItemLayout = { // 这是对modal样式控制，一行总共24个span
      labelCol: {
        xs: { span: 24 },
        sm: { span: 6 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 14 },
      },
    };
复制代码

// accessToken是请求头，在state里面也要赋初始值accessToken: localStorage.getItem('accessToken'),
// accessToken是当登陆调用login接口时，就会自动保存下来的
const {url,loading,accessToken}=this.state; 
复制代码

上传图片

const uploadButton = ( 
    <div>
      <Icon type={loading ? 'loading' : 'plus'} /> // 若是选择了图片，图片还在加载就显示loading图标，不然显示plus加号图标
      <div className="ant-upload-text">Upload</div>
    </div>
  );
  
复制代码

return (
      <Modal
        destroyOnClose // modal关闭，子元素自动销毁
        title="新增"
        visible={this.state.newVisible}
        onOk={put} // put写在newHashslinger的好处就是如今调用不要加this
        onCancel={this.handleCancel}
      >
        <Form onSubmit={this.handleSubmit}>
          <FormItem
            {...formItemLayout} // 样式控制
            label="分类名称"
          >
            {getFieldDecorator('name', {
              rules: [{
                required: true, message: '请输入正确名称',
              }], // rules 就是输入框的限制条件，没达到要求就会显示message的内容
            })(
              <Input />,// 就是当前的组件
            )}
          </FormItem>
          <FormItem
            {...formItemLayout}
            label="图片"
          >
            {getFieldDecorator('img', {
              valuePropName: 'fileList',
              rules: [{
                required: true, message: '菜品图片',
              }],
              getValueFromEvent:this.normFile, // 这里是固定写的，图片上传就得这样写
            })(
              <Upload
                action="/api/user_agency/system/file/upload/upload_image" //只要选择了图片，就会自动调这个接口，生成一个图片地址，url
                listType="picture-card"
                showUploadList={false}
                onChange={this.handleImgChange} // 选择图片调用的函数
                name='image'
                headers={
                  {
                    Authorization: accessToken, // 固定写法，请求头
                  }
                }
              >
                {url ? <img src={url} alt='图片路径' width={130} /> : uploadButton } // 图片若是选择好了，就是url存在，执行后面的，佛诺泽执行后面的uploadButton
              </Upload>
            )}
          </FormItem>
        </Form>
      </Modal>
    );
  };
  
复制代码

3、修改数据

修改一个特殊的地方，那就是修改的时候原始数据是出如今输入框的，这是与添加不一样的地方bash

// 由于这里用一个showModal函数控制两个modal的显示与否
  showModal = (index,data) => {
    if(index===1){
      this.setState({
        newVisible: true,
      });
    }else{
      this.setState({
        editData: data,
        url:data.img, // 由于修改的时候推按比较特殊，得这样写
        editVisible: true,

      });
    }
  };
  handleCancel = () => {
    this.setState({
      url:'',// 取消modal的同时,图片也要清空
      newVisible: false,
      editVisible: false,
    });
  };
     
复制代码

// 在新增的地方一样这样绑定一个事件
   {
        title: '操做',
        dataIndex: 'operation',
        render: (text,record) => (
          <div>
            <Button onClick={()=>this.showModal(2,record)} icon='edit' size='small' />// 此处调用showModal
            <Divider type="vertical" />
            <Popconfirm title="确认是否删除?" onConfirm={()=>this.del(record.id)} >
              <Button icon='delete' size='small' />
            </Popconfirm>,

          </div>
        ),
      },
复制代码

// editData: {},在state 里面赋初始值
 editTable = () =>{
    const { editData } = this.state;  // editData 选中的某条数据的所有，表明单条数据的所有信息
    const put=(e)=>{
      const {form:{validateFields},dispatch}=this.props;
      e.preventDefault();
     validateFields((err, values) => {
       const esvalue = values;
        if (!err) {
          esvalue.id = editData.id; // 由于要得到 id
          const later = dispatch({
            type: 'smartRestaurant/upTableManagement',
            payload:esvalue,
          });
          later.then(()=>{
            this.setState({
              editVisible: false,
            });
            this.componentDidMount()
          })
        }
      });
    };
复制代码

// modal层的不一样之处，存在初始数据initialValue
 <Form onSubmit={this.handleSubmit}>
          <FormItem
            {...formItemLayout} // 样式控制
            label="分类名称"
          >
            {getFieldDecorator('name', {
              rules: [{
                required: true, message: '请输入正确名称',
              }], // rules 就是输入框的限制条件，没达到要求就会显示message的内容
              initialValue: editData.name,
            })(
              <Input />,// 就是当前的组件
            )}
          </FormItem>
          <FormItem
            {...formItemLayout}
            label="图片"
          >
            {getFieldDecorator('img', {
              valuePropName: 'fileList',
              rules: [{
                required: true, message: '菜品图片',
              }],
              getValueFromEvent:this.normFile, // 这里是固定写的，图片上传就得这样写
              initialValue:[{}],
            })(
              <Upload
                action="/api/user_agency/system/file/upload/upload_image" //只要选择了图片，就会自动调这个接口，生成一个图片地址，url
                listType="picture-card"
                showUploadList={false}
                onChange={this.handleImgChange} // 选择图片调用的函数
                name='image'
                headers={
                  {
                    Authorization: accessToken, // 固定写法，请求头
                  }
                }
              >
                {url ? <img src={url} alt='图片路径' width={130} /> : uploadButton } // 图片若是选择好了，就是url存在，执行后面的，佛诺泽执行后面的uploadButton
              </Upload>
            )}
          </FormItem>
复制代码

最后必定要将两个modal渲染到页面上app

{this.newHashslinger()}
{this.editHashslinger()}
复制代码

在此，基于ant-Design调接口篇已经完成啦。ide