写在前面1 新建页面1.1 在src->pages->『新建文件夹』NewPage->『新建js文件』NewPage.js 和 『新建less文件』NewPage.less1.2 在NewPage.js填入如下代码// 必须引入import React, { PureComponent } from “react”;//面包屑import PageHeaderWrapper from “@/components/PageHeaderWrapper”;// 引入阿里dva框架，不然不能和服务端交互,必须引入import { connect } from “dva”;// 引入lessimport styles from “./NewPage.less”;// 这个注解解释起来有点麻烦，但要注意以下几点// 1.@connect必须放在export default class前面// 2.这个不写，你在这个页面里面获取不到服务器返回给你的数据// 3.采用解构赋值的方式，第一个参数newPage是命名空间，我们数据就是从这里拿到的@connect(({ newPage, loading }) => ({ data: newPage.data, // 将data赋值给 loading: loading}))class NewPage extends PureComponent { // componentWillMount渲染之前调用，一般处理ajax异步回来的数据， // 等下面render渲染的时候好绑定 componentWillMount() { console.log(“渲染之前调用”); console.log(“之调用一次”); } // 每次调用render之前渲染 componentDidMount() { // 分发器,用dispatch一定要写@connect注解 const { dispatch } = this.props; // 分发器调用models发起请求，具体流程是dispatch=>models=>services dispatch({ // newPage命名空间，fetch是该文件中的方法，对应src/models/newPage.js，因为newPage的namespace的值newPage type: “newPage/fetch”, // 参数，一般采用json格式 payload: { a: “1”, b: “2” } }); } render() { let { data,loading } = this.props; console.log(loading); return ( <PageHeaderWrapper> <div> 姓名：{data.userName}<br/> 学号：{data.studentNo}<br/> 年龄：{data.age}<br/> 性别：{data.sex}<br/> </div> </PageHeaderWrapper> ); }}export default NewPage;1.3 在NewPage.less填入如下代码//样式文件默认使用 CSS Modules，如果需要，你可以在样式文件的头部引入 antd 样式变量文件：//这样可以很方便地获取 antd 样式变量并在你的文件里使用，有利于保持页面的一致性，也方便实现定制主题。@import “~antd/lib/style/themes/default.less”;2 创建Models2.1 在src->models->『新建js文件』NewPage.js2.2 填入以下代码// 导入接口文件，并采用解构的方式，// 将newPage.js的文件里面的queryUser1赋值给这里的queryUser1import { queryUser1 } from “@/services/newPage”;export default { namespace: “newPage”, // State 是储存数据的地方，收到 Action 以后，会更新数据。 state: { data: {} }, effects: { /** * @param payload 参数 * @param call 执行异步函数调用接口 * @param put 发出一个 Action，类似于 dispatch 将服务端返回的数据传递给上面的state * @returns {IterableIterator<*>} / fetch({ payload }, { call, put }) { // 访问之前可以做一些操作 const response = yield call(queryUser1, payload); // 拿到数据之后可以做一些操作 yield put({ // 这行对应下面的reducers处理函数名字 type: “save”, // 这是将最后的处理数据传递给下面的reducers函数 payload: response }); } // * fetch2({ payload }, { call, put }) { // const response = yield call(queryCurrent); // yield put({ // type: “saveCurrentUser”, // payload: response // }); // } }, reducers: { /** * * @param state * @param action * @returns {{[p: string]: *}} */ save(state, action) { console.log(action); return { …state, // es6三点运算符合，有点模糊解释不清楚 data: action.payload // 上面与服务器交互完的数据赋值给data,这里的data 对应最上面 state 里面的data }; } }};