项目基本结构
一.接口 services.js ,模块 models.js ,HTML页面
三者同级
二.接口配置-services
import { get, post } from '@/utils/request';
// get请求, 获取列表
export const getList = (params) => {
return get(`/api/demo/list`, params);
};
// post请求,获取列表
export const postList = (params) => {
return post(`/api/demo/list`, params);
};
三.模块配置-models
// 这里是引入接口名称. 上文
import { getList, postList } from '../services';
export default {
// 仓库名称,用于指定某个仓库
namespace: 'demo',
// 仓库存储数据
state: {
welfareList: [],
},
effects: {
// 处理请求
*getList({ payload }, { call, put }) {
// 配置返回值,接口,参数
const response = yield call(getList, payload);
// upadtaState 方法用于在仓库中存储返回值
yield put({
// updataState 方法在底部
type: 'updateState',
payload: {
// 用于更新本仓库中state中数组的值
welfareList: response?.data,
},
});
},
*postList({ payload }, { call }) {
const response = yield call(postList, payload);
直接返回后端请求数据结果结果
retuen response?.data
},
},
reducers: {
// 用于更新数据的方法
updateState: (state, { payload }) => {
return {
...state,
...payload,
};
},
},
};
四、页面配置
index.js中引入单个models
app.model(require("./models/modules/global").default);
如果要引入多个models,就需要结合dva/dynamic
了
dynamic({
app,
models: () =>
models.filter(model => modelNotExisted(app, model)).map(m => import(`../models/${m}.js`)),
// add routerData prop
component: () => {}
})
import React, { useEffect } from 'react';
// 引入connect
//简单来说connect是用来连接前端的ui界面和和前端model的一个嫁接桥梁
//通过使用connect将model里面定义的state,和dispatch,和histoey方法等
//传递到前端供前端使用
import { connect } from 'umi';
const Index = (props) => {
// 从props中取出dispatch及刚刚仓库中写的默认state的welfareList
const { dispatch, welfareList } = props;
// 页面加载时发送请求
useEffect(() => {
// 开始发送请求
dispatch({
// models仓库名及方法名
type: 'demo/getList',
// 传递的参数
payload: { id: 1 },
});
// 因在model中设置了返回的数据,统一存储&更新到了state中, 所以不用通过.then()方式
// 获取返回值
}, []);
// 随即打印 即可直接看到值,当state更新时,页面数据也会更新
// console.log('welfareList',welfareList)
return <div>小样</div>;
};
// 连接的仓库名 因 加了花括号 所以取用state中的数组 直接取的
// 否则应写 const { dispatch, demo:{ welfareList }} = props;
export default connect(({ Demo }) => {
return Demo;
})(Index);