好久没有写博客了,今天正好闲下来了,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() //文本