走进 Meetion-Admin V-1.4.8

最新推荐文章于 2021-05-29 22:02:52 发布

原创最新推荐文章于 2021-05-29 22:02:52 发布 · 125 阅读

0 ·

CC 4.0 BY-SA版权

Meetion-Admin是一款基于原生JavaScript与jQuery的单页iframe后台管理系统，提供新颖的界面和强大的路由权限管理功能。支持快速开发，拥有丰富的组件和插件，如树形控件、请求库等。

1
前言

大家好，我是你们的老朋友严老湿，去年我开源了一套风格比较前沿的UI组件库，然后前段时间疫情原因，我在空闲时间中开发出了一套Meetion-Ui的专属后台管理系统框架，目的是为了符合大家现在开发后台的一个全过程，如果有什么见解建议可以联系我或者在 GitHub 提出你的问题。

2
介绍

Meetion-Admin主要基于原生 JavaScript 与 jQuery ，一款单页 iframe后台管理系统，创建初期也考虑过其他形式的方法比如 jQ 的 load ，考虑和实践了很久，还是采用了前者的形式来开发，为喜欢JavaScrip和jQuery的开发者实现迅速便捷的开发，其样式新颖特别，主色调为 #409EFF

3
地址

Git：https://github.com/CrazyMrYan/meetion-admin

Document: http://crazy.lovemysoul.vip

Preview: http://crazy.lovemysoul.vip/meetion-admin/

UserName：admin； Password：123456

4
生态系统

Router：

Meetion的路由主要为了配套在Admin中使用的，其作用就是为了页面之间的切换以及侧边栏的排版，它也可以实现权限路由分配作用。

其实现原理，话不多说上代码：

// router 就是你页面的基础路由
var router = [
  {
        name:"控制台",
        icon:"fa fa-home ",
        children:[
            {
                name:"首页",
                path:'vivews/home.html',
            }
        ]
    }
]
// routerGuard 存放 RouterWatcher 的变量
// RouterWatcher 主要作用于路由的监听
let routerGuard = new RouterWatcher( {
     data: {
       // 将本地存储的token 绑定到 data.token上
       token : localStorage.getItem('token'),
       // 将本地 router 绑定到 data.router上
       router : router
     } ,
     watch: {
       // 当 token 发生变化时 这里会第一时间接受到状态;
       token(newVal,oldVal) {
       // 只要 token 发生改变直接跳转到登录页
       location.href = 'vivews/login.html';
      } ,
      // 当 router 发生变化时 这里会第一时间接受到状态;
      router(newVal,oldVal) {
        // 接收新的 router 给它重新赋值
        router = newVal;
       }
    }
 })

上面的代码，首先创建了基础路由，再将基础路由进行完美监听

有了这段渣码，我们就可以开始进行我们权限路由的分配了

 // routerGuard.router 是动态路由的操作
 // 可以通过 routerGuard.router 重新赋值做为权限判断
routerGuard.router = [
     {
        name:"控制台",
        icon:"fa fa-home ",
        children:[
            {
                name:"首页",
                path:'vivews/home.html',
            }
        ]
      },
      {
         name:"组件",
         icon:"fa fa-table",
         children:[
            {
               name:"表单元素",
               path:'vivews/assembly/input.html',
            },
            {
               name:"表格",
               path:'vivews/assembly/table.html',
            },
            {
               name:"分页",
               path:'vivews/assembly/paging.html',
            }
        ]
     }
 ]

就这样重新给他重新监听赋值之后呢，我们已经完成了路由权限分配的监听效果。

侧边栏效果：

Reques：

Reques我已经在npm中单独开源了，有兴趣的朋友可以看看我前两天发表的 npm依赖之tooljs、requestjs 这篇文章，手摸手教你使用Reques

废话不再说，继续看代码敲黑板了，直接看示例

// 首先我们在使用request之前先配置一下
// host 是请求的主机名
// 不然我们每次请求的时候都要写上主机
Request.host = "https://baidu.com"
Request.Get('api/list', { param } , {
   res => {
     // res 成功返回的函数
      console.log(res)
   } ,
   err => {
     // err 失败返回的函数
      console.log(err)
   }
 })

5
组件

组件基本上在新型UI框架Meetion-UI 这篇文章上基本上有提到过可以参考一下噢

卡片：

折叠面板：

选项卡：

按钮：

消息：

下拉选择器：

输入框：

表格：

分页器：

6
插件

树形控件

接入数据，进行Tree的生成，其取值的方法

leg.getCheckedNodes() //选中
leg.getHalfSelected() //半选
leg.getAll() //全选及半选

详细的介绍以及使用可以直接查看控制台的插件->>树形控件

注意事项

今天的这篇文章就讲解完啦，你吸收了多少呢？在校学生，以及实习生切勿打赏，

我的主要目的就是为了让大家学习更多更好的技术。

本文章已声明原创，若转载，请告知。

根据本篇文章，猜你会喜欢：

手摸手带你了解浏览器渲染原理与过程

npm依赖之tooljs、requestjs

新型UI框架Meetion-UI

JavaScript 开发常用工具函数-小结（48个）