Beer -- Angular2 后台管理框架

最近几个月，一直做车辆网的项目，我主要负责前台地图相关的开发，具体包括在地图上绘制车辆，绘制车辆轨迹，回放等。该项目用 SprintMVC + MyBatis + Redis 开发，在开发的过程中发现了几个问题：

• 后台与前台开发界限不是很清晰，前台使用 .JSP 页面，数据绑定有时候用后台绑定，有时候又在前台发请求绑定。

• 前台页面的重复工作太多，比如系统管理中有司机管理，车辆管理，车组管理等，这个模块都有一个共同点：

1. 相同的布局，页面分为上下两部分，上部分为查询区域，下部分为数据展示区域。所以每一个页面的网页代码基本一致。重复而枯燥。

2. 相同的功能，每一个系统管理模块中的功能无非是增删改查，虽然项目中已经有一个公共 JS 模块方法来承担这个操作，但是在页面上，仍然需要写 onclick , onsubmit 这些事件。没有做到完全的封装。

3. 每个页面布局一致，顶部菜单 + 左侧菜单 + 中心内容，问题是，现在切换每个页面都是整页刷新。而且现在的 JS,CSS 文件都没有做压缩合并，导致了每次切换页面都需要等 1，2 秒，作为一个前端工程师实在看去下去。这属于架构问题。说到这个问题，得从长计议。当时时间节点比较紧张，项目组采取人海战术，每个人负责几个页面，然后复制粘贴，就成现在这个样子了。（其实刚开始我是建议用 DIV + GET 的方法来模拟 iframe 的效果的。）

4. 包括地图监控页面（我负责的页面），也是同样的问题，虽然地图打点等功能我已经封装了，在具体的页面直接调用方法就可以了，但是前台页面并没有完全的公用，要引用 baidu API 的脚本、要创建一个 DIV 标签，用来承载地图，还要初始化地图。。。 说到底，这些问题都可以归结为一个问题，没有做到模块化。

在之前发现这些问题的同时，我也考虑过使用组件化开发可能会解决。不过现成的框架并没有完全能够解决我的问题，要么就是有一些缺陷。因为我理想的框架是这样的：

• 组件化开发，包括一些容器组件

• 按需加载

• 页面路由

• 异步加载机制，很多框架不能同时做到异步加载和按需加载，除非做一些复杂的配置（类似 Vue.JS）

套用一句广告词，直到我发现了 Angular 2…更确切的说，直到 Angular 2 的正式版发布。

可以说，Angular 2 完全能够满足我的需求。 Angular 2 已经原生支持按需加载（依赖注入）和异步加载，组件化开发功能，当然，这套框架我不能直接拿到项目中使用，我需要在 Angular2 上面再做一层封装。目的是让业务开发人员尽可能的少写，少写，少写代码。

所以，我利用空闲时间写了一套后台管理框架，Beer。基于 Angular 2，最核心的几个组件如下：

Layout 用于页面的框架布局，也是容器组件，组装了三个子组件: Header , SideMenu, router-outlet(Content)。

SideMenu 左侧菜单组件，是 Layout 的子组件，与 Content 组件互动，点击菜单，Content 显示相关的页面。

Header 顶部菜单。

router-outlet(Content) 页面展示区域。与 SideMenu 组件互动，点击菜单，SideMenu显示相关的页面。

Map 我最爱的组件，封装了地图显示，打点，轨迹回放等功能，想一想，只需要在页面中插入 <map></map> 标记，一个完完整整的地图就会出现，是多么神奇。

Manage 管理模块页面的容器组件，该组件高度封装了管理页面的公共部分和逻辑代码的公共部分。Manage 组件能让管理页面完全比用写不必要的代码，举个例子：比如司机管理的代码，这样写就可以了：

脚本部分：

@Component({
    selector: <span class="hljs-string">'driver-editor'</span>,
    templateUrl: <span class="hljs-string">'./app/system/driver/editor.component.html'</span>
})

最终效果

该框架现在刚刚起步开发，很多功能还需要完善和开发。目前做的这些功能是一个攻坚过程，攻坚的结果是，所有的技术点都已经解决，完完全全可以用 Beer 做一个车联网的后台项目。

但是一个人的能力有限，为了让这个框架发展更好，我特别欢迎其他 dev 参与开发：
https://git.oschina.net/scaperow/Beer.git