1.技術(shù)選型
雖然ERP系統(tǒng)比較復(fù)雜竭翠，但是在視圖層基本上由許多相似的組件構(gòu)成分预，例如單據(jù)創(chuàng)建頁(yè)面、單據(jù)展示頁(yè)面等，所以基于這樣的因素我
選擇Angular4作為前端框架舒萎，將通用的頁(yè)面元素以組件的形式提供出來(lái)，并通過(guò)組件模板和數(shù)據(jù)來(lái)生成視圖頁(yè)面蹭沛。
后端采用springboot為基礎(chǔ)框架臂寝，并實(shí)現(xiàn)基礎(chǔ)的輸入輸出封裝，所有接口都是RESTful形式摊灭。數(shù)據(jù)庫(kù)采用mysql咆贬。
用到的技術(shù)列表如下：
* angular
* scss
* java
* springboot
* mysql
2.前后端框架搭建
前端框架主要是封裝了登錄驗(yàn)證和實(shí)現(xiàn)了主題切換功能，后端主要是封裝了請(qǐng)求輸入和響應(yīng)輸出帚呼。其中前端的主題切換功能主要是依
賴Angular的自定義指令來(lái)實(shí)現(xiàn)掏缎，首先在全局color.scss中定義一個(gè)主題map，每個(gè)key包含一組相應(yīng)主題的顏色變量萝挤，在全局scss文件
中通過(guò)循環(huán)map生成對(duì)應(yīng)主題的樣式御毅，例如：btn-xx-default（其中xx是為了不和其他第三方樣式?jīng)_突的名稱），然后通過(guò)DOM元素上的
主題指令替換樣式中指定的字符串實(shí)現(xiàn)樣式的切換怜珍。
關(guān)鍵代碼如下：
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[]) {
// 循環(huán)指令輸入列表
for (let i = 0; i < _themeClass.length; i++) {
// 替換themeClass指令輸入的class中的$app和$thm字符串端蛆，并返回相應(yīng)主題的class
// this.config可以獲取到當(dāng)前用戶選擇的主題配置
let tempClass = _themeClass[i]
.replace('$app', this.config.getAppName())
.replace('$thm', this.config.getTheme());
// 將主題class添加到dom對(duì)象上
this.el.classList.add(tempClass);
}
}
<div [themeClass]="['body-bg-$app-$thm'], ['div-$app-$thm']"> // 在標(biāo)簽上加入themeClass指令實(shí)現(xiàn)主題切換