CloudSQLAdminPanel/public/scr/index.js

var CloudAdmin = CloudAdmin || {};

CloudAdmin.router = function () {
    this.currentUrl = '';
    this.printer = {
        pageNotFound: function () {
            let body = document.querySelector('body');

            mdui.JQ(body).empty();
            mdui.JQ(body).append(`
                <h1>404 Page Not Found :(</h1>
                <a href="#/index">返回首页</a>
            `);
        },
        /**
         * 内联样式初始化
         * 
         * @param {any} next 初始化完成后执行的回调函数
         * @param {any} arg 回调函数参数
         */
        indexInit: function (next, arg) {
            this.permissionCheck.signStatus.call(this, function () {
                let body = document.querySelector('body');

                body.className = 'mdui-appbar-with-toolbar mdui-theme-primary-blue mdui-theme-accent-light-blue mdui-drawer-body-left mdui-loaded';
                mdui.JQ(body).empty();
                mdui.JQ(body).append(`
                    <header class="mdui-appbar mdui-appbar-fixed">
                        <div class="mdui-toolbar mdui-color-theme">
                            <span class="mdui-btn mdui-btn-icon mdui-ripple mdui-ripple-white" mdui-drawer="{target: '#main-drawer', swipe: true}">
                                <i class="mdui-icon material-icons">menu</i>
                            </span>
                            <a href="#/index" class="mdui-typo-headline mdui-hidden-xs">CloudSQL Admin Panel</a>
                            <div class="mdui-toolbar-spacer"></div>
                            <span class="mdui-btn mdui-btn-icon mdui-ripple mdui-ripple-white">
                                <i class="mdui-icon material-icons">exit_to_app</i>
                            </span>
                        </div>
                    </header>
            
                    <div class="mdui-drawer mdui-drawer-open" id="main-drawer">
                        <div class="mdui-list" mdui-collapse="{accordion: true}" style="margin-bottom: 76px;">
                            <li class="mdui-list-item mdui-ripple">
                                <i class="mdui-list-item-icon mdui-icon material-icons">view_list</i>
                                <div class="mdui-list-item-content">数据库列表</div>
                            </li>
                            <li class="mdui-list-item mdui-ripple">
                                <i class="mdui-list-item-icon mdui-icon material-icons">person</i>
                                <div class="mdui-list-item-content">用户列表</div>
                            </li>
                            <li class="mdui-list-item mdui-ripple">
                                <i class="mdui-list-item-icon mdui-icon material-icons">info</i>
                                <div class="mdui-list-item-content">关于</div>
                            </li>
                        </div>
                    </div>
                
                    <div class="mdui-container main-container"></div>
                `);

                //左侧菜单栏
                let leftMenuButton = document.querySelector('span:nth-child(1).mdui-btn.mdui-btn-icon.mdui-ripple.mdui-ripple-white'),
                    mainDrawer = new mdui.Drawer('#main-drawer');

                /* leftMenuButton.addEventListener('click', function () {
                    mainDrawer.toggle();
                }, false); */
                this.handleEvent('click', {
                    onElement: leftMenuButton,
                    withCallback: function () {
                        mainDrawer.toggle();
                    }
                })

                let databaseListButton = document.querySelector('#main-drawer li:nth-child(1)');

                /* databaseListButton.addEventListener('click', function () {
                    window.location.hash = '/index/databaseList';
                }, false); */
                this.handleEvent('click', {
                    onElement: databaseListButton,
                    withCallback: function () {
                        window.location.hash = '/index/databaseList';
                    }
                })

                let userListButton = document.querySelector('#main-drawer li:nth-child(2)');

                /* userListButton.addEventListener('click', function () {
                    window.location.hash = '/index/userList';
                }, false); */
                this.handleEvent('click', {
                    onElement: userListButton,
                    withCallback: function () {
                        window.location.hash = '/index/userList';
                    }
                })

                //退出登录按钮
                let signoutButton = document.querySelector('span:nth-child(4).mdui-btn.mdui-btn-icon.mdui-ripple.mdui-ripple-white i.mdui-icon.material-icons');

                /* signoutButton.addEventListener('click', function () {
                    this.ajax.get('http://admin.cloudsql.1473.cn/v1/signout', function (response) {
                        if (response.status == 'successed') {
                            mdui.snackbar({
                                message: response.info
                            });
                            window.location.hash = response.url;
                        } else {
                            console.log(response.info);
                            console.log(response.error);
                            mdui.snackbar({
                                message: response.info
                            });
                        }
                    })
                }.bind(this), false); */
                this.handleEvent('click', {
                    onElement: signoutButton,
                    withCallback: function () {
                        this.ajax.get('http://admin.cloudsql.1473.cn/v1/signout', function (response) {
                            if (response.status == 'successed') {
                                mdui.snackbar({
                                    message: response.info
                                });
                                window.location.hash = response.url;
                            } else {
                                console.log(response.info);
                                console.log(response.error);
                                mdui.snackbar({
                                    message: response.info
                                });
                            }
                        });
                    }
                }, this)

                next.call(this, arg);
            });
        },
        /**
         * 表格生成
         * 
         * @param {any} data 表格数据
         * @returns DOM
         */
        tableGenerator: function (data) {
            //Generate tag tr
            let tr = document.createElement('tr');

            data.forEach(function (item, index, array) {
                let td = document.createElement('td');

                if (index + 1 === array.length) {
                    item.forEach(function (_item, _index, _array) {
                        td.appendChild(_item);
                        tr.appendChild(td);
                    }, this);
                } else {
                    td.innerHTML = item;
                    tr.appendChild(td);
                }
            }, this);

            return tr;
        },
        signin: function () {
            let html = document.querySelector('html'),
                body = document.querySelector('body');

            html.className = 'index';
            body.className = 'mdui-theme-primary-blue mdui-theme-accent-light-blue index';
            mdui.JQ(body).empty();

            mdui.JQ(body).append(`
                <header class="mdui-appbar mdui-shadow-0">
                    <div class="mdui-toolbar mdui-color-theme">
                        <a class="mdui-typo-headline" href="#">CloudSQL Admin Panel</a>
                        <div class="mdui-toolbar-spacer"></div>
                        <a class="mdui-btn mdui-ripple mdui-ripple-white" href="#/signin">登陆</a>
                        <a class="mdui-btn mdui-ripple mdui-ripple-white" href="#/signup">注册</a>
                    </div>
                </header>
                <main style="height: 85%;">
                    <div class="mdui-container main-section">
                        <h2 class="mdui-typo-display-1 main-section-tittle">用户登录</h2>
                        <div class="mdui-container mdui-col-md-8 mdui-center main-sub-section">
                            <div class="mdui-col-md-6 mdui-center mdui-textfield main-input-row">
                                <i class="mdui-icon material-icons">person</i>
                                <input class="mdui-textfield-input" name="userid" type="text" placeholder="用户名/邮箱" />
                            </div>
                            <div class="mdui-col-md-6 mdui-center mdui-textfield main-input-row">
                                <i class="mdui-icon material-icons">lock</i>
                                <input class="mdui-textfield-input" name="password" type="password" placeholder="密码" />
                            </div>
                            <div class="mdui-col-md-6 mdui-center mdui-textfield main-input-row captcha-row">
                                <img src="http://admin.cloudsql.1473.cn/v1/captcha?` + new Date().getTime() + `">
                                <input class="mdui-textfield-input" name="captcha" type="text" placeholder="验证码" />
                            </div>
                            <div class="mdui-col-md-6 mdui-center mdui-typo main-a-row">
                                <a href="#/signup">还没有账户，点击注册</a>
                            </div>
                            <div class="mdui-col-md-6 mdui-center main-button-row">
                                <button class="mdui-btn mdui-btn-block mdui-color-theme-accent">登陆</button>
                            </div>
                        </div>
                    </div>
                </main>
                <footer>
                    <div class="footer-copyright">Copyright © 2016 - 2017 <a href="/">CloudSQL</a> All rights reserved.</div>
                </footer>
            `)

            //验证码刷新逻辑
            let captchaImg = document.querySelector('.captcha-row img');

            captchaImg.addEventListener('click', function () {
                this.src = 'http://admin.cloudsql.1473.cn/v1/captcha?' + new Date().getTime(); //加入当前时间以避免缓存
            }, false);

            //登陆逻辑
            let submitButton = document.querySelector('.main-button-row button');

            submitButton.addEventListener('click', function () {
                let signInUrl = 'http://admin.cloudsql.1473.cn/v1/signin',
                    userId = document.querySelector('input[name=userid]').value,
                    password = document.querySelector('input[name=password]').value,
                    captchaCode = document.querySelector('input[name=captcha]').value,
                    postData = 'userId=' + userId + '&password=' + password + '&captcha=' + captchaCode;

                this.ajax.post(signInUrl, postData, function (response) {
                    if (response.status == 'signedin') {
                        window.location.hash = response.url;
                    } else {
                        mdui.snackbar({
                            message: response.info
                        });
                    }
                })
            }.bind(this), false)

        },
        signup: function () {
            let html = document.querySelector('html'),
                body = document.querySelector('body');

            html.className = 'index';
            body.className = 'mdui-theme-primary-blue mdui-theme-accent-light-blue index';
            mdui.JQ(body).empty();

            mdui.JQ(body).append(`
                <header class="mdui-appbar mdui-shadow-0">
                    <div class="mdui-toolbar mdui-color-theme">
                        <a class="mdui-typo-headline" href="#">CloudSQL Admin Panel</a>
                        <div class="mdui-toolbar-spacer"></div>
                        <a class="mdui-btn mdui-ripple mdui-ripple-white" href="#/signin">登陆</a>
                        <a class="mdui-btn mdui-ripple mdui-ripple-white" href='#/signup'>注册</a>
                    </div>
                </header>
                <main style="height: 85%;">
                    <div class="mdui-container main-section">
                        <h2 class="mdui-typo-display-1 main-section-tittle">用户注册</h2>
                        <div class="mdui-container mdui-col-md-8 mdui-center main-sub-section">
                            <div class="mdui-col-md-6 mdui-center mdui-textfield main-input-row">
                                <i class="mdui-icon material-icons">person</i>
                                <input class="mdui-textfield-input" name="userid" type="text" placeholder="用户名/邮箱" />
                            </div>
                            <div class="mdui-col-md-6 mdui-center mdui-textfield main-input-row">
                                <i class="mdui-icon material-icons">lock</i>
                                <input class="mdui-textfield-input" name="password" type="password" placeholder="密码" />
                            </div>
                            <div class="mdui-col-md-6 mdui-center mdui-textfield main-input-row">
                                <i class="mdui-icon material-icons">code</i>
                                <input class="mdui-textfield-input" name="invitecode" type="text" placeholder="邀请码" />
                            </div>
                            <div class="mdui-col-md-6 mdui-center mdui-textfield main-input-row captcha-row">
                                <img src="http://admin.cloudsql.1473.cn/v1/captcha?` + new Date().getTime() + `">
                                <input class="mdui-textfield-input" name="captcha" type="text" placeholder="验证码" />
                            </div>
                            <div class="mdui-col-md-6 mdui-center mdui-typo main-a-row">
                                <a href="#/signin">已有账户，点击登陆</a>
                            </div>
                            <div class="mdui-col-md-6 mdui-center main-button-row">
                                <button class="mdui-btn mdui-btn-block mdui-color-theme-accent">注册</button>
                            </div>
                        </div>
                    </div>
                </main>
                <footer>
                    <div class="footer-copyright">Copyright © 2016 - 2017 <a href="/">CloudSQL</a> All rights reserved.</div>
                </footer>
            `)

            //验证码刷新逻辑
            let captchaImg = document.querySelector('.captcha-row img');

            captchaImg.addEventListener('click', function () {
                this.src = 'http://admin.cloudsql.1473.cn/v1/captcha' + '?' + new Date().getTime(); //加入当前时间以避免缓存
            }, false);

            let submitButton = document.querySelector('.main-button-row button');

            submitButton.addEventListener('click', function () {
                let signupUrl = 'http://admin.cloudsql.1473.cn/v1/signup',
                    userId = document.querySelector('input[name=userid]').value,
                    password = document.querySelector('input[name=password]').value,
                    captchaCode = document.querySelector('input[name=captcha]').value,
                    postData = 'userId=' + userId + '&password=' + password + '&captcha=' + captchaCode;
                    
                this.ajax.post(signupUrl, postData, function (response) {
                    if (response.status == 'successed') {
                        mdui.snackbar({
                            message: response.info
                        });
                        window.location.hash = response.url;
                    } else {
                        mdui.snackbar({
                            message: response.info
                        });
                    }
                })
            }.bind(this), false)
        },
        index: function () {
            let contentAera = document.querySelector('.mdui-container.main-container'),
                getUserCountUrl = 'http://admin.cloudsql.1473.cn/v1/index/userList/getUserCount',
                getDatabaseCountUrl = 'http://admin.cloudsql.1473.cn/v1/index/databaseList/getDatabaseCount',
                content = `
                    <div class="mdui-row-xs-1 mdui-row-sm-1 mdui-row-md-3 mdui-row-xl-3 mdui-m-t-3 main-status-row">
                        <div class="mdui-col mdui-clearfix main-status-col">
                            <div class="mdui-float-left icon-row">
                                <i class="mdui-list-item-icon mdui-icon material-icons">person</i>
                            </div>
                            <div class="mdui-float-left info-row">
                                <div class="name-col">用户数量</div>
                                <div id="numberOfUser" class="value-col">1024</div>
                            </div>
                        </div>
                        <div class="mdui-col mdui-clearfix main-status-col">
                            <div class="mdui-float-left icon-row">
                                <i class="mdui-list-item-icon mdui-icon material-icons">view_list</i>
                            </div>
                            <div class="mdui-float-left info-row">
                                <div class="name-col">数据库数量</div>
                                <div id="numberOfDatabse" class="value-col">1024</div>
                            </div>
                        </div>
                        <div class="mdui-col mdui-clearfix main-status-col">
                            <div class="mdui-float-left icon-row">
                                <i class="mdui-list-item-icon mdui-icon material-icons">cloud</i>
                            </div>
                            <div class="mdui-float-left info-row">
                                <div class="name-col">服务状态</div>
                                <div class="value-col">正常</div>
                            </div>
                        </div>
                    </div>
                `;

            mdui.JQ(contentAera).append(content);

            this.ajax.get(getUserCountUrl, function (response) {
                document.querySelector('#numberOfUser').innerText = response.data.results;
            });

            this.ajax.get(getDatabaseCountUrl, function (response) {
                document.querySelector('#numberOfDatabse').innerText = response.data.results;
            });
        },
        databaseList: function (arg) {
            let contentAera = document.querySelector('.mdui-container.main-container'),
                getDatabaseListUrl = 'http://admin.cloudsql.1473.cn/v1/index/databaseList';

            if (!this.arguments.arg.argStr) {
                this.arguments.arg = {
                    argStr: 'pageIndex=1&orderBy=databaseName',
                    argObj: {
                        'pageIndex': 1,
                        'orderBy': 'databaseName',
                        'search': ''
                    }
                }
            }

            getDatabaseListUrl += '?' + this.arguments.arg.argStr;

            mdui.JQ(contentAera).empty();
            mdui.JQ(contentAera).append(`
                <h2 class="mdui-text-color-theme">用户数据库列表</h2>
                <div class="mdui-col-xs-12 mdui-table-fluid">
                    <div class="mdui-toolbar table-tools-bar">
                        <a href="javascript:;" class="mdui-btn mdui-btn-icon" mdui-menu="{target: '#tools-bar-attr'}">
                            <i class="mdui-icon material-icons">menu</i>
                        </a>
                        <span class="mdui-typo-title">工具栏</span>
                        <div class="mdui-toolbar-spacer"></div>
                        <div class="mdui-textfield mdui-textfield-expandable table-search-row">
                            <button id="serach" class="mdui-textfield-icon mdui-btn mdui-btn-icon">
                                <i class="mdui-icon material-icons">search</i>
                            </button>
                            <input id="search-inner" class="mdui-textfield-input" type="text" placeholder="数据库名/用户ID/创建时间" />
                            <button id="serach-done" class="mdui-textfield-close mdui-btn mdui-btn-icon">
                                <i class="mdui-icon material-icons">check</i>
                            </button>
                        </div>
                        <a id="refresh" class="mdui-btn mdui-btn-icon">
                            <i class="mdui-icon material-icons">refresh</i>
                        </a>
        
                        <ul class="mdui-menu" id="tools-bar-attr">
                            <li class="mdui-menu-item" disabled>
                                <a href="javascript:;">排序方式</a>
                            </li>
                            <li id="userId" class="mdui-menu-item">
                                <a href="javascript:;" class="mdui-ripple">用户ID</a>
                            </li>
                            <li id="databaseName" class="mdui-menu-item">
                                <a href="javascript:;" class="mdui-ripple">数据库名称</a>
                            </li>
                            <li id="createDate" class="mdui-menu-item">
                                <a href="javascript:;" class="mdui-ripple">数据库创建时间</a>
                            </li>
                            <li class="mdui-divider"></li>
                            <li class="mdui-menu-item" disabled>
                                <a href="javascript:;">操作</a>
                            </li>
                            <li class="mdui-menu-item">
                                <a href="javascript:;" class="mdui-ripple">删除数据库</a>
                            </li>
                            <li class="mdui-menu-item">
                                <a href="javascript:;" class="mdui-ripple">清空数据库</a>
                            </li>
                        </ul>
                    </div>

                    <table class="mdui-table mdui-table-selectable">
                        <thead>
                            <tr>
                                <th>数据库名</th>
                                <th>用户ID</th>
                                <th>用户名称</th>
                                <th>创建时间</th>
                                <th class="mdui-table-col-numeric">操作</th>
                            </tr>
                        </thead>
                    </table>
                    <div class="mdui-col-xs-12 mdui-clearfix page-button-row">
                        <div class="mdui-float-right">
                            <span class="mdui-float-left">共</span>
                            <b class="mdui-float-left"></b>
                            <span class="mdui-float-left">页，当前为</span>
                            <input class="mdui-float-left" name="pageNum" type="text" />
                            <span class="mdui-float-left">页</span>
                            <button class="mdui-float-left mdui-btn mdui-btn-raised mdui-ripple">跳转</button>
                        </div>
                    </div>
                </div>
            `);

            let table = document.querySelector('table'),
                searchInner = document.querySelector('#search-inner'),
                searchDoneButton = document.querySelector('#serach-done'),
                refreshButton = document.querySelector('#refresh'),
                orderByUserIdButton = document.querySelector('#tools-bar-attr > li:nth-child(2)'),
                orderByDbNameButton = document.querySelector('#tools-bar-attr > li:nth-child(3)'),
                orderByCreateDateButton = document.querySelector('#tools-bar-attr > li:nth-child(4)'),
                dropActionButton = document.querySelector('#tools-bar-attr > li:nth-child(7)'),
                emptyActionButton = document.querySelector('#tools-bar-attr > li:nth-child(8)'),
                menuOrderBut = [orderByUserIdButton, orderByDbNameButton, orderByCreateDateButton];


            searchDoneButton.addEventListener('click', (function () {
                this.arguments.arg.argObj.search = searchInner.value;

                let argStr = this.arguments.computed();

                window.location.hash = '/index/databaseList?' + argStr;
            }).bind(this), false);

            refreshButton.addEventListener('click', function () {
                window.location.reload();
            }, false);

            menuOrderBut.forEach(function (item, index) {
                item.addEventListener('click', (function () {
                    this.arguments.arg.argObj.orderBy = item.id;

                    let argStr = this.arguments.computed();

                    window.location.hash = '/index/databaseList?' + argStr;
                }).bind(this), false);
            }, this);

            dropActionButton.addEventListener('click', function () {
                let selectedRow = document.querySelectorAll('tbody tr.mdui-table-row-selected');

                if (selectedRow.length <= 0) {
                    mdui.dialog({
                        title: '错误',
                        content: '您未选择操作对象，无法删除数据库。',
                        history: false,
                        buttons: [{
                            text: '关闭'
                        }]
                    });
                } else {
                    mdui.dialog({
                        title: '警告',
                        content: '请确保您清楚您当前正在执行一个危险操作操作',
                        history: false,
                        buttons: [{
                                text: '确定',
                                onClick: function (inst) {
                                    let dropDatabaseUrl = 'http://admin.cloudsql.1473.cn/v1/index/databaseList/dropDatabase',
                                        successAry = [],
                                        faildAry = [];

                                    selectedRow.forEach(function (item, index, array) {
                                        let data = 'dbName=' + item.children[1].innerText;

                                        this.ajax.post(dropDatabaseUrl, data, function (response) {
                                            if (response.status == 'success') {
                                                successAry.push(item.children[1].innerText);
                                            } else {
                                                faildAry.push(item.children[1].innerText);
                                            }

                                            if (successAry.length + faildAry.length == array.length) {
                                                let dialogContent = `
                                                    <ul class="mdui-list">
                                                        <li class="mdui-list-item mdui-ripple">
                                                            <div class="mdui-list-item-content">
                                                                <div class="mdui-list-item-title mdui-list-item-one-line">执行成功</div>
                                                                <div class="mdui-list-item-text mdui-list-item-two-line">` + successAry.join() + `</div>
                                                            </div>
                                                        </li>
                                                        <li class="mdui-list-item mdui-ripple">
                                                            <div class="mdui-list-item-content">
                                                                <div class="mdui-list-item-title mdui-list-item-one-line">执行失败</div>
                                                                <div class="mdui-list-item-text mdui-list-item-two-line">` + faildAry.join() + `</div>
                                                            </div>
                                                        </li>
                                                    </ul>
                                                `;

                                                mdui.dialog({
                                                    title: '完成',
                                                    content: dialogContent,
                                                    history: false,
                                                    buttons: [{
                                                        text: '关闭',
                                                        onClick: function (inst) {
                                                            window.location.reload();
                                                        }
                                                    }]
                                                });
                                            }
                                        });
                                    }, this);
                                }
                            },
                            {
                                text: '取消'
                            }
                        ]
                    });
                }
            }, false)

            emptyActionButton.addEventListener('click', function () {
                let selectedRow = document.querySelectorAll('tbody tr.mdui-table-row-selected');

                if (selectedRow.length <= 0) {
                    mdui.dialog({
                        title: '错误',
                        content: '您未选择操作对象，无法删除数据库。',
                        history: false,
                        buttons: [{
                            text: '关闭'
                        }]
                    });
                } else {
                    mdui.dialog({
                        title: '警告',
                        content: '请确保您清楚您当前正在执行一个危险操作操作',
                        history: false,
                        buttons: [{
                                text: '确定',
                                onClick: function (inst) {
                                    let dropDatabaseUrl = 'http://admin.cloudsql.1473.cn/v1/index/databaseList/emptyDatabase',
                                        successAry = [],
                                        faildAry = [];

                                    selectedRow.forEach(function (item, index, array) {
                                        let data = 'dbName=' + item.children[1].innerText;

                                        this.ajax.post(dropDatabaseUrl, data, function (response) {
                                            if (response.status == 'success') {
                                                successAry.push(item.children[1].innerText);
                                            } else {
                                                faildAry.push(item.children[1].innerText);
                                            }

                                            if (successAry.length + faildAry.length == array.length) {
                                                let dialogContent = `
                                                    <ul class="mdui-list">
                                                        <li class="mdui-list-item mdui-ripple">
                                                            <div class="mdui-list-item-content">
                                                                <div class="mdui-list-item-title mdui-list-item-one-line">执行成功</div>
                                                                <div class="mdui-list-item-text mdui-list-item-two-line">` + successAry.join() + `</div>
                                                            </div>
                                                        </li>
                                                        <li class="mdui-list-item mdui-ripple">
                                                            <div class="mdui-list-item-content">
                                                                <div class="mdui-list-item-title mdui-list-item-one-line">执行失败</div>
                                                                <div class="mdui-list-item-text mdui-list-item-two-line">` + faildAry.join() + `</div>
                                                            </div>
                                                        </li>
                                                    </ul>
                                                `;

                                                mdui.dialog({
                                                    title: '完成',
                                                    content: dialogContent,
                                                    history: false,
                                                    buttons: [{
                                                        text: '关闭',
                                                        onClick: function (inst) {
                                                            window.location.reload();
                                                        }
                                                    }]
                                                });
                                            }
                                        });
                                    }, this);
                                }
                            },
                            {
                                text: '取消'
                            }
                        ]
                    });
                }
            }, false)

            //AJAX向后台数据接口获取数据后执行回调函数
            this.ajax.get(getDatabaseListUrl, function (response) {
                if (response.status == 'success') {
                    let tableBody = document.createElement('tbody'),
                        results = response.data.results,
                        resultsCount = response.data.count;

                    if (resultsCount === 0) {
                        let subContentAera = document.querySelector('.mdui-col-xs-12.mdui-table-fluid'),
                            pageButRow = document.querySelector('.mdui-col-xs-12.mdui-clearfix.page-button-row');

                        mdui.JQ(table).remove();
                        mdui.JQ(pageButRow).remove();

                        mdui.JQ(subContentAera).append(`<p style="text-align: center;">暂无数据</p>`);
                    } else {
                        results.forEach(function (item, index, array) {
                            let resultsAry = [],
                                detailBut = document.createElement('button'),
                                removeBut = document.createElement('button');

                            detailBut.className = 'mdui-btn';
                            removeBut.className = 'mdui-btn mdui-color-theme-accent';
                            detailBut.innerText = '查看详情';
                            removeBut.innerText = '删除';
                            detailBut.addEventListener('click', function () {
                                let getDatabaseTablesUrl = 'http://admin.cloudsql.1473.cn/v1/index/databaseList/getDatabaseAllTables?dbName=' + item.dbName;

                                this.ajax.get(getDatabaseTablesUrl, function (response) {
                                    let tablesAry = [];

                                    response.data.results.forEach(function (_item) {
                                        tablesAry.push(_item.TABLE_NAME);
                                    });

                                    if (tablesAry.length === 0) {
                                        tablesAry.push('该数据库无数据表信息');
                                    }

                                    let content = `
                                        <ul class="mdui-list">
                                            <li class="mdui-list-item mdui-ripple">
                                                <div class="mdui-list-item-content">
                                                    <div class="mdui-list-item-title mdui-list-item-one-line">数据库名称</div>
                                                    <div class="mdui-list-item-text mdui-list-item-two-line">` + item.dbName + `</div>
                                                </div>
                                            </li>
                                            <li class="mdui-list-item mdui-ripple">
                                                <div class="mdui-list-item-content">
                                                    <div class="mdui-list-item-title mdui-list-item-one-line">数据库拥有者ID</div>
                                                    <div class="mdui-list-item-text mdui-list-item-two-line">` + item.dbOwnUuid + `</div>
                                                </div>
                                            </li>
                                            <li class="mdui-list-item mdui-ripple">
                                                <div class="mdui-list-item-content">
                                                    <div class="mdui-list-item-title mdui-list-item-one-line">数据库创建时间</div>
                                                    <div class="mdui-list-item-text mdui-list-item-two-line">` + item.createDate + `</div>
                                                </div>
                                            </li>
                                            <li class="mdui-list-item mdui-ripple">
                                                <div class="mdui-list-item-content">
                                                    <div class="mdui-list-item-title mdui-list-item-one-line">数据库数据表列表</div>
                                                    <div class="mdui-list-item-text mdui-list-item-two-line">` + tablesAry.join(' ') + `</div>
                                                </div>
                                            </li>
                                        </ul>
                                    `;

                                    mdui.dialog({
                                        title: '数据库详情',
                                        content: content,
                                        history: false,
                                        buttons: [{
                                                text: '清空数据库',
                                                onClick: function (inst) {
                                                    mdui.dialog({
                                                        title: '警告',
                                                        content: '请确保您清楚您当前正在执行一个危险操作操作',
                                                        history: false,
                                                        buttons: [{
                                                                text: '确定',
                                                                onClick: function (inst) {
                                                                    let emptyDatabaseUrl = 'http://admin.cloudsql.1473.cn/v1/index/databaseList/emptyDatabase',
                                                                        data = 'dbName=' + item.dbName;

                                                                    this.ajax.post(emptyDatabaseUrl, data, function (response) {
                                                                        if (response.status == 'success') {
                                                                            mdui.dialog({
                                                                                content: '执行成功',
                                                                                history: false,
                                                                                buttons: [{
                                                                                    text: '确定',
                                                                                    onClick: function (inst) {
                                                                                        window.location.reload();
                                                                                    }
                                                                                }]
                                                                            });
                                                                        } else {
                                                                            mdui.dialog({
                                                                                content: '执行失败',
                                                                                history: false,
                                                                                buttons: [{
                                                                                    text: '确定',
                                                                                    onClick: function (inst) {
                                                                                        window.location.reload();
                                                                                    }
                                                                                }]
                                                                            });
                                                                        }
                                                                    });
                                                                }
                                                            },
                                                            {
                                                                text: '取消'
                                                            }
                                                        ]
                                                    });
                                                }
                                            },
                                            {
                                                text: '删除数据库',
                                                onClick: function (inst) {
                                                    mdui.dialog({
                                                        title: '警告',
                                                        content: '请确保您清楚您当前正在执行一个危险操作操作',
                                                        history: false,
                                                        buttons: [{
                                                                text: '确定',
                                                                onClick: function (inst) {
                                                                    let dropDatabaseUrl = 'http://admin.cloudsql.1473.cn/v1/index/databaseList/dropDatabase',
                                                                        data = 'dbName=' + item.dbName;

                                                                    this.ajax.post(dropDatabaseUrl, data, function (response) {
                                                                        if (response.status == 'success') {
                                                                            mdui.dialog({
                                                                                content: '执行成功',
                                                                                history: false,
                                                                                buttons: [{
                                                                                    text: '确定',
                                                                                    onClick: function (inst) {
                                                                                        window.location.reload();
                                                                                    }
                                                                                }]
                                                                            });
                                                                        } else {
                                                                            mdui.dialog({
                                                                                content: '执行失败',
                                                                                history: false,
                                                                                buttons: [{
                                                                                    text: '确定',
                                                                                    onClick: function (inst) {
                                                                                        window.location.reload();
                                                                                    }
                                                                                }]
                                                                            });
                                                                        }
                                                                    });
                                                                }
                                                            },
                                                            {
                                                                text: '取消'
                                                            }
                                                        ]
                                                    });
                                                }
                                            },
                                            {
                                                text: '关闭'
                                            }
                                        ]
                                    });
                                });
                            }.bind(this), false);
                            removeBut.addEventListener('click', function () {
                                mdui.dialog({
                                    title: '警告',
                                    content: `
                                        <p>请确保您清楚您当前正在执行一个危险操作操作</p>
                                        <p>您确定要删除DB: <b>` + item.dbName + `</b> 吗？</p>
                                        `,
                                    history: false,
                                    buttons: [{
                                            text: '确定',
                                            onClick: function (inst) {
                                                let dropDatabaseUrl = 'http://admin.cloudsql.1473.cn/v1/index/databaseList/dropDatabase',
                                                    data = 'dbName=' + item.dbName;

                                                this.ajax.post(dropDatabaseUrl, data, function (response) {
                                                    if (response.status == 'success') {
                                                        mdui.dialog({
                                                            content: '执行成功',
                                                            history: false,
                                                            buttons: [{
                                                                text: '确定',
                                                                onClick: function (inst) {
                                                                    window.location.reload();
                                                                }
                                                            }]
                                                        });
                                                    } else {
                                                        mdui.dialog({
                                                            content: '执行失败',
                                                            history: false,
                                                            buttons: [{
                                                                text: '确定',
                                                                onClick: function (inst) {
                                                                    window.location.reload();
                                                                }
                                                            }]
                                                        });
                                                    }
                                                });
                                            }
                                        },
                                        {
                                            text: '取消'
                                        }
                                    ]
                                });
                            }, false);

                            let actionColContent = [detailBut, removeBut];

                            resultsAry.push(item.dbName, item.dbOwnUuid, item.account, item.createDate, actionColContent);

                            let tr = this.printer.tableGenerator(resultsAry);

                            tableBody.appendChild(tr);
                        }, this);

                        table.appendChild(tableBody);
                        mdui.updateTables(table);

                        let pageShowCol = document.querySelector('.mdui-col-xs-12.page-button-row b'),
                            pageNumOfNow = document.querySelector('.mdui-col-xs-12.page-button-row input'),
                            jumpButton = document.querySelector('.mdui-col-xs-12.page-button-row button'),
                            pageNum = Math.ceil(resultsCount / 20);

                        pageShowCol.innerHTML = pageNum;
                        pageNumOfNow.value = this.arguments.arg.argObj.pageIndex;
                        jumpButton.addEventListener('click', (function () {
                            this.arguments.arg.argObj.pageIndex = pageNumOfNow.value;

                            let argStr = this.arguments.computed();

                            window.location.hash = '/index/databaseList?' + argStr;
                        }).bind(this), false);
                    }
                } else {
                    mdui.snackbar({
                        message: response.info
                    });
                }
            }.bind(this));
        },
        userList: function () {
            let contentAera = document.querySelector('.mdui-container.main-container'),
                getUserListUrl = 'http://admin.cloudsql.1473.cn/v1/index/userList';

            if (!this.arguments.arg.argStr) {
                this.arguments.arg = {
                    argStr: 'pageIndex=1&orderBy=userName',
                    argObj: {
                        'pageIndex': 1,
                        'orderBy': 'userName',
                        'search': ''
                    }
                }
            }

            getUserListUrl += '?' + this.arguments.arg.argStr;

            mdui.JQ(contentAera).empty();
            mdui.JQ(contentAera).append(`
                <h2 class="mdui-text-color-theme">用户数据库列表</h2>
                <div class="mdui-col-xs-12 mdui-table-fluid">
                    <div class="mdui-toolbar table-tools-bar">
                        <a href="javascript:;" class="mdui-btn mdui-btn-icon" mdui-menu="{target: '#tools-bar-attr'}">
                            <i class="mdui-icon material-icons">menu</i>
                        </a>
                        <span class="mdui-typo-title">工具栏</span>
                        <div class="mdui-toolbar-spacer"></div>
                        <div class="mdui-textfield mdui-textfield-expandable table-search-row">
                            <button id="serach" class="mdui-textfield-icon mdui-btn mdui-btn-icon">
                                <i class="mdui-icon material-icons">search</i>
                            </button>
                            <input id="search-inner" class="mdui-textfield-input" type="text" placeholder="用户ID/用户昵称/数据库密码" />
                            <button id="serach-done" class="mdui-textfield-close mdui-btn mdui-btn-icon">
                                <i class="mdui-icon material-icons">check</i>
                            </button>
                        </div>
                        <a id="refresh" class="mdui-btn mdui-btn-icon">
                            <i class="mdui-icon material-icons">refresh</i>
                        </a>
        
                        <ul class="mdui-menu" id="tools-bar-attr">
                            <li class="mdui-menu-item" disabled>
                                <a href="javascript:;">排序方式</a>
                            </li>
                            <li id="userId" class="mdui-menu-item">
                                <a href="javascript:;" class="mdui-ripple">用户ID</a>
                            </li>
                            <li id="userNickName" class="mdui-menu-item">
                                <a href="javascript:;" class="mdui-ripple">用户昵称</a>
                            </li>
                            <li id="createDate" class="mdui-menu-item">
                                <a href="javascript:;" class="mdui-ripple">用户创建时间</a>
                            </li>
                            <li class="mdui-divider"></li>
                            <li class="mdui-menu-item" disabled>
                                <a href="javascript:;">操作</a>
                            </li>
                            <li class="mdui-menu-item">
                                <a href="javascript:;" class="mdui-ripple">删除用户</a>
                            </li>
                        </ul>
                    </div>
        
                    <table class="mdui-table mdui-table-selectable">
                        <thead>
                            <tr>
                                <th>用户昵称</th>
                                <th>用户ID</th>
                                <th>数据库密码</th>
                                <th>用户注册时间</th>
                                <th class="mdui-table-col-numeric ">操作</th>
                            </tr>
                        </thead>
                    </table>

                    <div class="mdui-col-xs-12 mdui-clearfix page-button-row">
                        <div class="mdui-float-right">
                            <span class="mdui-float-left">共</span>
                            <b class="mdui-float-left"></b>
                            <span class="mdui-float-left">页，当前为</span>
                            <input class="mdui-float-left" name="pageNum" type="text" />
                            <span class="mdui-float-left">页</span>
                            <button class="mdui-float-left mdui-btn mdui-btn-raised mdui-ripple">跳转</button>
                        </div>
                    </div>
                </div>
            `);

            //生成表格
            let table = document.querySelector('table'),
                searchInner = document.querySelector('#search-inner'),
                searchDoneButton = document.querySelector('#serach-done'),
                refreshButton = document.querySelector('#refresh'),
                orderByUserIdButton = document.querySelector('#tools-bar-attr > li:nth-child(2)'),
                orderByUserNameButton = document.querySelector('#tools-bar-attr > li:nth-child(3)'),
                orderByUserCreateButton = document.querySelector('#tools-bar-attr > li:nth-child(4)')
            removeActionButton = document.querySelector('#tools-bar-attr > li:nth-child(7)'),
                menuOrderBut = [orderByUserIdButton, orderByUserNameButton, orderByUserCreateButton];

            searchDoneButton.addEventListener('click', (function () {
                this.arguments.arg.argObj.search = searchInner.value;

                let argStr = this.arguments.computed();

                window.location.hash = '/index/userList?' + argStr;
            }).bind(this), false);

            refreshButton.addEventListener('click', function () {
                window.location.reload();
            }, false);

            removeActionButton.addEventListener('click', function () {
                let selectedRow = document.querySelectorAll('tbody tr.mdui-table-row-selected');

                if (selectedRow.length <= 0) {
                    mdui.dialog({
                        title: '错误',
                        content: '您未选择操作对象，无法删除数据库。',
                        history: false,
                        buttons: [{
                            text: '关闭'
                        }]
                    });
                } else {
                    mdui.dialog({
                        title: '警告',
                        content: '请确保您清楚您当前正在执行一个危险操作操作',
                        history: false,
                        buttons: [{
                                text: '确定',
                                onClick: function (inst) {
                                    let dropDatabaseUrl = 'http://admin.cloudsql.1473.cn/v1/index/userList/removeUser',
                                        successAry = [],
                                        faildAry = [];

                                    selectedRow.forEach(function (item, index, array) {
                                        let data = 'userId=' + item.children[2].innerText + '&userNickName=' + item.children[1].innerText;

                                        this.ajax.post(dropDatabaseUrl, data, function (response) {
                                            if (response.status == 'success') {
                                                successAry.push(item.children[1].innerText);
                                            } else {
                                                faildAry.push(item.children[1].innerText);
                                            }

                                            if (successAry.length + faildAry.length == array.length) {
                                                let dialogContent = `
                                                    <ul class="mdui-list">
                                                        <li class="mdui-list-item mdui-ripple">
                                                            <div class="mdui-list-item-content">
                                                                <div class="mdui-list-item-title mdui-list-item-one-line">执行成功</div>
                                                                <div class="mdui-list-item-text mdui-list-item-two-line">` + successAry.join() + `</div>
                                                            </div>
                                                        </li>
                                                        <li class="mdui-list-item mdui-ripple">
                                                            <div class="mdui-list-item-content">
                                                                <div class="mdui-list-item-title mdui-list-item-one-line">执行失败</div>
                                                                <div class="mdui-list-item-text mdui-list-item-two-line">` + faildAry.join() + `</div>
                                                            </div>
                                                        </li>
                                                    </ul>
                                                `;

                                                mdui.dialog({
                                                    title: '完成',
                                                    content: dialogContent,
                                                    history: false,
                                                    buttons: [{
                                                        text: '关闭',
                                                        onClick: function (inst) {
                                                            window.location.reload();
                                                        }
                                                    }]
                                                });
                                            }
                                        });
                                    }, this);
                                }
                            },
                            {
                                text: '取消'
                            }
                        ]
                    });
                }
            }, false)

            menuOrderBut.forEach(function (item, index) {
                item.addEventListener('click', (function () {
                    this.arguments.arg.argObj.orderBy = item.id;

                    let argStr = this.arguments.computed();

                    window.location.hash = '/index/userList?' + argStr;
                }).bind(this), false);
            }, this);

            //AJAX向后台数据接口获取数据后执行回调函数
            this.ajax.get(getUserListUrl, function (response) {
                if (response.status == 'success') {
                    let tableBody = document.createElement('tbody'),
                        results = response.data.results,
                        resultsCount = response.data.count;

                    if (resultsCount === 0) {
                        let subContentAera = document.querySelector('.mdui-col-xs-12.mdui-table-fluid'),
                            pageButRow = document.querySelector('.mdui-col-xs-12.mdui-clearfix.page-button-row');

                        mdui.JQ(table).remove();
                        mdui.JQ(pageButRow).remove();

                        mdui.JQ(subContentAera).append(`<p style="text-align: center;">暂无数据</p>`);
                    } else {

                    }

                    results.forEach(function (item, index) {
                        let resultsAry = [],
                            detailBut = document.createElement('button'),
                            removeBut = document.createElement('button');

                        detailBut.className = 'mdui-btn';
                        removeBut.className = 'mdui-btn mdui-color-theme-accent';
                        detailBut.innerText = '查看详情';
                        removeBut.innerText = '删除';

                        detailBut.addEventListener('click', function () {
                            let getUserOwnDbUrl = 'http://admin.cloudsql.1473.cn/v1/index/userList/getUserOwnDb?userId=' + item.uuid;

                            this.ajax.get(getUserOwnDbUrl, function (response) {
                                let dbAry = [];

                                response.data.results.forEach(function (_item) {
                                    dbAry.push(_item.dbName);
                                });

                                if (dbAry.length === 0) {
                                    dbAry.push('无');
                                }

                                let content = `
                                        <ul class="mdui-list">
                                            <li class="mdui-list-item mdui-ripple">
                                                <div class="mdui-list-item-content">
                                                    <div class="mdui-list-item-title mdui-list-item-one-line">用户昵称</div>
                                                    <div class="mdui-list-item-text mdui-list-item-two-line">` + item.account + `</div>
                                                </div>
                                            </li>
                                            <li class="mdui-list-item mdui-ripple">
                                                <div class="mdui-list-item-content">
                                                    <div class="mdui-list-item-title mdui-list-item-one-line">用户UUID</div>
                                                    <div class="mdui-list-item-text mdui-list-item-two-line">` + item.uuid + `</div>
                                                </div>
                                            </li>
                                            <li class="mdui-list-item mdui-ripple">
                                                <div class="mdui-list-item-content">
                                                    <div class="mdui-list-item-title mdui-list-item-one-line">数据库密码</div>
                                                    <div class="mdui-list-item-text mdui-list-item-two-line">` + item.dbpassword + `</div>
                                                </div>
                                            </li>
                                            <li class="mdui-list-item mdui-ripple">
                                                <div class="mdui-list-item-content">
                                                    <div class="mdui-list-item-title mdui-list-item-one-line">数据库列表</div>
                                                    <div class="mdui-list-item-text mdui-list-item-two-line">` + dbAry.join(' ') + `</div>
                                                </div>
                                            </li>
                                        </ul>
                                    `;

                                mdui.dialog({
                                    title: '用户详情',
                                    content: content,
                                    history: false,
                                    buttons: [{
                                            text: '查看数据库',
                                            onClick: function (inst) {
                                                window.location.hash = '/index/databaseList?search=' + item.uuid;
                                            }
                                        },
                                        {
                                            text: '删除用户',
                                            onClick: function (inst) {
                                                mdui.dialog({
                                                    title: '警告',
                                                    content: '请确保您清楚您当前正在执行一个危险操作操作',
                                                    history: false,
                                                    buttons: [{
                                                            text: '确定',
                                                            onClick: function (inst) {
                                                                let removeUserUrl = 'http://admin.cloudsql.1473.cn/v1/index/userList/removeUser',
                                                                    data = 'userId=' + item.uuid + '&userNickName=' + item.account;

                                                                this.ajax.post(removeUserUrl, data, function (response) {
                                                                    if (response.status == 'success') {
                                                                        mdui.dialog({
                                                                            content: '执行成功',
                                                                            history: false,
                                                                            buttons: [{
                                                                                text: '确定',
                                                                                onClick: function (inst) {
                                                                                    window.location.reload();
                                                                                }
                                                                            }]
                                                                        });
                                                                    } else {
                                                                        mdui.dialog({
                                                                            content: '执行失败',
                                                                            history: false,
                                                                            buttons: [{
                                                                                text: '确定',
                                                                                onClick: function (inst) {
                                                                                    window.location.reload();
                                                                                }
                                                                            }]
                                                                        });
                                                                    }
                                                                });
                                                            }
                                                        },
                                                        {
                                                            text: '取消'
                                                        }
                                                    ]
                                                });
                                            }
                                        },
                                        {
                                            text: '关闭'
                                        }
                                    ]
                                });
                            });
                        }.bind(this), false);

                        removeBut.addEventListener('click', function () {
                            mdui.dialog({
                                title: '警告',
                                content: `
                                        <p>请确保您清楚您当前正在执行一个危险操作操作</p>
                                        <p>您确定要删除用户: <b>` + item.account + `</b> 吗？</p>
                                        `,
                                history: false,
                                buttons: [{
                                        text: '确定',
                                        onClick: function (inst) {
                                            let removeUserUrl = 'http://admin.cloudsql.1473.cn/v1/index/userList/removeUser',
                                                data = 'userId=' + item.uuid + '&userNickName=' + item.account;

                                            this.ajax.post(removeUserUrl, data, function (response) {
                                                if (response.status == 'success') {
                                                    mdui.dialog({
                                                        content: '执行成功',
                                                        history: false,
                                                        buttons: [{
                                                            text: '确定',
                                                            onClick: function (inst) {
                                                                window.location.reload();
                                                            }
                                                        }]
                                                    });
                                                } else {
                                                    mdui.dialog({
                                                        content: '执行失败',
                                                        history: false,
                                                        buttons: [{
                                                            text: '确定',
                                                            onClick: function (inst) {
                                                                window.location.reload();
                                                            }
                                                        }]
                                                    });
                                                }
                                            });
                                        }
                                    },
                                    {
                                        text: '取消'
                                    }
                                ]
                            });
                        }.bind(this), false);

                        let actionColContent = [detailBut, removeBut];

                        resultsAry.push(item.account, item.uuid, item.dbpassword, item.createDate, actionColContent);

                        let tr = this.printer.tableGenerator(resultsAry);

                        tableBody.appendChild(tr);
                    }, this);

                    table.appendChild(tableBody);
                    mdui.updateTables(table);

                    let pageShowCol = document.querySelector('.mdui-col-xs-12.page-button-row b'),
                        pageNumOfNow = document.querySelector('.mdui-col-xs-12.page-button-row input'),
                        jumpButton = document.querySelector('.mdui-col-xs-12.page-button-row button'),
                        pageNum = Math.ceil(resultsCount / 20);

                    pageShowCol.innerHTML = pageNum;
                    pageNumOfNow.value = this.arguments.arg.argObj.pageIndex;
                    jumpButton.addEventListener('click', (function () {
                        this.arguments.arg.argObj.pageIndex = pageNumOfNow.value;

                        let argStr = this.arguments.computed();

                        window.location.hash = '/index/userList?' + argStr;
                    }).bind(this), false);
                } else {
                    mdui.snackbar({
                        message: response.info
                    });
                }
            }.bind(this));
        }
    }

    this.permissionCheck = {
        /**
         * 检测账户登录状态
         * 
         * @param {any} next 回调函数
         */
        signStatus: function (next) {
            this.ajax.get('http://admin.cloudsql.1473.cn/v1/index/signStatus', function (response) {
                if (response.status == 'signedin') {
                    next.call(this);
                } else {
                    window.location.hash = '/signin';
                }
            }.bind(this));
        }
    }

    this.routes = {
        '/': function () {
            window.location.hash = '#/signin';
        },
        '/404': this.printer.pageNotFound,
        '/signin': this.printer.signin.bind(this),
        '/signup': this.printer.signup.bind(this),
        '/index': this.printer.indexInit.bind(this, this.printer.index),
        '/index/databaseList': this.printer.indexInit.bind(this, this.printer.databaseList),
        '/index/userList': this.printer.indexInit.bind(this, this.printer.userList)
    };

    this.arguments = {
        arg: {},
        computed: function () {
            this.arg.argStr = '';
            Object.keys(this.arg.argObj).forEach(function (item, index, array) {
                if (index + 1 === array.length) {
                    this.arg.argStr += item + '=' + this.arg.argObj[item];
                } else {
                    this.arg.argStr += item + '=' + this.arg.argObj[item] + '&';
                }
            }, this);

            return this.arg.argStr;
        }
    };

    this.route = function (path, callback) {
        this.routes[path] = callback || function () {}
    }

    this.refresh = function () {
        this.currentUrl = location.hash.slice(1) || '/';
        this.currentUrl = this.currentUrl.split("?");
        //路由内无对应路径则跳转至404页面
        if (this.currentUrl.length === 1 && this.routes[this.currentUrl[0]]) {
            this.routes[this.currentUrl[0]]();
            this.arguments.arg = {};
        } else if (this.currentUrl.length === 2 && this.routes[this.currentUrl[0]]) {
            this.routes[this.currentUrl[0]]();

            let argStr = this.currentUrl[1];

            this.arguments.arg = {
                argStr: argStr,
                argObj: {}
            }

            argStr.split("&").forEach(function (item, index) {
                let ary = item.split("=");

                this.arguments.arg.argObj[ary[0]] = ary[1];
            }, this);
        } else {
            this.routes['/404']();
        }
    }

    this.init = function () {
        const windowLoad = this.handleEvent('load', {
            onElement: window,
            withCallback: this.refresh.bind(this)
        });

        const hashChange = this.handleEvent('hashchange', {
            onElement: window,
            withCallback: this.refresh.bind(this)
        });
    }
}

CloudAdmin.router.prototype.ajax = {
    /**
     * 发送Get请求
     * 
     * @param {!string} url 请求地址
     * @param {?function} next 回调函数
     */
    get: function (url, next) {
        let xhr = new XMLHttpRequest();

        if (url.includes('?')) {
            // 在URL有其他参数时，添加一个date参数加入当前时间以避免缓存
            xhr.open('GET', url + '&date=' + new Date().getTime(), true);
        } else {
            // 添加一个date参数加入当前时间以避免缓存
            xhr.open('GET', url + '?' + new Date().getTime(), true);
        }
        xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        // 更改XMLHttpRequest对象withCredentials属性以支持跨域Cookies
        xhr.withCredentials = true;
        xhr.responseType = 'json';
        xhr.onload = function (res) {
            // 获取请求接口返回值
            let response = res.target.response;

            next.call(this, response);
        };
        xhr.send();
    },
    /**
     * 发送Post请求
     * 
     * @param {!string} url 请求地址
     * @param {?string} data post请求参数
     * @param {?function} next 回调函数
     */
    post: function (url, data, next) {
        let xhr = new XMLHttpRequest();

        if (url.includes('?')) {
            // 在URL有其他参数时，添加一个date参数加入当前时间以避免缓存
            xhr.open("POST", url + '&' + new Date().getTime(), true);
        } else {
            // 添加一个date参数加入当前时间以避免缓存
            xhr.open("POST", url + '?' + new Date().getTime(), true);
        }
        xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        // 更改XMLHttpRequest对象withCredentials属性以支持跨域Cookies
        xhr.withCredentials = true;
        xhr.responseType = 'json';
        xhr.onload = function (res) {
            // 获取请求接口返回值
            let response = res.target.response;

            next.call(this, response);
        };
        xhr.send(data);
    }
}

/**
 * 监听事件处理函数
 * 
 * @param {string} eventName 表示监听事件类型的字符串
 * @param {object} [{ onElement, withCallback, useCapture = false }={}] 监听对象 回调函数 useCapture
 * @param {function} thisArg 
 * @returns function
 */
CloudAdmin.router.prototype.handleEvent = function (eventName, {
    onElement,
    withCallback,
    useCapture = false
} = {}, thisArg) {
    const element = onElement || document.documentElement;

    function handler(event) {
        if (typeof withCallback === 'function') {
            withCallback.call(thisArg, event);
        }
    }

    handler.destroy = function () {
        return element.removeEventListener(eventName, handler, useCapture);
    }

    element.addEventListener(eventName, handler, useCapture);
    return handler
}

CloudAdmin.router.prototype.event = {
    dom: [],
    /**
     * 调用 CloudAdmin.router.prototype.handleEvent.handler.destroy 移除DOM的监听事件
     * 
     * @param {any} ary 存放DOM的数组
     */
    removeEventListener: function (ary) {
        
    }
}

//创建并初始化前端路由
let r = new CloudAdmin.router();
r.init();