第一步，技术选型和前后端框架搭建

1.技术选型

    虽然ERP系统比较复杂，但是在视图层基本上由许多相似的组件构成，例如单据创建页面、单据展示页面等，所以基于这样的因素我
选择Angular4作为前端框架，将通用的页面元素以组件的形式提供出来，并通过组件模板和数据来生成视图页面。
    后端采用springboot为基础框架，并实现基础的输入输出封装，所有接口都是RESTful形式。数据库采用mysql。
    用到的技术列表如下：
        * angular
        * scss
        * java
        * springboot
        * mysql

2.前后端框架搭建

    前端框架主要是封装了登录验证和实现了主题切换功能，后端主要是封装了请求输入和响应输出。其中前端的主题切换功能主要是依
赖Angular的自定义指令来实现，首先在全局color.scss中定义一个主题map，每个key包含一组相应主题的颜色变量，在全局scss文件
中通过循环map生成对应主题的样式，例如：btn-xx-default（其中xx是为了不和其他第三方样式冲突的名称），然后通过DOM元素上的
主题指令替换样式中指定的字符串实现样式的切换。

关键代码如下：

private el: HTMLElement;

@Input('themeClass')
set themeClass(_themeClass: string[]) {
    this.setThemeClass(_themeClass);
};

constructor(private _el: ElementRef, private r2: Renderer2, private config: AppConfig) {
    this.el = _el.nativeElement;
}

private setThemeClass(_themeClass: string[]) {
    // 循环指令输入列表
    for (let i = 0; i < _themeClass.length; i++) {
        // 替换themeClass指令输入的class中的$app和$thm字符串，并返回相应主题的class
        // this.config可以获取到当前用户选择的主题配置
        let tempClass = _themeClass[i]
                            .replace('$app', this.config.getAppName()) 
                            .replace('$thm', this.config.getTheme());

        // 将主题class添加到dom对象上
        this.el.classList.add(tempClass);
    }
}

<div [themeClass]="['body-bg-$app-$thm'], ['div-$app-$thm']"> // 在标签上加入themeClass指令实现主题切换