Open lulujianglab opened 6 years ago
由于项目需求,最近开始学习了ant-design-pro框架,整个框架的业务功能代码主要在四个文件夹中,分别是:
routes:该文件夹下存放每个路由对应的页面组件代码。主要定义页面的基本结构和内容 components:组件文件夹。每个页面可能是由一些组件组成的,对于一些相对通用的组件,可以将该组件写入components文件夹中,并在routes文件夹中的文件引入来使用 models:用于组件的数据存储,接收请求返回的数据以及逻辑处理等 services:用于与后台交互、发送请求等
下面通过具体实践步骤来介绍页面创建的整个流程
路由的配置文件统一由src/common/router.js文件进行管理
通过添加一个新路由并在前端页面中增加一个菜单来对应路由
const routerConfig = { '/': { component: dynamicWrapper(app, [], () => import('../layouts/BasicLayout')), }, '/dashboard/monitor': { component: dynamicWrapper(app, ['monitor'], () => import('../routes/Dashboard/NgMonitor')), }, '/dashboard/workplace': { component: dynamicWrapper(app, ['monitor'], () => import('../routes/Dashboard/NgWorkSpace')), }, '/testpage': { component: dynamicWrapper(app, ['monitor'], () => import('../routes/Test/Test')), }, }
路由/testpage对应的页面文件是Test/Test.js
然后在侧边栏中填写一项来对应到我们添加的路由中
const menuData = [{ name: 'dashboard', icon: 'dashboard', // https://demo.com/icon.png or <icon type="dashboard"> path: 'dashboard', children: [{ name: '分析页', path: 'analysis', }, { name: '监控页', path: 'monitor', }, { name: '工作台', path: 'workplace', }, { name: '测试页', path: 'testpage', }], }, { // 更多配置 }];
在src/routes下创建对应的js文件,如testpage.js
对应到我们添加的路由中
import React, { PureComponent } from 'react'; export default class Testpage extends PureComponent { render() { return ( <h1>Hello World!</h1> ); } }
如果页面相对复杂,需要引入一个组件
可以在components文件夹下创建一个组件,并在testpage.js引入并使用
如创建components/ImageWrapper/index.js
import React from 'react'; import styles from './index.less'; // 按照 CSS Modules 的方式引入样式文件。 export default ({ src, desc, style }) => ( <div style="{style}" classname="{styles.imageWrapper}"> <img classname="{styles.img}" src="{src}" alt="{desc}"> {desc && <div classname="{styles.desc}">{desc}</div>} </div> );
然后修改pagetest.js
import React from 'react'; import ImageWrapper from '../../components/ImageWrapper'; // 注意保证引用路径的正确 export default () => ( <imagewrapper src="https://os.alipayobjects.com/rmsportal/mgesTPFxodmIwpi.png" desc="示意图">; )
假设pagetest.js页面需要发送请求
我们可以在组件加载时发送一个请求来获取数据
componentDidMount() { const { dispatch } = this.props; dispatch({ type: 'project/fetchtagA', }); dispatch({ type: 'activities/fetchtagB', }); }
将会找到对应的models中的函数来发送请求
export default { namespace: 'pagetest', state: { ServicesA: [], ServicesB: [], }, effects: { *fetchtagA(_, { call, put }) { const response = yield call(getServiceAList); yield put({ type: 'ServiceAList', tagAServices: response.result, }); }, *fetchtagB(_, { call, put }) { const response = yield call(getServiceBList); yield put({ type: 'ServiceBList', tagBServices: response.result, }); }, }, reducers: { ServiceAList(state, action) { return { ...state, ServicesA: action.tagAServices, }; }, ServiceBList(state, action) { return { ...state, ServicesB: action.tagBServices, }; }, }, };
而真正发送请求的实际是service文件夹下的文件进行的
export async function getServiceAList() { return request('/api/get_service_list', { method: 'POST', body: {"type": "waiting"}, }); } export async function getServiceBList() { return request('/api/get_service_list', { method: 'POST', body: {"type": "current"}, }); }
在routes文件夹中的pagetest.js中 ,我们可以直接在render部分使用应该得到的返回值进行渲染显示
const { pagetest, loading } = this.props; // pagetest指的是相当于数据流 const { ServicesA, ServicesB } = pagetest; // 从数据流中取出了具体的变量
上述就是快速创建一个页面的简单步骤
前言
由于项目需求,最近开始学习了ant-design-pro框架,整个框架的业务功能代码主要在四个文件夹中,分别是:
routes:该文件夹下存放每个路由对应的页面组件代码。主要定义页面的基本结构和内容 components:组件文件夹。每个页面可能是由一些组件组成的,对于一些相对通用的组件,可以将该组件写入components文件夹中,并在routes文件夹中的文件引入来使用 models:用于组件的数据存储,接收请求返回的数据以及逻辑处理等 services:用于与后台交互、发送请求等
下面通过具体实践步骤来介绍页面创建的整个流程
实践
配置新的路由和菜单
路由的配置文件统一由src/common/router.js文件进行管理
通过添加一个新路由并在前端页面中增加一个菜单来对应路由
路由/testpage对应的页面文件是Test/Test.js
然后在侧边栏中填写一项来对应到我们添加的路由中
创建一个页面
在src/routes下创建对应的js文件,如testpage.js
对应到我们添加的路由中
新增一个组件
如果页面相对复杂,需要引入一个组件
可以在components文件夹下创建一个组件,并在testpage.js引入并使用
如创建components/ImageWrapper/index.js
然后修改pagetest.js
增加service和module
假设pagetest.js页面需要发送请求
我们可以在组件加载时发送一个请求来获取数据
将会找到对应的models中的函数来发送请求
而真正发送请求的实际是service文件夹下的文件进行的
在routes文件夹中的pagetest.js中 ,我们可以直接在render部分使用应该得到的返回值进行渲染显示
上述就是快速创建一个页面的简单步骤