工作前端记录

1： a标签超链打不开 http://mp.weixin.qq.com/wiki?

t=resource/res_main&id=mp1455869988&token=&lang=zh_CN 如此的超链？
由： 在云管理程序中请求 请求头中存在Referer:http://portalmot-link.cn/Desc.html 微信处于安全考虑不让其他的referer来的请求请求成功，可以利用rel=”noreferrer”作为a标签的属性值 OK

2 : bootstrap table 刷新页面 页数不刷新?

由： （1） datepicker使用初始化的时候就会出发changeDate事件
（2） bootstrap table初始化的时候会利用url与后端交互
（3） 想要在 $(“#table”).bootstrapTable(‘refresh’);的时候 刷新页数等
可以

 $("#table").bootstrapTable('destroy');   this.reflashAllTable(); //初始化bootstrap table

解1： 代码–

export default{  data () {    return {      isFristEnter:true   //第一次进入此界面的标志    }  },  methods: {    showAvancedSearch:function(event){      $("#searchModal").modal('show');    },    search:function(event){         //模糊查询的时候 解决提交页数数据过大 后端查不到数据问题      $("#table").bootstrapTable('destroy');      this.reflashAllTable();      $("#searchModal").modal('hide');    },   reflashAllTable:function(){     var current = this;    $("#table").bootstrapTable({      url:eventList_url,      queryParams:function(p){        p["accessToken"] = current.$root.accessToken;        // p["acSerial"] = current.searchAcSerial;        p["apSerial"] = current.searchApSerial;        p["siteId"] = current.$root.siteId;        p["groupId"] = current.$root.groupId;        p["date"] = $("#calendar").val();        return p;      },      responseHandler:function(res){        var data = res.rows;        for(var i=0;i<data.length;i++){          var obj = data[i];          obj["wifiAp.serial"] = obj["apSerial"];          obj["eventType"] = getEventTypeByKey(obj["eventType"]);          obj["timestamp"] = formateTimstampToString(new Date(obj["timestamp"]));        }        return res;      },      onLoadSuccess:function(data){        $(".timestampTh div").css("width","160px");      }    });    }  },  events: {    'site-change': function (msg) {      $("#table").bootstrapTable('refresh');    }  },  ready: function() {    this.$parent.showGroup=false;    this.$parent.showSite=false;    var current = this;    var date = new Date();    var year = date.getFullYear();    var month = date.getMonth();    var day = date.getDate();    $("#calendar").datepicker({      language: current.$t('message.language'),      format: "yyyy.mm.dd"    }).on('changeDate',function(ev){   //当第一次进入此界面的时候 changeDate事件会触发       if(current.isFristEnter) {           current.reflashAllTable();           current.isFristEnter = false;       }else {          $("#table").bootstrapTable('destroy');          current.reflashAllTable();       }    });    $('#calendar').datepicker('setEndDate', new Date(year,month,day));    $('#calendar').datepicker('setDate', new Date(year,month,day));    }}

解2： 改bootstrap table源码
目的：凡是需要开发者手动刷新 或者调用$(“#table”).bootstrapTable(‘refresh’);
提交到后端的页码数据是第一页，且前端展现的数据都是从第一页开始的。

BootstrapTable.prototype.refresh = function (params) {    if (params && params.url) {        this.options.url = params.url;        this.options.pageNumber = 1;    }    // xingkong edit refresh, all refresh will go to first page    // 此时所有的refresh方法都要从第一页开始  传递到后端的 offset 都是0 ok    this.options.pageNumber = 1;      this.initServer(params && params.silent, params && params.query);}; 

3 : form表单提交json格式数据提交

ajax + spring mvc（没有多选按钮 后端使用Map<String,String> <!-- 测试开始 -->            <form id="tesst" method="post">                <ul class="forminfoWeixin">                    <li><div>                            <label id="la">a1:</label> <input type="text" name="a1"                                style="width: 300px;" class="scinput" value="" />                        </div></li>                    <li><div>                            <label id="la">a2:</label> <input type="text" name="a2"                                style="width: 300px;" class="scinput" value="" />                        </div></li>                    <li><div>                            <label id="la">ax:</label> <select id="ax" name="ax"                                class="scinput">                                <option value="0">选项1</option>                                <option value="1">选项2</option>                            </select>                        </div></li>                    <li><div>                            <label id="la">单选:</label> <input type="radio" name="sex"                                value="male" checked>Male <br> <input type="radio"                                name="sex" value="female">Female                        </div></li>                    <li><div>                            <label id="la">多选:</label> <input type="checkbox" name="sex2"                                value="male" checked>Male <br> <input                                type="checkbox" name="sex2" value="female">Female                        </div></li>                    <li><label>&nbsp;</label> <input type="submit" class="btn"                        id="submit11" value="保存" name="保存" /></li>                </ul>            </form><script type="text/javascript">        var data = {};        $("#submit11").click(function(event) {            event.preventDefault();            var arr = $('#tesst').serialize();            //$.param(arr);            /* var sex2 = {                'info' : []            }; */            /* $("input[name='sex2']:checked").each(function(i, n) {                sex2['info'].push(n.val());            }); */            alert(arr);            //alert(sex2);            $.ajax({                type : "POST",                url : "${pageContext.request.contextPath}/doss.action",                data : arr,                //dataType:json,                success : function(result) {                    alert(result.isok);                }            });        });    </script>

4 : 单个input上传一堆文件 一次路由发送这个一堆文件------------------------------   由： jquery.uploadfile.js    百度webfileupload.js 等文件上传插件  上传一堆文件的时候是多条路由到后端。   vue.js + spring mvc + XMLHttpRequest s实现前端： < input type="file" id="file" name="file" multiple="multiple">  </ div>  < div div class="col-sm-6">            < button v-on:click="xhr2">点击上传</ button></ div>js:

@RequestMapping(value = "/mifiap/deviceFileupload", method = RequestMethod.POST, produces = "application/json; charset=UTF-8")    @ResponseBody    public String deviceFileupload(MultipartHttpServletRequest request,            @RequestParam(value = "apSerial") String apSerial) { var file = document.getElementById('file').files;            if(file.length <= 0) {              layer.msg('请选择上传文件', {time: 2000,icon: 5});              return false;            }               layer.load();            var current = this;            var xhr = new XMLHttpRequest();//第一步                //定义表单变量                var file = document.getElementById('file').files;                //console.log(file.length);                //新建一个FormData对象                var formData = new FormData(); //++++++++++                formData.append("accessToken",current.$root.accessToken);            formData.append("apSerial",current.deviceFileSerial);            //追加文件数据                for(var i=0;i<file.length;i++){                       formData.append("file["+i+"]", file[i]); //++++++++++                }                 //formData.append("file", file[0]); //++++++++++                //post方式                xhr.open('POST', '/APmanager-webapp/api/mifiap/deviceFileupload'); //第二步骤                //发送请求                xhr.send(formData);  //第三步骤                //ajax返回                xhr.onreadystatechange = function(){ //第四步            // 　　　　if ( xhr.readyState == 4 && xhr.status == 200 ) {          　if (xhr.status == 200 ) {                         //回调函数        // 　　　　　　console.log( xhr.responseText );                        //服务端返回ok                    layer.closeAll('loading');                    $("#tabletipheat").bootstrapTable('refresh');                    layer.alert('文件上传成功',{time: 2000,icon: 6});                    // layer.alert('文件上传成功', {time: 2000,icon: 5});                    $("#file").val(null);        　　　　}else {                  layer.closeAll('loading');                  layer.msg('文件上传失败', {time: 2000,icon: 5});               }        　　};                //设置超时时间            //     xhr.timeout = 100000;            //     xhr.ontimeout = function(event){            // 　　　　alert('请求超时！');            // 　　}             },   

后端：Spring MVC其中的一个优势。Spring通过对Servlet API的HttpServletRequest接口进行扩展，使其能够很好地处理文件上传。扩展后的接口名为org.springframework.web.multipart.MultipartHttpServletRequest

Iterator<String> iterator = request.getFileNames(); //获取流数据集合            OutputStream os = new BufferedOutputStream(new FileOutputStream(storeZipFileRealPath));            ZipOutputStream zos = new ZipOutputStream(os);            //上传数据保存到磁盘 并打包成zip格式数据            while (iterator.hasNext()) {                String fileName = iterator.next();                MultipartFile multipartFile = request.getFile(fileName);                String originName = multipartFile.getOriginalFilename();                InputStream ins = multipartFile.getInputStream();                // zip                byte[] buf = new byte[8192];                int len1;                ZipEntry ze = new ZipEntry(originName);                zos.putNextEntry(ze);                BufferedInputStream bis = new BufferedInputStream(ins);                while ((len1 = bis.read(buf)) > 0) {                    zos.write(buf, 0, len1);                }            }

5 :XMLHttpRequest 数据对象 blob 从后端接受图片数据流

HTML代码：<div id="forAppend" class="demo"></div>JS代码：var eleAppend = document.getElementById("forAppend");window.URL = window.URL || window.webkitURL;if (typeof history.pushState == "function") {    var xhr = new XMLHttpRequest();        xhr.open("get", "/image/study/s/s256/mm1.jpg", true);    xhr.responseType = "blob";    xhr.onload = function() {        if (this.status == 200) {            var blob = this.response;            var img = document.createElement("img");            img.onload = function(e) {              window.URL.revokeObjectURL(img.src); // 清除释放            };            img.src = window.URL.createObjectURL(blob);            eleAppend.appendChild(img);            }    }    xhr.send();} else {    eleAppend.innerHTML = '<p style="color:#cd0000;">浏览器不给力，还是早点回去给孩子喂奶吧~</p>';    }

3 bootstrap table 事件使用方式
http://www.jb51.net/article/89573.htm
eg:click-row.bs.table事件的使用

$('#teacher_table').on('click-row.bs.table', function (e, row, element) {$('.success').removeClass('success');//去除之前选中的行的，选中样式 $(element).addClass('success');//添加当前选中的 success样式用于区别}); function getSelectedRow() { var index = $('#teacher_table').find('tr.success').data('index');//获得选中的行 return $('#teacher_table').bootstrapTable('getData')[index];//返回选中行所有数据}