Ace Admin SPA

简介

基于Boostrap Ace Admin的单页面响应式后台管理前端系统，适合后端程序员或者没有时间学习新的前端框架的人员使用，减少学习成本，拿来即用。

涉及技术栈：

• bootstrap ui样式
• jquery js库
• q.js 前端单页路由
• art-template 前端模版引擎
• require.js 前端模块化
• bower 前端依赖库管理
• gulp 打包构建

在线Demo

用户名/密码随意填
可操作增删改，刷新页面之后恢复初始状态

截图

特性

• 前端路由
• SPA单页面应用
• 前后端分离
• 模块按需加载。引入RequireJS在网页端动态加载
• 运行时前端模版引擎渲染
• 对datatables，表单等进行了大量封装，简单易用
• 引入layer,zTree等第三方插件，并进行了本地化改造，统一UI接口
• 支持数据接口模拟，前后端联调时可以无缝对接。支持纯前端模拟和本地服务模拟两种方式
• 支持接口转发，便于联调
• 支持ace的所有样式，具体可参考Ace

使用

• 准备工作

  • 安装nodejs
  • 安装gulp命令行工具

  npm install -g gulp-cli

  • 安装依赖库

  在项目根目录下执行npm install

• 开发

# 开启本地数据模拟
$ npm start
# 禁用本地数据模拟，改用代理转发接口到后台服务器
# 目前转发地址请修改app.js中的proxyOption.target字段
$ npm run start:no-mock

• 部署

$ npm run build  // 然后直接把dist中的目标文件丢到生产环境中去

开发指南

总体流程

• 定义路由，修改mock/modules/menus.js中的menus变量
• 每个子页面由同名的html和js组成
• 在src/views/inner中添加路由对应的子页面html文件
• 在src/assets/js/inner中添加子页面同名的js文件
• js采用AMD规范的模块化加载方法。js文件通过define函数定义模块，同时可以声明依赖的其它模块
• 需在js中定义入口函数init，此函数将在js文件加载完成之后调用
• 模块化加载默认路径为assets/js，如果需要加载其它路径下的目录请填写相对路径

前后端交互

• 采用ajax交互
• 前后端token通过header中的X-Access-Token字段进行交互。有需要可在common.js中的ajax函数中修改
• 后端返回的json格式标准如下：

{
    success: boolean,  // 请求是否成功
    code: number,
    data: object,   // 返回的数据，ajax回调取到的值即为这个
    message: string // 错误提示
}

• 可以根据需要适配接口格式。请修改common.js中的appConfig["global"].response字段，支持嵌套格式。同时需要单独修改login.js文件。

数据模拟（Mock）

• Mock数据文件放在mock/modules下
• Mock数据文件主要声明需要模拟的接口地址，请求方法，返回的数据

html公用模版引入

• 在html文件中支持@@include函数引入公共html模版
• 约定引用的模块文件存放目录为src/views/template
• 公共模块文件将在打包构建的时候引入到目标文件中去

IE8

如果需要兼容IE8，请避免使用IE8的关键字。如delete, class, default, switch等
本系统也没能避开关键字的坑，因此遗留着部分IE8的关键字，使用的时候请通过字符串下标的方式进行引用。

支持环境

IE8以上及现代浏览器。

IE / Edge	Firefox	Chrome	Safari	Opera
IE8, Edge	latest version	latest version	latest version	latest version

最后

欢迎大家来访