布局
服务器交互
布局
通用的布局都放在layouts目录，有三种
- BasicLayout：基础页面布局，包含了头部导航，侧边栏和通知栏：
- UserLayout：抽离出用于登陆注册页面的通用布局
- BlankLayout：空白的布局
样式的级别
- 样式有通用模块级例如
src/layouts/BasicLayout.less， - 也有页面级具体页面相关的样式，例如
src/routes/Dashborad/Monitor.less - 还有组件级，就是组件相关的样式了
服务端交互
- 所有的请求处理都在services文件夹中，按照model维度进行文件拆分
和服务器交互的例子（使用mock）
第一步：准备好接口数据
mock => testapi.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
const testData = [ 'bing', 'xiong', 'react-test' ]; const getTestData = [ { id: 1, first: testData[0], last: testData[0], date: new Date('2019-01-13'), },{ id: 2, first: testData[0], last: testData[0], date: new Date('2019-01-25'), } ]; export default { 'GET /api/testapi/testData' : getTestData } |
- 注意创建好数据之后要把这个数据的接口定义export出去
第二步：在service中创建发起请求的方法
service -> testapi.js
|
1 2 3 4 5 6 |
import request from '@/utils/request'; export async function queryTestData(){ console.log("queryTestData"); return request('/api/testapi/testData'); } |
- 这里请求的地址要保证http://localhost:8000/api/testapi/testData可以直接返回json
- 请求的地址和方法是在mock数据导出的时候export default定义的。
第三步：在model中创建effects
src -> models -> bing.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
import { queryTestData } from '@/services/testapi'; export default { namespace: 'bing', state: { testData: [], }, effects: { *fetchTest(_, { call, put }) { console.log('queryTestData'); const response = yield call(queryTestData); yield put({ type: 'saveNotice', payload: Array.isArray(response) ? response : [], }); }, }, reducers: { saveNotice(state, action) { return { ...state, testData: action.payload, }; }, }, }; |
- effect~dva定义：用于处理异步操作和业务逻辑，不直接修改state。有action触发，能够和服务器交互，获取全局的state等等；
- put方法：发出一个action，put中的对象就是action
- 这里使用了yield来模拟同步的方式，因为取到数据了之后才调用reducer的saveNotice方法进行state的修改
- 这里调用了queryTestData方法来发起异步请求，在antd pro中，异步请求都是在service层中定义的
第四步：在页面中发起请求数据和使用数据
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 |
import React, { PureComponent } from 'react'; import { connect } from 'dva'; import { Card, Row, Col } from 'antd'; import GridContent from '@/components/PageHeaderWrapper/GridContent'; @connect(({ project, bing }) => ({ project, bing, })) class BasicVisualization extends PureComponent { componentDidMount() { const { dispatch } = this.props; // dispatch({ // type: 'project/fetchNotice', // }); dispatch({ type: 'bing/fetchTest', }); } render() { const { // project: { notice }, bing: {testData} } = this.props; console.log(testData); return ( <GridContent> <Row gutter={16}> {testData.map(item => { return ( <Col className="gutter-row" span={6} key={item.id}> <Card title={item.id} extra={<a href="#">More</a>} > <p><b>id:</b>{item.id}</p> <p><b>first:</b>{item.first}</p> <p><b>last:</b>{item.last}</p> <p><b>last:</b>{item.date}</p> </Card> </Col> ) })} </Row> </GridContent> ); } } export default BasicVisualization; |
- 在connect的时候要把Bing的模型传过去，这个的connect与react-redux相同，能够将react的数据挂载到redux上面
- dispatch action时候type要是 model的name space / model的effects中对应的方法
- 在render中拿到数据，原本需要通过this.props.xxx来获取，构造之后就可以直接获取
- bing: {testData} : 表示获取redux的state中bing下的testData，当然这里已经是props中的了
最终效果
其他
- @ 表示相对于源文件根目录
- 采用less作为样式语言
