目錄

1、流派搜索與分頁

2、流派的添加

3、流派的修改

4、流派的刪除

---

接上篇：ssm實(shí)戰(zhàn)項(xiàng)目──哈米音樂（一），我們完成了項(xiàng)目的整體搭建，接下來進(jìn)行后臺模塊的開發(fā)。

首先是流派模塊：

在該模塊中采用分頁查詢，將數(shù)據(jù)庫中流派的信息通過分頁進(jìn)行查詢，期望查詢結(jié)果如下：

1、流派搜索與分頁

想要達(dá)成該效果需要在后端查詢到的數(shù)據(jù)呈現(xiàn)到前端的jsp頁面上。

首先在后端中要把查詢結(jié)果包裝到一起，因此在ham-core子模塊中的util文件夾下創(chuàng)建Page類來存放查詢到的數(shù)據(jù)，該類包括每頁展示數(shù)量（已知），當(dāng)前的頁號，總頁數(shù)，開始頁數(shù)，數(shù)據(jù)集合結(jié)果和總記錄數(shù)。使用該類的一個對象將其返回到前端界面即可。

該類信息如下：

/*** 封裝前端需要的承載數(shù)據(jù)以及分頁相關(guān)的一個實(shí)體* 自定義頁的類*/
public class Page<T> {//每頁展示數(shù)量（已知）private Integer pageSize=5;//頁碼（已知）private Integer pageNo=1;//總頁數(shù)(計算）  總記錄數(shù)/每頁展示數(shù)量private Integer totalPage;//開始行號（計算）(pageNO-1) *pagesizeprivate Integer startNum=0;//數(shù)據(jù)集合結(jié)果private List<T> list;//總記錄數(shù) count（*）private Integer totalCount=0;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() {totalPage=totalCount/pageSize;if(totalCount==0 || 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 List<T> getList() {return list;}public void setList(List<T> list) {this.list = list;}public Integer getTotalCount() {return totalCount;}public void setTotalCount(Integer totalCount) {this.totalCount = totalCount;}}

將后端查詢到的實(shí)體返回前端界面，在jsp界面中采用foreach進(jìn)行接收，代碼如下：

<tbody>
<c:forEach items="${page.list}" var="mtype" varStatus="status"><tr><td class="hidden-xs-portrait">${mtype.tid}</td><td class="hidden-xs-portrait">${mtype.tname}</td><td class="hidden-xs"> ${mtype.tdesc} </td><td><button  class="btn btn-sm btn-primary" type="button" modify tid="${mtype.tid}" > 修改</button><button data-toggle="button" class="btn btn-sm btn-warning" tid="${mtype.tid}"> 刪除</button></td></tr>
</c:forEach>
</tbody><jsp:include page="pagination.jsp"></jsp:include>

為節(jié)省代碼，將分頁的頁碼單獨(dú)寫一個界面pagination.jsp，并在其他界面中引用：

<div class="clearfix text-right"><%--隱藏域--%><input type="hidden" id="pageNo" name="pageNo" value="${mq.pageNo}"><input type="hidden" id="totalPage" value="${page.totalPage}"><ul class="pagination no-margin"><li id="prev" class="disabled"><a href="#">Prev</a></li><c:forEach begin="1" end="${page.totalPage}" var="myPageNo"><li <c:if test="${myPageNo == mq.pageNo}">class="active"</c:if>><apageNoButton href="#">${myPageNo}</a></li></c:forEach><li id="next"><a 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();})

想要分頁查詢到流派信息還需要一個流派查詢的類，封裝前端傳來的參數(shù)傳給后端，例如當(dāng)前是第幾頁，要實(shí)現(xiàn)搜素功能時要傳遞的名字

在ham-core的query文件下創(chuàng)建該類如下：

/*** 只作為表現(xiàn)層接收前端參數(shù)封裝使用*/
public class MtypeQuery extends Mtype{//頁碼private Integer pageNo;//每頁展示數(shù)量private Integer pageSize=5;//開始行號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專門用來處理分頁，接受前端傳來的參數(shù).

繼承了Mtype-->可以封裝上tname

要知道前端用戶想看第幾頁：pagNo

開始行號是計算出來的

想要得到分頁查詢的數(shù)據(jù)，需要在數(shù)據(jù)庫中查詢到具體信息和數(shù)量，最后通過在實(shí)現(xiàn)類中編寫具體方法邏輯將數(shù)據(jù)包裝進(jìn)一個Page對象中返回

在MtypeMapper.xml下需要編寫sql語句如下：

查詢出所有數(shù)據(jù)和數(shù)量并定義查詢結(jié)果resultMap：

 <resultMap id="BaseResultMap" type="com.qcby.model.Mtype"><id column="TID" jdbcType="INTEGER" property="tid" /><result column="TNAME" jdbcType="VARCHAR" property="tname" /><result column="TDESC" jdbcType="VARCHAR" property="tdesc" /></resultMap><select id="selectPage" parameterType="com.qcby.query.MtypeQuery" resultMap="BaseResultMap">SELECT * FROM mtype<where><if test=" tname != null and tname != ''">tname like '%${tname}%'</if></where>LIMIT #{startNum},#{pageSize}</select><select id="selectCount" parameterType="com.qcby.query.MtypeQuery" resultType="int">SELECT count(*) FROM mtype<where><if test=" tname != null and tname != ''"> tname like '%${tname}%' </if></where></select><select id="selectAll" resultType="com.qcby.model.Mtype">SELECT * from mtype</select>

寫好了sql語句下面就需要定義接口和方法來調(diào)用sql語句

由于每個模塊中都要用到分頁查詢，因此編寫接口和方法時寫在公共方法即可；

在BaseDao接口中定義持久層接口

/*** 持久層公共接口* @param <T>*/
public interface BaseDao<Q,T> {//省略其他方法...List<T> selectPage(Q mq);      Integer selectCount(Q mq);
}

在BaseService中提供相應(yīng)的分頁查詢接口：

/*** 業(yè)務(wù)層公共接口* @param <T> 泛型*/
public interface BaseService<Q,T> {//分頁查詢接口Page<T> selectByPage(Q mq);
}

實(shí)現(xiàn)類：在實(shí)現(xiàn)類中編寫分頁查詢的具體邏輯

先通過反射獲取pageNo和pageSize,并根據(jù)此計算出startNum

之后通過持久層接口調(diào)用sql語句查詢數(shù)據(jù)庫，最后將查詢到的結(jié)果放入Page對象中

public class BaseServiceImpl<Q,T> implements BaseService<Q,T> {protected BaseDao<Q,T> baseDao;/*** 多有業(yè)務(wù)模塊的分頁業(yè)務(wù)邏輯處理* 簡單理解：page對象* 保證page對象各個屬性的值按要求返回* @param mq* @return*/@Overridepublic Page<T> selectByPage(Q mq){//1.先準(zhǔn)備一個要返回的承載數(shù)據(jù)的頁對象Page<T> page = new Page<T>();        Class<?> cq = mq.getClass();try {//反射調(diào)用getPageNo方法拿到pageNo//獲得getPageNo對象Method getPageNo = cq.getDeclaredMethod("getPageNo", null);//反射調(diào)用getPageNo方法Integer pageNo = (Integer) getPageNo.invoke(mq,null) ;//反射調(diào)用getPageNo方法拿到pageSizeMethod getPageSize = cq.getDeclaredMethod("getPageSize", null);Integer pageSize = (Integer) getPageSize.invoke(mq,null) ;//給返回的page設(shè)置值page.setPageNo(pageNo);page.setPageSize(pageSize);//設(shè)置pageNO  前端給的//設(shè)置pageSize  前端給的//設(shè)置startNum  計算Method setStartNum = cq.getDeclaredMethod("setStartNum",Integer.class);setStartNum.invoke(mq,(pageNo-1)*pageSize);page.setStartNum((pageNo-1)*pageSize);//查詢數(shù)據(jù)庫 調(diào)用Mapper baseDao查詢滿足條件的數(shù)據(jù)List<T> list = baseDao.selectPage(mq);page.setList(list);//StartNum tname  把結(jié)果給page的list設(shè)置上//查詢數(shù)據(jù)庫 滿足條件的數(shù)據(jù)總量 page的totalCount設(shè)置上值Integer count=baseDao.selectCount(mq);page.setTotalCount(count);}catch (Exception e){e.printStackTrace();}return page;}
}

至此分頁查詢的接口和方法編寫完畢，接下來就可以在后臺模塊ham-console的控制類中調(diào)用該方法查詢到想要的數(shù)據(jù)并將其返回。

編寫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管理設(shè)為控制類* @RequestMapping("/mtype") 設(shè)置路徑來讓前端調(diào)用*/
@RequestMapping("/mtype")
@Controller
public class MtypeController {/*** 注入流派業(yè)務(wù)層的對象* 調(diào)用業(yè)務(wù)層的分頁條件查詢邏輯*/@Autowiredprivate MtypeService mtypeService;/*** 查詢流派信息* 分頁   條件   查詢* 流派名稱 查看的頁碼 每頁展示數(shù)量* @return*/@RequestMapping("/list")public String list(MtypeQuery mq, Model model){//1.程序嚴(yán)謹(jǐn)性：判斷前端傳遞的參數(shù)//有沒有傳遞想看第幾頁，沒有設(shè)計為訪問第一頁if(mq.getPageNo()==null){mq.setPageNo(1);}//2.調(diào)用業(yè)務(wù)層進(jìn)行分頁條件查詢Page<Mtype> page = mtypeService.selectByPage(mq);//3.返回前端想要的數(shù)據(jù)  返回一個頁對象model.addAttribute("page",page);//要進(jìn)行搜索參數(shù)的回顯功能model.addAttribute("mq",mq);return "mtype";}
}

2、流派的添加

使用layui的彈出層，點(diǎn)擊“添加流派”按鈕，彈出層彈出，如圖：

• 添加流派按鈕：

<button id="addSong" class="btn btn-primary" data-target="#myModal2"type="button">添加流派
</button>

• 彈出層表單元素：

<div id="mtypePop" style="margin-right: 50px;margin-top: 50px; display: none"><form id="addMtypeForm" class="layui-form" method="post" action="/mtype/addMtype" lay-filter="example"><div class="layui-form-item"><label class="layui-form-label">流派</label><div class="layui-input-block"><input type="text" name="tname" style="color: black;" lay-verify="title" autocomplete="off"placeholder="請輸入流派名" class="layui-input"></div></div><div class="layui-form-item layui-form-text"><label class="layui-form-label">描述</label><div class="layui-input-block"><textarea style="color: black;" placeholder="請輸入流派描述" class="layui-textarea" name="tdesc"></textarea></div></div><div class="layui-form-item"><div class="layui-input-block"><button class="layui-btn layui-btn-normal layui-btn-radius" lay-submit="" lay-filter="demo1">添加流派</button></div></div></form>
</div>

• JS彈出界面：

點(diǎn)擊addSong按鈕，創(chuàng)建彈出層，內(nèi)容是id為“mtypePop”的元素

var pop;
$("#addSong").click(function () {pop = layer.open({type: 1,area: [600, 350],content: $('#mtypePop')});
})

• 表單提交

添加彈出層也是表單，在JS中編寫點(diǎn)擊確認(rèn)后表單提交，調(diào)用后端方法

layui.use('form', function () {var form = layui.form;//監(jiān)聽提交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);}}})//阻止頁面跳轉(zhuǎn)  防止同步提交  使用ajax異步提交表單return false;});

• 后臺controller：

@RequestMapping("/addMtype")
@ResponseBody
public String addMtype(Mtype mtype){mtypeService.insert(mtype);return  "success";
}

3、流派的修改

點(diǎn)擊“修改”按鈕，彈出彈出層，顯示原有數(shù)據(jù)，如圖：

• 修改按鈕：

<button  class="btn btn-sm btn-primary" type="button" modify tid="${mtype.tid}" > 修改</button>

• 彈出層div元素：

<div id="mtypePop1" style="margin-right: 50px;margin-top: 50px; display: none"><form id="updateMtypeForm" class="layui-form" method="post" action="/mtype/updateMtype" lay-filter="example"><input type="hidden" name="tid" id="tid"><div class="layui-form-item"><label class="layui-form-label">輸入框</label><div class="layui-input-block"><input id="ptname" type="text" name="tname" style="color: black;" lay-verify="title" autocomplete="off"placeholder="請輸入流派名" class="layui-input"></div></div><div class="layui-form-item layui-form-text"><label class="layui-form-label">文本域</label><div class="layui-input-block"><textarea id="ptdesc" style="color: black;" placeholder="請輸入流派描述" class="layui-textarea"name="tdesc"></textarea></div></div><div class="layui-form-item"><div class="layui-input-block"><button class="layui-btn layui-btn-normal layui-btn-radius" lay-submit="" lay-filter="demo2">修改流派</button></div></div></form>
</div>

• 彈出層的數(shù)據(jù)回顯：

點(diǎn)擊帶有“modify”類的元素的時候，執(zhí)行函數(shù)，獲取所點(diǎn)擊的元素的tid，發(fā)送ajax請求，將tid作為請求參數(shù)發(fā)送到服務(wù)器，請求json類型的數(shù)據(jù)，回調(diào)函數(shù)在請求成功后執(zhí)行，使用返回的 JSON 數(shù)據(jù)來填充表單字段。ID 為?mtypePop1?的 HTML 元素作為彈出層的內(nèi)容。

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')});
})

• 點(diǎn)擊修改按鈕后完成修改

layui.use('form', function () {var form = layui.form;//監(jiān)聽提交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中編寫回顯方法和修改方法

/*** 流派修改  回顯數(shù)據(jù)*/
@ResponseBody
@PostMapping("/getMtype")
public Mtype getMtype(int tid){Mtype mtype=mtypeService.selectByPrimaryKey(tid);return mtype;
}@ResponseBody
@PostMapping("/updateMtype")
public String updateMtype(Mtype mt){mtypeService.updateByPrimaryKeySelective(mt);return "success";

4、流派的刪除

點(diǎn)擊刪除按鈕，彈出提示框。

• 刪除按鈕

<button data-toggle="button" class="btn btn-sm btn-warning" tid="${mtype.tid}"> 刪除</button>

• JS

$(".btn-warning").click(function () {//獲取tidvar tid = $(this).attr("tid");layer.confirm('是否確認(rèn)刪除?', {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";
}

至此，后臺流派模塊編寫完畢，下一篇進(jìn)行專輯模塊的開發(fā)。