1.参考资料javascript
2.目录地址css
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 ( <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.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.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.1 因为前面有介绍,这里详细介绍,只贴出代码
4.2 具体代码
proxy: { // 代理以访问 /server/api 开头的全部路由 '/server/api/': { // 代理的目标地址 target: 'http://localhost:8080', // 开启跨域访问 changeOrigin: true, // 发送请求的时候,去掉server pathRewrite: { '^/server': '' }, }, },
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<String, Object> user(String a, String b) { Map<String, Object> map = new HashMap<>(); map.put("userName", "张三"); map.put("age", 18); map.put("studentNo", "111111111111"); map.put("sex", "男"); return map; } }
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传送门html