# sa-admin **Repository Path**: xwn/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**: 1 - **Forks**: 126 - **Created**: 2020-05-04 - **Last Updated**: 2022-08-23 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # sa-admin 一个基于iframe的多窗口后台模板 ，演示地址：[http://sa-admin.dev33.cn](http://sa-admin.dev33.cn) ## 功能 + 架构：基于iframe，无后台代码，纯html模板，可以方便的适配任何后端语言 + 菜单：支持一、二、三级菜单 + 折叠： 可以折叠或收缩菜单，在窗口大小变化时也会自动监听根据窗口大小折叠或收缩菜单，自动响应式 + 卡片： 可自动堆积卡片，与菜单双向关联，在卡片标签右击可以：刷新、关闭、关闭其它、关闭所有、新窗口打开。 + 标题： 点击标题切换卡片时，可自动保留上个卡片的滚动条高度（目前没有见到其它任何一个模板做到这一点，或者说没有任何一个模板注意到这个细节功能点） + 切换： 滑动、淡入、方块、3D流、3D翻转、、五种高大上切换动画，任你选择！ + 主题：目前保留四种主题：深蓝、墨绿、银灰、黑绿结合（切换主题时，可自动保存你的喜好，下次打开时仍然有效） + 全屏：点击进入全屏/取消全屏 功能不断更新中... 你有好的想法也可以告诉我，加群一起交流吧 ## 框架选型 + JS引擎：[Vue @2.6.10](https://cn.vuejs.org/) + UI框架：[Element-UI @2.8.2](https://element.eleme.cn/#/zh-CN) + web弹层：[layer @3.1.1](http://layer.layui.com/) + 切页动画：[Swiper @4.5.0](https://www.swiper.com.cn/) + 即使以上几个框架你都没接触过，只要你认真阅读一遍文档说明，也可以快速上手本模板 ## 疑问 ##### 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/2019/0515/155507_a1589a57_1766140.png) ![截图](https://images.gitee.com/uploads/images/2019/0525/161705_14945683_1766140.png) ![截图](https://images.gitee.com/uploads/images/2019/0525/161700_a61c10c5_1766140.png) 见演示说明地址