从0开始之——im消息融合界面

      好久没有写博客了，今天正好闲下来了，IM的消息融合界面初步阶段已经做完了，接下来可能要开始Java后台的工作，所以打算总结一番。双百回来除了宋城的dsl项目，开始写im的消息融合页面（jsp），好两个星期的时间，应该说很顺利，因为飞哥的帮忙和之前用react做过类似的管理页面，所以基本没有什么难度。

      页面，就是数据的展示和用户的体验，这是我的理解。主要功能：登录，注册，消息订阅，消息记录。

     一、 数据交互

1、页面刷新时获取数据展示。  window.location.href='controller/message/subscribed?appType    

<tbody>
<c:forEach items="${result}" var="mess">
<tr>
<td >${mess.typeId}</td>
<td >${mess.remarks}</td>
<td >${mess.supportVersion}</td>
<td ><input name = "tt"  type="button"   value="订阅" /></td>
<td ><c:forEach items="${mess.subscribeDetails}" >
<inputname="appType"type="checkbox"value="${sublist.subscribed}" checked="checked"/>       
</c:forEach></td>
</tr>
</c:forEach>
</tbody>

2、想方设法的把数据传到前端调用，关于变量的作用域，如果要在model里面引用数据：把它取到js里面，再写入方法就很多。

      $("#tr").append(）;

var sat = "";
      $('input:checkbox[name=Fruit]:checked').each(function(i){
       if(0==i){
        sat = $(this).val();
       }else{
        sat += (","+$(this).val());
       }
      });

var sub = sat.split(",");           //转化成数组传到后台（后台是list字符串）

3、数据传到后台格式：对于后台参数是@RequestParam，传参就是data：data,  

                                   对于后台参数是@RequestBody，传参需要将对象转换成json字符串：data:JSON.stringify(json),

二、登录注册cookie

       引入js，可以很方便的操作cookie，相当于浏览器的缓存

三、左侧导航

active决定显示红色( <c:if )： <c:if test="${'message' eq op }"> class="active"</c:if>

关于二级菜单，ul和li，对class进行操作，样式可调

四、路径问题（js，css）

<%

   String basePath;

 

Stringpath = request.getContextPath();

basePath= request.getScheme() + "://" + request.getServerName() +":" + request.getServerPort() + path

+"/";

request.setAttribute("basePath",basePath);

 

%>

五、弹框，引入bootstrap

按钮：data-toggle="modal" data-target="#sub"

弹框：id="sub" class="modal fade"

$("#sub").modal('show');   显示modal   //或者hide

六：复选框，选择框取值

jquery

supportVersion:$("[name='supportVersion']").val(),     //选择器

visible: $('input[name="visible"]:checked').val()       //复选框

$("#appType").text()           //文本