前言
去年11月的时候接手了一个小型的后台系统,负责前端开发,团队经过研究选择了从来没有用过的 Ant Design,作为一门设计语言(什么是设计语言),如果我们此次项目使用 Ant Design 获得收益,我们以后所有的新的 To B 业务 (To B 业务具体指什么)将继续使用这门设计语言。
虽然说 Ant Design 是一门设计语言,但官方给我们提供了一套基于 Ant Design 开发出来的完整的 React UI 组件库,并且提供了一套完整的解决方案。
官方提供了一套 npm + webpack 的解决方案来辅助开发,主要工具也是阿里大神开发的 dva,dva 是一个基于 react 和 redux 的轻量应用框架,具体可参考项目实战。
在去年11月做项目的时候,dva 的版本还是 0.x,时至今日,已经升级到1.x,使用方法也不一样了。
这是本系列的第一篇文章,主要根据 dva 来搭建起目录结构。
dva 简介
可以查看 快速开始
dva 的数据流向
dva 在 v1.0 以后使用了 roadhog 来作为项目脚手架,用来负责管理本地开发服务以及项目编译等。
创建项目
使用 dva 创建一个初始项目,项目会自动创建一个 demo。
npm install -g dva-cli
mkdir demo && cd demo
dva init
代码目录结构
mocks Mock 数据存放的位置
public 静态页面存放的位置
src 代码目录assets 资源目录,一些通用的 css/images
components 对应的是 dva 里面的 Component。
models 对应的是 dva 里面的 Model。
routes 是各个页面的入口,这里来引用功能所需的组件。
services 里面定义一些基础服务,比如 API 请求、错误处理、事件系统、弹窗提醒等服务。
utils 存放一些工具方法或类
.roadhogrc roadhog的配置文件。
.roadhogrc.mock.js 管理 Mock 数据的地方
拿我大学在的社团鲁大学生网的最新版 Android App 举例
首先分析一下功能:
暂时先看我截图的几个内容
首页
成绩查询
小e快报
二手市场
失物招领
心语墙
求助
抛去首页和成绩查询外,其它功能都有列表页和详情页。其实都是可以抽象化成文章的发布和展示(这里我并没有截图发布相关的页面)。
Model
如果使用面向对象模式,我可能会创建一个文章的模型,不同的功能都来继承这个模型,添加不同的属性和方法。
但现在看来只是一些简简单单的数据展示,每条数据没有太多需要用户操作的地方,我们可以使用 dva 提供给我们的 Model 来实现数据的展示和更新。
看起来我们不仅仅是需要这些内容,有些文章是可以评论的,我们是否需要一个评论的 Model 呢?
那我们可以看一下具体需要哪些 Model 了
Route
Model 搞定了,我们开始创建 Route。
其实这里的 Route 也是一个 Component,只不过是用来为不同的功能引用不用的 Component 的中转站,用来提供给 router.js 文件当做功能入口的。
如果我们每个功能的页面都要创建一个 Router 的话,我们可能会创建很多。我们可以通过需要展示的文章类型来创建 Route。
所以我把所有类似文章类型的列表使用一个 Route,然后在 Route 里面来根据类型引用不同的 Component。
另外还需要一个首页。
备注:所有的 Component 我们都用大驼峰的命名方法命名,与里面的 React 组件名称保持一直。
Component
Router 的内容不是很多,只有 3 个文件,感觉很薄,主要还是要在Component这里了。
Component 这边主要是根据业务来提供一些展示数据用的组件。
回想一下刚刚网站上的一些功能,总结我们需要的模块:
首页
首页只是一个九宫格,只是一些简单的页面,不需要什么逻辑。
文章类页面
这里要考虑文章的类型,是把文章按照类型分成不同的 Component,还是统统使用一个 Component 呢?
从文章列表来看,这四种文章的页面展示都不太一样,内容也不太一样,那难道我们真的是要每种文章类型使用不同的 Component 吗?
好吧,我们看一下有哪些比较通用的部分吧,既然不能在这文章类型一层进行统一,那我们看看里面会不会有重复的东西。
可以发现,把 用户信息(头像+名字+时间) 提取出来当做一个 Component,仔细观察,发现还有文章的浏览次数和评论的展示部分,评论也可以抽出来。
通用型
刚刚提到的
用户信息(头像+名字+时间)
浏览次数
评论
观察其它相关内容
右下角的 + 按钮
标题栏
搜索功能
创建文件
好吧,先整理这些,为这些 Component 创建目录和文件
我们把强业务相关的放在 bussiness 文件夹内,通用的放在 common 里。
helps 里的 Arc.js/List.js 分别代表文章页和列表页,其它文章类 component 也类似,less 文件分别是它们的样式文件。
Service
目前来说初期阶段,还没有太多的基础服务,在业务开发中,需要通用服务的地方会越来越多。
比如一定会需要一个服务来请求API,不管是使用 XMLHttpRequest 还是 Fetch。
未来可能还需要通用弹窗服务、通用错误服务,还会有更多贴近业务的服务。
Mock
建议每一个模块的mock文件分开写,这样不容易乱掉。
总结
举例的这个系统并不大,主要还是以数据展示为主,并没有特别多的数据操作和数据依赖关系以及数据处理相关的事务,所以实现起来还是相对简单。
这篇文章主要讲了目录结构的和组件的创建,还没有叙述如何连接使用,下篇文章将会连接 Route/Component/Model。
扫码关注w3ctech微信公众号