这里是基础 其他的页面交互都建立在数据交互之上 不详细的可私信一起探讨交流
1、 需求:
后台给一个接口,获取相应的数据之后进行跳转到一个对应页面
2、使用的是dva的脚手架新建的项目
- 目录结构
- 在 dva 中,通常需要 connect Model的组件都是 Route Components,组织在/routes/目录下,而/components/目录下则是纯组件(Presentational Components)。
- 简单来说,就是routes放需要进行数据交互的组件,components放公共组件。
- 添加样式:
CSS Modules会给组件的className加上hash字符串,来保证className仅对引用了样式的组件有效,如styles.normal可能会输出为normal___39QwY。
className的输出格式可以通过webpack.config进行修改。
3、首先拿到一个接口,需要在/services/api.js
进行传入,
- 情况一 不需要给后台返回任何参数
import request from '../utils/request';
import networkUtils from '../utils/networkUtils';
export async function inquireAccountDetailSelfIdCard() { //inquireAccountDetailSelfIdCard 为方法名
return request(networkUtils.getAction('inquireAccountDetailSelfIdCard'), {
//inquireAccountDetailSelfIdCard 为接口名 一般这两者可设置为相同
method: 'POST',
body: networkUtils.getRequestBody({}),
});
}
- 当需要给接口返回参数的时候
export async function 方法名 (payload在这里定义一个参数名字) {
return request(networkUtils.getAction('接口名'), {
method: 'POST',
body: networkUtils.getRequestBody(payload),
});
}
4、在/models/jumpPage.js
中请求接口数据
这里需要注意的是 需要在index.js 中使用
// 3. Model
app.model(require('./models/jumpPage').default);
//引入接口
import { inquireAccountDetailSelfIdCard } from '../services/api';
export default {
namespace: 'jumpPage',
state: {
//这里是需要存储从接口获取的数据 以获取数组为例
dataList: [],
},
effects: {
// 情况一 不要参数返回
*handleGetSelfid({ payload }, { call, put }) {
// 请求数据接口
const response = yield call(inquireAccountDetailSelfIdCard);
yield put({
type: 'saveState',
payload: response.datas[0],
//取得从接口中返回的数据中自己想要的数据值
});
}
// 情况二 需要给接口返回数据
*getApplicationPageList({ payload }, { call, put }) {
const response = yield call( inquireApplyMemberPageListRSTenant, payload 这里写参数);
yield put({
type: 'getApplyPageList',
payload: response.datas,
});
},
},
// 进行数据处理
reducers: {
saveState(state, {payload}){
return {
...state,
//将获取的数据存入定义的初始数组中
dataList: payload.dataList,
};
},
},
}
5、在/routes/JumpPage.js
中调用models
中namespace
中定义方法并获取数据
import React, { Component } from 'react';
import { connect } from 'dva';
import { Spin } from 'antd';
import styles from './JumpPage.css';
import { message } from 'antd';
//绑定models的namespace到本组件中
@connect(({ jumpPage }) => ({
jumpPage,
}))
export default class JumpPage extends Component {
constructor(props) {
super(props);
this.state = {};
}
componentDidMount() {
const { dispatch } = this.props;
dispatch({
type: 'jumpPage/handleGetSelfid',
payload: {
},
}
).then(() => {
//从models 中的jumpPage得到的数据获取idCardNo的值
const { jumpPage:{idCardNo} } = this.props;
//获取当前url
var url = window.location.href;
if (idCardNo !== "") {
window.location.href=`http://www.jxeduyun.com/App.ResourceCloud/Src/index.php?app=changyan&mod=ThirdpartyLogin&act=autoLoginForCityNew&refType=1391&key=token&value${idCardNo}&validateUrl&url=${url}`;
} else {
message.error("身份证号码为空");
}
})
}
render() {
return (
<div>
{/* <h1 className={styles.txt}>Loading...... </h1> */}
<div className={styles.spin}>
<Spin size="large"/>
</div>
</div>
);
}
}
6、一切以官方为主
附上链接Dva.js