# ace-admin-spa **Repository Path**: udeplatform/ace-admin-spa ## Basic Information - **Project Name**: ace-admin-spa - **Description**: 基于Ace Admin的单页面响应式后台管理系统,适合后端程序员使用,支持IE8 - **Primary Language**: JavaScript - **License**: MIT - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 4 - **Created**: 2022-08-08 - **Last Updated**: 2022-08-08 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README

Ace Admin SPA

# 简介 基于Boostrap Ace Admin的单页面响应式后台管理前端系统,适合后端程序员或者没有时间学习新的前端框架的人员使用,减少学习成本,拿来即用。 涉及技术栈: - bootstrap ui样式 - jquery js库 - q.js 前端单页路由 - art-template 前端模版引擎 - require.js 前端模块化 - bower 前端依赖库管理 - gulp 打包构建 # [在线Demo](https://jkanon.github.io/ace-admin-spa/index.html) 用户名/密码随意填
可操作增删改,刷新页面之后恢复初始状态 # 截图 ![](https://s2.ax1x.com/2019/11/02/KL0buT.png) ![](https://s2.ax1x.com/2019/11/15/MdxWaF.png) ![](https://s2.ax1x.com/2019/11/19/McrM5V.png) ![](https://s2.ax1x.com/2019/11/15/MdzBdO.png) # 特性 - 前端路由 - SPA单页面应用 - 前后端分离 - 模块按需加载。引入RequireJS在网页端动态加载 - 运行时前端模版引擎渲染 - 对datatables,表单等进行了大量封装,简单易用 - 引入layer,zTree等第三方插件,并进行了本地化改造,统一UI接口 - 支持数据接口模拟,前后端联调时可以无缝对接。支持纯前端模拟和本地服务模拟两种方式 - 支持接口转发,便于联调 - 支持ace的所有样式,具体可参考[Ace](http://ace.jeka.by/) # 使用 - 准备工作 - 安装[nodejs](https://nodejs.org/en/) - 安装gulp命令行工具 `npm install -g gulp-cli` - 安装依赖库 在项目根目录下执行`npm install` - 开发 ```bash # 开启本地数据模拟 $ npm start # 禁用本地数据模拟,改用代理转发接口到后台服务器 # 目前转发地址请修改app.js中的proxyOption.target字段 $ npm run start:no-mock ``` - 部署 ```bash $ npm run build // 然后直接把dist中的目标文件丢到生产环境中去 ``` # 开发指南 ### 总体流程 - 定义路由,修改`mock/modules/menus.js`中的`menus`变量 - 每个子页面由同名的`html`和`js`组成 - 在[src/views/inner](src/views/inner)中添加路由对应的子页面html文件 - 在[src/assets/js/inner](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/modules)下 - Mock数据文件主要声明需要模拟的接口地址,请求方法,返回的数据 ### html公用模版引入 - 在`html`文件中支持`@@include`函数引入公共`html模版` - 约定引用的模块文件存放目录为[src/views/template](src/views/template) - 公共模块文件将在打包构建的时候引入到目标文件中去 ### IE8 如果需要兼容`IE8`,请避免使用`IE8`的关键字。如`delete`, `class`, `default`, `switch`等
本系统也没能避开关键字的坑,因此遗留着部分`IE8`的关键字,使用的时候请通过字符串下标的方式进行引用。 # 支持环境 IE8以上及现代浏览器。 | [IE / Edge](http://godban.github.io/browsers-support-badges/)
IE / Edge | [Firefox](http://godban.github.io/browsers-support-badges/)
Firefox | [Chrome](http://godban.github.io/browsers-support-badges/)
Chrome | [Safari](http://godban.github.io/browsers-support-badges/)
Safari | [Opera](http://godban.github.io/browsers-support-badges/)
Opera | | --- | --- | --- | --- | --- | | IE8, Edge | latest version | latest version | latest version | latest version | # 最后 欢迎大家来访 [![](https://img.shields.io/badge/%E7%AE%80-%40Jkanon-orange)](https://www.jianshu.com/u/53671b43e905) [![](https://img.shields.io/badge/%E7%A0%81%E4%BA%91-@Jkanon-C5212A)](https://gitee.com/Jkanon) [![](https://img.shields.io/badge/Github-@Jkanon-25292E.svg)](https://github.com/Jkanon)