damo-boilerplate-console

管控台样板项目

---

开箱即用的管控台前端应用，搭配Damo框架和Antd组件库，完成前端管控台应用的开发与设计解决方案。 样板库项目可以访问在线地址体验一下

先前技术

1. React组件框架，构建应用界面所需的任何组件。可以通过Damo教程快速学习，地址
2. Antd组件库，提供应用构建最常用的React组件。
3. Damo应用框架，串通应用构建各个模块，让开发变得简单。

目录结构

File文件	Purpose用途
app.{jsx, less}	应用代码入口，把界面根容器挂到具体的页面DOM
scenes/index.{jsx, less}	应用界面中的容器组件
scenes/*/index.{jsx, less}	路由页面的容器组件。
models/*.js	描述状态数据的数据模型类
resources/*.js	接口资源文件
component/*/index.{jsx, less}	组件
index.html	应用启动html文件

随意搭配的布局

构建前端应用，换个角度说明，实际上是组合所有页面路由，不同的路由触达不同的视图，每个视图都可能需要先定义好布局，在填充页面功能。 而我们设计把布局和路由视图分开，任何路由视图只需要在定义的时候声明选择某种布局，在路由响应时会自动吧路由视图插入到指定布局中。

三大布局

1. 控制台布局 - consoleLayout 包括标准页头和左侧导航，空白区域填充路由视图。应用的例子，一般登陆后操作的详情页都在控制台布局中。

   

2. 落地页布局 - landingLayout

包括标准页尾，空白区域填充路由视图，并且整个内容页面居中显示。应用的例子有登陆、注册等会可选择落地页布局。

3. 内容页布局 - contentLayout

包括面包屑和标准页尾，控台区域填充视图。

实际上操作的详情页一般来说需要控制台布局搭配内容布局来完成。

布局使用

路由视图组件配置exenstion#layout属性，即可应用指定布局

这里RouteScene是一个路由视图（React组件）layout是一个数组，说明先把路由视图套在contentLayout，然后再整体套在consoleLayout下。

更多布局敬请期待

自动化的路由配置

scenes目录下的子目录都会自动扫描，并组装成路由。 比如scenes/test/index.jsx，通过自动化路由配置后，通过/test可以访问到该组件。而scenes/test/demo/index.jsx可以通过/test/demo 访问。

实际上样板库中已经帮你自动加载应用构建需要的模块。

1. 路由访问：scenes/ 目录下按照目录层级组合成路径，即可访问到具体的路由视图。
2. 获取路由配置：Damo.route('/test/demo')同样，通过目录层级组合成路径，可以获取到路由配置。