react+redux+ant+ykit+mock项目总结

本文记录了一个为期十天的旧项目重构过程,从环境搭建到联调完成。文章详细介绍了Windows环境下Node.js项目的环境配置方法,以及如何使用ykit.js进行前端开发。特别关注于页面路由(route)和模块(container)的设计思路。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

历时十天,从0基础,现学现用总算把项目开发完了,今日已经开始联调。

整个项目结构如下:

总体结构如下
接手的是一个旧项目,所以环境搭建相对要容易很多(Windows环境搭建):
1. 下载node.js
2. 安装必要环境:npm install –global –production windows-build-tools(如果没有成功,也可以手动一步一步下载:https://github.com/nodejs/node-gyp#option-2
3. 没有的话,也可以不配置根据配置自己用的注册源,npm config set registry http://npmrepo.corp.qunar.com/

配置ykit.js

开发

HTML,public目录

这里写图片描述
页面一般导入css、js库和route

route,页面路由

主要实现页面的整体结构和页面的url(通常是二级三级url)
这里写图片描述

这里写图片描述
route通常实现上图的左边栏和顶层栏,route没有数据,都是静态的按钮。
route的下一级,就是上图中最大的那一块了,是container层

container,模块

这里写图片描述

这里写图片描述

container是前端的核心了,通常情况,一个container负责一个模块页面,container非常像Android里面的activity,有自己的生命周期。

这里写图片描述

container主要的工作是:请求数据、将数据写到页面、处理页面的按钮弹窗和其他事件、添加子组件。
这里写图片描述
AdminSharePageContainer

请求数据:决定 ‘什么时间’ 请求 ‘什么数据’

mapStateToProps 请求数据的结果
mapDispatchToProps 请求数据的方法
export default connect(mapStateToProps, mapDispatchToProps)(AdminSharePageContainer); 绑定到AdminSharePageContainer

然后AdminSharePageContainer就可以通过this.props获取到数据了
这里写图片描述

将数据写到页面,通常称之为渲染

由render方法实现,如上图的render()
render()返回一个jsx语法的标签,里面可以通过增加很多标签来实现复杂的功能模块,比如:
这里写图片描述

请求数据具体实现,由action实现真正的请求数据

这里写图片描述

reducer请求数据结果做转换

这里写图片描述

这里写图片描述

component子组件

这里写图片描述

mock模拟测试数据

这里写图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值