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”>{{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> 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”) }) } } })