mqycn-ShortUrl
/
test.html


<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>ShortUrl 在线测试</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <link href="https://cdn.bootcss.com/mdbootstrap/4.6.0/css/mdb.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/vue/2.5.21/vue.js"></script>
    <!--[if lt IE 9]>
        <script>alert('本系统仅支持IE9以上版本,如果是极速浏览器请切换到极速模式');</script>
        <style>body{display:none;}</style>
    <![endif]-->
</head>

<body style="background:#999;font-family:'Microsoft Yahei';">
    <div class="container mt-3" id="short-url">
        <div class="card mb-3">
            <div class="card-header">
                ShortUrl 调试工具
            </div>
            <div class="card-body text-center">
                <a class="btn btn-success" target="_blank" href="https://gitee.com/mqycn/ShortUrl">最新源码</a>
                <a class="btn btn-danger" target="_blank" href="http://www.miaoqiyuan.cn/">作者博客</a>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-9">
                <div class="card">
                    <div class="card-header">
                        接口测试：{{ name }}
                    </div>
                    <div class="card-body">
                        <div class="input-group mb-3">
                            <div class="input-group-prepend">
                                <span class="input-group-text">接口地址</span>
                            </div>
                            <select class="custom-select" v-model="api.url">
                                <option :value="item.url" v-for="item in apis" :key="item.url">{{ item.name }}</option>
                            </select>
                        </div>
                        <div class="input-group mb-3" v-if="items.appKey">
                            <div class="input-group-prepend">
                                <span class="input-group-text">appKey</span>
                            </div>
                            <input type="text" v-model="values.appKey" class="form-control" placeholder="请输入测试的消息内容">
                        </div>
                        <div class="input-group mb-3" v-if="items.url">
                            <div class="input-group-prepend">
                                <span class="input-group-text">原始网址</span>
                            </div>
                            <input type="text" v-model="values.url" class="form-control" placeholder="如需要测试下载，请查看日志">
                        </div>
                        <div class="input-group mb-3">
                            <div class="input-group-prepend">
                                <span class="input-group-text">请求URL</span>
                            </div>
                            <textarea class="form-control" style="height:180px;font-size:14px;font-family:consolas 'Microsoft Yahei';background:#FAFAFA;" :value="request" readonly></textarea>
                                <div class="input-group-prepend">
                                <button type="button" class="btn btn-primary btn-lg" @click="send">立即测试</button>
                            </div>
                        </div>
                        <div class="input-group mb-3">
                            <div class="input-group-prepend">
                                <span class="input-group-text">请求结果</span>
                            </div>
                            <textarea class="form-control" style="height:200px;font-size:14px;font-family:consolas 'Microsoft Yahei';background:#FAFAFA;" :value="api.result" readonly></textarea>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="card">
                    <div class="card-header">
                        接口
                    </div>
                    <div class="card-body">
                        <method-btn :is-active="active==type.type" :info="type" @active="setActive" v-for="type in types" :key="type.index"></method-btn>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
    var methods = {
        data: {},
        add: function(type, name, items) {
            var props = [],
                data = {},
                info = [];
            Object.keys(items).map(function(item) {
                props.push(items[item]);
                data[item] = items[item];
            });
            this.data[type] = {
                type: type,
                name: name,
                item: props,
                data: data
            };
        }
    };
    methods.add('create', '创建短网址', {
        appKey: 'appKey',
        url: 'url'
    });
    methods.add('install', '系统初始化', {
        appKey: 'appKey'
    });

    var apiList = {
        data: [],
        add: function(url) {
            this.data.push({
                name: url,
                url: location.protocol + '//' + location.hostname + url
            });
        }
    };
    apiList.add(location.pathname.replace('/test.html', '/api.php'));

    Vue.component('method-btn', {
        template: [
            '<div class="mb-2">',
            '   <button type="button" class="btn btn-block" @click="active" :class="[isActive?\'btn-primary\':\'btn-dark\']">{{ info.name }}</button>',
            '</div>'
        ].join(''),
        props: ['info', 'isActive'],
        methods: {
            active: function() {
                this.$emit('active', this.info.type);
            }
        }
    });

    var $vm = new Vue({
        el: '#short-url',
        data: {
            types: methods.data,
            active: false,
            values: {
                appKey: 'f5eaa2f63518c3389000d369c2b528d0',
                url: 'https://gitee.com/mqycn/ShortUrl'
            },
            apis: apiList.data,
            api: {
                url: apiList.data[0].url,
                result: ''
            }
        },
        computed: {
            activeData: function() {
                return this.types[this.active];
            },
            name: function() {
                return this.activeData.name;
            },
            items: function() {
                var items = this.activeData.item,
                    result = {},
                    checker = function(name) {
                        result[name] = this.activeData.indexOf(name);
                    };
                Object.keys(this.values).map(function(name) {
                    result[name] = items.indexOf(name) != -1;
                });
                return result;
            },
            request: function() {
                var data = this.activeData.data,
                    values = this.values,
                    params = ['method=' + this.activeData.type];

                Object.keys(data).map(function(name) {
                    params.push(name + '=' + encodeURIComponent(data[name] in values ? values[data[name]] : data[name]));
                });
                return [this.api.url, params.join('&')].join('?');
            }
        },
        methods: {
            setActive: function(activeKey, onCreated) {
                if (this.active != activeKey || onCreated) {
                    this.active = activeKey;
                    this.api.result = '请点击测试按钮';
                }
            },
            send: function() {
                var that = this;
                $.ajax({
                    url: that.request,
                    type: 'get',
                    dataType: 'text',
                    success: function(result) {
                        that.api.result = result;
                    }
                });
            }
        },
        created: function() {
            this.setActive(Object.keys(methods.data)[0], true);
        }
    });
    </script>
    <!--[if lt IE 10]>
        <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.0/css/bootstrap.min.css" rel="stylesheet">
        <script>
        var fixIE9 = {
            render: function(){
                $('.card').addClass('panel panel-default');
                $('.col-sm').addClass('col-sm-3');
                $('.input-group-prepend').addClass('input-group-addon');
                $('.custom-select').addClass('form-control').height(20);
                $('.input-group-text').removeClass('input-group-text');
                $('.input-group-prepend .btn-lg').parent().parent().find('.form-control').height(40);
            }
        };
        $vm.$watch('active', fixIE9.render);
        fixIE9.render();
        </script>
    <![endif]-->
</body>

</html>