# BizLayAdmin

**Repository Path**: mudheaven/BizLayAdmin

## Basic Information

- **Project Name**: BizLayAdmin
- **Description**: 基于LayUI后台页面
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2024-11-10
- **Last Updated**: 2024-11-10

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 介绍

**BizLayAdmin是基于LayUI的一个后台快速开发框架，该框架主要是针对解决代码复用性差和代码混乱的问题。**

# 目录结构

｜—— css 样式  
｜ ｜──theme 主题目录  
｜── font 字体  
｜── img 图片文件  
｜── layui LayUI源码  
｜── mock 模拟接口&数据  
｜── module LayUI模块  
｜── part 页面组件  
｜── plugin 第三方库  
｜── view 页面  
｜ ｜ ｜── index 模块  
｜ ｜ ｜── authority.json 模块的菜单与权限  
｜ ｜── error.html 错误页面  
｜ ｜── layout.html 布局页面  
｜ ｜── login.html 登录页面  
｜── index.html 入口页面  
｜── menu.json 菜单  


# 系统配置

## conf.js

```
layui.define(['layer', 'jquery'], function (exports) {
    const layer = parent.layer;
    const $ = layui.jquery;
    exports("conf", {
        view: {
            //网站标题
            title: '<b class="biz-font-color" ">Unify</b>  Admin LayUI',
            //网站入口
            entry: "/system/index/index",
            //图标
            favicon: "/img/logo.png",
            //模板地架
            layout: "/layout",
            //登录路由
            login: '/login',
            //主题
            theme: {
              	//当前主题
                curr: layui.data('layout_theme').curr || "blue",
              	//注册主题
                all: {
                    "black": "黑色",
                    "blue": "蓝色",
                    "dark_blue": "深蓝色",
                }
            },
        },
        api: {
            mock: {
                //开启Mock
                use: true,
                //Mock路径
                path: "/mock/api",
            },
            //系统内置的api
            url: {
                upload: "/system/system/upload",
            },
            //返回状态值
            code: {
                //成功
                success: 200,
                //错误
                error: 500,
                //拒绝
                denied: 403,
            },
            //请求前预处理
            before: function (params) {
                const baseUrl = location.origin;
                params.url = baseUrl + params.url;
                //
                // if(params.method == "POST"){
                //     params.dataType = "JSON";
                //     params.contentType = 'application/json;charset=utf-8';
                //     params.data = JSON.stringify(params.data);
                // }

                return params;
            },
            //请求响应后
            after: function (response, request, resolve, reject) {
                switch (response.code) {
                    case this.code.success:
                        resolve(response);
                        break;
                    case this.code.error:
                        layer.msg(response.msg);
                        reject(response);
                        break;
                    case this.code.denied:
                        localStorage.removeItem("user_token");
                        layer.msg(response.msg);
                        location.reload();
                        break;
                    default:
                        layer.msg(request.url + "返回结构异常");
                        reject();
                }
            },
            token: {
                get: function () {
                    return localStorage.getItem("user_token");
                },
                set: function (token) {
                    localStorage.setItem("user_token", token);
                },
                remove: function () {
                    localStorage.removeItem("user_token")
                }
            },
        },
      	//权限
        authority: {
          	//获取当前用户权限信息
            getInfo: function () {
                return {
                  	//角色ID
                    id: localStorage.getItem("user_role_id"),
                  	//角色名
                    name: localStorage.getItem("user_role_name"),
                  	//权限集合，数组
                    auths: localStorage.getItem("user_role_auths"),
                }
            }
        }
    });
});
```

## menu.json

**配置一级菜单、以及一级菜单下的模块，模块名称需对应view目录下的模块目录名。**

```
[
    {
        "type": "menu",
        "icon": "layui-icon layui-icon-set",
        "title": "系统",
        "children": [
            "system"
        ]
    }
]
```

## authority.json

**配置二级及以下的菜单项和权限。该文件目前只实现支持页面级别的权限控制，后续将实现元素级别的控制。**

```
[
    {
        "name": "user",
      	//页面菜单
        "type": "page",
        "icon": "layui-icon layui-icon-user",
        "title": "用户列表",
        "url": "/system/user/index",
        "auth": "system:user:list"
    },
    {
        "name": "auth",
      	//目录菜单
        "type": "menu",
        "icon": "layui-icon layui-icon-vercode",
        "title": "权限管理",
        "children": [
            {
                "type": "page",
                "icon": "layui-icon layui-icon-user",
                "title": "权限列表",
                "url": "/system/role/index",
                "auth": "system:role:index",
                "children": [
                    {
                        "type": "block",
                        "title": "特殊字段",
                        "selector": [
                            ".content[field1,field2,field3]"
                        ],
                        "auth": "system:role:special"
                    },
                    {
                        "type": "button",
                        "title": "添加",
                        "selector": "#addButton",
                        "auth": "system:role:add",
                        "prompt": "暂无权限"
                    },
                    {
                        "type": "button",
                        "title": "保存",
                        "selector": "#saveButton",
                        "auth": "system:role:save"
                    }
                ]
            },
            {
                "type": "page",
                "icon": "layui-icon layui-icon-user",
                "title": "角色列表",
                "url": "/system/role/index"
            }
        ]
    },
    {
        "name": "systemMonitor",
        "type": "menu",
        "icon": "layui-icon layui-icon-list",
        "title": "系统监控",
        "children": [
            {
                "type": "page",
                "icon": "layui-icon layui-icon-list",
                "title": "在线用户",
                "url": "/system/user/online",
                "auth": "system:user:online"
            },
            {
                "type": "page",
                "icon": "layui-icon layui-icon-list",
                "title": "任务日志",
                "url": "/system/task/log",
                "auth": "system:task:log"
            },
            {
                "type": "page",
                "icon": "layui-icon layui-icon-list",
                "title": "操作日志",
                "url": "/system/user_log/log",
                "auth": "system:userLog:log"
            }
        ]
    },
    {
        "name": "message",
        "type": "page",
        "icon": "layui-icon layui-icon-list",
        "title": "站内信",
        "url": "/system/message/index",
        "auth": "system:message:index"
    },
    {
        "name": "devTools",
        "type": "menu",
        "title":"开发工具",
        "icon": "layui-icon layui-icon-list",
        "auth": "system:devTools",
        "children": [
            {
                "type": "link",
                "icon": "layui-icon layui-icon-list",
                "title": "接口文档",
                "url": "/system/swagger/index"
            },
            {
                "type": "link",
                "icon": "layui-icon layui-icon-list",
                "title": "系统日志",
                "url": "/system/systemLog/index"
            },
            {
                "type": "link",
                "icon": "layui-icon layui-icon-list",
                "title": "官方文档",
                "url": "/"
            },
            {
                "type": "page",
                "icon": "layui-icon layui-icon-list",
                "title": "框架升级",
                "url": "/system/system/upgrade"
            },
            {
                "type": "page",
                "icon": "layui-icon layui-icon-list",
                "title": "系统配置",
                "url": "/system/config/list"
            }
        ]
    }
]
```

# Theme主题

**在/css/theme目录下创建自己的主题文件，并在/module/conf.js文件中的view.theme.all注册主题。**

# HTTP请求

**框架封装了API模块，可直接引入api模块请求相应的接口。在conf.js中可去编写请求前和请求后的逻辑，以及开启和关闭mock数据。**

## 请求写法

```
  layui.use(['api'], function () {
      const {api} = layui;
      // ...
      api("请求地址", {
          args1: "lisi",
          args2: "123456",
      }).then(function (res) {
          //请求成功回调
      }).catch(function (res) {
          //请求失败回调
      });
    // ...
  });
```

## Mock数据写法

**Mock文件路径要求：请求https://xxxxx.com/a/b/c，返回mock/api/a/b/c.js文件内容。**

```
{
  "code": 200,
  "msg": "Success",
  "data": {
    "site": {
      "cover": "https://lhcdn.lanhuapp.com/web/imgs/lanhuLogo1db1cd87.svg",
      "name": "Mock"
    },
    "siteList": [
      {
        "id": 1,
        "name": "Mock1"
      },
      {
        "id": 2,
        "name": "Mock2"
      }
    ],
    "statistics": {
      "totalMoney": 999,
      "totalCostCount": 300,
      "totalCount": 299,
      "todayMoney": 322,
      "yesterdayMoney": 244,
      "todayCount": 200,
      "yesterdayCount": 200,
      "todayCostCount": 155,
      "yesterdayCostCount": 100
    }
  }
}
```

# 权限控制

## 获取当前用户权限信息

**需要在conf.js文件中去编写获取权限的逻辑**

```
{
  authority: {
    getInfo: function () {
      return {
        id: localStorage.getItem("user_role_id"),
        // name:"admin",
        name: localStorage.getItem("user_role_name"),
        // auths:["system:user:list", "system:user:index"]
        auths: localStorage.getItem("user_role_auths"),
      }
    }
  }
}
```

## 菜单级权限配置

**在模块下的authority.json中进行配置菜单级权限**

```
[
    {
        "name": "user",
        "type": "page",
        "icon": "layui-icon layui-icon-user",
        "title": "用户列表",
        "url": "/system/user/index",
        "auth": "system:user:list"
    },
    {
        "name": "systemMonitor",
        "type": "menu",
        "icon": "layui-icon layui-icon-list",
        "title": "系统监控",
        "children": [
            {
                "type": "page",
                "icon": "layui-icon layui-icon-list",
                "title": "在线用户",
                "url": "/system/user/online",
                "auth": "system:user:online"
            },
        ]
    },
    {
        "name": "message",
        "type": "page",
        "icon": "layui-icon layui-icon-list",
        "title": "站内信",
        "url": "/system/message/index",
        "auth": "system:message:index"
    },
]
```

## 元素级权限配置

### 基于角色控制

```
<!-- 仅admin角色可见 -->
<div lay-rule="admin">内容</div>

<!-- 仅admin和user角色可见 -->
<div lay-rule="admin|user">内容</div>

<!-- 非admin角色可见 -->
<div lay-rule="!admin">内容</div>
```

### 基于权限控制

```
<!-- 拥有system:user:del权限可见 -->
<div lay-auth="system:user:del">内容</div>
```

# 页面

**页面内容格式参考vue的写法，在js编码还是使用layui的编写风格。js需要引入app模块使用结构化的开发模式，自动继承module/action.js对象。页面具体写法请参照下方实例。**

```
<template>
  <!-- 编写布局内自定义内容 -->
  <div></div>
  ...
</template>


<script src="http://pv.sohu.com/cityjson?ie=utf-8"></script>
<!-- 可以自定义引入页面独有的js文件 -->
<script>
  <!-- 使用layui写法引入app模块，并使用以下写法进行开发，app提供了2个生命周期方法-->
    layui.use(['app', 'api', 'jquery', 'table', 'view'], function () {
    const { app, api, jquery: $, table, view} = layui;
    app({
      data: {
      <!-- 注册页面需要用到的属性，在template中可以直接用d.xxx引用，或者在js中使用this.进行调用 -->
      },
      beforeRender: function () {
      <!-- 页面渲染前执行，一般用于编写获取页面所需数据逻辑，无法操作页面元素。 -->
      },
      afterRender: function () {
      <!-- 页面渲染后执行，在这里可以动态的操作页面元素。-->
      },
      methods:{
      <!-- 注册页面方法，可直接使用this.方法进行调用 -->
      }
      <!-- 其他编写方式可参考module/action.js文件，当前app会自动继承action对象 -->
      })
    });
    </script>


<style>
  [lay-id="messageTable"] tr{
  cursor: pointer !important;
  }
</style>
```

# 页面部件

**用于封装公用的控件或者模块，在元素上声明为哪个部件，框架会自动进行渲染。**

## 元素声明写法

```
<div lay-part="组件名" data-name="名称" data-method="render"></div>
```

**基于LayUI模块的写法，data-method默认为render，调用render方法进行渲染**

## 部件写法

**使用LayUI自动模块的写法，返回一个对象，必须编写渲染方法入口。入口方法入参包含元素对象本身，以及元素声明的data属性。**

```
layui.define(['laydate', 'jquery'], function (exports) {
  const {laydate, jquery: $} = layui;
  exports('date', {
    render: function (config) {
    
      config = $.extend(true, {
        type: "datetime",
        value: '',
        theme: getComputedStyle(document.documentElement)
          .getPropertyValue('--biz-theme-color').trim()
      }, config);

      if(!config.value || config.value === 'undefined'){
        config.value = '';
      }else{
        config.value = new Date(parseInt(config.value) * 1000)
      }

      laydate.render({
        elem: config.elem, //指定元素
        type: config.type,
        value: config.value,
        theme: config.theme
      })
    }
  });
})
```

# 发展规划

**1.提升框架性能，提供更多的部件，简化写法。**

**2.独立文件项目，可直接嵌入已有的layui项目中。**

# 技术讨论与支持

**微信：18167128194**