1. 参考资料
- 参考ant design pro
- 参考DvaJs
1 新建页面
1.1 在 src -> pages ->『新建文件夹』NewPage ->『新建js文件』NewPage.js 和 『新建less文件』NewPage.less
1.2 在 NewPage.js 填入如下代码
// 必须引入 import React, { PureComponent } from "react"; //面包屑 import PageHeaderWrapper from "@/components/PageHeaderWrapper"; // 引入阿里dva框架,不然不能和服务端交互,必须引入 import { connect } from "dva"; // 引入less import 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 } = this.props; return (); } } export default NewPage; 姓名:{data.userName}
学号:{data.studentNo}
年龄:{data.age}
性别:{data.sex}
1.3 在 NewPage.less 填入如下代码
//样式文件默认使用 CSS Modules,如果需要,你可以在样式文件的头部引入 antd 样式变量文件: //这样可以很方便地获取 antd 样式变量并在你的文件里使用,有利于保持页面的一致性,也方便实现定制主题。 @import "~antd/lib/style/themes/default.less";
2 创建Models
2.1 在 src -> models ->『新建js文件』NewPage.js
2.2 填入以下代码
// 导入接口文件,并采用解构的方式, // 将 newPage.js 的文件里面的 queryUser1 赋值给这里的 queryUser1 import { 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, // 语法糖 data: action.payload // 上面与服务器交互完的数据赋值给 data, 这里的 data 对应最上面 state 里面的 data }; } } };
3 创建services
3.1 在 src -> services ->『新建js文件』NewPage.js
![antd pro2.0 使用记录六:与服务端交互(自建服务)_第3张图片](http://img.e-com-net.com/image/info8/07381cedbda84c3a9ee8905bfcc0f675.jpg)
3.2 填入以下代码
// json序列化的工具 import { stringify } from "qs"; // ant 自己封装好的发送ajax请求的工具 import request from "@/utils/request"; // get请求 注意 ` 这个符号 不是这种 ’号 export async function queryUser1(params) { // stringify这个将json序列化 比如 {"a":1,"b":2} 转换成 a=1&b=2 return request(`/server/api/test/user?${stringify(params)}`); } // post请求 注意 ` 这个符号 不是这种 ’号 export async function queryUser2(params) { return request(`/server/api//test/user?${params}`, { method: "POST" }); }
4 修改代理文件
4.1 由于前面有介绍,这里详细介绍,只贴出代码
4.2 具体代码
proxy: { // 代理以访问 /server/api 开头的所有路由 '/server/api/': { // 代理的目标地址 target: 'http://localhost:8080', // 开启跨域访问 changeOrigin: true, // 发送请求的时候,去掉server pathRewrite: { '^/server': '' }, }, },
5 创建后端应用
5.1 我这里采用 springboot 创建的一个简单应用,由于怕跑题创建步骤不在详细,贴出关键代码
![antd pro2.0 使用记录六:与服务端交互(自建服务)_第5张图片](http://img.e-com-net.com/image/info8/c3ed53565b274ea5b4d5902e83bfbe98.jpg)
5.2 具体代码
package com.example.demo.controller; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RestController; import java.util.HashMap; import java.util.Map; @RestController @RequestMapping("api/test") public class TestController { @RequestMapping("user") public Mapuser(String a, String b) { Map map = new HashMap<>(); map.put("userName", "张三"); map.put("age", 18); map.put("studentNo", "111111111111"); map.put("sex", "男"); return map; } }
6 访问效果
7 大概流程
7.1 引用 pro 官网的话
1.UI 组件交互操作; 2.调用 model 的 effect; 3.调用统一管理的 service 请求函数; 4.使用封装的 request.js 发送请求; 5.获取服务端返回; 6.然后调用 reducer 改变 state; 7.更新 model。
7.2 我的理解
7.3 其实是支付宝的Dva框架
上篇:antd pro2.0 使用记录五:设置代理
原有 mock 服务:antd pro2.0 使用记录六:与服务端交互(使用原有mock)