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="width: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