使用飞冰+dva快速构建一个后台系统

使用飞冰+dva快速构建一个后台系统

写在前面

最近我们接到这样一个需求，要写一个后台管理系统，时间很急，产品也只是给出了原型稿，把功能陈列了一下，给出的要求就是先注重功能，用起来再去考虑美化。但是作为前端，我们怎么能就这样满足呢，也是前一阵刚刚了解到了飞冰，于是大家一起商量了一下决定采用飞冰来搭建这套系统。这篇也就是当作记录这段时间使用飞冰的一些心得和遇到的一些坑。

介绍一下

先介绍一下飞冰，先从先上官网文档上提出几个关键词，阿里开源，快速搭建，提高开发效率，丰富的物料体系，其目的就是快速搭建起一个面向中后台的管理系统，其中丰富的模板及区块可以省去开发者大量的时间，将精力主要集中于逻辑层。然后是dva，基于redux和redux-saga的数据流方案，本片文章不会对dva进行过多的介绍，不过我还是很推荐大家去学习一下dva的，接下来，跟我一步一步的快速搭建起来一个管理系统。

iceworks

iceworks是ice推出的辅助开发者快速开发中后台前端应用的GUI软件，下载地址。 你可以通过这个GUI软件建立你的项目，修改、增加页面，打包项目。

新建项目

新建项目，首先第一步是选择模板，我们可以看到飞冰现在为我们提供了近50个模板，其中包括飞冰（React），小程序，Vue，Angular项目模板，现在先选择一个模板，这里我选择的是ICE Application Management这套模板。好的，模板选择好了之后，点击使用该模板，然后就可以看到我们的项目在快速的安装当中了。

安装完成之后，点击启动调试服务，启动成功后，在本地4444端口，就可以访问到我们的这个项目了。

引入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 }) => <Router history={history}>{routeChildren}</Router>;
复制代码

这样我们已经将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.js
const 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来选择页面、区块，甚至可以让他自己把页面搭起来，然后我们来完成功能就好了，这样岂不美哉？好了，就这样。?