開發背景
爲了更快的開展日常的營銷活動，高效的整理各類活動的共性，對模板進行統一管理
功能模塊
- 權限管理
- 用戶管理
- 模塊管理
- 獎品管理
- 素材管理(背景,音樂,圖片)
開發技術棧
- 前端頁面基於jQuery & angular 實現
- 後端頁面信息基於ThinkPhp結構的PHP後臺服務器返回
- 後端活動業務信息基於SSH架構的java服務器返回
- mysql數據庫
代碼管理工具
svn
前端代碼目錄結構
|-- app
| |–(award,home,jurisdiction,material,member,message) 各模塊代碼
|-- commmon
| |-- css
| |–fonts
| |-- js
| |-- img
| |-- popup
|-- node_modules
|-- index.html
|-- login.html
前端開發方式
本地修改代碼 —> svn上傳 —> 測試網查看效果(後臺沒有允許跨域----手動捂臉)
管理後臺代碼架構簡介
管理後臺angular單頁應用的模式, 入口文件爲index.html. 所有功能模塊分離, 展示頁面放在app文件夾中; common/js文件夾是功能模塊的業務邏輯 , 其他爲靜態資源。
前端路由配置
|-- common\js\admin.js
Angular控制器
|-- common\js\admin.js
mainCtrl 主控制器
- 菜單效果控制
- 用戶登錄控制
- 模塊標籤管理
homeCtrl 主頁
- 統計用戶
administratorListCtrl 管理員列表
- 查找, 翻頁, 編輯, 刪除
- 超級管理員/管理員
addAdministratorCtrl 添加管理員
editAdministratorCtrl 編輯管理員
mailCtrl 站內信
administratorLogCtrl 管理員日誌
- 按條件查詢
- 查找, 翻頁, 刪除
- 時間控件
userTempListCtrl 用戶模板列表
templateListCtrl 模板列表
awardListCtrl 獎品列表
sysMessageCtrl 系統消息
backgroundCtrl 背景列表
picListCtrl 圖片列表
musicListCtrl 音樂列表
businessCtrl 商務合作
templateInformCtrl 模板舉報
- 按條件查詢
- 圖片縮放控制
- 修改時間控制
- 預覽活動信息
- 審覈&刪除模板
newMessageCtrl 創建系統消息
addBgCtrl 添加背景
addPicCtrl 添加圖片
addMusicCtrl 上傳音樂
外部js引入
|-- common\js
- angular.js
- angular-ui-router.js 路由配置
- datatime-picker.js 日期控件
- fileSaver.js 客戶端文件保存
- ngDialog.min.js angular彈出框
- ocLazyLoad.js angular模塊懶加載
- …(其餘請自行閱讀代碼)
遺留問題點
- 開發目錄與生產目錄沒有分離
- gulp解決緩存問題, 需要改gulp插件源代碼
待優化
- 本地無法訪問數據庫,前端開發效率低下
- admin.js代碼冗餘