封装Js 配合使用Vue实现ajax完整请求

通常 在处理前后端交互时候 都会采用ajax提交方式

但是 如果大量的采用ajax，每次都要传入参数 ，请求url，错误处理........   这样子代码看上去非常的臃肿 ， 因此 我们 可以通过封装 的 形式   封装成一个模板

比如 我现在 有一个这样常见的 业务场景 点击左侧菜单栏 ，右侧呈现 相应的数据展现及操作区域 并显示数据列表   

　　通常的做法 是 点击菜单  根据菜单URL 返回一个 主页面 出现在右侧区域 ， 然后 通过ajax请求 返回 数据 并 渲染 表格  

这时候 我们 可以封装一个 表格模板 例如 请求路径，参数，底部分页栏

使用

$.fn.bootstrapTableEx = function(opt) {
var defaults = {
url : '',
dataField : "rows",
method : 'post',
dataType : 'json',
selectItemName : 'id',
clickToSelect : true,
pagination : true,
smartDisplay : false,
pageSize : 10,
pageList : [ 10, 20, 30, 40, 50 ],
paginationPreText : '上一页',
paginationNextText : '下一页',
sidePagination : 'server',
queryParamsType : null,
columns : []
}
var option = $.extend({}, defaults, opt);             opt就是在基础模板上扩展自己的 参数    然后和基础模板 合并
$(this).bootstrapTable(option);
}

//使用模板

$('#dataGrid').bootstrapTableEx({
url : '../user/api/getAllUsersApi?_' + $.now(),
height : $(window).height() - 54,
queryParams : function(params) {
params.loginname = vm.keyword;
return params;
}

这就是基础bootstrap模板  在具体展示列表数据时 传入参数比如（Url,queryParams........）

var option = $.extend({}, defaults, opt);    这就是 jquery扩展组件 语法 了  返回 一个合并后的 对象  然后 交给 bootstrapTable渲染

这时 我们就创建 一个 通用的列表模板