Welcome to sa-admin (iframe版) —— 一个多窗口后台模板,流畅、易上手、提高生产力 点我访问vue单页版
扫码加入QQ群交流
sa-admin (iframe版)

虽然已经用过不少优秀的后台模板,但是一直都感觉不尽完美,于是在经过激烈的思想斗争后,我决定牺牲五一假期,亲自做一个尝试一下, 一来正好给以后自己的项目中使用,二来也算是为开源界做一点自己的贡献吧


  • QQ群: 782974737 点击加入
  • 码云地址: https://gitee.com/sz6/sa-admin
  • GitHub地址: https://github.com/click33/sa-admin
  • 新增在线论坛: 点击打开,在线快速提交意见反馈(新)
  • 开源不易,求鼓励,给个star吧

技术选型
  • JS引擎:Vue @2.6.10
  • UI框架:Element-UI @2.13.0
  • web弹层:layer @3.1.1
  • 切页动画:Swiper @4.5.0
  • 图表引擎:ECharts @4.2.1
  • 富文本编辑器:wangEditor @3.1.1
  • 没了:占空
  • 以上几个框架即使你都没接触过,只要你阅读以下文档,也可以快速上手
功能介绍
- 架构:基于iframe,无后台代码,纯html模板,可方便的适配任何后端语言 - 菜单:支持一、二、三级菜单,并开放一系列接口方便的使用js操作菜单 - 主题:目前保留八种主题:蓝色、绿色、白色、灰色、灰色-展开、pro钛合金、沉淀式黑蓝、简约式灰蓝(切换主题时,可自动保存你的喜好,下次打开时仍然有效) - 折叠:折叠或收缩菜单,并且监听窗口大小变化,在拉伸窗口时自动折叠或收缩菜单,自动响应式 - tabbar栏: - 卡片堆积:多卡片自动堆积,与菜单双向关联,切换tab卡时自动显示左侧菜单 - 拖动手势:tab卡支持拖拽手势,上拖新窗口打开、下拽悬浮打开、左拽快速关闭 - 右键菜单:在tab上右击,可以:刷新、复制、关闭、关闭其它、关闭所有、悬浮打开、新窗口打开、取消 - 双击菜单:双击tabbar空白处,可以显示添加新tab窗口 - 切换动画:集成swiper,滑动、淡入、方块、3D流、3D翻转,五种高大上切换动画,任你选择! - 开放接口:开放一系列api,助你方便的使用js操作tabbar栏,具体请查看集成文档 - 保留: 切换卡片时,可自动保留上个卡片的滚动条高度(目前没有见到其它任何一个模板做到这一点,或者说没有任何一个模板注意到这个细节功能点) - 锚链:tab切换自动更改hash锚链,同时监听锚链改变tab,可灵活的用鼠标前后键切换tab窗口 (如不需要此功能可在初始化时关闭) - 窗口:可在初始化时,设置是否显示tabbar栏,来控制它是多窗口还是单窗口,具体见使用文档 - 更新:功能不断更新中... 你有好的想法也可以告诉我,加群一起交流吧 - 文档:使用说明,见文档
  • 窗口模式测试: 多窗口模式 单窗口模式

  • 疑问
    #### 1、sa-admin的优点? - 上手简单:提供完整彻底的封装,不用修改一行源代码即可轻松集成 - 示例全面:提供大量常见增删改查示例,提高你的生产力
    #### 2、vue、element-ui、layer我都没用过,可以用这个模板吗 - 首先你要明白,模板分为两部分(index.html框架与框架内的模板页) - 如果你只使用index.html框架部分,可以不必掌握vue等技术,使用时甚至你都不用改动源码, 只重写几个属性函数就可以集成到你的项目中, - 如果你要使用框架内的模板页,则需要对vue等框架有一定的了解
    #### 3、为什么是iframe,而不是SPA - 现在前端开发比较主流的三种方式:服务器渲染、前后端分离、SPA + 服务器渲染:类似于jsp、asp、php等所有借助后端语言渲染视图的技术,这也是比较传统的一种方式 + 前后端分离:脱离后端语言,只写html,就像是在写一个静态站,与服务器的交互全部走ajax + SPA:在前后端分离的基础上更进一步,借助gulp、webpack等构件工具将项目打包成单页应用的一种方式 **本模板** 正是采用的第2种方式(so:本模板可能无法满足重度SPA患者) 1. 前后端分离,让我们脱离了后端语言的@include指令,不用为了代码的模块化再到处搜索xx技术如何热更新代码 2. 不使用webpack、gulp等构建工具也可以写代码,不必再费尽心机搭建一个代码编译环境 3. 网站头部底部等公共部分代码的复用是我们使用构建工具的主要目的,但是我们借助iframe标签,轻松巧妙的化解了这个难题,借助iframe, 让网站成为一个真正意义上的多窗口应用 (大多数服务器渲染方式每次切换窗口会造成窗口刷新,SPA将代码都塞到了一个页面中的方式使得我们写代码时变得瞻前顾后) 4. 返璞归真,像写静态站一样来写后台,一个html编辑器就可以强Lu所有代码,尝试一下,相信我,你会爱上这种开发模式的

    添砖加瓦
    #### 1、我有好的想法,如何为项目贡献代码? 1. 在github上fork一份到自己的仓库 2. clone自己的仓库到本地电脑 3. 在本地电脑修改、commit、push 4. 提交pr(点击:New Pull Request)(提交pr前请保证自己fork的仓库是最新版本,如若不是先强制更新一下) 5. 等待合并 #### 2、建议贡献的地方 - 更多登录模板 - 修复源码现有bug,或增加新的实用功能(比如:流畅的tab左右拖拽排序) - 更多demo示例:比如针对element-ui一些复杂组件的示例,或者其它一些常见js库的集成使用 - 如果更新实用功能,可在文档友情链接处留下自己的推广链接

    更新日志
    • 版本 v2.3.7   2020-04-18
    • 新增:首页增加懒加载功能

    • 版本 v2.3.6   2020-04-17
    • 优化:部分样式

    • 版本 v2.3.5   2020-04-17
    • 优化:部分模板页样式
    • 更换:更换堆表单方式为c-item

    • 版本 v2.3.4   2020-03-05
    • 去除:tab双击刷新

    • 版本 v2.3.3   2020-03-02
    • 新增:tab双击刷新

    • 版本 v2.3.2   2020-3-1
    • 新增:初始加载loading图标
    • 新增:函数菜单(点击菜单执行一个函数)
    • 更新:my-code.js重命名为sa-code.js

    • 版本 v2.3.1   2020-2-29
    • 修复:部分bug
    • 上线:vue单页版上线,传送门:http://sa-vue-admin.dev33.cn/

    • 版本 v2.3.0   2020-2-25
    • 优化:改变部分文件夹结构

    • 版本 v2.2.6   2020-2-17
    • 新增:新增主题:简约式灰蓝

    • 版本 v2.2.5   2020-2-14
    • 新增:新增在线论坛:点击打开,在线提交意见反馈(新)

    • 版本 v2.2.4   2020-2-13
    • 优化:优化整体样式
    • 优化:loading加载框的样式
    • 增加:tab悬浮打开的z-index自动切换功能

    • 版本 v2.2.3   2020-2-9
    • 增加:增加底部按钮式的弹窗示例

    • 版本 v2.2.2   2020-2-7
    • 增加:增加弹出式修改的示例
    • 增加:增加窗口之间通信的方法,详细请查看集成文档
    • 完善:完善readme.md

    • 版本 v2.2.1   2020-1-31
    • 修复:替换掉所有bootcss的cdn,因为它太不稳定了,三天一小瘫,五天一大瘫

    • 版本 v2.2.0   2020-1-20
    • 集成:集成鉴权功能,详细请查看文档
    • 新增:新增大量模板示例,可帮助你快速增删改查
    • 修复:在边缘处右键菜单文字变形的bug
    • 重构:改了一下首页样式
    • 优化:将element-ui版本更换至了 2.13.0

    • 版本 v2.1.2   2020-1-18
    • 修复:修复登录页鼠标不能与背景粒子交互的bug
    • 优化:右键关闭其它和关闭全部时,首先滑到做左边,动画更直观

    • 版本 v2.1.0   2020-1-17
    • 新增:更换了登录页
    • 新增:右键菜单新增复制按钮,可直接复制一个tab在新窗口打开
    • 新增:右键菜单新增折叠关闭动画,失去焦点时和点击取消时,菜单以折叠动画的方式关闭
    • 新增:右键菜单新增盒子阴影,更有立体感
    • 新增:新增主题:pro钛合金、沉淀式黑蓝
    • 修复:切换tab时,不能自动滑动的bug
    • 重构:重新设置了UI样式,详细参考模板示例
    • 注意:表格内操作按钮类样式 .c-button 换成了 .c-btn
    • 重构:修改了sa.js,取消$util对象,所有有关$util的函数全部移到sa对象上,
    • 注意:原调用方式sa.$util.getUrlArgs('id') 现改为:sa.p('id')

    • 版本 v2.0.2   2020-1-15
    • 修复bug:tab卡文字向上偏移了1px的问题

    • 版本 v2.0.1   2020-1-14
    • 修复bug:在方块、3D流、3D翻转切换效果下,tab切换错乱的bug
    • 修复bug:iframe的url发生改变后,刷新按钮刷新为旧地址的bug

    • 版本 v2.0.0   2020-1-13
    • 新增:卡片右击菜单弹出动画
    • 新增:tab右键菜单动画
    • 新增:新增tab关闭动画, 在关闭tab、右键关闭其它、关闭全部时有了更流畅的体验
    • 新增:tab选项卡拖拽效果,上拽新窗口打开,下拽悬浮打开,左拽关闭,在tab处拖拽一下体验一下吧
    • 新增:在tab栏空白处,双击:可以打开添加新tab操作弹窗
    • 新增:增加单窗口与多窗口切换功能(在初始化模板时,增加is_show_tabbar配置项)
    • 新增:增加记住上一次最后打开的窗口功能,刷新也可以记住窗口(在初始化模板时,增加is_reme_open配置项)
    • 新增: hash链接跳转功能,可灵活的用鼠标前后键切换tab窗口
    • 新增:便签功能,可以方便的保存一些临时数据
    • 修复bug:首页114行有个重复的class
    • 修复bug:版本号打印不对
    • 修复bug:首页homePage的url配置无效
    • 因为项目紧迫,这个版本拖了三个月,积攒了不少更新点,也算是憋了一个大招, 大家有什么意见或者想要添加功能,可以加入qq群尽情提出来,我只要有时间,一定第一时间更新

    • 版本 v1.1.4   2019-10-17
    • 重写了一下简介
    • 优化主题样式

    • 版本 v1.1.3   2019-9-3
    • 更改初始化方式
    • 优化UI样式
    • 增加新主题:灰色-展开

    • 版本 v1.1.2   2019-7-16
    • 增加右键菜单的失去焦点事件,失去焦点自动消失

    • 版本 v1.1.1   2019-6-26
    • 优化卡片切换动画,更流畅了,并且添加loading图标,视觉上更加顺畅
    • 新增悬浮窗口功能,在卡片标题处右击试试吧
    • 更换登录模板页,更漂亮了

    • 版本 v1.1.0   2019-6-24
    • 修复bug:鼠标悬浮tab-title时,偶尔动画混乱的bug
    • 修复bug:优化折叠动画,更流畅了
    • 集成swiper,窗口切换,更加高大上了

    • 版本 v1.0.8   2019-5-28
    • 修复bug:菜单折叠时,菜单项箭头仍然显示的问题
    • 修复bug:在手机端菜单折叠时,右侧信息排版发生混乱的问题
    • 调整了一下字体大小,看着更顺眼了

    • 版本 v1.0.7   2019-5-25
    • 优化一些动画效果
    • 增加模板页:轮播图管理
    • 一些样式优化

    • 版本 v1.0.6   2019-5-22
    • 添加了菜单预览模板(tree树)
    • 修复bug:菜单分配权限时,父子级不关联的问题
    • 一些样式优化

    • 版本 v1.0.5   2019-5-18
    • 添加了权限中心模板(tree权限树)
    • 优化用户列表模板,弹出式的修改
    • 一些其它样式优化

    • 版本 v1.0.4   2019-5-15
    • 优化折叠动画,避免文字闪动现象
    • sp.setMenuList();接口增加show_list参数,可灵活控制部分菜单的显示与隐藏
    • 一些样式优化

    • 版本 v1.0.2   2019-5-14
    • 添加文章管理模板(wangEditor富文本编辑器)
    • 改写了表格里按钮的样式,更鲜艳,增加点击感
    • 菜单列表里可以指定is_show=false,使菜单成为隐藏菜单
    • 重写了一些接口,可以更加方便的与你的系统集成

    • 版本 v1.0.1   2019-5-5
    • 修复周日显示周0的bug
    • 主题更换时高亮显示,方便区分
    • 增加三级菜单支持

    • 版本 v1.0.0   2019-5-2
    • 第一个版本出炉
    • 功能持续更新中...