今天主要是做精灵项目后台的维护功能
页面的主要展现弹出框
自定义弹出窗口
定义退出消息框
<script type="text/javascript"> $(function(){ $("#btn1").bind("click",function(){ $("#win1").window({ title:"弹出框", width:400, height:400, modal:true //这是一个模式窗口，只能点击弹出框，不允许点击别处 }) }) $("#btn3").click(function(){ alert("关闭"); $("#win2").window("close"); }); /*定义退出消息框 */ $("#btn4").click(function(){ $.messager.confirm('退出','你确定要退出吗',function(r){ if (r){ alert("确认退出"); } }); }) /*定义消息提示框 */ $.messager.show({ title:'My Title', msg:'龚玲博你都胖成一个球了，圆的', timeout:3000, height:200, width:300, showType:'slide' }); }) </script> </head> <body> <h1>Easy-弹出窗口</h1> <!--主要展现弹出框 --> <a id="btn1" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-filter'">搜索</a> <div id="win1"></div> <!--定义弹出窗口 --> <div id="win2" class="easyui-window" title="My Window" style="width:600px;height:400px" data-options="iconCls:'icon-save',modal:true"> 我是一个窗口 <a id="btn3" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-back'">关闭</a> </div> <div style="float: right"> <a id="btn4" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-cancel'">退出系统</a> </div> </body>页面分析
"javascript:void(0)" 空方法 , 相当于占位符的作用
js显示分类列表
<a href="javascript:void(0)" class="easyui-linkbutton selectItemCat">选择类目</a> $(".selectItemCat").each(function(i,e){//i= index 下标，e：element：元素 var _ele = $(e); if(data && data.cid){ _ele.after("<span style='margin-left:10px;'>"+data.cid+"</span>"); }else{ _ele.after("<span style='margin-left:10px;'></span>"); } _ele.unbind('click').click(function(){ $("<div>").css({padding:"5px"}).html("<ul>") .window({ width:'500', height:"450", modal:true, closed:true, iconCls:'icon-save', title:'选择类目', onOpen : function(){......}通过js创建树形结构
Tree结构的JSON串格式 : [{id:"编号",text:"文本信息",state:"open/closed"},{....}]
<script type="text/javascript"> /*通过js创建树形结构 */ $(function(){ $("#tree").tree({ url:"tree.json", //加载远程JSON数据 method:"get", //请求方式 POST animate:true, //表示显示折叠端口动画效果 checkbox:true, //表述复选框 lines:false, //表示显示连接线 dnd:true, //是否拖拽 onClick:function(node){ //添加点击事件 alert(node.text); //控制台 console.info(node); } }); }) </script> </head> <body> <h1>EasyUI-树形结构</h1> <ul id="tree"></ul> </body>用来封装商品分类Tree结构对象信息,应用于业务层
@Data @Accessors(chain = true) @NoArgsConstructor @AllArgsConstructor public class EasyUITree { private Long id; //节点ID private String text; //文本信息 private String state; //open/closed }树控件读取URL。子节点的加载依赖于父节点的状态。当展开一个封闭的节点，如果节点没有加载子节点，它将会把节点id的值作为http请求参数并命名为’id’，通过URL发送到服务器上面检索子节点。
获取商品分类列表信息
url:/item/cat/list
返回值: EasyUITree
@RequestParam 获取参数实现数据的转化
@RequestMapping("/list") public List<EasyUITree> findItemCatByParentId (@RequestParam(value = "id",defaultValue = "0") Long parentId){ return itemCatService.findItemCatByParentId(parentId); }根据parentId查询数据库记录
循环遍历数据,之后封装EasyUITree的list集合
步骤:
查询数据实现数据封装 @Override public List<EasyUITree> findItemCatByParentId(Long parentId) { //1.查询数据 List<ItemCat> itemCatList = findItemCatListByParentId(parentId); //2.实现数据封装 List<EasyUITree> treeList = new ArrayList<EasyUITree>(itemCatList.size()); for (ItemCat itemCat : itemCatList) { Long id = itemCat.getId(); String text = itemCat.getName(); //如果是父级 closed,否则 表示3级标题 open String state = itemCat.getIsParent()?"closed":"open"; EasyUITree tree = new EasyUITree(id,text,state); treeList.add(tree); } return treeList; } private List<ItemCat> findItemCatListByParentId(Long parentId) { QueryWrapper<ItemCat> queryWrapper = new QueryWrapper<>(); queryWrapper.eq("parent_id", parentId); List<ItemCat> itemCatList = itemCatMapper.selectList(queryWrapper); return itemCatList; } }实现商品分类列表展示
非空校验
<td> <input class="easyui-textbox" type="text" name="title" data-options="required:true" style="width: 280px;"> </input> </td>有效性校验
<input class="easyui-numberbox" type="text" name="priceView" data-options="min:1,max:99999999,precision:2,required:true" />页面URL分析 : http: //localhost: 8091/item/save
页面JS分析
function submitForm(){ //表单校验 if(!$('#itemAddForm').form('validate')){ $.messager.alert('提示','表单还未填写完成!'); return ; } //转化价格单位，将元转化为分 //获取元素值 $("xxx").val(); //为元素赋值 $("XXX").val(100); '1'*1=11 $("#itemAddForm [name=price]").val(eval($("#itemAddForm [name=priceView]").val()) * 100); itemAddEditor.sync();//将输入的内容同步到多行文本中 $("#itemAddForm [name=itemParams]").val(paramJson); /*$.post/get(url,JSON,function(data){....}) ?id=1&title="天龙八部&key=value...." */ //alert($("#itemAddForm").serialize()); $.post("/item/save",$("#itemAddForm").serialize(), function(data){ if(data.status == 200){ $.messager.alert('提示','新增商品成功!'); }else{ $.messager.alert("提示","新增商品失败!"); } }); }该类是系统级VO对象 , 放在jl-common子项目中
用来封装状态信息以及数据
@Data @Accessors(chain = true) @NoArgsConstructor @AllArgsConstructor public class SysResult { private Integer status; //状态码 200成功 201失败 private String msg; //提示信息 private Object data; //返回数据 /** * 1.只是告知用户 执行成功 * @return */ public static SysResult success() { return new SysResult(200, null, null); } /** * 2.成功之后返回数据data String=name */ public static SysResult success(Object data) { return new SysResult(200, null, data); } /** * 3.成功之后返回msg */ public static SysResult success(String msg, Object data) { return new SysResult(200, msg, data); } /*失败之后调用*/ public static SysResult fail() { return new SysResult(201, "业务执行失败", null); } }在jt-common中添加SysExecution类.实现全局异常处理
当系统中出现运行时异常时生效
返回数据为JSON
@RestControllerAdvice //异常通知 对Controller层生效 @Slf4j //记录日志 public class SysExecution { //当系统中出现运行时异常时生效 @ExceptionHandler(RuntimeException.class) public SysResult error(Exception exception) { exception.printStackTrace(); log.error(exception.getMessage()); return SysResult.fail(); } }实现商品新增
@RequestMapping("/save") public SysResult saveItem(Item item) { itemService.saveItem(item); return SysResult.success(); }实现商品新增的业务,通过mybatis-plus的insertAPI持久化到数据库
@Override public void saveItem(Item item) { item.setStatus(1) //表示正常状态 .setCreated(new Date()) .setUpdated(item.getCreated()); itemMapper.insert(item); }url分析 : http: //localhost: 8091/item/update
页面JS分析
$.post("/item/update",$("#itemeEditForm").serialize(), function(data){ if(data.status == 200){ $.messager.alert('提示','修改商品成功!','info',function(){ $("#itemEditWindow").window('close'); $("#itemList").datagrid("reload"); }); }else{ $.message.alert("提示",data.msg); } });实现商品更新
@RequestMapping("/update") public SysResult updateItem(Item item) { itemService.updateItem(item); return SysResult.success(); }通过updateByIdAPI来实现所有数据更新
@Override public void updateItem(Item item) { item.setUpdated(new Date()); itemMapper.updateById(item); }下架url分析 : http: //localhost: 8091/item/instock
上架url分析 : http: //localhost: 8091/item/reshelf
页面JS分析
{ text: '下架', iconCls: 'icon-remove', handler: function () { //获取选中的ID串中间使用","号分割 var ids = getSelectionsIds(); if (ids.length == 0) { $.messager.alert('提示', '未选中商品!'); return; } $.messager.confirm('确认', '确定下架ID为 ' + ids + ' 的商品吗？', function (r) { if (r) { var params = {"ids": ids}; $.post("/item/instock", params, function (data) { if (data.status == 200) { $.messager.alert('提示', '下架商品成功!', undefined, function () { $("#itemList").datagrid("reload"); }); } }); } }); } }, { text: '上架', iconCls: 'icon-remove', handler: function () { var ids = getSelectionsIds(); if (ids.length == 0) { $.messager.alert('提示', '未选中商品!'); return; } $.messager.confirm('确认', '确定上架ID为 ' + ids + ' 的商品吗？', function (r) { if (r) { var params = {"ids": ids}; $.post("/item/reshelf", params, function (data) { if (data.status == 200) { $.messager.alert('提示', '上架商品成功!', undefined, function () { $("#itemList").datagrid("reload"); }); } }); } }); } }实现商品上/下架
@RequestMapping("instock") public SysResult instockItem(Long[] ids) { int status = 2; //表示下架 itemService.updateStatus(ids,status); return SysResult.success(); } @RequestMapping("/reshelf") public SysResult reshelf(Long[] ids) { int status = 1; //表示上架 itemService.updateStatus(ids,status); return SysResult.success(); }下架将ids中所有的数据的状态status改为2
下架将ids中所有的数据的状态status改为1
编辑updateStatus方法 , 调用updateAPI以及UpdateWrapper 条件构造器进行修改状态,实现上/下架业务
@Override public void updateStatus(Long[] ids, Integer status) { Item item = new Item(); item.setStatus(status).setUpdated(new Date()); UpdateWrapper<Item> updateWrapper = new UpdateWrapper<Item>(); List idList = Arrays.asList(ids); updateWrapper.in("id", idList); itemMapper.update(item, updateWrapper); }url分析 : http: //localhost: 8091/item/delete
页面JS分析
{ text: '删除', iconCls: 'icon-cancel', handler: function () { var ids = getSelectionsIds(); if (ids.length == 0) { $.messager.alert('提示', '未选中商品!'); return; } $.messager.confirm('确认', '确定删除ID为 ' + ids + ' 的商品吗？', function (r) { if (r) { var params = {"ids": ids}; $.post("/item/delete", params, function (data) { if (data.status == 200) { $.messager.alert('提示', '删除商品成功!', undefined, function () { $("#itemList").datagrid("reload"); }); } else { $.messager.alert("提示", data.msg); } }); } }); } }实现商品删除
@RequestMapping("/delete") public SysResult delete(Long[] ids){ itemService.deleteItem(ids); return SysResult.success(); }使用deleteByIdAPI对选择的商品进行删除
@Override public void deleteItem(Long[] ids) { List idList = Arrays.asList(ids); itemMapper.deleteBatchIds(idList); }