Initial commit

plugin/web/http_status/index.html

@@ -0,0 +1,144 @@
+{extend name="common/plugin_layout" /}
+{block name="title"}{$plugin.title} - {:config_get('title')}{/block}
+{block name="main"}
+<style>
+.query-title {
+    text-align: right;
+}
+</style>
+<div class="container-xl" id="app">
+<div class="col-sm-12 col-md-10 col-xl-8 center-block">
+    <div class="card card-preview">
+        <div class="card-inner mt-3">
+            <div class="nya-title nk-ibx-action-item progress-rating">
+                <span class="nk-menu-text font-weight-bold">HTTP状态查询</span>
+            </div>
+            <div class="form-group">
+                <label class="form-label">页面URL：</label>
+                <div class="form-control-wrap">
+                    <input type="text" v-model="input" placeholder="请输入页面URL" class="form-control form-control-lg" @keyup.enter="query" ref="input" autocomplete="off">
+                </div>
+            </div>
+            <button class="btn btn-dim btn-outline-primary btn-block card-link mb-3" @click="query" :disabled="query_disabled">
+                查询
+            </button>
+        </div>
+    </div>
+    <div class="card card-preview" v-show="showresult" style="display:none">
+        <div class="card-inner mt-3">
+            <div class="nya-title nk-ibx-action-item progress-rating">
+                <span class="nk-menu-text font-weight-bold">查询结果</span>
+            </div>
+            <div class="table-responsive">
+                <table class="table table-hover table-bordered">
+                    <tbody>
+                        <tr><td class="query-title">服务器IP</td><td><a :href="'/ip?ip='+result_info.ip" target="_blank">{{result_info.ip}}</a></td></tr>
+                        <tr><td class="query-title">返回状态码</td><td>{{result_info.code}}</td></tr>
+                        <tr><td class="query-title">返回HEAD信息</td><td v-html="result_info.head" class="query-result"></td></tr>
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    </div>
+    <div class="card card-preview">
+        <div class="card-inner">
+            <h6><em class="icon ni ni-info"></em> 简介</h6>
+            <div class="accordion-inner">
+                <p>HTTP状态码（HTTP Status Code）</p>
+                <p>一些常见的状态码为：200 - 服务器成功返回网页 404 - 请求的网页不存在 503 - 服务不可用</p>
+                <p>所有状态解释：<a href="http://tools.jb51.net/table/http_status_code" target="_blank">点击查看</a></p>
+            </div>
+        </div>
+    </div>
+</div>
+</div>
+{/block}
+{block name="script"}
+<script src="{$cdn_cdnjs}vue/2.6.14/vue.min.js"></script>
+<script src="https://static.geetest.com/v4/gt4.js"></script>
+<script>
+new Vue({
+    el: '#app',
+    data: {
+        query_disabled: true,
+        input: '',
+        result_input: '',
+        showresult: false,
+        result_info: {
+            'ip': '',
+            'code': '',
+            'head': ''
+        },
+        captcha: null
+    },
+    mounted() {
+        this.$refs.input.focus();
+        var that=this;
+        initGeetest4({
+            captchaId: "99b142aaece96330d0f3ffb565ffb3ef",
+            product: 'bind',
+            protocol: 'https://',
+            riskType: 'ai',
+        },function (captcha) {
+            captcha.onReady(function(){
+                that.query_disabled=false;
+                that.captcha = captcha;
+            }).onSuccess(function(){
+                var result = captcha.getValidate();
+                if (!result) {
+                    layer.closeAll();
+                    return alert('请先完成验证');
+                }
+                var data = { url: that.input};
+                $.ajax({
+                    url: '/api/{$plugin.alias}/query',
+                    type: 'post',
+                    dataType: 'json',
+                    data: Object.assign(data, result),
+                    cache: false,
+                    success: function (data) {
+                        layer.closeAll();
+                        if(data.status=='ok'){
+                            that.showresult = true;
+                            that.result_info = data.data;
+                            captcha.reset();
+                        }else{
+                            layer.alert(data.message, {icon: 5});
+                            captcha.reset();
+                        }
+                    },
+                    error: function () {
+                        layer.closeAll();
+                        layer.msg('服务器错误', {icon: 5});
+                        captcha.reset();
+                    }
+                });
+            }).onError(function(){
+                alert('验证码加载失败，请刷新页面重试');
+            })
+        });
+    },
+    methods: {
+        checkURL()
+        {
+            var url = this.input.trim();
+            if (url.indexOf(" ")>=0){
+                url = url.replace(/ /g,"");
+            }
+            if (url.toLowerCase().indexOf("http://")<0 && url.toLowerCase().indexOf("https://")<0){
+                url = "http://"+url;
+            }
+            this.input = url;
+        },
+        query() {
+            if(this.input.trim() == ''){
+                layer.alert('要查询的网址不能为空');return;
+            }
+            this.checkURL();
+            layer.load(0, {shade:0.1});
+            this.captcha.showCaptcha();
+        },
+    },
+})
+</script>
+{/block}