# webpack-tabs-admin

**Repository Path**: maqzh/webpack-tabs-admin

## Basic Information

- **Project Name**: webpack-tabs-admin
- **Description**: webpack做的多页签脚手架，页签内容为iframe，依赖layui、font-awesome。纯净版只提供打包和页面框架，开发时可根据需要集成vue/react等生态内容。需要的朋友欢迎关注，会陆陆续续添加新的通用功能。
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: http://madmin.kingwn.com
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 2
- **Created**: 2020-03-25
- **Last Updated**: 2023-04-10

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

### 在线预览
http://madmin.kingwn.com/

# webpack多页签应用（tabs-admin）
```
1、为什么要做多页面应用
    .后台管理项目页面通常都很多，单页面文件会越来越大，加载慢

    .单页面做多页签项目，会导致串数据的问题，如打开两个项目页数据就导致数据错乱

    .不易于动态添加功能模块，不方便集成第三方应用
    
    .操作不顺畅，卡顿

2、为什么用webpack来开发多页面应用
    .可以使用很多现成的loader、plugin来管理、打包、调试页面

    .可以用ES6、ts来写，打包会自动转换（一直用layuiadmin开发项目，只要脚本里写有es6的东西，gulp打包就过不去）
```

## 关于本项目
    1、打包配置放到build/webpack.base.config.js文件

    2、纯净版只集成layui、font-awesome，并删除所有无关页面，只留登录、框架页（index.html）、首页(home.html)、404页、基本信息页、修改密码页，不集成vue/react/angular等东西，需要可以自己安装。

    3、三年前开始用贤心大神写的layuiadmin来做项目，至今已做了有5个，功能很强大，但js文件内es6语法不能用，只要一用编译就过不了，引入babel也不行，经常是只能直接拷贝代码到服务器上。

    4、刚开始基于layuimini来集成webpack，但想把样式改为less类型，尝试修改了一天，最后只能放弃，虽然有提供主题切换，但还是觉得不够方便。

    5、用过aceAdmin、layuiadmin、vue-element-admin、jqadmin，也看过如x-admin、layuimini等，都觉得不太适合自己，所以自己搞了一套，只包含骨架和基本配置。

```
简洁，致力于提供简洁而不简单的前端框架，只提供后台管理框架通常必要的页面及操作接口
灵活，框架只使用layui和font-awesome（方便菜单选择多种图标），内部页面可使用自己熟悉的技术体系
方便，添加的页面只要存放的路径符合目录结构约定，就自动加入调试/编译/打包（自动扫描page及其子目录下的js和html文件）
```

## 效果图
### 却换框架
![image text](https://gitee.com/maqzh/webpack-tabs-admin/raw/master/demo/demo.gif)
### 切换语言
![image text](https://gitee.com/maqzh/webpack-tabs-admin/raw/master/demo/switchLanguage.gif)
### 纯净版（pure分支）
![image text](https://gitee.com/maqzh/webpack-tabs-admin/raw/master/demo/pure.jpg)
### element UI+Vue版（element分支）
![image text](https://gitee.com/maqzh/webpack-tabs-admin/raw/master/demo/elementUI.jpg)
### antd + react版（antd分支）
![image text](https://gitee.com/maqzh/webpack-tabs-admin/raw/master/demo/antd.jpg)

## 相关页面

| 名称 | 文件名 | 说明 |
| :---- | :---- | :---- |
| 框架页 | index.html | 页面框架，引用layui和font-awesome，引入layout.less(布局样式)和theme.less(主题样式) |
| 登录页 | login.html | 直接拿layuimini的登录页，把css改为less语法 |
| 主页 | home.html | pure(纯净版)没有内容，element版参照layuimini主页样式，基于elementUI+vue做范例，antd版则引入antd+react做了个日期选择控件。 |
| 设置页 | system/setting.html | 设置主题及框架布局方式 |
| 基本资料页 | user/setting.html | 直接引入配置文件(config.js)调用closeTab()方法，关闭当前页 |
| 修改密码页 | password.html | 与基本资料页相同 |
| 404页 | 404.html | 在对应的less和js文件分别以less的loop循环方法定义主题样式，框架修改主题、布局时如何响应的使用范例 |

```
放在page目录下的文件，调试、打包时webpack都会自动扫描到
新建时需要重新启动webpack调试才可以，不然新建页面没效果
```

## 关于公共接口

| 名称 | 说明 | 备注 |
| :---- | :---- | :---- |
| getQueryString | 获取url参数值 | 如：getQueryString('token') |
| getSessionData | 获取框架存在sessionStorage的值 | 如不用过接口直接获取，需要先根据setter.store.tableName拿到值后，转为json后再根据key拿值 |
| setSessionData | 将值存到sessionStorage中 | 一般用于存token等临时数据，关闭浏览器后失效 |
| getData | 获取框架存在localStorage的值 | 同getSessionData类似 |
| setData | 将值存到localStorage中 | 一般存储主题、布局方式、用户名等，重新打开系统还能拿到数据 |
| getToken | 获取token值 | 等价于getSessionData(setter.store.token)，以url参数形式传的token值也可以拿到 |
| getTheme | 获取主题 | 默认拿blue |
| getLang | 获取语言 | 默认navigator.language 或 navigator.userLanguage |
| openTab | 打开tab页 | 如跨域，需参照方法内消息发送格式打开tab页 |
| closeTab | 关闭tab页 | 参数type: self = 关闭当前页，other = 关闭其他页（除不允许关闭页外）， all = 关闭所有页（除不允许关闭页外） |
| receiveMessage | 注册消息 | 参数callback为回调方法，同个页面，可以在不同地方注册。注册后可以接收到修改主题、布局切换、语言切换的消息，具体使用可参照404.js |

```
需要调用接口时，直接引入config.js文件即可，
如果跨域，可以通过parent.postMessage方式发消息调用。
接收消息建议直接调用receiveMessage注册，如跨域可以用window.addEventListener('message', handler), handler为回调方法。
```

## 主题定义

 ### less
 1、引入主题变量less（style/variable/theme.less）,里面变量js共用
```
@import '../../style/variables/theme.less'
```
 2、定义主题样式，可利用less的loop循环方法
```
.theme-loop(@list,@i:1,@val:extract(@list,@i)) when (length(@theme-name-list)>=@i){
    @headerBgColor: extract(@theme-header-bg-color-list, @i);
    .error-@{val}{
        .digit {
            background-color: @headerBgColor;
        }
    }
    .theme-loop(@theme-name-list,(@i+1));
}
.theme-loop(@theme-name-list);
```

```
具体参见404.js、404.less两个文件
```

## 关于安装部署

    1、电脑需要配置好node环境

    2、下载代码：git clone git@gitee.com:maqzh/webpack-tabs-admin.git

    3、安装依赖包：cnpm install

    4、开发：npm start

    5、编译：npm run build