ps网站切图教程,爱站网查询,php7安装 WordPress,开发网页游戏目录
1、流派搜索与分页
2、流派的添加
3、流派的修改
4、流派的删除 接上篇#xff1a;ssm实战项目──哈米音乐#xff08;一#xff09;#xff0c;我们完成了项目的整体搭建#xff0c;接下来进行后台模块的开发。
首先是流派模块#xff1a;
在该模块中采用分…目录
1、流派搜索与分页
2、流派的添加
3、流派的修改
4、流派的删除 接上篇ssm实战项目──哈米音乐一我们完成了项目的整体搭建接下来进行后台模块的开发。
首先是流派模块
在该模块中采用分页查询将数据库中流派的信息通过分页进行查询期望查询结果如下 1、流派搜索与分页
想要达成该效果需要在后端查询到的数据呈现到前端的jsp页面上。
首先在后端中要把查询结果包装到一起因此在ham-core子模块中的util文件夹下创建Page类来存放查询到的数据该类包括每页展示数量已知当前的页号总页数开始页数数据集合结果和总记录数。使用该类的一个对象将其返回到前端界面即可。
该类信息如下
/*** 封装前端需要的承载数据以及分页相关的一个实体* 自定义页的类*/
public class PageT {//每页展示数量已知private Integer pageSize5;//页码已知private Integer pageNo1;//总页数(计算 总记录数/每页展示数量private Integer totalPage;//开始行号计算(pageNO-1) *pagesizeprivate Integer startNum0;//数据集合结果private ListT list;//总记录数 count*private Integer totalCount0;public Integer getPageSize() {return pageSize;}public void setPageSize(Integer pageSize) {this.pageSize pageSize;}public Integer getPageNo() {return pageNo;}public void setPageNo(Integer pageNo) {this.pageNo pageNo;}public Integer getTotalPage() {totalPagetotalCount/pageSize;if(totalCount0 || totalCount%pageSize!0){totalPage;}return totalPage;}public void setTotalPage(Integer totalPage) {this.totalPage totalPage;}public Integer getStartNum() {return startNum;}public void setStartNum(Integer startNum) {this.startNum startNum;}public ListT getList() {return list;}public void setList(ListT list) {this.list list;}public Integer getTotalCount() {return totalCount;}public void setTotalCount(Integer totalCount) {this.totalCount totalCount;}}将后端查询到的实体返回前端界面在jsp界面中采用foreach进行接收代码如下
tbody
c:forEach items${page.list} varmtype varStatusstatustrtd classhidden-xs-portrait${mtype.tid}/tdtd classhidden-xs-portrait${mtype.tname}/tdtd classhidden-xs ${mtype.tdesc} /tdtdbutton classbtn btn-sm btn-primary typebutton modify tid${mtype.tid} 修改/buttonbutton data-togglebutton classbtn btn-sm btn-warning tid${mtype.tid} 删除/button/td/tr
/c:forEach
/tbodyjsp:include pagepagination.jsp/jsp:include为节省代码将分页的页码单独写一个界面pagination.jsp并在其他界面中引用
div classclearfix text-right%--隐藏域--%input typehidden idpageNo namepageNo value${mq.pageNo}input typehidden idtotalPage value${page.totalPage}ul classpagination no-marginli idprev classdisableda href#Prev/a/lic:forEach begin1 end${page.totalPage} varmyPageNoli c:if test${myPageNo mq.pageNo}classactive/c:ifapageNoButton href#${myPageNo}/a/li/c:forEachli idnexta href#Next/a/li/ul
/div在界面中使用js来控制分页
/*** 用于控制上一页和下一页的可用的切换* type {jQuery}*/var pageNo $(#pageNo).val();var totalPage $(#totalPage).val();pageNo parseInt(pageNo);totalPage parseInt(totalPage);if (pageNo 1 pageNo totalPage) {$(#prev).addClass(disabled);$(#next).addClass(disabled);}if (pageNo 1 pageNo totalPage) {$(#prev).addClass(disabled);$(#next).removeClass(disabled);}if (pageNo 1 pageNo totalPage) {$(#prev).removeClass(disabled);$(#next).removeClass(disabled);}if (pageNo 1 pageNo totalPage) {$(#prev).removeClass(disabled);$(#next).addClass(disabled);}$(#prev).click(function () {$(#pageNo).val(--pageNo);$(#txForm).submit();})$(#next).click(function () {$(#pageNo).val(pageNo);$(#txForm).submit();})$(a[pageNoButton]).click(function () {var pageNo $(this).html();$(#pageNo).val(pageNo);$(#txForm).submit();})
想要分页查询到流派信息还需要一个流派查询的类封装前端传来的参数传给后端例如当前是第几页要实现搜素功能时要传递的名字
在ham-core的query文件下创建该类如下
/*** 只作为表现层接收前端参数封装使用*/
public class MtypeQuery extends Mtype{//页码private Integer pageNo;//每页展示数量private Integer pageSize5;//开始行号private Integer startNum;public Integer getPageNo() {return pageNo;}public void setPageNo(Integer pageNo) {this.pageNo pageNo;}public Integer getPageSize() {return pageSize;}public void setPageSize(Integer pageSize) {this.pageSize pageSize;}public Integer getStartNum() {return startNum;}public void setStartNum(Integer startNum) {this.startNum startNum;}
}MtypeQuery专门用来处理分页接受前端传来的参数. 继承了Mtype--可以封装上tname 要知道前端用户想看第几页pagNo 开始行号是计算出来的 想要得到分页查询的数据需要在数据库中查询到具体信息和数量最后通过在实现类中编写具体方法逻辑将数据包装进一个Page对象中返回
在MtypeMapper.xml下需要编写sql语句如下
查询出所有数据和数量并定义查询结果resultMap resultMap idBaseResultMap typecom.qcby.model.Mtypeid columnTID jdbcTypeINTEGER propertytid /result columnTNAME jdbcTypeVARCHAR propertytname /result columnTDESC jdbcTypeVARCHAR propertytdesc //resultMapselect idselectPage parameterTypecom.qcby.query.MtypeQuery resultMapBaseResultMapSELECT * FROM mtypewhereif test tname ! null and tname ! tname like %${tname}%/if/whereLIMIT #{startNum},#{pageSize}/selectselect idselectCount parameterTypecom.qcby.query.MtypeQuery resultTypeintSELECT count(*) FROM mtypewhereif test tname ! null and tname ! tname like %${tname}% /if/where/selectselect idselectAll resultTypecom.qcby.model.MtypeSELECT * from mtype/select写好了sql语句下面就需要定义接口和方法来调用sql语句
由于每个模块中都要用到分页查询因此编写接口和方法时写在公共方法即可
在BaseDao接口中定义持久层接口 /*** 持久层公共接口* param T*/
public interface BaseDaoQ,T {//省略其他方法...ListT selectPage(Q mq); Integer selectCount(Q mq);
}
在BaseService中提供相应的分页查询接口 /*** 业务层公共接口* param T 泛型*/
public interface BaseServiceQ,T {//分页查询接口PageT selectByPage(Q mq);
}实现类在实现类中编写分页查询的具体逻辑
先通过反射获取pageNo和pageSize,并根据此计算出startNum
之后通过持久层接口调用sql语句查询数据库最后将查询到的结果放入Page对象中
public class BaseServiceImplQ,T implements BaseServiceQ,T {protected BaseDaoQ,T baseDao;/*** 多有业务模块的分页业务逻辑处理* 简单理解page对象* 保证page对象各个属性的值按要求返回* param mq* return*/Overridepublic PageT selectByPage(Q mq){//1.先准备一个要返回的承载数据的页对象PageT page new PageT(); Class? cq mq.getClass();try {//反射调用getPageNo方法拿到pageNo//获得getPageNo对象Method getPageNo cq.getDeclaredMethod(getPageNo, null);//反射调用getPageNo方法Integer pageNo (Integer) getPageNo.invoke(mq,null) ;//反射调用getPageNo方法拿到pageSizeMethod getPageSize cq.getDeclaredMethod(getPageSize, null);Integer pageSize (Integer) getPageSize.invoke(mq,null) ;//给返回的page设置值page.setPageNo(pageNo);page.setPageSize(pageSize);//设置pageNO 前端给的//设置pageSize 前端给的//设置startNum 计算Method setStartNum cq.getDeclaredMethod(setStartNum,Integer.class);setStartNum.invoke(mq,(pageNo-1)*pageSize);page.setStartNum((pageNo-1)*pageSize);//查询数据库 调用Mapper baseDao查询满足条件的数据ListT list baseDao.selectPage(mq);page.setList(list);//StartNum tname 把结果给page的list设置上//查询数据库 满足条件的数据总量 page的totalCount设置上值Integer countbaseDao.selectCount(mq);page.setTotalCount(count);}catch (Exception e){e.printStackTrace();}return page;}
}至此分页查询的接口和方法编写完毕接下来就可以在后台模块ham-console的控制类中调用该方法查询到想要的数据并将其返回。
编写MtypeController类
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;/*** Controller将该类交spring管理设为控制类* RequestMapping(/mtype) 设置路径来让前端调用*/
RequestMapping(/mtype)
Controller
public class MtypeController {/*** 注入流派业务层的对象* 调用业务层的分页条件查询逻辑*/Autowiredprivate MtypeService mtypeService;/*** 查询流派信息* 分页 条件 查询* 流派名称 查看的页码 每页展示数量* return*/RequestMapping(/list)public String list(MtypeQuery mq, Model model){//1.程序严谨性判断前端传递的参数//有没有传递想看第几页没有设计为访问第一页if(mq.getPageNo()null){mq.setPageNo(1);}//2.调用业务层进行分页条件查询PageMtype page mtypeService.selectByPage(mq);//3.返回前端想要的数据 返回一个页对象model.addAttribute(page,page);//要进行搜索参数的回显功能model.addAttribute(mq,mq);return mtype;}
}
2、流派的添加
使用layui的弹出层点击“添加流派”按钮弹出层弹出如图 添加流派按钮
button idaddSong classbtn btn-primary data-target#myModal2typebutton添加流派
/button
弹出层表单元素
div idmtypePop stylemargin-right: 50px;margin-top: 50px; display: noneform idaddMtypeForm classlayui-form methodpost action/mtype/addMtype lay-filterexamplediv classlayui-form-itemlabel classlayui-form-label流派/labeldiv classlayui-input-blockinput typetext nametname stylecolor: black; lay-verifytitle autocompleteoffplaceholder请输入流派名 classlayui-input/div/divdiv classlayui-form-item layui-form-textlabel classlayui-form-label描述/labeldiv classlayui-input-blocktextarea stylecolor: black; placeholder请输入流派描述 classlayui-textarea nametdesc/textarea/div/divdiv classlayui-form-itemdiv classlayui-input-blockbutton classlayui-btn layui-btn-normal layui-btn-radius lay-submit lay-filterdemo1添加流派/button/div/div/form
/div
JS弹出界面
点击addSong按钮创建弹出层内容是id为“mtypePop”的元素
var pop;
$(#addSong).click(function () {pop layer.open({type: 1,area: [600, 350],content: $(#mtypePop)});
})
表单提交
添加弹出层也是表单在JS中编写点击确认后表单提交调用后端方法
layui.use(form, function () {var form layui.form;//监听提交form.on(submit(demo1), function (data) {//layer.msg(JSON.stringify(data.field));$.ajax({url: /mtype/addMtype,type: post,data: data.field,dataType: text,success: function (text) {if (text success) {layer.msg(添加成功);layer.close(pop);}}})//阻止页面跳转 防止同步提交 使用ajax异步提交表单return false;});
后台controller
RequestMapping(/addMtype)
ResponseBody
public String addMtype(Mtype mtype){mtypeService.insert(mtype);return success;
}
3、流派的修改
点击“修改”按钮弹出弹出层显示原有数据如图 修改按钮
button classbtn btn-sm btn-primary typebutton modify tid${mtype.tid} 修改/button
弹出层div元素
div idmtypePop1 stylemargin-right: 50px;margin-top: 50px; display: noneform idupdateMtypeForm classlayui-form methodpost action/mtype/updateMtype lay-filterexampleinput typehidden nametid idtiddiv classlayui-form-itemlabel classlayui-form-label输入框/labeldiv classlayui-input-blockinput idptname typetext nametname stylecolor: black; lay-verifytitle autocompleteoffplaceholder请输入流派名 classlayui-input/div/divdiv classlayui-form-item layui-form-textlabel classlayui-form-label文本域/labeldiv classlayui-input-blocktextarea idptdesc stylecolor: black; placeholder请输入流派描述 classlayui-textareanametdesc/textarea/div/divdiv classlayui-form-itemdiv classlayui-input-blockbutton classlayui-btn layui-btn-normal layui-btn-radius lay-submit lay-filterdemo2修改流派/button/div/div/form
/div
弹出层的数据回显
点击带有“modify”类的元素的时候执行函数获取所点击的元素的tid发送ajax请求将tid作为请求参数发送到服务器请求json类型的数据回调函数在请求成功后执行使用返回的 JSON 数据来填充表单字段。ID 为 mtypePop1 的 HTML 元素作为弹出层的内容。
var pop1;
$([modify]).click(function () {var tid $(this).attr(tid);$.ajax({url: /mtype/getMtype,type: post,data: {tid:tid},dataType: json,success: function (jsonObj) {$(#tid).val(jsonObj.tid);$(#ptname).val(jsonObj.tname);$(#ptdesc).val(jsonObj.tdesc);}})pop1 layer.open({type: 1,area: [600, 350],content: $(#mtypePop1)});
})
点击修改按钮后完成修改
layui.use(form, function () {var form layui.form;//监听提交form.on(submit(demo2), function (data) {//layer.msg(JSON.stringify(data.field));$.ajax({url: /mtype/updateMtype,type: post,data: data.field,dataType: text,success: function (text) {if (text success) {layer.msg(修改成功);layer.close(pop1);$(#txForm).submit();}}})return false;});
})
在MtypeController中编写回显方法和修改方法
/*** 流派修改 回显数据*/
ResponseBody
PostMapping(/getMtype)
public Mtype getMtype(int tid){Mtype mtypemtypeService.selectByPrimaryKey(tid);return mtype;
}ResponseBody
PostMapping(/updateMtype)
public String updateMtype(Mtype mt){mtypeService.updateByPrimaryKeySelective(mt);return success;
4、流派的删除
点击删除按钮弹出提示框。 删除按钮
button data-togglebutton classbtn btn-sm btn-warning tid${mtype.tid} 删除/button
JS
$(.btn-warning).click(function () {//获取tidvar tid $(this).attr(tid);layer.confirm(是否确认删除?, {icon: 3, title:提示}, function(index){$.ajax({url: /mtype/delMtype,type: post,data: {tid:tid},dataType: text,success: function (text) {if (text success) {layer.msg(删除成功);layer.close(index);$(#txForm).submit();}}})});
})
controller
RequestMapping(/delMtype)
ResponseBody
public String delMtype(int tid){mtypeService.deleteByPrimaryKey(tid);return success;
}
至此后台流派模块编写完毕下一篇进行专辑模块的开发。
