Sean Jho

oncall小工具前端代码解读

 ·  3 分钟阅读  ·  Web 基础设施

目录

HTML 文件

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="/web/bootstrap/css/bootstrap.min.css">
</head>
<body>
    <script src="/web/vue.js"></script>
    <!-- 使用vue.js框架 -->
    <script src="/web/vue-resource.js"></script>

    <div class="container">
        <div id="uper">
            <form @submit.prevent="submit">
                <div class="form-group row">
                    <div class="form-control col-md-5 mb-2">
                        <label for="ip">IP列表</label>
                        <textarea id="ip" class="form-control" v-model="parms.iplist" placeholder="输入IP列表，按行分隔"></textarea>
                    </div>
                    <div class="form-control col-md-5 mb-2">
                        <label for="name">业务集</label>
                        <!-- 选择框使用select -->
                        <select id="name" class="form-control input-lg" v-model="parms.name" placeholder="输入业务集名">
                            <!-- value表示值为空，否则为括号外的内容 -->
                            <option value=''>请选择(默认全部)</option>
                            <option>CC_QQ电脑管家</option>
                            <option>安全产品</option>
                            <option>地图搜索</option>
                            <option>翻译君</option>
                            <option>互联网PLUS</option>
                            <option>渠道业务</option>
                            <option>桌面浏览器</option>
                            <option>手机浏览器</option>
                            <option>应用市场</option>
                            <option>MIG_Sumeru</option>
                            <option>手机腾讯网</option>
                        </select>
                    </div>
                    <div class="form-control col-md-2 mb-2">
                        <label for="num">num</label>
                        <input id="num" class="form-control" value="5000" v-model="parms.num" placeholder="需要展示前n个模块">
                        <!-- 这里的value失效了，因为绑定的是js中定义的变量，所以要去js中定义默认值 -->
                    </div>
                </div>
                <input type="submit" class="btn btn-primary" value="提交">
            </form>
        </div>

        <div id="modulea" class="card">
            <!-- 绑定js中的modulea -->
            <div class="card-header">结果</div>
            <ul class="list-group list-group-flush">
                <table class="table-striped" id="yau-res">
                    <!-- 绑定js中的yau-res -->
                    <thead>
                        <!-- 添加表头，注意不要放到循环里面，原来云鬟在上一行，因此改到tbody中去了 -->
                        <tr>
                            <th class="col-8">模块名</th>
                            <!-- col-8表示占用8/12的空间宽度，总宽度为12 -->
                            <th class="col-4">染色数</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="lie in lies">
                            <!-- lies是个列表，lie是字典（在js中都叫做object） -->
                            <td class="col-8">{{lie.module_name}}</td>
                            <td class="col-4">{{lie.ip_num}}</td>
                        </tr>
                    </tbody>
                </table>
            </ul>
        </div>
    </div>

    <script src="/web/uper.js"></script>
    <!-- 使用的js文件 -->
</body>
</html>

JavaScript 文件

var yau_res = new Vue({  //定义obj
    el: '#modulea',      //绑定标签
    Columns: ['模块名', '染色数'],
    data: {
        lies: []
    }
})

var app = new Vue({
    el: '#uper',
    data: {
        parms: {
            iplist: '',
            name: '',
            num: '50'  //默认值为50，数字也要加引号
        },
        res: "loading"
    },
    mounted: function() {
        console.log("mounted")
    },
    methods: {
        submit: function() {
            yau_res.lies = []
            url = "/uper?iplist=\"" + this.parms.iplist + "\"&bizName=\"" + this.parms.name + "\"&upernum=" + this.parms.num
            this.$http.get(url).then(response => {
                for (d in response.body.data) {  //可以理解为从字典中遍历出来的是其key，而不是key:value
                    var m_dict = { module_name: "", ip_num: "" };  //创建一个字典，即obj，注意不要是array类型
                    m_dict['module_name'] = d;
                    m_dict["ip_num"] = response.body.data[d];
                    yau_res.lies.push(m_dict)
                }
            }, response => {
                console.log("error")
            })
        }
    }
})

相关文章