springbootvue.jshtml前后分离json交互事例代码
1. 页面引入 vue.js
站在用户的角度思考问题,与客户深入沟通,找到北镇网站设计与北镇网站推广的解决方案,凭借多年的经验,让设计与互联网技术结合,创造个性化、用户体验好的作品,建站类型包括:网站建设、成都网站制作、企业官网、英文网站、手机端网站、网站推广、国际域名空间、雅安服务器托管、企业邮箱。业务覆盖北镇地区。
2. js 代码
var vm = new Vue({ el: '#app', data:{ varList: [], //list page: [], //分页类 pd: [], //map showCount: -1, //每页显示条数(这个是系统设置里面配置的,初始为-1即可,固定此写法) currentPage: 1, //当前页码 add:false, del:false, edit:false, loading:false //加载状态 }, methods: { //初始执行 init() { //复选框控制全选,全不选 $('#zcheckbox').click(function(){ if($(this).is(':checked')){ $("input[name='ids']").click(); }else{ $("input[name='ids']").attr("checked", false); } }); this.getList(); }, //获取列表 getList: function(){ this.loading = true; $.ajax({ xhrFields: { withCredentials: true }, type: "POST", url: httpurl+'fhbutton/list?showCount='+this.showCount+'¤tPage='+this.currentPage, data: {KEYWORDS:this.pd.KEYWORDS,tm:new Date().getTime()}, dataType:"json", success: function(data){ if("success" == data.result){ vm.varList = data.varList; vm.page = data.page; vm.pd = data.pd; vm.hasButton(); vm.loading = false; $("input[name='ids']").attr("checked", false); }else if ("exception" == data.result){ showException("按钮模块",data.exception);//显示异常 } } }).done().fail(function(){ swal("登录失效!", "请求服务器无响应,稍后再试", "warning"); setTimeout(function () { window.location.href = "../../login.html"; }, 2000); }); }, }, mounted(){ this.init(); } })
3. html 代码片段
{{page.showCount*(page.currentPage-1)+index+1}} {{data.NAME}} {{data.SHIRO_KEY}} {{data.BZ}}
4.后台代码
/**列表 from www.1b23.com * @param page * @throws Exception */ @RequestMapping(value="/list", produces="application/json;charset=UTF-8") @RequiresPermissions("fhbutton:list") @ResponseBody public Object list(Page page) throws Exception{ Mapmap = new HashMap (); String errInfo = "success"; PageData pd = new PageData(); pd = this.getPageData(); String KEYWORDS = pd.getString("KEYWORDS"); //关键词检索条件 if(Tools.notEmpty(KEYWORDS)){ pd.put("KEYWORDS", KEYWORDS.trim()); } page.setPd(pd); List varList = fhButtonService.list(page); //列出Fhbutton列表 map.put("varList", varList); map.put("page", page); map.put("pd", pd); map.put("result", errInfo); return map; }
网站题目:springbootvue.jshtml前后分离json交互事例代码
文章出自:http://scyanting.com/article/ghdpgd.html