飞冰 - Ice Design Pro 使用指南

写在前面:

目前在飞冰中,我们提供了 21 套模板(后续会持续的增加),可以在 Iceworks 的模板界面根据需求选择合适的模板进行初始化项目,然后基于区块快速搭建页面进行二次开发,减少各种环境配置和 UI 编写的时间,从而提高开发效率。

然而,这些模板或多或少都有各自的模板特征,基于不同的行业领域,其模板风格,布局方式也不尽相同,但主要都是 UI 为主。在模板中设计中,我们尽量保持模板的轻量,因为业务的定制性太强,很难覆盖到具体的场景。但在实际应用中,我们收到很多用户的反馈,UI 仅是开发中的一小步,目前 Iceworks 能有效的减少环境配置和 UI 编写的时间,但是接下来如何基于模板结合业务进行二次开发,比如数据方案,Mock 方案,权限方案等等一系列问题才是真正的关键问题所在。为此,我们推出了《Ice Design Pro 使用指南》,在 UI 模板的基础上,提供了 CRUD 示例、注册登录、 数据方案、Mock 实践、权限管理、到如何部署等等解决方案,提高模板的实用性和完善性。


快速了解

基于海量高质量可复用区块,通过 GUI 工具快速 搭建 的一套中后台模板。


功能

  • 注册登录
  • 权限管理
    • 登录授权
    • 菜单授权
    • 路由授权
  • Redux 集成
  • Mock 方案
  • CRUD 示例
  • Code Splitting
  • 国际化

技术点

  • ice-design
  • react
  • redux
  • redux-thunk
  • react-router-dom v4
  • axios
  • bizcharts
  • webpack v4
  • mock.js
  • etc...

页面

按照 Dashboard 综合页和 Block 分类进行展示

- 登录/注册
- Dashboard
- 图表页
  - 图表列表
- 表格页
  - 基础表格
  - 展示型表格
  - 表格列表
- 列表页
  - 文章列表
  - 卡片列表
  - 图文列表
- 内容页
  - 基础详情页
  - 条款协议页
  - 进度展示页
- 结果页
  - 成功
  - 失败
- 异常
  - 403 无权限
  - 404 找不到
  - 500 服务器出错
  - 内容为空

目录结构

ice-design-pro
├── build       // 打包资源
├── mock        // 模拟数据
├── public      // 静态资源
├── src
│   ├── api                 // 接口定义
│   ├── components          // 公共组件
│   ├── layouts             // 通用布局
│   ├── pages               // 页面
│   ├── store               // 全局 store
│   ├── utils               // 工具函数
│   ├── configureStore.js   // redux 入口配置
│   ├── reducers.js         // reducers 入口配置
│   ├── index.js            // 应用入口
│   ├── menuConfig          // 导航配置
│   ├── routerConfig        // 路由配置
│   └── router.jsx          // 路由配置
├── tests                   // 测试
├── .gitignore              // git 忽略目录配置
├── .editorconfig           // 代码风格配置
├── .eslintignore           // eslint 忽略目录配置
├── .eslintrc               // eslint 配置
├── package.json            // package.json
└── README.md               // 项目说明

使用

  1. (推荐) GUI 工具使用: 下载 iceworks 一键初始化

  2. CLI 命令使用:

$ npm start      // 启动预览服务器
$ npm run build  // 构建

文档


相关信息

本作品采用《CC 协议》,转载必须注明作者和本文链接
本帖由系统于 5年前 自动加精
《L03 构架 API 服务器》
你将学到如 RESTFul 设计风格、PostMan 的使用、OAuth 流程,JWT 概念及使用 和 API 开发相关的进阶知识。
《L02 从零构建论坛系统》
以构建论坛项目 LaraBBS 为线索,展开对 Laravel 框架的全面学习。应用程序架构思路贴近 Laravel 框架的设计哲学。
讨论数量: 2
xingchen

这玩意出现基本上就不用写后台了

5年前 评论

您好,根据权限配置教程在build.json进行权限配置后,为什么会出现白屏并提示Invalid hook call. 错误?请问有什么解决办法吗?

3年前 评论

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!