1. 收獲地址列表展示-持久層
1.1 sql語句
1.2 AddressMapper接口編寫抽象方法
/*** 根據用戶id查詢用戶的收貨地址數據* @param uid* @return*/List<Address> findByUid(Integer uid);1.3 在xml文件中進行sql映射
<!-- DESC降序 --><select id="findByUid" resultMap="AddressEntityMap">SELECT * FROM t_address WHERE uid=#{uid}ORDER BY is_default DESC, created_time DESC</select>1.4 測試
? ? ? ? 在AddressMapperTest測試類進行測試
@Testvoid findByUid() {List<Address> list = addressMapper.findByUid(1);System.out.println(list);}2.?收獲地址列表展示-業務層
2.1 處理異常
? ? ? ? 這里沒有需要考慮處理的異常
2.2 AddressService類編寫抽象方法
/*** 根據用戶id查詢用戶的收貨地址數據* @param uid 用戶id* @return 當前用戶的收貨地址數據列表*/List<Address> findByUid(Integer uid);
2.3 實現類實現抽象方法
? ? ? ? 需要注意的是，數據庫的數據體量很大，為了減小體量，提高效率，將前端用不到的數據封裝成null。
/*** 根據用戶id查詢用戶的收貨地址數據* @param uid 用戶id* @return 收貨地址數據列表*/@Overridepublic List<Address> findByUid(Integer uid) {List<Address> list = addressMapper.findByUid(uid);for (Address address : list) {address.setAid( null);address.setUid(null);address.setProvinceCode(null);address.setCityCode(null);address.setAreaCode(null);address.setIsDefault(null);address.setTel( null);address.setCreatedUser(null);address.setCreatedTime(null);address.setModifiedUser(null);address.setModifiedTime(null);}return list;}2.4 測試
3. 收獲地址列表展示-控制層
3.1 設計請求
請求路徑：/addresses
請求參數：/HttpSession session
請求方式：GET
請求返回對象：JsonResult<List<Address>>
3.2 在controller類中接收請求，編寫業務代碼
? ? ? ? 在session中獲取用戶的id，通過uid獲取當前登錄用戶的收貨地址信息
@RequestMappingpublic JsonResult<List<Address>> getByUid(HttpSession session){Integer uid = getUidFromSession(session);List<Address> data = addressService.findByUid(uid);return new JsonResult<>(OK,data);}3.3 啟動項目進行測試
4.?收獲地址列表展示-前端頁面
? ? ? ? 代碼如下：????????
? ? ? ? html
<div class="panel-body"><!--地址顯示--><table class="table table-striped"><caption>收貨地址列表</caption><thead><tr><th>地址類型</th><th>收貨人姓名</th><th>詳細地址</th><th>聯系電話</th><th colspan="3">操作</th></tr></thead><tbody id="address-list"><tr><td>家</td><td>八戒</td><td>北京市房山區高老莊3排6號</td><td>1380***1234</td><td><a class="btn btn-xs btn-info"><span class="fa fa-edit"></span> 修改</a></td><td><a class="btn btn-xs add-del btn-info"><span class="fa fa-trash-o"></span> 刪除</a></td><td><a class="btn btn-xs add-def btn-default">設為默認</a></td></tr><tr><td>公司</td><td>八戒</td><td>北京市海淀區中關村中路1號1001室</td><td>1380***1234</td><td><a class="btn btn-xs btn-info"><span class="fa fa-edit"></span> 修改</a></td><td><a class="btn btn-xs add-del btn-info"><span class="fa fa-trash-o"></span> 刪除</a></td><td><a class="btn btn-xs add-def btn-default">設為默認</a></td></tr><tr><td>宿舍</td><td>八戒</td><td>北京市海淀區永豐鎮30號</td><td>1380***1234</td><td><a class="btn btn-xs btn-info"><span class="fa fa-edit"></span> 修改</a></td>--><td><a class="btn btn-xs add-del btn-info"><span class="fa fa-trash-o"></span> 刪除</a></td>--><td><a class="btn btn-xs add-def btn-default">設為默認</a></td>--></tr></tbody></table><a href="addAddress.html" class="btn btn-sm btn-primary"><span class="fa fa-plus"></span>新增收貨地址</a></div>? ? ? ? ?js
- 當頁面加載時就需要展示收貨地址列表
- 后端傳到前端的是list集合，需要遍歷操作，將數據封裝到tr上
- <td>#{tag}</td>進行占位，replace方法進行替換，替換完成之后將其追加到address-list上進行展示
- 默認收貨地址需要進行隱藏
<script type="text/javascript">$(document).ready(function() {// 頁面一加載就調用方法showAddressList();})function showAddressList() {$.ajax({url: "/addresses",type: "GET",dataType: "json",success: function (json) {if (json.state == 200) {// 獲取省列表,包括所喲省名稱let list = json.data;// 遍歷省列表for (let i = 0; i < list.length; i++) {// #{tag} 占位符let tr = '<tr>\n' +'<td>#{tag}</td>\n' +'<td>#{name}</td>\n' +'<td>#{address}</td>\n' +'<td>#{phone}</td>\n' +'<td><a class="btn btn-xs btn-info"><span class="fa fa-edit"></span> 修改</a></td>\n' +'<td><a class="btn btn-xs add-del btn-info"><span class="fa fa-trash-o"></span> 刪除</a></td>\n' +'<td><a class="btn btn-xs add-def btn-default">設為默認</a></td>\n' +'</tr>'// 將列表的tr清空，替代成新的tr// replace() 替換tr = tr.replace("#{tag}", list[i].tag)tr = tr.replace("#{name}", list[i].name)tr = tr.replace("#{address}", list[i].address)tr = tr.replace("#{phone}", list[i].phone)// 替換完成之后，將tr追加到address-list列表中$("#address-list").append(tr)}// 按照降序排列的話，第一項是設置的默認項，那么”設為默認地址“這個按鈕應該隱藏// 將某個元素隱藏使用hide()方法$(".add-def:eq(0)").hide();}else{alert("用戶收貨地址列表加載失敗")}}})}</script>? ? ? ? 將寫死的默認數據注釋掉就好?
<tbody id="address-list">
<!-- <tr>-->
<!-- <td>家</td>-->
<!-- <td>八戒</td>-->
<!-- <td>北京市房山區高老莊3排6號</td>-->
<!-- <td>1380***1234</td>-->
<!-- <td><a class="btn btn-xs btn-info"><span class="fa fa-edit"></span> 修改</a></td>-->
<!-- <td><a class="btn btn-xs add-del btn-info"><span class="fa fa-trash-o"></span> 刪除</a></td>-->
<!-- <td><a class="btn btn-xs add-def btn-default">設為默認</a></td>-->
<!-- </tr>-->
<!-- <tr>-->
<!-- <td>公司</td>-->
<!-- <td>八戒</td>-->
<!-- <td>北京市海淀區中關村中路1號1001室</td>-->
<!-- <td>1380***1234</td>-->
<!-- <td><a class="btn btn-xs btn-info"><span class="fa fa-edit"></span> 修改</a></td>-->
<!-- <td><a class="btn btn-xs add-del btn-info"><span class="fa fa-trash-o"></span> 刪除</a></td>-->
<!-- <td><a class="btn btn-xs add-def btn-default">設為默認</a></td>-->
<!-- </tr>-->
<!-- <tr>-->
<!-- <td>宿舍</td>-->
<!-- <td>八戒</td>-->
<!-- <td>北京市海淀區永豐鎮30號</td>-->
<!-- <td>1380***1234</td>-->
<!-- <td><a class="btn btn-xs btn-info"><span class="fa fa-edit"></span> 修改</a></td>-->
<!-- <td><a class="btn btn-xs add-del btn-info"><span class="fa fa-trash-o"></span> 刪除</a></td>-->
<!-- <td><a class="btn btn-xs add-def btn-default">設為默認</a></td>-->
<!-- </tr>--></tbody>? ? ? ? 重啟項目登錄運行，測試功能
)
