开发背景
为了更快的开展日常的营销活动，高效的整理各类活动的共性，对模板进行统一管理
功能模块
- 权限管理
- 用户管理
- 模块管理
- 奖品管理
- 素材管理(背景,音乐,图片)
开发技术栈
- 前端页面基于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代码冗余