案例:图书添加
function add(){
//获取表单信息
var author = $("#author").val();
var publishing = $("#publishing").val();
var publish_time = $("#publish_time").val();
var total_page = $("#total_page").val();
var book_summary = $("#book_summary").val();
//TODO检测信息格式
//发送ajax请求
$.ajax({
url:path+"/book",
type:"post",
data:{"author":author,
"publishing":publishing,
"publish_time":publish_time,
"total_page":total_page,
"book_summary":book_summary},
dataType:"json",
success:function(result){
//result就是服务器返回的true
if(result){
alert("新增成功");//父窗口刷新一下
window.parent.location.reload();
}
}
});
}
案例:更新图书
-
利用URL页面之间传值
可以利用window.location.href获取url,然后用正则切割参数,例如
//获取url中指定参数 function UrlSearch() { var name,value; var str=location.href; //取得整个地址栏 var num=str.indexOf("?") str=str.substr(num+1); //取得所有参数 stringvar.substr(start [, length ] var arr=str.split("&"); //各个参数放到数组里 for(var i=0;i < arr.length;i++){ num=arr[i].indexOf("="); if(num>0){ name=arr[i].substring(0,num); value=arr[i].substr(num+1); this[name]=value; } } }
获取参数用法如下
var request=new UrlSearch(); //实例化 var id = request.id;
-
利用h5存储传值
使用sessionStorage或localStorage存取。
存值
sessionStorage.id=10;
取值
var id = sessionStorage.id;
-
datePicker日历插件使用方法
- 下载jquery-ui.css和jquery-ui.js文件
-
引入html或jsp页面,注意jquery-ui.js一定在jquery.min.js后面
<link rel="stylesheet" href="js/jquery-ui.css"/> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/jquery-ui.js"></script>
-
给表单text元素绑定日历插件
$(function(){ //初始化日历插件 $("#publish_time").datepicker({dateFormat: "yy/mm/dd"}); }
"#publishtime"表示id=publishtime的text输入框
<input type="text" id="publish_time" />
-
layer弹框插件的使用
- 下载layer开发包
-
引入html或jsp页面,注意layer.js一定在jquery.min.js后面
<script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="layer/layer.js"></script>
-
使用layer对象方法弹框
layer.open({ type: 2, title: '<h4>新增图书</h4>', shade: 0.8, area: ['380px', '560px'], content: 'add.html' //iframe的url });
-
bootstrap使用
参考前面课程案例资料
-
更新表单数据提交
客户端将表单信息写成JSON对象字符串格式。
JSON.stringify(json对象);//将json对象转成字符串
JSON.parse(str);//将字符串转成JSON对象
客户端发送请求和表单数据
$.ajax({ url:path+"/book/"+id, type:"put", data:JSON.stringify(json对象), contentType:"application/json", dataType:"json", success:function(result){ //result就是服务器返回true|false if(result){ alert("更新成功");//父窗口刷新一下 window.parent.location.reload(); } }, error:function(){ alert("更新发生异常"); } });
服务器一端接收采用(@RequestBody)
public boolean modify(@RequestBody Book book)
Spring AOP
AOP概念
AOP :Aspect Oriented Programming 面向方面编程(面向切面编程)
OOP : Object Oriented Programming 面向对象编程
AOP编程,侧重于方面,方面指的是通用处理,可以将通用处理以配置方式作用到一批组件中。
AOP优点:可以提高组件重复利用;可以降低通用业务和传统业务耦合度。(AOP业务解耦;IOC:组件解耦)
AOP相关概念
-
切面(Aspect)(追加什么功能?)
指的是在相同时机或位置执行的相同处理。封装了共同功能的组件一般被称为切面组件。切面组件可以作用到其他目标组件上。
-
切入点(Pointcut)(给谁加功能?)
Spring提供了切入点表达式,用于指定目标组件及方法。
-
方法限定表达式
execution(修饰符? 返回类型 方法名(参数列表)throws异常?)
execution(* load*(..))
execution(* cn.xdl.BookController.load*(..))
execution(* cn.xdl..(..))
execution(* cn.xdl...(..))
-
类型限定表达式
within(包名.类型名)
within(cn.xdl.BookController)
//cn.xdl包下所有类型within(cn.xdl.*)//cn.xdl包及子包下所有类型within(cn.xdl..*)
-
组件名称限定表达式
bean(id名)
//id等于bookController组件
bean(bookController)//id名以Controller结尾的组件
bean(*Controller)
-
-
通知(Advice)(什么时候加?)
指定切入功能执行的时机。例如目标方法前执行、目标方法后执行、目标方法抛异常后、目标方法执行前和执行后等。
- 环绕通知--目标方法前和后执行
- 前置通知--目标方法前执行
- 后置通知--目标方法后执行(无异常执行)
- 异常通知--目标方法抛异常后执行
- 最终通知--目标方法后执行(有无异常都执行)
-
目标(Target)
指的是需要追加功能的组件。
案例:服务调用日志记录
需求:每一次调用服务,将调用时间、执行时间记录下来
-
加什么功能?
将调用时间、执行时间记录下来
-
给谁加?
给BookController每个方法加
bean(bookController)
within(cn.xdl.controller.BookController) -
什么时候加?
在目标方法前和后都加逻辑。(环绕通知)
-
实现过程
-
在spring中开启aop配置
<aop:aspectj-autoproxy/>
-
编写切面组件WatchBean
@Component @Aspect//指定该组件是切面组件 public class WatchBean { @Around("within(cn.xdl.controller.BookController)") public Object execute(ProceedingJoinPoint pjp) throws Throwable{ //记录调用时间、执行时间、调用服务方法名 //目标方法之前调用逻辑 Date callTime = new Date();//1.获取调用时间 String methodName = pjp.getSignature().getName();//获取服务方法名 StopWatch watch = new StopWatch(); watch.start();//开始计时 Object obj = pjp.proceed();//执行目标方法 //目标方法之后调用逻辑 watch.stop();//停止计时 long execTime = watch.getTotalTimeMillis();//3.获取执行时间 System.out.println("调用了"+methodName +"服务,调用时间为:"+callTime+" 执行时间为:"+execTime); return obj; } }
-
追加@Component、@Aspect、@Around注解标记
-