记录开发中遇到的坑和经验 ------前端篇_layer.alert中把输入框清空-CSDN博客

//遮罩层
var comonIndex =null;
function showLoadMask(){
  commonIndex = layer.msg("请稍等。。。",{icon:16,shade:[0.6,"#f5f5f5"],scrollbar:false,time:0});
}

function hideLoadMask(){
layer.close(commonIndex)
}

2、原生sql能查出，代码查不出。

1、检查链接的数据库地址、数据库名是否是同一个。确保查的是同一个库！。

2、连接大数据hive查询时遇到过多加条件查询不到情况，后来说原因是大数据有bug。。原因未知

3、页面弹出窗，镶嵌其他页面（包括vm、ftl页面）

像普通弹出窗一样，使用layer.open()函数，并且其中content属性，和普通的用法一样，但是需要给ifrme用js设置一下其 src属性

解决方法：使用ifrme标签。

//此代码 写在 主页面，（理解为：只是某个页面的一个隐藏div，只不过这个div用来镶嵌其他页面）
<div id = template_view" style="display:none">
   <iframe id='myIframe' src="" frameborder=0 margineight=0 marginwidth=0 scrolling=no allowtransparency="true"></iframe>
</div>

点击某个按钮触发展示嵌入框：

<button type='button' onclick='detailPage(event)'>

对应的js逻辑：

function detailPage(event){
//event 这里没用到  如果用的话 一般是 tr 某行后对应的操作：如 var myvar=$(event.target).parents('tr').chilerem(1)[].innerHTML
 var url ="www.baidu.com";
 $('#iframe').attr('src',url);
 layer.open({
    type:1,
    title:'详情'，
    area:['900px','650px'], 
    scroller:fales;
    content:$('#template_view'),
    btn:[关闭]，
    yes:function(index){
        layer.close(index); 
        //避免iframe隐藏的加载请求
        $('#iframe_id').attr("src","")   
    }

    })

}

4、iframe自适应子页面高度

//注意：下面的代码是放在和iframe同一个页面中调用
$("#iframe_Id").load(function () {
    var mainheight = $(this).contents().find("body").height() + 30;
    $(this).height(mainheight);
});

4.1 iframe 导致请求两次，一次status取消一次成功的问题：

前端开发时使用iframe标签的时候发生两次请求问题的解决方法_陈先生的博客-CSDN博客_iframe请求了两次

我的解决方法:

$('#iframe').attr("src","")  //采取了上述链接的 第二种方法，直接将iframe的的src置空 让他请求不了
//什么时候让他请求，再给他设置src的值

5、页面下拉框重置查询条件再查询。

关键字：input 清空下拉框重置页面输入框为空白

1、传统方法，js控制清空每一个条件输入框。

2、新思路：对重置按钮设置其src为跳转到此页面的url即可了。

例如：

6、页面刷新。

可以模拟人再次点击 ”查询按钮“。写的js函数触发后调用，下面代码即可

$(查询按钮).click()

7、获取整个表单数据

开发中，提交表单数据，一般点击“查询按钮”触发向后台查询的请求，form表单的数据会自动随之传到后台。但某些场景（如条件查询后更新数据，要更新之前填写过条件查询的结果），需要js单独获取form表单的数据。可以使用：

$(“#form表单的id”).serialize()  //输出 age=19&&name=qq 

或者：
$(“#form表单的id”).serializeArray ()  //输出json数组

注：在前端浏览器的控制台里使用该函数，不知道是否浏览器的问题，有可能输不出来结果，也有可能输出结果，但是项目运行还是能够正常使用 serialize（）的。

8、当使用js控制某个html标签，拼接没效果，结果不显示

场景:

开发中，遇到使用js动态追加select的选项，或者使用js追加table的行进行填充数据时。如：$("#id").append("字符串")；界面上不生效，但浏览器的控制台，使用 $("#id").html() 是有值的，

解决方法：

就很郁闷，最终输出 $（"#id"），查看这个html对象时，发现和页面的html的样式不一样，才发现卧槽，当前页面有两个叫 id=“id”的标签，所以其实是追加生效了，但追加到其他标签上去了

8.1 界面点击按钮不生效，往往是js文件加载错，文件名写错导致的

虽然这个问题很low 但是使用idea，有时候使用Refaotr导致改文件名会不小心改动了其他的地方。

浏览器控制台：Failed to load resouce:the XXX.js server responesd with a status of 404 即战斗资源。

9、禁用页面引入的第三方部分js或css样式

场景：比如引入其他js模块里的分页，但又不想显示或者禁用部分按钮的功能

（经验：获取标签的引用（第三方库往往使用的是class进行js或者样式的控制，而我们又无法为其标签设置唯一标识的id），可以通过浏览器的，如下图查看进行层级获取。）

不想显示的js控制：

$(window).bind("load",function(){
//当前页面下 a标签下的 使laypage_last 不显示
    $("a.laypage_last").attr("style","display:none;")
})

禁用部分功能：

$(window).bind("load",function(){
//会使  span标签小的class=laypage_total 的标签事件失效，触发没反应
   $("span.laypage_total").attr("style","pointer-events:none")

})

10、js获取长度含中文英文

场景：数据库某表A字段varchar(100)，前端界面输入框用户可以输入中文英文，应该使用输入字符串的字节不成功100进行校验。

解决：

function isChechede(str){

var len= new Blob([text]).size;

    if(len>100){

        $("#myInput").val(""); //清空输入内容，再提示

        layer.alert(""输入过长，重新输入)；

    }

}

11、界面输入框回显出现逗号，，关键字（回显，逗号，input）

场景：开发时复制了其他页面到当前页面，当前页面有很多输入框，就一股脑的先复制够输入框的数量，然后调试时发现，有部分输入框回显查询条件时，里面居然有“，”字符串。

原因：前端传后端数据时，如果前端的input里 name=“XX” 即：相同的名称的 input框，底层传输数据的时候，会用逗号分割。所以导致即使什么不输入测试回显界面效果就会回显出逗号

解决： input的 name 改成唯一的命名

12、<input type=date > 日期组件，获取不到值

html自带的日期组件，

<input type="date" value="" id="mydate">


....


var  temp= $("mydate").val();

temp有时候取不到值的问题：当用户选取了不符合日期格式的就会在html页面上显示设置的日期，但是获取不到该日期，如用户选：2021-02-31 这是调用 .val()方法就获取到的是空值

13、获取界面表格的某一行数据。

html页面如下：

##方法一：在tr的 data-id 直接把值隐藏到这里，一会js获取，后台用 sqlt(",")来取值即可
<tr data-id="张三，26"><td>张三</td><td>26</td><td><a href=""#>class="dataDetail"></td><tr>
<tr data-id="李四，28"><td>李四</td><td>28</td><td><a href=""#>class="dataDetail"></td><tr>

对应的js：
$(".dataDetail").on('Click',function(e){

//获取data-id预先存好的数据
var parms=$(e.target).parents("tr").data("id");

})

##方法二：适用于取当前行的个别字段

<tr data-id="张三，26"><td>张三</td><td>26</td><td><a href=""#>class="dataDetail"></td> <tr>
<tr data-id="李四，28"><td>李四</td><td>28</td><td><a href=""#>class="dataDetail"></td> <tr>

//对应的js
$(".dataDetail").on('Click',function(e){
    var name= var parms=$(e.target).parents("tr").find("td").eq(1).html();//获取该行的第一个td元素内容
})

14、覆盖第三方包的js函数（关键词引入包重写）

场景：公司使用了第三方包，包含了分页的展示效果，但业务提的奇葩问题分页可以选 100条：

如图：，于是得修改第三方包源码？我不能动jar包，所以考虑能不能“重写”。

解决方法：根据 “下一页” 搜索找到到jar包中的这个js文件，把它拷贝到自己的js文件夹下，对其进行修改后，在html页面的最下方引入该js文件，就起到了覆盖jar包的js的作用。

15、想在点击某个按钮时校验某些条件，且又无法改动当前按钮的触发代码。

场景：公司的页面点击某按钮时，自动触发提交表单的操作（自动触发的代码是jar包或者不能修改的代码），而我现在需要在点击这个按钮后，判断某个条件是否输入，如果输入则提交表单，否则提示"请输入**条件"。如下：在页面上点击"查询"按钮，会自动提交表单。

<button id="id-query" class="btn btn-sm btn-submit" type="submit">查询</button>

解决方法：使用代理思想。找个"代理"按钮：在界面上隐藏真正的"查询"，但展示 "代理"按钮，如果条件符合，再去真正,模拟点击真正的按钮。解决代码如下：

<button id="my-id-query" class="btn btn-sm btn-submit" type="button">查询</button>

<button id="id-query" style="dispaly:none" class="btn btn-sm btn-submit" type="submit">查询</button>


注：按钮的type属性必须指定，否则默认默认刷新当前页面（可能是我们公司的的默认，以防万一 记得指定）

js逻辑：

function myVerify(){

    var value = $("#name").value;//获取input框的值
    if(value==""){
        alert("请输入姓名：")；
    }else{
        //调用真实的按钮触发
        $("#id-query").click();
    }

}

心得体会：当你无法去完全控制某个东西时，考虑使用代理的模式，适用很多场景！

16、JS判断是否输入的是数字

（关键字： js判断数字）

场景：用户输入某个input时，需要只能输入数字

解决方法：调用自带的函数 isNaN（str）即可：

//检查是否是数字
function isNumber(value){
    return isNaN(value); //点击函数可跳转，该函数似乎是idea插件自带的
}

17、下载功能、下载进度条

关键字：导出数据、下载文件

方法：用<a>标签，点击a标签后，请求后台，后台处理后，输出：

OutputStream out =response.getOutputStream();
XXX.write(out);    //XXX一般为某个文件对象，如XXX为(excel对象 )XSSFWorkbook的实例对象  
out.close();

前端js：

$("#myButton").click(function(){

    //防止重复点击下载按钮
    layer.msg("请稍等。。。正在导出"，{icon:16,shade;[0.6,"#f5f5f5"],3000})
    
    $('#urlId').attr('href',url);   // 设置href属性 可以使用get请求的url 即拼接参数的
    $('#urlId')[0].click();  //默认人手去点击    坑： 没带[0] 结果点击无反应
    $('#urlId').attr('href',''); //重置


})

如何判断文件是否下载完成呢？

发送两个请求：一个是下载文件的请求，一个是for循环问后台是否下载完成的请求。后台两个对应的函数共用一个count变量，下载文件的会随着填充文件的内容而增加这个count，而count会一直返回给前台，以此在前台进行展示进度条。该进度条只是展示了文件填充完毕，不代表文件下载成功啊。小文件的下载会很快，但大文件怎么判断呢？直接在try{}catch{}finally{} 的finally 关闭流后表示下载完成。