java web工作中的问题总结

最近一直想写一篇关于javaweb 的常见错误来总结一下自己这一年多的工作，也为自己日后查找方便和为像我一样的新手提供一些参考。

         本文所涉及到的项目的环境：

         Jdk：1.7

         Tomcat: 7.0

         后台 ：springMVC + spring +mybatis

前台 ：jsp + jquery

 

首先介绍一个浏览器的F12功能。打开谷歌浏览器（其他浏览器也差不多），按F12，

从左向右

1.      箭头图标：鼠标左击一下，可以在页面中选取页面中的内容，在下面Elements标签下高亮显示你选中内容的DOM结构，右边显示选中的DOM所应用的css。

2.      设备图标：切换页面显示为PC还是手机。

3.      Elements：显示页面的所有的DOM。

4.      Console：现在js错误和打印结构，也可以执行js。

5.      Network：显示当前页面所有的网络请求。

最常用的就是这几个，详细使用方法可以百度，或者自己看一下。

Css冲突

1.      通过F12查看css的加载顺序，调整jsp中css文件的引入顺序。

2.      修改css的选择器，精确定位到对应的DOM节点。

 

Js冲突

这个遇到的比较少，一般引入的都是基于jquery的类库，这里只给出几点建议

1.      在引入的每个js类库文件最后加上英文分号。

2.      调整js类库的引入顺序。

3.      修改冲突的js代码（非大神无法操作）。

4.      如果引入的官方的js类库，应该是有解决冲突的方法。

Jquery改变复选框的选中状态

jquery改变复选框的选中状态必须使用jquery的prop()方法而不能使用attr()方法。

Jsp请求不到数据

1.      查看jsp或者后台是否有报错，有错改错。

2.      Jsp和后台都没有报错。

1）  在数据库管理工具中运行相应的sql语句，看是否有数据。

2）  Sql语句正确，debug查看service是否能接到查询的数据。

3）  Debug查看controller是否能接到service返回的数据。

4）  查看jsp中EL表达式（或者json）数据对象及属性是否书写正确。

404错误

         百度上的404一般指的是路径不对，分为2种情况：

1.      jsp访问服务器的路径不对。

2.     服务器返回jsp的路径不对。

上面这2情况是最常见的也是最容易想到和排查的，而当你的jsp使用EL表达式渲染数据的时候，如果你的表达式写错也会造成404错误

单独执行sql语句查出多条语句，但mybatis只映射一条。

1.      查看resultMap中必要的属性是否都加上

2.      查看sql语句中是否有主表的主键，如果没有就加上主表的主键

3.      查看映射的对象中是否有重名的字段，并且sql查询中有这个字段，如果有重名的字段，修改resultMap中的result标签属性，并与sql语句中的查询字段别名相对应

 

Html5适配手机屏幕

Html5适配手机，目前流行的做法是根据手机屏幕设置页面的基础文字大小（font-size）,然后基于这个font-size将设计稿中的px换算成rem。

1.      js设置font-size

(function(win,doc) {

     functionchange() {

     var cWidth= document.body.clientWidth|| doc.documentElement.clientWidth;

         doc.documentElement.style.fontSize= cWidth * 100 /750 + 'px';

     }

     change();

     win.addEventListener('resize', change,false);

    

})(window,document);

2.      在设置样式的时候，将设计稿的px的大小除以100就得到对应的rem的大小了。而font-size需要额外的媒体查询，并且不用转成rem

@media screen and (max-width:321px){
    .m-navlist{font-size:15px}
}

@media screen and (min-width:321px) and (max-width:400px){
    .m-navlist{font-size:16px}
}

@media screen and (min-width:400px){
    .m-navlist{font-size:18px}
}

3.      图片的自适应

1.      图片为二倍图（就是比设计稿中图片大2倍的图片）

2.      图片的容器宽高仍然采用rem来设置。加上background-size：100% auto；如下：

<i class=”pic”></i>

.pic{

     display :inline-block;

     width:2rem,

     height:2rem,

     background:url('image.png') no-repeat;

     background-size:100% 100%;

}

浏览器跨域

浏览器跨域有2种方式：jsonp , cors

Jsop :

         $.ajax({

type: "get",

url: baseUrl + "/jsonp/get",

dataType: "jsonp", //跨域

success: function(response) {

$("#response").val(JSON.stringify(response));

}

});

 

Cors:

         $.ajax({

    type:"POST",

    url: baseUrl +"/jsonp/post",

    dataType: 'json',

    crossDomain: true,  //跨域

    xhrFields: {   //带上session信息

        withCredentials:true

    },

    data: {

        name:"name_from_frontend"

    },

    success: function(response) {

        console.log(response)//返回的 json 数据

        $("#response").val(JSON.stringify(response));

    }

});

手机列表下拉刷新

mescroll插件，支持vue，亲测效果很好

http://www.mescroll.com/index.html

（未完待续。。。。）