javaweb项目问题记录(一)

此文章跟随项目进度进展,用于记录项目中的错误,如文章有错误欢迎指出。

一、ResourceBundle.getBundle文件路径问题

src/config/jdbc_html" title=mysql>mysql.properties

路径读取从src开始：

html" title=java>java">private static final ResourceBundle bundle=ResourceBundle.getBundle("config\\jdbc_html" title=mysql>mysql");

二、window.location.href is not a function错误解决方案

错误原因：是由于写法问题以及浏览器不兼容导致的

第一：请检查你调用的相对应的jquery插件文件路径是否正确。
第二：请检查插件是否有对应的函数。
第三：有的插件需要整个页面加载完毕才能正常运行。

http://www.02405.com/ui/js_jquery/1122.htm

三、获取Content-Type是application/json的post请求参数

html" title=java>java">//读取数据然后转换成map
StringBuilder sb = new StringBuilder();
        BufferedReader br = new BufferedReader(new InputStreamReader(request.getInputStream()));
        String s = "";
        while ((s = br.readLine()) != null) {
            sb.append(s);
        }
        String[] arr =sb.toString().split("&");
        Map<String,String> map =new HashMap<>();
        for (String sting : arr) {
            map.put(sting.split("=")[0], sting.split("=")[1]);
        }

https://blog.csdn.net/mhmyqn/article/details/25561535

四、对于%e5%e4…这种unicode进行解码

网页设置编码集为utf-8后，中文变成了%e5%e4这种形式。

html" title=java>java">URLDecoder.decode(sb.toString(),"utf-8")

五、关于使用layer弹层组件开发时出现layer.js文件加载错误、无法访问layer.css文件、无法找到图片

组件，是整套的。它内部模块引用关系应该是已经建立好了
1、js文件一定要放在jquery.js下面
2、css文件注意是否引用路径正确
3、再idea中把图片放入到你自己web/img文件中，idea会自动改变layer.css的引用路径

六、关于img标签中刷新验证码

html" title=java>java">img src="/EGOV/VerifyCodeServlet.action" id="img_check" alt="二维码"></td>

直接在请求后面加上"?"+Math.random()，或者new Data();
因为在生成DOM树是就缓存了第一次的图片，需要发送一个“新”的请求，所以加一些参数，表示不是上一次的

html" title=java>javascript">document.getElementById("img_check").src ="/EGOV/VerifyCodeServlet.action?"+Math.random();

七、表单提交数据给服务器后，服务器将数据(json)打入响应体中返回给浏览器，怎么获取这个数据？

搞不赢就加入
既然找不到获取到浏览器json的方法，就加入到ajax的队伍中去，真香
将表单from标签删除，通过ajax发送请求（此次就是如此解决）
当然这个发送Ajax请求除了jquery.js下的，还有表单的另外两种方法，这两种方法也都是实现form的ajax提交的方法：ajaxForm和ajaxSubmit
这两个需要导入jquery.form.js文件
方法属性：

html" title=java>javascript">target        返回的结果将放到这个target下
url           如果定义了，将覆盖原form的action
type          get和post两种方式
dataType      返回的数据类型，可选：json、xml、script
clearForm     true，表示成功提交后清除所有表单字段值
resetForm     true，表示成功提交后重置所有字段
iframe        如果设置，表示将使用iframe方式提交表单
beforeSerialize    数据序列化前：function($form,options){}
beforeSubmit  提交前：function(arr,$from,options){}
success       提交成功后：function(data,statusText){}
error         错误：function(data){alert(data.message);}

html" title=java>javascript">$(function(){
    $('#submitbtn').click(function(){
        $("form").ajaxSubmit(function(data){
                alert(data);
           })
    })
           
})

html" title=java>javascript"> $("form").submit(function(){
	return false;        
})

> 这里是引用
对于表单form提交，处理数据后，仍然要解决一系列问题：
1、表单跳转
2、重复提交
3、回退页面后数据仍然保留
用ajax局部刷新的话，就不会出现页面跳转，也不会出现回退页面。
servlet对前端发来的数据在数据库中进行检查，若已经注册，拒绝提交。（sql语句应尽量避免全表扫描）
如何加快数据库查询速度

八、项目运行时浏览器报warning：xxxx.js < /script>加载失败

1、重启idea
2、File -> Project Structure -> Modules
找到out(里面是字节码文件)删掉，让类重新加载一次

九、过渡动画怎么实现

//在触发事件里面，改变后的状态
transform: rotate(360deg);
---------------------------------------------
//原状态
transform: rotate(0deg);
//transform在2s内从0度旋转到360度，事件结束后从360->0
transition: transform 2s;

十、网页计时器，查看时间、记录管理员访问时间与退出时间

本想着用setInterval来写，但想到setTimeout与setInterval区别后，感觉还是得用setTimeout，他们的原理与优缺点：
原理：
setTimeout(exp,时间(毫秒))
函数用于启动在所述延迟之后调用特定功能的定时器，当exp为不带参数列表的函数名，不会立即执行；第二种就是字符串，可执行的js代码，可以带参数列表，但是性能上比函数名差；第三种则是调用函数，直接执行。

html" title=java>javascript">//函数
function getTime(){
	alert("获取时间");
}
//第一种
setTimeout(getTime,1000);//1秒后执行
//第二种
setTimeout("getTime()",1000);//1秒后执行
//第三种
setTimeout(getTime(),1000);//立即执行

是不是发现第三种函数体中写入本身，就会产生奇怪的现象，哎，有递归那味了

html" title=java>javascript">function getTime(){
	setTimeout(getTime(),1000);
}
setTimeout(getTime(),1000);//一秒钟后执行

这不就变成计时器了吗
setInterval(exp,时间(毫秒))
函数用于在提到的延迟中重复执行给定的功能，一旦调用了这个函数，那么就会每隔5秒钟就显示一次时间，只有在取消时才停止。

html" title=java>javascript">setTimeout(function(){},1000);//一秒钟调用函数一次

十一、怎么使用vue获取当前被点击的元素

如果使用原生js或者jquery，可以在网页加载完后直接操作目标元素id、class…等方式获得dom对象。但对于虚拟dom的vue来说，显然不能向前两者一样，但可以通过给点击的元素绑定一个事件，且参数含有$event,或者标签加入ref属性

html" title=java>javascript">//$event
<ul id="getDOM">
	<li @click="doClick($event)">点击当前行文本</li>
</ul>

//ref
<input type="text" ref="info">

怎么使用

html" title=java>javascript">//$event
<script>
   let app =new Vue({
       el: '#getDOM',
       data: {
        message: 'Hello Vue.js!'
       },
       methods: {
        doClick: function(event) {
           //下面两种方法都可以获取点击对象：第一种通过谁绑定了该点击方法，就获取谁；第二种通过点击谁获取谁    
           var el = event.currentTarget;//返回其事件监听器触发该事件的元素。
           var el = event.target;//返回触发此事件的元素（事件的目标节点）。
           alert("当前对象的内容："+el.innerHTML);
        }
    }
   });
  </script>

//ref
<script>
new Vue({
	methods:{
		do:function(){
		//该方法貌似在父组件中操作子组件内部属性挺猛的，例如：对子组件的隐藏与显示
			alert(this.$refs.info.value);
		}
	}
});
</script>

十二、js中Document.onload()与Document.ready()的区别

有效使用次数：一个html网页中ready可以使用多次，onload有效绑定使用一次。
执行的时间：ready在DOM树生成后便执行，onload在所有DOM的内容加载完后执行（img中有一张2MB的图片，前者在img生成DOM后便可以对该DOM对象操作；后者要等到图片加载完后才可以操作）

十三、怎么实现map插入顺序和访问顺序是有序的

我们创建map集合，常用HashMap来创建，但HashMap是无序的，这时我们可以所以基础于HashMap的LinkedHashMap，LinkedHashMap是有序，它基于HashMap和双向链表结构，双向链表结构是为了保证顺序，但还有注意的一点，LinkedHashMap是非线程安全的。
总结：当需要顺序地去存储key-value和顺序地去读取时，所以LinkedHashMap，注意线程安全问题
附：还可以使用TreeMap，TreeMap默认排序为升序，可以通过重写Comparator比较器改变TreeMap顺序