SpringBoot电脑商城项目--收获地址列表

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测试类进行测试

    @Test
    void 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 收货地址数据列表
     */
    @Override
    public 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获取当前登录用户的收货地址信息

    @RequestMapping
    public 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>

        重启项目登录运行，测试功能