1.参考资料
- 参考ant design pro
- 参考DvaJs
2.目录地址
- Ant Desing Pro2.0(一)项目初始化
- Ant Desing Pro2.0(二)新增页面
- Ant Desing Pro2.0(三)设置代理
- Ant Desing Pro2.0(四)与服务端交互
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 (
姓名：{data.userName}
学号：{data.studentNo}
年龄：{data.age}
性别：{data.sex}
);
}
}
export default NewPage;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, // es6三点运算符合，有点模糊解释不清楚
data: action.payload // 上面与服务器交互完的数据赋值给data,这里的data 对应最上面 state 里面的data
};
}
}
};
3 创建services
3.1 在src->services->『新建js文件』NewPage.js
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创建的一个简单应用,由于怕跑题创建步骤不在详细，贴出关键代码
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 Map user(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框架
dva传送门