使用飞冰+dva快速构建一个后台系统
写在前面
最近我们接到这样一个需求，要写一个后台管理系统，时间很急，产品也只是给出了原型稿，把功能陈列了一下，给出的要求就是先注重功能，用起来再去考虑美化。但是作为前端，我们怎么能就这样满足呢，也是前一阵刚刚了解到了飞冰，于是大家一起商量了一下决定采用飞冰来搭建这套系统。这篇也就是当作记录这段时间使用飞冰的一些心得和遇到的一些坑。
介绍一下
先介绍一下飞冰，先从先上上提出几个关键词，阿里开源，快速搭建，提高开发效率，丰富的物料体系，其目的就是快速搭建起一个面向中后台的管理系统，其中丰富的模板及区块可以省去开发者大量的时间，将精力主要集中于逻辑层。然后是，基于redux和redux-saga的数据流方案，本片文章不会对dva进行过多的介绍，不过我还是很推荐大家去学习一下dva的，接下来，跟我一步一步的快速搭建起来一个管理系统。
iceworks
iceworks是ice推出的辅助开发者快速开发中后台前端应用的GUI软件，。 你可以通过这个GUI软件建立你的项目，修改、增加页面，打包项目。
新建项目
新建项目，首先第一步是选择模板，我们可以看到飞冰现在为我们提供了近50个模板，其中包括飞冰（React），小程序，Vue，Angular项目模板，现在先选择一个模板，这里我选择的是ICE Application Management这套模板。好的，模板选择好了之后，点击使用该模板，然后就可以看到我们的项目在快速的安装当中了。
引入dva
接下来，先不去讨论目录结构，我们开始引入dva。
- 安装dva 直接在iceworks中点击添加依赖即可。
- 启动dva 将src文件夹中的index.js修改成这样。
import Dva from 'dva';// 载入默认全局样式 normalize 、.clearfix 和一些 mixin 方法等import '@icedesign/base/reset.scss';import router from './router';// 创建dva实例const app = new Dva();// 引入路由app.router(router);// 启动项目app.start('#ice-container');复制代码 然后router.js文件也需要做一点点修改
// 引入位置修改import { HashRouter as Router, Switch, Route } from 'dva/router';// 将默认导出修改export default ({ history }) => {routeChildren} ;复制代码 这样我们已经将dva成功引入了，这是第一步，然后就是引入model和Container Component。 新建models文件夹，然后在里面写入dva的model文件，具体model怎么定义可以。 然后在我们需要的组件中对应的index.js中通过dva的connect连接model。
新增页面
新增页面的时候我们需要做的事情就很简单了
- 点击新建页面，选择需要的区块。比如一个简单的可过滤的列表页。
- 选择好区块后，我们可以先预览一下效果。确定后就可以点击生成页面了。
- 然后在models中写入对应dva的model。
mock数据
开发中我们免不了要mock数据，飞冰已经为我们提供了完整的mock方案。
- 项目根目录下面创建mock/index.js文件。
- 怎么写mock数据
// mock/index.jsconst foo = require('./foo.json');const bar = require('./bar');module.exports = { // 同时支持 GET 和 POST '/api/users/1': foo, '/api/foo/bar': bar(), // 支持标准 HTTP 'GET /api/users': { users: [1, 2] }, 'DELETE /api/users': { users: [1, 2] }, // 支持自定义函数，API 参考 express4 'POST /api/users/create': (req, res) => { res.end('OK'); }, // 支持参数 'POST /api/users/:id': (req, res) => { const { id } = req.params; res.send({ id: id }); },};复制代码 配置导航及主题颜色
- 配置导航可以在menuConfig.js文件中进行修改
- 主题颜色在package.json中的themeConfig中进行修改
目录结构
所以我们整体的目录结构是这样的。
| -- components 头部及导航栏组件| -- layout 布局组件及公用样式写入这里| -- pages | -- Home | -- components 负责展示的区块组件文件 | -- Home.jsx | -- index.js 我们可以选择在这里来写入connect| -- models | -- common.js 公用的model，例如各种枚举数据，通用数据 | -- userInfo.js 各自的model| -- services api接口| -- utils 工具方法| -- index.js 入口文件| -- menuConfig.js 顶部及侧部导航栏配置| -- router.jsx 导出路由组件| -- routerConfig.js 路由配置复制代码
表单
表单类组件推荐使用@icedesign/base中的Form及Field，这里跟官网推荐的完全相反，原因是我发现用官方推荐的formBinder的话，获取数据真的难，而form和field的组合更加简单、易用。
最后
这篇文章对于飞冰的介绍没有太多深入，只是简单介绍了一下怎么使用，算是一篇推荐软文？？？？ 飞冰的 我觉得如果大家如果遇到这样的项目，不妨试用一下飞冰，你可以产品和UI来选择页面、区块，甚至可以让他自己把页面搭起来，然后我们来完成功能就好了，这样岂不美哉？好了，就这样。?