1. 添加游戏功能：
（1） 准备弹出层表单数据
a.在item_list.jsp中的js代码区域init方法中进行处理添加的函数（隐藏域）
1 //处理添加 2 joinTagidsAndPlatformId("add_tagids", $("#add_item_tagids")); 3 joinTagidsAndPlatformId("add_platform", $("#add_item_platform"));
b.处理添加的标签name
1 2 <div class="form-group"> 3 <label for="add_item_tagids" class="col-sm-2 control-label">标签label> 4 <div class="col-sm-10"> 5 <div> 6 <input type="hidden" id="add_item_tagids" name="item_tagids" value=""> 7 <c:forEach items="${tagidsList }" var="dict_tagids"> 8 9 10 <label><input type="checkbox" name="add_tagids" value="${dict_tagids.dict_id }">${dict_tagids.dict_item_name }label> 11 12 c:forEach> 13 div> 14 div> 15 div>
c.平台的处理同上
1 2 <div class="form-group"> 3 <label for="add_item_platform" class="col-sm-2 control-label">平台label> 4 <div class="col-sm-10"> 5 <div> 6 <input type="hidden" id="add_item_platform" name="item_platform" value=""> 7 <c:forEach items="${platformList }" var="dict_platform"> 8 9 10 <label><input type="checkbox" name="add_platform" value="${dict_platform.dict_id }">${dict_platform.dict_item_name }label> 11 12 c:forEach> 13 div> 14 div> 15 div>
d.启动服务器进行测试，点击左侧的添加游戏，在弹出的表单中，可以看到标签以及平台可以进行动态的加载了，然后选择勾选添加也是正常的
e.在ItemController中，把标志添加到model中
声明dict_type_flag
1 @Value("${dict.flag}") 2 private String dict_type_flag;
1 ListflagList = dictService.selectSysDictByTypeId(dict_type_flag);
1 model.addAttribute("flagList", flagList);
f。打开/ssm_steam_project/src/config/dictTypeId.properties，添加dict.flag=03
g.使用得到的key：flagList 在item_list.jsp中进行遍历输出
1 2 <div class="form-group"> 3 <label for="edit_other" class="col-sm-2 control-label">label> 4 <div class="col-sm-10"> 5 <div> 6 7 <c:forEach items="${flagList }" var="flag"> 8 <%-- ${flag.dict_field_name }与bean中的SysDict定义的字段名称要一致，要不然取不到值 ，value="">${flag.dict_item_name }是bean中的具体显示名称--%> 9 <label><input type="checkbox" class="edit_item_flag" name="${flag.dict_field_name }" value="">${flag.dict_item_name }label> 10 c:forEach> 11 div> 12 div> 13 div>
e.启动服务器进行测试，点击添加游戏可以看到已经可以动态获取标签
f.通过类选择器获取checkbox，在item_list.jsp页面的init方法中，add flag
1 //add flag 2 $(".add_item_flag").each(function(){ 3 $(this).click(function(){ 4 if(this.checked) 5 $(this).val(1); 6 else 7 $(this).val(0); 8 }); 9 });
g.启动服务器进行测试，可以看到勾选标志时候，勾选后value为1，取消勾选后value为0
（2）添加游戏到数据库
a.在jsp页面的表单的取消确定按钮中，可以看到onclick="addItem()
b.在js代码区域添加addItem()函数
1 //添加游戏 2 function addItem(){ 3 $.ajax({ 4 type:"POST", 5 url:"${pageContext.request.contextPath }/admin/items/save", 6 data:new FormData($("#add_items_form")[0]), 7 cache:false, 8 contentType:false, 9 processData:false, 10 success:function(){ 11 alert("游戏添加成功!"); 12 window.location.reload(); 13 } 14 }); 15 }
c.在ItemController中，加入一个添加游戏的方法
1 /** 2 * 添加游戏 3 * @param itemInfo 表单数据 4 * @param upload_image 上传文件接口 5 * @return 6 * @throws Exception 7 */ 8 @RequestMapping("/save") 9 @ResponseBody 10 public String save(ItemInfo itemInfo) { 11 12 System.out.println("itemInfo = " + itemInfo); 13 itemService.save(itemInfo); 14 return "OK"; 15 }
d.service/ItemService.java中，添加save的接口
1 //新增游戏 2 void save(ItemInfo itemInfo, MultipartFile upload_image) throws Exception;
e.service/ItemServiceImpl.java中，创建save的实现方法
1 @Override 2 public void save(ItemInfo itemInfo, MultipartFile upload_image) throws Exception { 3 ItemInfo saveItemInfo = setItemInfo(itemInfo, upload_image); 4 itemMapper.save(saveItemInfo); 5 6 }
f.在ItemMapper.java下添加save的mapper接口
1 //新增游戏 2 void save(ItemInfo itemInfo);
g.在ItemMapper.xml中，添加sql语句
1 2 <insert id="save" parameterType="ItemInfo"> 3 INSERT INTO item_info 4 VALUES( 5 #{item_id}, 6 #{item_name}, 7 #{item_tagids}, 8 #{item_platform}, 9 #{item_discount}, 10 #{item_original_price}, 11 #{item_cap_image}, 12 #{item_release_date}, 13 #{is_hot}, 14 #{is_hot_sale}, 15 #{is_free}, 16 #{is_specials}, 17 #{is_upcoming}, 18 #{is_new}, 19 #{is_enable} 20 ) 21 insert>
（2） 解决日期格式问题；
a.在iteminfo的bean中，可以看到日期是String类型的，在src目录下新建一个package，命名为utils，存放工具类
b.在utils包下新建一个JoeyUtil.java，存放工具类
1 /** 工具箱*/ 2 public class JoeyUtil { 3 public static String DateConvert(String source) throws ParseException { 4 5 //根据我们自定义的规则，判断如果有 / 就转换 6 if(source.contains("/")) { 7 //需要转换，将原格式的数据转换成data类型 8 SimpleDateFormat sdf = new SimpleDateFormat("MM/dd/yyyy"); 9 Date newDate = sdf.parse(source); 10 11 //再定义我们需要的日期类型数据，格式化成字符串返回 12 SimpleDateFormat sdf1 = new SimpleDateFormat("yyyy-MM-dd"); 13 String newDateStr = sdf1.format(newDate); 14 15 return newDateStr; 16 } 17 18 return source; 19 } 20 }
c.在ItemController的save方法中添加新的日期修改
1 /** 2 * 添加游戏 3 * @param itemInfo 表单数据 4 * @param upload_image 上传文件接口 5 * @return 6 * @throws Exception 7 */ 8 @RequestMapping("/save") 9 @ResponseBody 10 public String save(ItemInfo itemInfo) { 11 12 System.out.println("itemInfo = " + itemInfo)； 13 14 //修改日期 15 String data = itemInfo.getItem_release_data(); 16 //使用工具类转换日期，获取新的日期字符串 17 String newDateStr = JoeyUtil.DateConvert(data); 18 //将新的日期字符串设置到ItemInfo中并保存 19 itemInfo.setItem_release_data(newDateStr); 20 21 itemService.save(itemInfo); 22 return "OK"; 23 }
d.启动服务器进行测试
（3）上传图片；
a.在/ssm_steam_project/WebContent下新建一个文件夹upload,用来存放用户上传的文件
c.在springmvc的xml文件中配置MultipartFile
1 2 <bean name="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver"/>
b.在ItemController中的save方法中绑定一个MultipartFile
1 /** 2 * 添加游戏 3 * @param itemInfo 表单数据 4 * @param upload_image 上传文件接口 5 * @return 6 * @throws Exception 7 */ 8 @RequestMapping("/save") 9 @ResponseBody 10 //MultipartFile的名字与jsp页面中的封面标签对应的name一致，这里的是upload_image 11 public String save(ItemInfo itemInfo, MultipartFile upload_image) throws Exception { 12 13 System. outprintln("itemInfo= " + itemInfo); 14 15 //处理图片 16 //文件名字 17 18 String name = System. currentTimeMillis() +""; 19 20 //capsule_ 184x69.jpg 21 //扩展名 22 String extName = FilenameUtils. getExtension(upload_image.getOriginalFilename()); 23 24 //路径,自己电脑上新建的文件夹，即设置虚拟目录 25 String path = "D:\\Work\\uploadlmg\\"; 26 27 //文件名 28 String fileName = name + "." + extName; 29 30 //保存图片 31 upload image transferTo(new Fil(path + fileName)); 32 33 //修改日期 34 String data = itemInfo.getItem_release_data(); 35 //使用工具类转换日期，获取新的日期字符串 36 String newDateStr = JoeyUtil.DateConvert(data); 37 //将新的日期字符串设置到ItemInfo中并保存 38 itemInfo.setItem_release_data(newDateStr); 39 40 itemService.save(itemInfo); 41 return "OK"; 42 }
c.在item_list.jsp页面的添加游戏弹出层表单中，在id后面添加enctype="multipart/form-data"
1 2 <form class="form-horizontal" id="edit_items_form" enctype="multipart/form-data" method="post"> 3 4 <input type="hidden" id="edit_item_id" name="item_id"/>
d.在添加游戏的js代码中修改addItem函数
1 //添加游戏 2 function addItem(){ 3 $.ajax({ 4 type:"POST", 5 url:"${pageContext.request.contextPath }/admin/items/save", 6 data:new FormData($("#add_items_form")[0]), 7 cache:false, 8 contentType:false, 9 processData:false, 10 success:function(){ 11 alert("游戏添加成功!"); 12 window.location.reload(); 13 } 14 }); 15 }
e.进行上传文件的测试，可以添加游戏上传封面后，图片地址被显示出来了，然后在电脑的文件夹内可以看到该图片，说明图片已经上传成功
2. 修改游戏功能：
（1）准备弹出层表单数据，查询一个游戏信息并回显；
a.在jsp页面中修改标签的标签
1 2 <div class="form-group"> 3 <label for="edit_item_tagids" class="col-sm-2 control-label">标签label> 4 <div class="col-sm-10"> 5 <div class="checkbox"> 6 <input type="hidden" id="search_item_tagids" value=""> 7 <c:forEach items="${tagidsList }" var="dict_tagids"> 8 <label><input type="checkbox" name="search_tagids" value="${dict_tagids.dict_id }">${dict_tagids.dict_item_name }label> 9 c:forEach> 10 div> 11 div> 12 div>
b.修改jsp页面中平台部分的代码
1 2 <div class="form-group"> 3 <label for="edit_item_platform" class="col-sm-2 control-label">平台label> 4 <div class="col-sm-10"> 5 <div class="checkbox"> 6 <input type="hidden" id="search_item_platform" value=""> 7 <c:forEach items="${platformList }" var="dict_platform"> 8 <label><input type="checkbox" name="search_platform" value="${dict_platform.dict_id }">${dict_platform.dict_item_name }label> 9 c:forEach> 10 div> 11 div> 12 div>
c.修改jsp页面中所有位置的标志位
1 2 <div class="form-group"> 3 <label for="edit_other" class="col-sm-2 control-label">label> 4 <div class="col-sm-10"> 5 <div> 6 7 <c:forEach items="${flagList }" var="flag"> 8 <%-- ${flag.dict_field_name }与bean中的SysDict定义的字段名称要一致，要不然取不到值 ，value="">${flag.dict_item_name }是具体显示名称--%> 9 <label><input type="checkbox" class="edit_item_flag" name="${flag.dict_field_name }" value="">${flag.dict_item_name }label> 10 c:forEach> 11 div> 12 div> 13 div>
d.启动服务器测试点击修改后可以看到所有的标签和标志位已经可以动态加载
e.找到修改游戏i的按钮，把id传达进去（onclick="editItems(${item.item_id})）
1 <a herf="#" id="edit_btn" class="btn btn-xs btn-info" data-toggle="modal" data-target="#editLayer" onclick="editItems(${item.item_id})">修改a>
f.在js代码区域中添加editItems方法
1 //打开编辑窗口，回显数据 2 function editItems(id){ 3 $("#edit_items_form")[0].reset(); 4 $.ajax({ 5 type:"POST", 6 url:"${pageContext.request.contextPath }/admin/items/edit", 7 data:{"id":id}, 8 dataType:"json", 9 success:function(data){ 10 $("#edit_item_id").val(data.item_id); 11 $("#edit_item_name").val(data.item_name); 12 $("#edit_item_tagids").val(data.item_tagids); 13 $("#edit_item_platform").val(data.item_platform); 14 $("#edit_item_discount").val(data.item_discount); 15 $("#edit_item_original_price").val(data.item_original_price); 16 $("#edit_item_release_date").val(data.item_release_date); 17 18 } 19 }); 20 }
g在ItemController中添加相关的edit方法
1 /** 2 * 打开编辑窗口 3 * @param id 要编辑的id 4 * @return 5 */ 6 @RequestMapping("/edit") 7 @ResponseBody 8 public ItemInfo edit(String id) { 9 return itemService.selectItemInfoById(id); 10 }
h.在service/ItemService.java中添加selectItemInfoById的接口
1 //根据id 查询一条游戏记录 2 ItemInfo selectItemInfoById(String id);
i.在service/ItemServiceImpl.java中添加selectItemInfoById的实现类
1 @Override 2 public ItemInfo selectItemInfoById(String id) { 3 return itemMapper.selectItemInfoById(id); 4 }
j.在mapper/ItemMapper.java中添加selectItemInfoById的mapper
//根据id 查询 返回一条itemInfo ItemInfo selectItemInfoById(String id);
k.在mapper/ItemMapper.xml中添加SQL语句
1 3 <select id="selectItemInfoById" parameterType="String" resultType="ItemInfo"> 4 SELECT * FROM item_info WHERE item_id = #{id} 5 select>
l.启动服务器进行测试
（2）回显标签、平台、标志位checkbox状态；
a.修改itemLlist.jsp弹出层表单
1 2 <div class="form-group"> 3 <label for="edit_item_cap_image_src" class="col-sm-2 control-label">游戏封面label> 4 <div class="col-sm-10"> 5 <img id="edit_item_cap_image_src" alt="" src=""> 6 div> 7 div>
b.在jsp页面的editItems函数中，处理封面的回显
1 //打开编辑窗口，回显数据 2 function editItems(id){ 3 $("#edit_items_form")[0].reset(); 4 $.ajax({ 5 type:"POST", 6 url:"${pageContext.request.contextPath }/admin/items/edit", 7 data:{"id":id}, 8 dataType:"json", 9 success:function(data){ 10 $("#edit_item_id").val(data.item_id); 11 $("#edit_item_name").val(data.item_name); 12 $("#edit_item_tagids").val(data.item_tagids); 13 $("#edit_item_platform").val(data.item_platform); 14 $("#edit_item_discount").val(data.item_discount); 15 $("#edit_item_original_price").val(data.item_original_price); 16 $("#edit_item_release_date").val(data.item_release_date); 17 18 /* 封面的回显 */ 19 if(null != data.item_cap_image){ 20 $("#edit_item_cap_image_src").attr("src", "/images/" + data.item_cap_image); 21 } 22 else{ 23 $("#edit_item_cap_image_src").attr("src", ""); 24 } 25 26 } 27 }); 28 }
c.处理checkbox状态的回显，先在jsp页面的editItems函数中，添加$("#edit_items_form")[0].reset(); 清空checkbox上一次中选择的数据
1 //打开编辑窗口，回显数据 2 function editItems(id){ 3 $("#edit_items_form")[0].reset(); //清空表单中上一次遗留的数据 4 $.ajax({ 5 type:"POST", 6 url:"${pageContext.request.contextPath }/admin/items/edit", 7 data:{"id":id}, 8 dataType:"json", 9 success:function(data){ 10 $("#edit_item_id").val(data.item_id); 11 $("#edit_item_name").val(data.item_name); 12 $("#edit_item_tagids").val(data.item_tagids); 13 $("#edit_item_platform").val(data.item_platform); 14 $("#edit_item_discount").val(data.item_discount); 15 $("#edit_item_original_price").val(data.item_original_price); 16 $("#edit_item_release_date").val(data.item_release_date); 17 18 //处理checkbox状态回显 19 setTagidsAndPlatformEcho($("input[name=edit_tagids]"), data.item_tagids); 20 setTagidsAndPlatformEcho($("input[name=edit_platform]"), data.item_platform); 21 22 /* 封面的回显 */ 23 if(null != data.item_cap_image){ 24 $("#edit_item_cap_image_src").attr("src", "/images/" + data.item_cap_image); 25 } 26 else{ 27 $("#edit_item_cap_image_src").attr("src", ""); 28 } 29 30 } 31 }); 32 }
d.在/ssm_steam_project/WebContent/admin/js/sikiedu_steam.js中，添加setTagidsAndPlatformEcho方法
1 ** 2 * 处理标签和平台checkbox状态回显 3 * @param allData 获取所有的id数组 4 * @param itemData 获取回显的itemInfo中要显示的id数组 5 */ 6 function setTagidsAndPlatformEcho(allData, itemData){ 7 var allDataIds = allData; 8 var itemIds = itemData.split("#"); 9 //遍历，如果值一样，设置选中状态 10 for (var i = 0; i < allDataIds.length; i++) { 11 for (var j = 0; j < itemIds.length; j++) { 12 if(allDataIds[i].value == itemIds[j]){ 13 allDataIds[i].checked = true; 14 break; 15 } 16 } 17 } 18 }
e.启动服务器进行点击游戏修改测试即可，可以看到弹出菜单的标签和平台已经可以回显
f.处理标志位的回显，首先在item_list.jsp页面的editItems方法中，添加标志位setFlagEcho的引用（setFlagEcho这个方法在/ssm_steam_project/WebContent/admin/js/sikiedu_steam.js中进行添加）
1 //打开编辑窗口，回显数据 2 function editItems(id){ 3 $("#edit_items_form")[0].reset(); //清空表单中上一次遗留的数据 4 $.ajax({ 5 type:"POST", 6 url:"${pageContext.request.contextPath }/admin/items/edit", 7 data:{"id":id}, 8 dataType:"json", 9 success:function(data){ 10 $("#edit_item_id").val(data.item_id); 11 $("#edit_item_name").val(data.item_name); 12 $("#edit_item_tagids").val(data.item_tagids); 13 $("#edit_item_platform").val(data.item_platform); 14 $("#edit_item_discount").val(data.item_discount); 15 $("#edit_item_original_price").val(data.item_original_price); 16 $("#edit_item_release_date").val(data.item_release_date); 17 18 //处理checkbox状态回显 19 setTagidsAndPlatformEcho($("input[name=edit_tagids]"), data.item_tagids); 20 setTagidsAndPlatformEcho($("input[name=edit_platform]"), data.item_platform); 21 22 /* 封面的回显 */ 23 if(null != data.item_cap_image){ 24 $("#edit_item_cap_image_src").attr("src", "/images/" + data.item_cap_image); 25 } 26 else{ 27 $("#edit_item_cap_image_src").attr("src", ""); 28 } 29 30 $("#edit_item_release_date").val(data.item_release_date); 31 32 //处理标志位回显 33 setFlagEcho("is_hot", data.is_hot); 34 setFlagEcho("is_hot_sale", data.is_hot_sale); 35 setFlagEcho("is_free", data.is_free); 36 setFlagEcho("is_specials", data.is_specials); 37 setFlagEcho("is_upcoming", data.is_upcoming); 38 setFlagEcho("is_new", data.is_new); 39 setFlagEcho("is_enable", data.is_enable); 40 41 } 42 }); 43 }
g.在/ssm_steam_project/WebContent/admin/js/sikiedu_steam.js中进行添加setFlagEcho方法
1 /** 2 * 处理标志位回显 3 * @param name 标志位name属性 4 * @param value 标志位value属性 5 */ 6 function setFlagEcho(name, value){ 7 var flag = $("input[name="+name+"]"); 8 //获取name 为 xx 的checkbox 将其值和状态设置为 value 9 $(flag).val(value); 10 $(flag).prop("checked", value); 11 }
（4）保存修改的数据；
a.在/ssm_steam_project/WebContent/WEB-INF/jsp/admin/item_list.jsp的init方法中，添加进行游戏修改的处理修改joinTagidsAndPlatformId和joinTagidsAndPlatformId方法
//处理修改 joinTagidsAndPlatformId("edit_tagids", $("#edit_item_tagids")); joinTagidsAndPlatformId("edit_platform", $("#edit_item_platform"));
1 $(".edit_item_flag").each(function(){ 2 $(this).click(function(){ 3 if(this.checked) 4 $(this).val(1); 5 else 6 $(this).val(0); 7 }); 8 });
b.启动服务器进行测试，查看回显数据时隐藏域的值是否已经被修改，如果已经修改了，说明该数值已经再表单中修改成功，接下来就是提交表单即可
c.在jsp页面的游戏修改弹出层表单中添加enctype属性
1 2 <form class="form-horizontal" id="edit_items_form" enctype="multipart/form-data" method="post"> 3 4 <input type="hidden" id="edit_item_id" name="item_id"/>
d.查看确认修改按钮的表单，可以看到: 在jsp中的js代码区域添加updateItem方法
1 //修改游戏 2 function updateItem(){ 3 $.ajax({ 4 type:"POST", 5 url:"${pageContext.request.contextPath }/admin/items/update", 6 data:new FormData($("#edit_items_form")[0]), 7 cache:false, 8 contentType:false, 9 processData:false, 10 success:function(){ 11 alert("游戏修改成功!"); 12 window.location.reload(); 13 } 14 }); 15 }
e.在ItemController中，添加修改游戏的方法
//TO DO
f.在ItemService中添加修改游戏的update方法的接口
1 //更新游戏信息 2 void update(ItemInfo itemInfo, MultipartFile upload_image) throws Exception;
g.在ItemServiceImp中添加update方法的实现
1 @Override //update的实现 2 public void update(ItemInfo itemInfo, MultipartFile upload_image) throws Exception { 3 ItemInfo updateItemInfo = setItemInfo(itemInfo, upload_image); 4 itemMapper.update(updateItemInfo); 5 }
h.在ItemMapper中添加update的mapper接口
1 //更新游戏信息 2 void update(ItemInfo itemInfo);
i.在ItemMapper.xml中添加update的SQL语句
1 3 <update id="update" parameterType="ItemInfo"> 4 UPDATE item_info 5 <set> 6 <if test="item_name != null and item_name != ''">item_name = #{item_name},if> 7 <if test="item_tagids != null and item_tagids != ''">item_tagids = #{item_tagids},if> 8 <if test="item_platform != null and item_platform != ''">item_platform = #{item_platform},if> 9 <if test="item_discount != null">item_discount = #{item_discount},if> 10 <if test="item_original_price != null">item_original_price = #{item_original_price},if> 11 <if test="item_cap_image != null and item_cap_image != ''">item_cap_image = #{item_cap_image},if> 12 <if test="item_release_date != null and item_release_date != ''">item_release_date = #{item_release_date},if> 13 14 15 is_hot = #{is_hot}, 16 is_hot_sale = #{is_hot_sale}, 17 is_free = #{is_free}, 18 is_specials = #{is_specials}, 19 is_upcoming = #{is_upcoming}, 20 is_new = #{is_new}, 21 is_enable = #{is_enable} 22 set> 23 WHERE item_id = #{item_id} 24 update>
j.启动服务器进行测试，修改游戏，看是否会在数据库中保存
（5）解决日期插件bug（修改游戏的时候日期不能弹出选择）；
a.原因：发售日期的id跟第三方插件日期id重复，导致js只初始化了一个
b.在jsp页面的发售日期标签中，把id="dp_component修改成id="dp_component_add"
1 2 <div class="form-group"> 3 <label for="add_item_release_date" class="col-sm-2 control-label">发售日期label> 4 <div class="col-sm-10"> 5 <div class="input-group date" id="dp_component_add"> 6 <input type="text" class="form-control" placeholder="发售日期" name="item_release_date"> 7 <span class="input-group-addon"><i class="icon_calendar">i>span> 8 div> 9 div> 10 div>
c.在修改的发售日期中，把id="dp_component" 修改成id="dp_component_edit"
1 2 <div class="form-group"> 3 <label for="edit_item_release_date" class="col-sm-2 control-label">发售日期label> 4 <div class="col-sm-10"> 5 <div class="input-group date" id="dp_component_edit"> 6 <input type="text" class="form-control" placeholder="发售日期" id="edit_item_release_date" name="item_release_date" value=""> 7 <span class="input-group-addon"><i class="icon_calendar">i>span> 8 div> 9 div> 10 div>
d.在jsp页面的js代码初始化中，把名字的后半部分放进去，进行方法的拼接
1 //在页面加载完毕后执行 2 $(function() { 3 //加载第三方组件 4 //footable 5 yukon_footable.goodslist(); 6 //datepicker，初始化发售日期的id 7 yukon_datepicker.p_forms_extended("_add"); 8 yukon_datepicker.p_forms_extended("_edit"); 9 10 init(); 11 12 })
e.在第三方的js插件中（目录：/ssm_steam_project/WebContent/admin/js/yukon_all.min.js）进行拼接
1 yukon_datepicker = { 2 p_forms_extended: function (name) { 3 $.isFunction($.fn.datepicker) && ($.fn.datepicker.DPGlobal.template = $.fn.datepicker.DPGlobal.template.replace(/\«/g, '').replace(/\»/g, '')); 4 $("#dp_basic").length && $("#dp_basic").datepicker({ 5 autoclose: !0 6 }); 7 //dp_component_add //_edit 8 $("#dp_component" + name).length && $("#dp_component" + name).datepicker({ 9 autoclose: !0 10 }); 11 $("#dp_range").length && $("#dp_range").datepicker({ 12 autoclose: !0 13 }); 14 $("#dp_inline").length && $("#dp_inline").datepicker() 15 } 16 };
f.启动服务器进行测试
3. 删除游戏功能：
（1）逻辑删除item_info中的is_enable字段，为0下架，为1上架；
a.在item_list.jsp的下架按钮标签中，可以看到已经绑定了一个deleteItems()方法，在此基础上进行修改
1 <td> 2 <a herf="#" id="edit_btn" class="btn btn-xs btn-info" data-toggle="modal" data-target="#editLayer" onclick="editItems(${item.item_id})">修改a> 3 <a herf="#" id="del_btn" class="btn btn-xs ${item.is_enable == true ? 'btn-warning' : 'btn-danger' }" onclick="deleteItems(${item.item_id}, ${item.is_enable})">${item.is_enable == true ? '下架' : '上架' }a> 4 td>
b.在jsp中添加js的deleteItems函数
1 //逻辑删除 下架游戏 2 function deleteItems(id, enable){ 3 var isEnable = !Boolean(enable); 4 $.post( 5 "${pageContext.request.contextPath }/admin/items/delete", 6 {"id":id, "enable":isEnable}, 7 function(){ 8 window.location.reload(); //刷新页面 9 } 10 ); 11 }
c.在ItemController中添加相关的下架方法
1 /** 2 * 逻辑删除 下架物品 （仅前台不显示该数据） 3 * @param id 要下架的游戏id 4 * @param enable 下架的状态 true of false 5 * @return 6 */ 7 @RequestMapping("/delete") 8 @ResponseBody 9 public String delete(String id, Boolean enable) { 10 itemService.deleteByLogic(id, enable); 11 return "OK"; 12 }
d.在ItemService中创建一个deleteByLogic接口
1 //根据id 和 enable属性 下架物品 2 void deleteByLogic(String id, Boolean enable);
e.在ItemServiceImp中创建deleteByLogic的实现类
1 @Override 2 public void deleteByLogic(String id, Boolean enable) { 3 itemMapper.deleteByLogic(id, enable); 4 }
f.在ItemMapper中添加mapper接口
1 //根据id 和 enable属性 下架物品 2 void deleteByLogic(@Param("id")String id, @Param("enable")Boolean enable);
g.在ItemMapper.xml中添加相关的SQL语句
1 34 UPDATE item_info 5 6 is_enable = #{enable} 7 8 WHERE item_id = #{id} 9
h.启动服务器进行测试，点击下架和上架看看状态是否改变
（2）根据is_enable的值调整后台”修改”按钮颜色与描述（上面已经修改了）；
deleteItems