记录Ant-Design前后端数据交互

前端：Ant-Design，大部分使用了ES6的写法

后端：Vertx

前端可以分为几个部分：

1. index.js   渲染页面

2. model.js   命名空间与方法的调用等

3. server.js   请求路径

4. _mock.js   可供测试数据(不是必要的)

后端使用注解的方式进行访问。

举例：（后端模拟表格数据，传到前端，渲染页面；点击编辑按钮，传入参数到后台，后台返回成功提示。）

1.后端模拟表格数据，先要观察Ant-Design表格中的数据格式是Map<String,Object>其中必须有key

//如果当前类中的所有方法都是返回AjaxResult，注解方法则可以修改为RestController
@Controller
@RequestMapping("/warn")
public class WarningRepositoryController extends BaseController {
   //这里返回的类型是AjaxResult是封装的一个公用方法，其实就是返回一个Object
    @ResponseBody
    @RequestMapping(value = "/index",isVerifyAuth = false)
    public AjaxResult index(){
        Map<String,Object> result = new HashMap<String,Object>();
        List<Map> list = new ArrayList<>();
        Map<String,Object> map1 = new HashMap<String,Object>();
        map1.put("id",1);
        map1.put("key",1);
        map1.put("name","监测项1");
        map1.put("type","告警类型1");
        map1.put("number","0");
        list.add(map1);
        Map<String,Object> map2 = new HashMap<String,Object>();
        map2.put("id",2);
        map2.put("key",2);
        map2.put("name","监测项2");
        map2.put("type","告警类型2");
        map2.put("number","0");
        list.add(map2);
        result.put("data",list);
        return AjaxResult.successData(result);
    }

    @ResponseBody
    @RequestMapping(value = "/editIndex", isVerifyAuth = false)
    public AjaxResult editIndex(Integer id ,String reason,String method){
        System.out.println(id + "   " + reason +"   " + method);
        return success();
    }
}

//其中key为必须，不然到前端console会报错


 

2.当前已经可以将数据传到前端，那么就要将数据渲染到页面。

service.js

import request from '@/utils/request';

export async function index() {
  return request('/api/index',{
    method: 'post'
  })
}

export async function editIndex() {
  return request('/api/editIndex',{
    method: 'post'
  })
}

//访问方法index

model.js

import { message } from 'antd';
import {editIndex,index} from './service';

const Model = {
  namespace: 'test',
  state: {
    indexData:[]   //声明放后端表格数据变量
  },
  reducers: {//方法的回调
    indexList(state,action) { //更新后台返回的数据到state中
      return{
        ...state,
        indexData.payload.data
      };
    }
  },
  effects: {
    *getIndexData(_,{call,put}){
      const res = yield call(index);//调用后台接口
      yield put({
        type: 'indexList', //这里的type与回调方法中的方法名要一致
        payload: res.data
      });
    },
    *editIndexById({ payload },{ call}){//payload为参数
      const res = yield call(editIndex, payload);
      console.log(res);
      if(res.code === 0){
        message.success("修改成功");
      }else{
        message.error("修改失败");
      }
    }
  }
};

export default Model;

index.jsx

import React from 'react';
import { Table, Card,Button,Input } from 'antd';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { router } from 'umi';
import { connect } from 'dva';
import SearchOutlined from "@ant-design/icons/es/icons/SearchOutlined";

class IndexModel extends React.Component {
  constructor(props) {
    super(props);
    this.state=({
      indexData:[]
    })
  }

  state = {
    createModalVisible: false,//点击编辑按钮，控制model页面是否隐藏
    setModalValues: false,//是否传入默认值到编辑页面
    dataSource:[]   //当前页面存储表格数据变量
  };

  componentDidMount() {
    //注意务必先使用dva中的connect建立连接，否则是无法调用props中的dispatch法的
    this.props.dispatch({
      //调用model中的方法发起请求，（model的命名空间+方法名）
      type: 'test/getIndexData'
    });
  }

  componentWillReceiveProps(nextProps){

    //第一次能获取到modals数据的地方,
    //这个生命周期的nextProps能获取到你将要绑定进入props的companyInfo
    // console.log(nextProps.repositoryData);

   //同样，你可以把companyInfo，映射到你这个类的state中去，通过使用this.setState方法
    this.setState({
      dataSource:nextProps.indexData
    })
  }


  render() {
    const columns = [
      {
        title: '序号',
        dataIndex: 'id',
        key: 'id',
      },
      {
        title: '监测项',
        dataIndex: 'name',
        key: 'name'
      },
      {
        title: '告警类型',
        dataIndex: 'type',
        key: 'type',
      },
      {
        title: '项目',
        dataIndex: 'number',
        key: 'number',
      },
      {
        title: '操作',
        dataIndex: 'option',
        valueType: 'option',
        render={(text, record) => (
            <span>
                <a
                  onClick={() => {
                     this.setState({ createModalVisible: true });//显示modal页面
                     this.setState({ setModalValues: record });//传入表格一行的数据到新页面中
                  }}
                >
                编辑
                </a>
                <Divider type={'vertical'} />
                <a>
                   删除
                </a>
            </span>
         )},
      },
    ];

    return (
      <div>
        <PageHeaderWrapper title="设置">
          <Card>
            <Table columns={columns} dataSource={this.state.dataSource}/>  //表格赋值
          </Card>
       </PageHeaderWrapper>
        //为true显示页面
        {this.state.createModalVisible ? (
            <ModalPage
              // 编辑解决方案返回json字符串，需要转换为对象
              onSubmit={async value => {
                console.log("value" + value);
                dispatch({
                   type: 'test/editIndexById',
                   payload : value
                });
                this.setState({ createModalVisible: false });
                this.setState({ setModalValues: {} });
              }}
              onCancel={() => {
                this.setState({ createModalVisible: false });
                this.setState({ setModalValues: {} });
              }}
              createModal={this.state.createModalVisible}
              values={this.state.setModalValues}
            />
          ) : null}
      </div>
    );
  }
}

//这里的index为model.js中的命名空间，必须是唯一的
//indexData是model.js中声明的变量

export default connect(({test}) => ({
  test,indexData:test.indexData
}))(IndexModel);

3.点击编辑，传参数到后端，后端打印参数后返回成功到前端响应。

modal.jsx

import React from 'react';
import { Button, Drawer, Form, Input } from 'antd';

class ModalPage extends React.Component {
  constructor(props) {
    super(props);
  }
  formRef = React.createRef();

  state = { reason: '', method: '' };

  handleName = e => {
    this.setState({reason:e.target.value});
  };

  handleType = e => {
    this.setState({method:e.target.value})
  };

  render() {
    return (
      <div>
        <Drawer
          title="Basic Drawer"
          placement="right"
          maskClosable={false}
          closable={false}
          visible={this.props.createModal}
        >
          <Form ref={this.formRef} layout="vertical" hideRequiredMark>
            <Form.Item
              label="问题原因"
              name="reason"
            >
              <Input
                type="text"
                placeholder="请输入问题原因"
                defaultValue={this.props.values.reason}
                onChange={e => this.handleName(e)}
              />
            </Form.Item>
            <Form.Item label="解决方案" name="method">
              <Input
                type="text"
                placeholder="请输入解决方案"
                defaultValue={this.props.values.method}
                onChange={e => this.handleType(e)}
              />
            </Form.Item>
          </Form>
          <Button style={{ marginRight: 8 }} onClick={this.props.onCancel}>
            Cancel
          </Button>
          <Button
            type="primary"
            onClick={() => {
              this.props.onSubmit(
                '{"id":'+this.props.values.id+',"reason":"' + this.state.reason + '","method":"' + this.state.method + '"}',
              );
            }}
          >
            Submit
          </Button>
        </Drawer>
      </div>
    );
  }
}

//当前页面的this.props.values都为父页面index.js点击编辑record中的值
//onCancel、onSubmit 都为父页面的方法
//因为前段传入到后端的参数为json格式，所以这里可以直接拼接一个字符串返回到父页面进行处理

export default ModalPage;

现在展示一下效果图：

console中的数据    

后端打印的参数值  

后端返回成功的打印，与页面的提示