前端应用三层架构调用java后端主流程

modles:存放返回值解构方法 
view:调用页面 
services:存放调用api路径方法

view配置

1.导入依赖 
import {connect} from 'umi'; 

2.配置connect 
//注意 但文件只能留有一个 export default 把其他 export default 注释 
// exhibit:命名空间 UserList:引用组件名 
export default connect(({exhibit})=>({exhibit}))(UserList);

3.初始化调用 
    /** * 初始化 */ 
    componentDidMount() {
        const {dispatch} = this.props;
        const params = {name: this.state.name,sex: this.state.sex,state:this.state.State};
        if (dispatch) {
            dispatch({ type: 'exhibit/action',// exhibit:命名空间 action:方法名 
            payload: params,// 参数 
            callback: (res) => {// 回调 
                this.setState({ 
                code: res.code, 
                data: res.data.list,
                pageNum: res.data.pageNum,
                pageSize: res.data.pageSize,
                count: res.data.count,
                message: res.message,
                state: res.state, })} 
            });
        } 
    }

modles配置

import { queryAction} from '@/services/exhibit';

export default {
   //命名空间
   namespace: 'exhibit',

   //状态
   state: {
      data: {},
   },
      
   //调用接口
   effects: {
   
      // 描述方法为异步的
      *action({ payload,callback }, { call, put }){// payload:参数 callback:回调组件 call:调用组件 put:解构组件
         //yield:异步
         const response = yield call(queryAction,payload);
         yield put({
            type: 'actionDeconstruct',// 返回值解构方法
            payload: response,// 将返回值赋值给payload变量
         });
         //如果callback不为空 并且 类型为 function 执行回调函数
         if(callback && typeof callback == "function") {
            callback(response);
         }
      },
   
   },
   
   //更新状态
   reducers: {
   
      actionDeconstruct (state ,action) {
         // ...:解构state对象  data: 将 actioon.payload 赋值给 data
         return { ...state, data: action.payload };
      },
   
   },
};

services配置

import request from '@/utils/request';

export function queryAction(params) {
  let url = 'http://localhost:8080/user/action';
  if (params) {
    let paramsArray = [];
    //拼接参数
    Object.keys(params).forEach(key => paramsArray.push(key + '=' + params[key]))
    if (url.search(/?/) === -1) {
        url += '?' + paramsArray.join('&')
    } else {
        url += '&' + paramsArray.join('&')
    }
  }
  return request(url, {
    method: 'GET',
    data: params,
  });
}