SSM踩坑笔记 -(在更中)
作用域
把 控制层(controller)的处理好的数据传递给视图层,需要使用作用域:
JSP
(1). pageContext 由于主要使用在JSP页面内,因此不常用 作用域:用来在同一个页面的的不同标签之间传递数据Servlet
(1). request
作用域:从发送请求开始,到做出响应结束,即使发生视图之间的跳转,request仍然存在,但当响应返回至浏览器后,request失效(2). session
作用域:同一个浏览器窗口,多个请求之间需要传递数据(3). application
作用域:全局的参数,从服务器启动到服务器关闭一直有效,适合所有用户共享的频繁使用的数据
Jquery选择器
- jquery事件选择函数的用法: 选择器.click(function(){ // 添加JS代码, });
Cookie
- 记住密码登一类需要持久化存储到broswer的操作:
使用Java的后台代码,request获取cookie
1
2
3
4
5
6
7
8cookie集合 = request.getCookies();
遍历 cookie集合 for(Cookie c : cs){
if(c.getName().eqauls("loginAct"))
String loginAct = c.getValue();
else if(c.getName().equals("loginPwd"))
String loginPwd = c.getValue();
}在前端视图中获取Cookie,使用EL表达式: ps: 默认的EL表达式获取数据若不加作用域会依次变量四个作用域(非JSP下为三个作用域) 直到找到该表达式的实体,或全部查找结束找不到实体 ${cookie.loginAct.value} 获取cookie中key = loginAct下的value值 ps2: 对于前端页面使用paramContext获取request中参数,否则需要jsp进行request.get操作
重定向/请求转发
请求转发和重定向的区别: 请求转发是在服务器端执行的: 用户一次的请求,服务器多次转发,最后再回当前服务器返回给用户,期间只有一个request,且最后的url不发生任何变化
重定向是用户请求一个服务器,服务器做出临时相应,给予响应头,客户端根据临时响应头二次请求,最终的url发生变化,且中间为多个request,不是一个。
什么时候转发/重定向: 本质:若一个servlet处理完了就使用请求转发,若一个servlet未处理完则使用重定向 使用标准:根据url是否需要变化判断使用请求转发还是重定向 使用重定向的方法:
1
21. response.sendRedirct()
2. return "redirect:"
过滤器/拦截器
登录验证:
过滤器
- 创建过滤器类并实现过滤器的相应接口
1
2
3
4
5implements Filter{
-- init
-- destroy
-- doFilter
}并在doFilter函数内部进行请求的放行或进入过滤器链处理
- 配置过滤器:web.xml
缺点:
- 流程繁琐,有可能需要实现冗余接口
- 只能在请求进入资源访问之前处理,无法实现多样化的拦截和过滤,功能单一
拦截器
- 请求到达资源之前
- 请求到达资源之后
- 请求回到浏览器时
使用方法
- 提供拦截器类
1
2
3
4
5implements HandlerInterceptor{
-- pre
-- post
-- after
}- 配置拦截器:springmvc.xml
配置拦截器类时,需要设计好:
- 需要拦截的路径
- 需要放行的路径
- 拦截器类的路径
ex:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15<mvc:interceptors>
<mvc:interceptor>
<mvc:mapping path="/settings/**"/>
<!--
对于拦截器配置的拦截目录,若/settings/*:仅为拦截settings下的一层子目录
/settings/**: 拦截settings下的任意层目录
-->
<mvc:mapping path="/workbench/**"/>
<!-- 放行路径 -->
<mvc:exclude-mapping path="/settings/qx/user/toLogin.do"/>
<mvc:exclude-mapping path="/settings/qx/user/login.do"/>
<!-- 拦截器类的路径 -->
<bean class="web.interceptor.LoginInterceptor"></bean>
</mvc:interceptor>
</mvc:interceptors>实际样例:
对于网站,长时间打开但是并不操作,后台session过期后,需要重新验证身份,核心技术 session + interceptor
页面切割技术
'
和
<div>
:负责切割页面<iframe>
:用来显示网页
返回JSON对象
- 若需要返回JSON对象,则Controller返回值需要至少设置成Obeject类型,然后依靠插件将其转为JSON对象
- 函数名前添加ResponseBody注解
- 对于Responsebody注解:
- 通过MVC工具直接将返回的对象按照属性名称编码为JSON对象
- 当使用该注解时,就不会走视图处理器,而是直接写入输出流,相当于response输出指定格式的对象
- 一般使用ResponseBody是在异步Ajax请求下执行
- 对于Responsebody注解:
前端日历插件:bootstrap-datetimepicker
前端插件使用步骤:
1. 引入开发包: (.js .css),下载开发包,拷贝到webapp目录下 1. 创建容器`<div>` 1. 当容器加载完成之后,对容器调用工具函数
1
2
3
4
5
6
7
8<link href="jquery/bootstrap_3.3.0/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
<link href="jquery/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="jquery/jquery-1.11.1-min.js"></script>
<script type="text/javascript" src="jquery/bootstrap_3.3.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="jquery/bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.js"></script>
<script type="text/javascript" src="jquery/bootstrap-datetimepicker-master/locale/bootstrap-datetimepicker.zh-CN.js"></script>1
2
3
4
5
6
7
8
9$(".myDate").datetimepicker({ //类选择器
language:'zh-CN', //语言
format:'yyyy-mm-dd',//日期的格式
minView:'month', //可以选择的最小视图
initialDate:new Date(),//初始化显示的日期
autoclose:true,//设置选择完日期或者时间之后,日否自动关闭日历
todayBtn:true,
clearBtn:true
});前端分页查询插件:pagination
- Step
- 引入开发包
- 创建容器
- 调用工具函数
JS的对象遍历方式
- 对于JS作用域中的变量,使用JSTL进行遍历,进行EL进行遍历 - 对于JS的局部变量进行遍历的话,使用JS函数代码+选择器进行遍历
慎用submit标签提交【同步请求刷新浏览器】
submit是同步提交请求,每次提交表单会刷新页面,此时有可能会造成bug或重复提交表单情况
1
2
3
4
5queryActivityByConditionForPage();
$("#queryActivityBtn").click(function (){
queryActivityByConditionForPage();
});以该js代码为例,第一个queryActivityByConditionForPage是页面刷新是自动挂载的函数,第二个是点击Btn时的事件,如果该Btn是使用的submmit方法进行的表单的提交,且需要页面返回Controller返回的JSON,此时用submmit就会出现重复提交表单的bug,在submmit后,Controller接受到请求返回正确的JSON,但是浏览器在submmit后会再次刷新,因此又触发了刷新的表单提交,造成重复提交表单的bug。
解决方法:
- 多设置触发条件
- 采用异步请求方法进行表单的提交
基于JQuery给元素绑定事件
在元素事件属性上直接绑定函数:
1
<XXX on-XXXX="func()">
使用JQuery对象选择器
1
2
3选择器.xxxx(function(){
// func body
});使用JQuery的on函数:
1
2
3父选择器.on(事件类型,"子选择器",function(){
// func body
})
GET/POST 区别
- 待定
Ajax和Controller传参对应
1
2
3
4
5
6
7
8
9
10
11var ids="";
$.each(chekkedIds,function () {//id=xxxx&id=xxx&.....&id=xxx&
ids+="id="+this.value+"&";
});
// post
$.ajax({
url:'workbench/activity/deleteActivityByIds.do',
data:ids,
type:'post',
dataType:'json'- 此时,后台controller相应的函数参数列表的参数名称应为 String []id 不是[]ids!
- ids仅为在js页面下的形参,传输到后台服务器后,解析为id的数组
本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 Yue C.H. Site!