# sa-admin

**Repository Path**: weikety/sa-admin

## Basic Information

- **Project Name**: sa-admin
- **Description**: 一个基于iframe的多窗口后台管理模板，点击进入演示地址
- **Primary Language**: JavaScript
- **License**: GPL-2.0
- **Default Branch**: master
- **Homepage**: http://sa-admin.dev33.cn
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 125
- **Created**: 2020-01-20
- **Last Updated**: 2025-04-11

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README


# sa-admin   

一个基于iframe的多窗口后台模板，演示地址：[http://sa-admin.dev33.cn](http://sa-admin.dev33.cn)

:kissing_closed_eyes:  :kissing_closed_eyes:  :kissing_closed_eyes:  :blush:  :blush:  :blush:  :heart:  :heart:  :heart: 

## 框架选型
+ JS引擎：[Vue @2.6.10](https://cn.vuejs.org/)
+ UI框架：[Element-UI @2.13.0](https://element.eleme.cn/#/zh-CN)
+ web弹层：[layer @3.1.1](http://layer.layui.com/)
+ 切页动画：[Swiper @4.5.0](https://www.swiper.com.cn/)
+ 即使以上几个框架你都没接触过，只要你认真阅读一遍文档说明，也可以快速上手本模板

## 功能
- 架构：基于iframe，无后台代码，纯html模板，可方便的适配任何后端语言
- 菜单：支持一、二、三级菜单，并开放一系列接口方便的使用js操作菜单
- 主题：目前保留五种主题：蓝色、绿色、白色、灰色、灰色-展开、pro钛合金、沉淀式黑蓝（切换主题时，可自动保存你的喜好，下次打开时仍然有效）
- 折叠：折叠或收缩菜单，并且监听窗口大小变化，在拉伸窗口时自动折叠或收缩菜单，自动响应式
- tabbar栏：
	- 卡片堆积：多卡片自动堆积，与菜单双向关联，切换tab卡时自动显示左侧菜单
	- 拖动手势：tab卡支持拖拽手势，上拖新窗口打开、下拽悬浮打开、左拽快速关闭
	- 右键菜单：在tab上右击，可以：刷新、复制、关闭、关闭其它、关闭所有、悬浮打开、新窗口打开、取消
	- 双击菜单：双击tabbar空白处，可以显示添加新tab窗口
	- 切换动画：集成swiper，滑动、淡入、方块、3D流、3D翻转，五种高大上切换动画，任你选择！
	- 开放接口：开放一系列api，助你方便的使用js操作tabbar栏，具体请查看集成文档
- 保留： 切换卡片时，可自动保留上个卡片的滚动条高度（目前没有见到其它任何一个模板做到这一点，或者说没有任何一个模板注意到这个细节功能点）
- 锚链：tab切换自动更改hash锚链，同时监听锚链改变tab，可灵活的用鼠标前后键切换tab窗口 （如不需要此功能可在初始化时关闭）
- 窗口：可在初始化时，设置是否显示tabbar栏，来控制它是多窗口还是单窗口，具体见使用文档
- 更新：功能不断更新中... 你有好的想法也可以告诉我，加群一起交流吧
- 文档：使用说明，见文档


## 疑问
##### vue、element-ui、layer我都没用过，可以用这个模板吗

首先你要明白，模板分为两部分（index.html框架与框架内的模板页）
如果你只使用index.html框架部分，可以不必掌握vue等技术，使用时甚至你都不用改动源码， 只重写几个属性函数就可以集成到你的项目中，
如果你要使用框架内的模板页，则需要对vue等框架有一定的了解
	
##### 为什么是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所有代码，尝试一下，相信我，你会爱上这种开发模式的

## QQ群
QQ交流群：[782974737 点击加入](https://jq.qq.com/?_wv=1027&k=5DHN5Ib)

## 截图

![截图](https://images.gitee.com/uploads/images/2019/0625/125144_cbbb1062_1766140.gif)
![截图](https://images.gitee.com/uploads/images/2020/0120/181456_fcb0bdb8_1766140.jpeg)
![截图](https://images.gitee.com/uploads/images/2020/0120/181529_25e33d4c_1766140.jpeg)
![截图](https://images.gitee.com/uploads/images/2020/0120/181558_5c219ceb_1766140.jpeg)

见演示说明地址