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指令实现主题切换