oncall小工具前端代码解读 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 id=”name” class=”form-control input-lg” v-model=”parms.name” placeholder=”输入业务集名”> < !– 选择框使用select –>
< option value=’‘>请选择(默认全部) < /option> < !–value表示值为空，否则为括号外的内容 –>
< 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>
< /thread>
< tr v-for=”lie in lies”> < !– lies是个列表，lie是字典（在js中都叫做object） –>
< td class=”col-8”> < /td>
< td class=”col-4”> < /td>
< /tr>
< /tbody>
< /table>
< /ul> < /div> < /div> < script src=”/web/uper.js”> < /script> < !– 使用的js文件爱你 –> < /body> < /html> JS文件 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”) }) } } })