关于uniapp:uniuAdmin基于uniappuViewUI跨端后台管理模板uniapp后台实例

69次阅读

共计 5740 个字符，预计需要花费 15 分钟才能阅读完成。

一、前言

网上很多后盾管理系统都是 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 端

三、我的项目构造目录

四、公共模板

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

<!-- 公共页面模板 -->
<template>
    <view class="ua__pageview flexbox flex-col" :style="{'--SKIN': $store.state.skin,'background': bgcolor,'color': color}">
        <slot name="header" />
        
        <!-- // 主容器 -->
        <view class="ua__scrollview flex1">
            <slot />
        </view>
        
        <!-- // 底部 -->
        <slot name="footer" />
        
        <!-- //dock 菜单 -->
        <ua-dock v-if="dock && dock !='false'"@click="handleDockClick" />
        
        <!-- // 函数式弹框 -->![<ua-popup ref="uapopup" />](/img/bVcXG8X)
        
        <!-- // 换肤弹框模板 -->
        <ua-popup v-model="isVisibleSkin" position="right">
            <Skin />
        </ua-popup>
    </view>
</template>

反对动静组件式管制权限及谬误页主动跳转提醒。

我的项目中比拟翻新的一个局部就是底部 dock 菜单，能够和 uniapp 原生 tabbar 切换一样，能够左右滑动切换，能够自定义图标及题目文字。

<!-- // 底部 dock 菜单 -->
<template>
    <view class="ua__dockbar">
        <scroll-view class="ua__dock-scroll ua__filter" :class="platform" scroll-x :style="{'background': bgcolor}">
            <view class="ua__dock-wrap">
                <!-- Tab 菜单项 -->
                <block v-for="(item, index) in menu" :key="index">
                    <view v-if="item.type =='divider'"class="ua__dock-divider"></view>
                    <view v-else class="ua__dock-item" :class="currentTabIndex == index ?'cur':''" @click="switchTab(index, item)">
                        <text v-if="item.icon" class="iconfont nvuefont" :class="item.icon">{{item.icon}}</text>
                        <image v-if="item.img" :src="item.img" class="iconimg" :style="{'font-size': item.iconSize}" />
                        <text v-if="item.badge" class="ua__badge ua__dock-badge">{{item.badge}}</text>
                        <text v-if="item.dot" class="ua__badge-dot ua__dock-badgeDot"></text>
                    </view>
                </block>
            </view>
        </scroll-view>
    </view>
</template>

菜单的 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 表格组件插件。

ua-table 反对多行、多列，表头固定，自定义 slot 插槽内容，点击行列返回数据等性能。

应用非常简单，如下，创立一个简略表格。

<ua-table 
    :columns="columns" 
    headerBgColor="#eee" 
    :headerBold="true" 
    stripe
    padding="5px 0"
    :data="data.list" 
    height="450rpx"
>
</ua-table>

<script>
import Mock from 'mockjs'

export default {data() {
        return {
            columns: [{type: 'index', align: 'center', width: 100, fixed: true}, // 索引序号
                {prop: 'title', label: '题目', align: 'left', width: '350'},
                {prop: 'num', label: '搜寻量', align: 'center', width: 120},
            ],
            data: Mock.mock({
                total: 100,
                page: 1,
                pagesize: 10,
                'list|10': [
                    {id: '@id()',
                        title: '@ctitle(10, 20)',
                        num: '@integer(1000,10000)'
                    }
                ]
            }),
        }
    }
}
</script>

表格还反对相似饿了么组件库固定表头及自定义内容。

<ua-table 
    :columns="columns" 
    headerBgColor="#eee" 
    :headerBold="true" 
    :stripe="true"
    :data="data.list" 
    @row-click="handleRowClick"
    @select="handleCheck" 
    height="750rpx"
    style="border:1px solid #eee"
>
    <template #default="{row, col, index}">
        <block v-if="col.slot =='image'">
            <u-image :src="row.image" :lazy-load="true" height="100rpx" width="100rpx" @click="previewImage(row.image)" />
        </block>
        <block v-if="col.slot =='switch'">
            <u-switch v-model="row.switch" inactive-color="#fff" :size="36"></u-switch>
        </block>
        <block v-if="col.slot =='tags'">
            <u-tag :text="row.tags" bg-color="#607d8b" color="#fff" mode="dark" size="mini" />
        </block>
        <block v-if="col.slot =='progress'">
            <u-line-progress active-color="#1fb925" :percent="row.progress" :show-percent="false" :height="16"></u-line-progress>
        </block>
        <block v-if="col.slot =='btns'">
            <view class="ua__link success" @click.stop="handleFormEdit(row)"> 编辑 </view>
            <view class="ua__link error" @click.stop="handleDel(row, index)"> 删除 </view>
        </block>
    </template>
</ua-table>

<script>
/**
 * uniapp 自定义表格
 * @author XY Q：282310962
*/
import Mock from 'mockjs'

export default {data() {
        return {
            columns: [{type: 'selection', align: 'center', width: 80, fixed: true}, // 多选
                {type: 'index', align: 'center', width: 80, fixed: true}, // 索引序号
                {prop: 'author', label: '作者', align: 'center', width: 120},
                {prop: 'title', label: '题目', align: 'left', width: 350},
                {slot: 'image', label: '图片', align: 'center', width: 120},
                {slot: 'switch', label: '举荐', align: 'center', width: 100},
                {slot: 'tags', label: '标签', align: 'center', width: 100},
                {slot: 'progress', label: '热度', align: 'center', width: 150},
                {prop: 'date', label: '公布工夫', align: 'left', width: 300}, // 工夫
                {slot: 'btns', label: '操作', align: 'center', width: 150, fixed: 'right'}, // 操作
            ],
            data: Mock.mock({
                total: 100,
                page: 1,
                pagesize: 10,
                'list|30': [
                    {id: '@id()',
                        author: '@cname()',
                        title: '@ctitle(10, 20)',
                        image: 'https://picsum.photos/400/400?random=' + '@guid()',
                        switch: '@boolean()',
                        'tags|1': ['admin', 'test', 'dev'],
                        progress: '@integer(30, 90)',
                        date: '@datetime()'}
                ]
            }),
        }
    }
}
</script>

不过须要留神，uniapp 多个 v -for 编译到小程序，自定义插槽会生效，须要本人非凡解决一下。

OK，基于 uniapp 开发后盾零碎的分享就到这里，心愿对大家有些帮忙哈~~

最初附上一个 uniapp 短视频我的项目
https://segmentfault.com/a/11…

正文完
uniapp
发表至： uni-app
2022-01-29
 0
关于uniapp:uniapp踩坑记录uview的collapse组件面板打开时获取数据不显示内容以及显示慢的问题
关于uniapp:uniapp项目实践总结十二封装通用请求上传以及下载方法
关于uniapp:uniapp开发appwebview与app相互通信
关于uniapp:uniapp返回上一级页面前先判断是否需要弹出提示弹出提示后用户点击确定返回上一级页面点击取消就阻止返回