uni-uAdmin: based on uniapp+uViewUI cross-end background management template|uni-app background instance

I. Introduction

Many background management systems on the Internet are PC web pages, and there are relatively few background systems on mobile phones. And there are very few cross-end mobile background management templates. So I used uniapp+uview-ui+uni-ui fiddle with a cross-device background management system uniapp-uadmin project.

The uni-uAdmin project is a cross-end background management system template project developed uniapp+vue.js+uView-ui+uni-ui+mock.js

2. Technical framework

• Editor: HbuilderX3.3.5
• Technology used: vue+uniapp+uViewUI+mockjs
• Popup component: ua-popup (based on uni-app cross-end popup component)
• Table component: ua-table (multi-functional table based on uni-app package)
• Custom component: uaDock's new dock-style tabbar component
• Chart component: u-charts chart library
• Mock data: mock.js

The new frosted glass visual UI texture uses charts, custom tables, forms, waterfall flows and graphic editors, dynamic permission management, error page processing, and can be compiled to H5 + applet + APP terminal

3. Project structure directory

Fourth, the public template

The overall page is divided into three parts: custom navigation bar at the top + content area + dock menu at the bottom.

<!-- 公共页面模板 -->
<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>

Support dynamic component control authority and error page automatic jump prompt.

One of the more innovative parts of the project is the dock menu at the bottom, which can be switched left and right like the uniapp native tabbar switch, and can customize the icon and title text.

<!-- //底部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>

The props option of the menu can be configured with the following parameters.

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)
}

In addition, the table component used in the project is also a uniapp table component plug-in developed by myself.

ua-table supports multi-row, multi-column, fixed header, custom slot content, click row and column to return data and other functions.

It is very simple to use, as follows, create a simple form.

<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>

The table also supports fixed headers and custom content similar to the Ele.me component library.

<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>

However, it should be noted that if multiple v-fors of uniapp are compiled into the applet, the custom slot will be invalid, and you need to take special care of it yourself.

OK, the sharing of the background system based on uniapp development is here, I hope it will be helpful to you~~

finally attached a uniapp short video project
https://segmentfault.com/a/1190000040711708