目录
专辑模块
<button class="btn btn-sm btn-primary" type="button" modify aid="${album.aid}"> 修改 </button>
<button data-toggle="button" class="btn btn-sm btn-warning" aid="${album.aid}"> 删除 </button>首先先看前端代码，每个按钮都需要绑定专辑的aid
修改
前端
var pop1;
$("[modify]").click(function () {
var aid = $(this).attr("aid");
$.ajax({
url: "/album/getAlbum",
type: "post",
data: {
aid:aid
},
dataType: "json",
success: function (jsonObj) {
$("#aid").val(jsonObj.aid);
$("#aname1").val(jsonObj.aname);
$("#company1").val(jsonObj.company);
$("#albumImg1").attr("src","http://localhost:8099"+jsonObj.pic);
$("#location1").val("http://localhost:8099"+jsonObj.pic);
$("#pic1").val(jsonObj.pic);
$("#padte1").val(jsonObj.pdate);
$("#lang01").val(jsonObj.lang);
}
})
=================================================================================
pop1 = layer.open({
type: 1,
area:[900, 650],
content: $('#albumPop1')
});
})
=================================================================================
layui.use('form', function (data) {
var form = layui.form;
//监听提交
form.on('submit(demo2)', function (data) {
//layer.msg(JSON.stringify(data.field));
$.ajax({
url: "/album/updateAlbum",
type: "post",
data: data.field,
dataType: "text",
success: function (text) {
if (text == "success") {
layer.msg("修改成功");
layer.close(pop1);
$("#pageNo").val(1);
$("#txForm").submit();
}
}
})
return false;
});修改需要先将原有的信息回显，这里先通过ajax发送请求，向后端传送了一个aid，以此来获取对应专辑的信息 ，专辑选用的显示方式是弹窗，弹出的内容对应的是“id=albumPop1”，“success”后将“albumPop1”中的内容填充赋值来完成回显。
第三段代码是提交表单发送修改请求，完成修改。向后端传入的参数是整个表单的内容，成功后返回关闭弹窗，并刷新至专辑列表第一页。
后端
@ResponseBody
@RequestMapping("/getAlbum")
public Album getAlbum(int aid){
Album album = albumService.selectByPrimaryKey(aid);
return album;
}
@ResponseBody
@RequestMapping("/updateAlbum")
public String updateAlbum(Album album){
int res = albumService.updateByPrimaryKey(album);
if(res==0){
return "error"
}
return "success";
}getAlbum：根据传入的aid查询得到对应的album并通过加 @ResponseBody注解来以json形式给前端返回数据；
updateAlbum：根据传入的album来进行修改,根据"res"返回成功或失败。
可以看到，所有的信息全部都回显到了弹窗之中。
点击修改专辑按钮后提交，并刷新本页面，可以看到修改成功。
删除
前端
$(".btn-warning").click(function () {
var aid = $(this).attr("aid");
layer.confirm('是否确认删除?', {icon: 3, title:'提示'}, function(index){
$.ajax({
url: "/album/delAlbum",
type: "post",
data: {
aid:aid
},
dataType: "text",
success: function (text) {
if (text == "success") {
layer.msg("删除成功");
layer.close(index);
$("#txForm").submit();
}
}
})
});
})向后端发送删除请求，并传入对应的aid，成功重新提交页面。
后端
@ResponseBody
@RequestMapping("/delAlbum")
public String delAlbum(int aid){
Album album = albumService.selectByPrimaryKey(aid);
Client client = Client.create();
String filePath="http://localhost:8099";
WebResource resource = client.resource(filePath+album.getPic());
resource.delete();
int res = albumService.deleteByPrimaryKey(aid);
if(res == 0){
return "error";
}
return "success";
}删除功能不仅要实现将数据库中的数据删除，还要将图片服务器中的图片也删除。
先根据aid拿到对应的album，并取到他的pic属性的值并拼接成真实路径，创建客户端进行图片文件删除，最后根据aid将数据库中的数据删除。
歌手模块
<button class="btn btn-sm btn-primary" type="button" modify srid="${songer.srid}"> 修改 </button>
<button data-toggle="button" class="btn btn-sm btn-warning" srid="${songer.srid}"> 删除 </button>修改
前端
因为老师没有给对应的修改页面，而修改页面又与新增页面相似，需要将新增页面复制一份来作为修改页面
$("[modify]").click(function () {
var srid = $(this).attr("srid");
window.location.href = "/songer/toupdateSonger?srid="+srid;
});歌手的修改页面是一个新的页面，这里使用 “window.location.href”来实现页面跳转同时携带“srid”
$("#songerImg").attr("src","http://localhost:8099${songer.pic}")在js中加上面一行代码，用来点后修改按钮后，显示缩略图
<input type="hidden" value="${songer.srid}" name="srid" id="srid">
<input type="text" value="${songer.srname}" class="col-sm-6 col-xs-12 parsley-validated" required="" name="srname" id="srname" />
<input type="text" value="${songer.area}" class="col-sm-6 col-xs-12" name="area" id="area"/>
<select id="tid" name="tid" class="form-control " value="${songer.mtype.tname}">
<c:forEach items="${mtypes}" var="mtype">
<option value="${mtype.tid}" ${mtype.tid==songer.tid?"selected='selected'" :""} >${mtype.tname}</option>
<%--<option value="${mtype.tid}" >${mtype.tname}</option>--%>
</c:forEach>
</select>
<select id="isHot" name="isHot" class="form-control " value="${songer.isHot}">
<option value="1" ${"1"==songer.isHot?"selected='selected'" :""} >是</option>
<option value="0" ${"0"==songer.isHot?"selected='selected'" :""} >否</option>
</select>
<textarea class="form-control" name="intro" rows="3" id="description">${songer.intro}</textarea>
<input id='location' value="http://localhost:8099${songer.pic}" class="form-control" onclick="$('#i-file').click();">
<input type="hidden" value="${songer.pic}" id="pic" name="pic" lay-verify="pic">
在修改页面根据上面的代码对其进行修改，来完成回显。
后端
@RequestMapping("/toupdateSonger")
public String toupdate(Model model,Integer srid){
List<Mtype> mtypes = mtypeService.selectAll();
model.addAttribute("mtypes",mtypes);
Songer songer = songerService.selectByPrimaryKey(srid);
model.addAttribute("songer",songer);
return "updateSongerr";
}
@RequestMapping("/update")
public String update(Songer songer){
songerService.updateByPrimaryKey(songer);
return "redirect:list";
}
toupdateSonger：可以看到在修改页面有两个下拉框，需要获取流派信息，所以在后端先进行了对流派的查询，然后根据srid查询歌手的信息，并将流派信息与歌手信息通过“model”传到前端，最后使用视图解析器跳转到对应的修改页面。
update：根据前端传来的数据来修改数据库内容，最后重定向到“list”。
点击修改按钮跳转到修改页面。
可以看到页面信息全回显成功。
对内容修改之后提交，页面再次跳转到歌手列表，并可以看到修改成功。
删除
前端
$(".btn-warning").click(function () {
var srid = $(this).attr("srid");
layer.confirm('是否确认删除?', {icon: 3, title:'提示'}, function(index){
$.ajax({
url: "/songer/delSonger",
type: "post",
data: {
srid:srid
},
dataType: "text",
success: function (text) {
if (text == "success") {
layer.msg("删除成功");
layer.close(index);
$("#txForm").submit();
}
}
})
});
})同样使用ajax发送请求，并携带对应的参数“srid”，成功后重新提交表单，刷新页面。
后端
@ResponseBody
@RequestMapping("/delSonger")
public String delSonger(int srid){
Songer songer = songerService.selectByPrimaryKey(srid);
Client client = Client.create();
String filePath="http://localhost:8099";
WebResource resource = client.resource(filePath+songer.getPic());
resource.delete();
int res = songerService.deleteByPrimaryKey(srid);
if(res == 0){
return "error";
}
return "success";
}在删除歌手的时候同样需要先删除歌手的照片，与专辑模块的删除一样，需要先将图片服务器中的照片删除，然后再删除对应数据库中的内容。
歌曲模块
修改
@RequestMapping("/update")
public String updateSong(Song song){
Album pic = albumService.selectByPrimaryKey(song.getAid());
song.setPic(pic.getPic());
songService.updateByPrimaryKey(song);
return "redirect:list";
}这里因为我的歌曲图片是和专辑图片一致的，所以在修改之后同样需要与专辑图片保持一致。
歌曲模块的修改操作与歌手模块类似，这里就不多说了，下面是实现的效果。
点击修改跳转页面
同样的回显，也没有问题
提交
修改成功，图片也与专辑图片保持了一致
删除
也与前两个类似，但是这里歌曲不需要进行图片删除操作，图片是属于专辑的。直接删除数据库数据就可以了，相比前两个，这个更简单一些。
本次分享到这里就结束了，由于制作比较仓促（下课写完已经0:30了），可能会存在各种问题，还望大家谅解，有错误请大声指出，共同探讨，共同进步。
1556
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
