uni-uAdmin（基于uniapp+uViewUI跨端后台管理模板|uni-uAdmin：基于uniapp+uViewUI跨端后台管理模板|uni-app后台实例） uni-uAdmin：基于uniapp+uViewUI跨端

一、前言网上很多后台管理系统都是pc网页端，手机端的后台系统相对比较少。而跨端的移动端后台管理模板少之又少。于是自己就使用uniapp+uview-ui+uni-ui捣鼓了一个跨设备后台管理系统uniapp-uadmin项目。

文章图片

uni-uAdmin项目是一款基于uniapp+vue.js+uView-ui+uni-ui+mock.js等技术开发的跨端后台管理系统模板项目。

二、技术框架

编辑器：HbuilderX3.3.5
使用技术：vue+uniapp+uViewUI+mockjs
弹窗组件：ua-popup（基于uni-app跨端弹框组件）
表格组件：ua-table（基于uni-app封装的多功能表格）
自定义组件：uaDock全新的dock风格tabbar组件
图表组件：u-charts图表库
模拟数据：mock.js

全新的毛玻璃视觉UI质感，使用了图表、自定义表格、表单、瀑布流及图文编辑器等业务模块，动态权限管理，错误页处理，可编译至H5+小程序+APP端

uni-uAdmin（基于uniapp+uViewUI跨端后台管理模板|uni-uAdmin：基于uniapp+uViewUI跨端后台管理模板|uni-app后台实例）

文章图片

三、项目结构目录

文章图片

文章图片

【uni-uAdmin（基于uniapp+uViewUI跨端后台管理模板|uni-uAdmin：基于uniapp+uViewUI跨端后台管理模板|uni-app后台实例）】

文章图片

文章图片

四、公共模板页面整体分为顶部自定义导航条+内容区域+底部dock菜单三大部分。

文章图片

文章图片

支持动态组件式控制权限及错误页自动跳转提示。

文章图片

项目中比较创新的一个部分就是底部dock菜单，可以和uniapp原生tabbar切换一样，可以左右滑动切换，可以自定义图标及标题文字。

文章图片

文章图片

菜单的props选项可传入如下参数配置。

props: { // 当前索引 current: { type: [Number, String], default: 0 }, // 背景色 bgcolor: { type: String, default: null }, /** * [ 菜单选项 ] type菜单类型 type: 'tab'支持uni.switchTab切换 type: 'divider'分割线 path菜单页面地址 icon菜单图标-iconfont图标 img菜单图片 color菜单图标颜色 title标题 badge圆点数字 dot小红点 */ menu: { type: Array, default: () => [ /* Tab菜单 */ { type: 'tab', path: '/pages/index/index', icon: `\ue619`, color: '#2979ff', title: '首页', }, { type: 'tab', path: '/pages/component/index', icon: 'icon-component', color: '#17c956', title: '组件', badge: 5, }, { type: 'tab', path: '/pages/permission/index', icon: 'icon-auth', color: '#f44336', title: '权限管理', }, { type: 'tab', path: '/pages/setting/index', icon: 'icon-wo', color: '#8d1cff', title: '设置', dot: true, }, { path: '/pages/error/404', img: require('@/static/mac/keychain.png'), title: '错误页面', },{ type: 'divider' },/* Nav菜单 */ { img: require('@/static/logo.png'), title: 'github', }, { img: 'https://www.uviewui.com/common/logo.png', title: 'gitee', }, { img: require('@/static/mac/colorsync.png'), title: '皮肤', }, { img: require('@/static/mac/info.png'), title: '关于', },{ type: 'divider' },{ img: require('@/static/mac/bin.png'), title: '回收站', badge: 12, }, ] }, },

文章图片

// Tab切换 switchTab(index, item) { if(item.path) { let type = item.type == 'tab' ? 'switchTab' : 'navigateTo' uni[type]({ url: item.path, }) }else { if(item.type == 'tab') { this.currentTabIndex = index } } this.$emit('click', index) }

另外项目中使用的表格组件也是自己研发的一款uniapp表格组件插件。