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>重启项目登录运行，测试功能
)
