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

前端:Ant-Design,大部分使用了ES6的写法

后端:Vertx

前端可以分为几个部分:

  1. index.js   渲染页面

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

  3. server.js   请求路径

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

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

举例:(后端模拟表格数据,传到前端,渲染页面;点击编辑按钮,传入参数到后台,后台返回成功提示。)

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

//如果当前类中的所有方法都是返回AjaxResult,注解方法则可以修改为RestController
@Controller
@RequestMapping("/warn")
public class WarningRepositoryController extends BaseController {
   //这里返回的类型是AjaxResult是封装的一个公用方法,其实就是返回一个Object
    @ResponseBody
    @RequestMapping(value = "/index",isVerifyAuth = false)
    public AjaxResult index(){
        Map result = new HashMap();
        List list = new ArrayList<>();
        Map map1 = new HashMap();
        map1.put("id",1);
        map1.put("key",1);
        map1.put("name","监测项1");
        map1.put("type","告警类型1");
        map1.put("number","0");
        list.add(map1);
        Map map2 = new HashMap();
        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) => (
            
                 {
                     this.setState({ createModalVisible: true });//显示modal页面
                     this.setState({ setModalValues: record });//传入表格一行的数据到新页面中
                  }}
                >
                编辑
                
                
                
                   删除
                
            
         )},
      },
    ];

    return (
      
//表格赋值 //为true显示页面 {this.state.createModalVisible ? ( { 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} ); } } //这里的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 (
      
this.handleName(e)} /> this.handleType(e)} />
); } } //当前页面的this.props.values都为父页面index.js点击编辑record中的值 //onCancel、onSubmit 都为父页面的方法 //因为前段传入到后端的参数为json格式,所以这里可以直接拼接一个字符串返回到父页面进行处理 export default ModalPage;

现在展示一下效果图:

记录Ant-Design前后端数据交互_第1张图片

记录Ant-Design前后端数据交互_第2张图片

console中的数据    

后端打印的参数值  记录Ant-Design前后端数据交互_第3张图片

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

记录Ant-Design前后端数据交互_第4张图片 

 

你可能感兴趣的:(IDEA,ant,ES6)