BeetleX.AdminUI介绍

BeetleX.AdminUI是基于Beetlexjs+Vuejs+Bootstrap相结合的后台管理框架,主要介绍在不使用Webpack的情况下，如何用VS来开发一个单页面的Web后台管理应用。如果你喜欢用Vuejs+Html,那通过这个示例你可以更好的了解Vuejs+Html的使用。在介绍之前先看一下效果：

可以通过访问 http://adminui.beetlex.io/ 查看在线演示.

在开发过程中虽然没有和Webpack，不过模式还是遵循组件化方式进行处理；通过这个示例让不想使用Webpack的开发人员可以使用另一种途径来进行开发Vue前端应用。

首页

这种模式没有app.js,取而代之的是一个index.html,这个页面主要是用于描述界面的主体布局，具体如下:

    <div id="page">
        <main_menu @menu_resize="OnMenuResize($event)" @openwindow="OnOpenWindow($event)"></main_menu>
        <windows_bar :windows="windows" :full="full" :selectwindow="selectWindow.id" @openwindow="OnOpenWindow($event)" @close="OnCloseWindows($event)"></windows_bar>
        <div class="main-content" :style="{left:(full=='max'?'50px':'250px')}">
            <keep-alive>
                <component :is="selectModel" @openwindow="OnOpenWindow($event)" :token="selectWindow.data"></component>
            </keep-alive>
        </div>
        <page_footer></page_footer>
    </div>

布局很简单包括有主菜单，页脚，窗体栏和主内容显示.主页面的功能很简单，主要用来管理切换窗体，新建窗体和关闭窗体即可;详细代码如下:

        Vue.prototype.$open = function (id, title, model, data) {
            this.$emit('openwindow', { id: id, title: title, model: model, data: data });
        };
        var model = {
            full: 'min',
            windows: [],
            selectWindow: {
            },
            selectModel: '',
        };
        var page = new Vue({
            el: '#page', data: model,
            methods: {
                OnMenuResize: function (event) {
                    this.full = event;
                },

                OnCloseWindows: function (e) {
                    var index = -1;
                    for (i = 0; i < this.windows.length; i++) {
                        if (this.windows[i].id == e.id) {
                            index = i;
                            break;
                        }
                    }
                    if (index >= 0) {
                        this.windows.splice(index, 1);
                        if (this.windows.length > 0)
                            this.OnOpenWindow(this.windows[0]);
                        else {
                            this.selectWindow = null;
                            this.selectModel = null;
                        }
                    }

                },

                OnOpenWindow: function (e) {
                    var items = [];
                    items.push(e);
                    for (i = 0; i < this.windows.length; i++) {
                        var item = this.windows[i];
                        if (item.id != e.id)
                            items.push(item);
                    }
                    this.windows = items;
                    this.selectWindow = e;
                    this.selectModel = e.model;
                },
            }
        });
        page.OnOpenWindow({ id: 'home', title: '主页', model: 'models_home' })

windows_bar

这个组件主要描述窗体的标签，解决窗体的切换功能​；具体Vue模块如下:

<template id="__windowsbar">
    <div class="windows_bar" :style="{left:(fullStatus=='max'?'60px':'260px')}">
        <ul class="nav nav-tabs" style="display:flex">
            <li v-for="item in items" role="presentation" :class="[select==item.id?'active':'']">
                <a href="javascript:void(0)" @click="$open(item.id,item.title,item.model)">{{item.title}}</a>
                <img v-if="item.id!='home'" @click="OnClose(item)" src="/images/tabclose.png"/>
            </li>
        </ul>
    </div>
</template>

对应的展示如下：

 

这个组件包括了一些简单的行为，选择窗体$open(item.id,item.title,item.model)和关闭窗体OnClose(item);还有一个行为就是根据主菜单的样式来调整自己的占比宽度。详细的功能代码如下:

    Vue.component('windows_bar', {
        props: ['windows', 'full', 'selectwindow'],
        data: function () {
            return {
                fullStatus: this.full,
                items: this.windows || [],
                select: this.selectwindow
            }
        },
        watch: {
            full(val) {
                this.fullStatus = val;
            },
            windows(val) {
                this.items = val;
            },
            selectwindow(val) {
                this.select = val;
            },
        },
        methods: {
            OnClose: function (e) {
                this.$emit('close', e);
            }
        },
        template: __windowsbar,
        mounted: function () {

        }
    });

主菜单

主菜单主要用于描述关键模块窗体，它有两种展示模式分别是：全显示和只显示功能图标

<template id="__menu">
    <div :class="[full=='min'?'menu_full':'menu_min']">
        <div>
            <h3 v-if="full=='min'" style="margin-top:10px;margin-right:-5px;padding-left:20px;">BeetleX.AdminUI</h3>
            <a v-if="full=='min'" href="javascript:void(0)" @click="OnResizeMenu('max')" style="float:right;margin-top:-35px;"><img style="24px;" src="/images/min.png" /></a>
            <hr v-if="full=='min'" style="padding:4px;margin:0px;" />
            <ul>
                <li v-if="full!='min'"><a href="javascript:void(0)" @click="OnResizeMenu('min')">
                    <img src="/images/full.png" style="height:32px;" /></a></li>
                <li>
                    <a href="javascript:void(0)" @click="OnOpenHome">
                        <img src="/images/home.png" style="height:32px;" />
                        <span v-if="full=='min'">主页</span>
                    </a>
                </li>
                <li>
                    <a href="javascript:void(0)" @click="OnOpenCustomer">
                        <img src="/images/customer.png" style="height:32px;" />
                        <span v-if="full=='min'">客户</span>
                    </a>
                </li>
                <li>
                    <a href="javascript:void(0)" @click="OnOpenOrders">
                        <img src="/images/order.png" style="height:32px;" />
                        <span v-if="full=='min'">订单</span>
                    </a>
                </li>
                <li>
                    <a href="javascript:void(0)" @click="OnOpenEmployees">
                        <img src="/images/employee.png" style="height:32px;" />
                        <span v-if="full=='min'">雇员</span>
                    </a>
                </li>
                <li>
                    <a href="javascript:void(0)" @click="OnOpenAbout">
                        <img src="/images/about.png" style="height:32px;" />
                        <span v-if="full=='min'">关于</span>
                    </a>
                </li>
            </ul>
        </div>
    </div>
</template>

主菜单的主要功能就是告诉页面需要打开那个模块，具体代码如下:

<script>
    Vue.component('main_menu', {
        data: function () {
            return {
                full: 'min',
            }
        },
        methods: {
            OnResizeMenu: function (value) {
                this.full = value;
                this.$emit('menu_resize', value)
            },
            OnOpenHome: function () {
                this.$open('home', '主页', 'models_home');
            },
            OnOpenCustomer: function () {
                this.$open('customers', '客户列表', 'models_customers');
            },
            OnOpenEmployees: function () {
                this.$open('employees', '雇员列表', 'models_employees');
            },
            OnOpenOrders: function () {
                this.$open('orders', '订单列表', 'models_orders');
            },
            OnOpenAbout: function () {
                this.$open('about', '关于', 'models_about');
            },
        },
        template: __menu,
        mounted: function () { }
    });
</script>

这样一个能支持多模块显示切换的主页就完成了，接下来的工作就是实现相关子模块，由于这个示例的子模块比较多就不一一介绍，只是抽取个别来介绍。

客户列表

接下来简单地介绍一下客户列表模块，并在模块中打开一个客户信息的窗体。

 

详细模板实现如下:

<template id="__models_customers">
    <div>
        <table class="table">
            <thead>
                <tr>
                    <th>CustomerID</th>
                    <th>CompanyName</th>
                    <th>ContactName</th>
                    <th>ContactTitle</th>
                    <th>Phone</th>
                    <th>Fax</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="item in items">
                    <td><a href="javascript:void(0)" @click="OnOpen(item)"> {{item.CustomerID}}</a></td>
                    <td>{{item.CompanyName}}</td>
                    <td>{{item.ContactName}}</td>
                    <td>{{item.ContactTitle}}</td>
                    <td>{{item.Phone}}</td>
                    <td>{{item.Fax}}</td>
                </tr>
                <tr v-if="GetCustomers.data.index<pages">
                    <td colspan="6" style="text-align:right;">
                        <a href="javascript:void(0)" @click="GetCustomers.get()">({{GetCustomers.data.index}}/{{pages}})更多...</a>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

对应的脚本代码

    Vue.component('models_customers', {
        data: function () {
            return {
                GetCustomers: new beetlexAction("/Customers", { index: 0 }, { pages: 0, items: [] }),
                pages: 0,
                items: []
            }
        },
        methods: {
            OnOpen: function (item) {
                this.$open('cust' + item.CustomerID, '客户:' + item.CompanyName, 'models_customerdetail', { id: item.CustomerID });
            }
        },
        mounted: function () {
            var _this = this;
            this.GetCustomers.requested = function (r) {
                _this.pages = r.pages;
                this.data.index++;
                r.items.forEach(function (v) {
                    _this.items.push(v);
                });
            };
            this.GetCustomers.get();
        },
        template: __models_customers,
    })

以上是一个客户列表的功能模块，其他模块就不详细介绍，可以查看项目

https://github.com/IKende/AdminUI