ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

展示收获地址

2022-04-14 08:31:05  阅读:143  来源: 互联网

标签:getByUid uid 展示 List 收获 list replace 地址 address


展示收获地址

1.持久层

1.1sql语句设计

select * from t_address where uid = ?

1.2设计接口
List<Address> findAddressByUidAddresses(Integer uid);

因为uid里面有好多地址要用一个集合

1.3编写方法
<select id="findAddressByUidAddresses" resultType="com.cy.store.entity.Address">
   select * from t_address where uid=#{uid}
</select>
1.4测试

2.业务层

2.1规划异常

2.2设计接口
List<Address> getByUid(Integer uid);
2.3编写方法
@Override
public List<Address> getByUid(Integer uid) {

   List<Address> list = addressMapper.findAddressByUidAddresses(uid);

   return list;

}

3.控制层

3.1 处理异常

说明:无异常。

3.2 设计请求

设计用户提交的请求,并设计响应的方式。

请求路径:/addresses
请求参数:HttpSession session
请求类型:GET
响应结果:JsonResult<List<Address>>

3.3 处理请求

1.在AddressController类中添加处理请求的getByUid(HttpSession session)方法。

@GetMapping({"", "/"})
public JsonResult<List<Address>> getByUid(HttpSession session) {
Integer uid = getUidFromSession(session);
List<Address> data = addressService.getByUid(uid);
return new JsonResult<>(OK, data);
}

2.完成后启动项目,打开浏览器先登录,再访问http://localhost:8080/addresses页面。

4.前端页面

1.在address.html页面中body标签内部的最后,添加展示用户收货地址列表数据的JavaScript代码。

<script type="text/javascript">
$(document).ready(function () {
   showAddressList();
});

function showAddressList() {
   $("#address-list").empty();
   $.ajax({
       url: "/addresses",
       type: "GET",
       dataType: "JSON",
       success: function (json) {
           let list = json.data;
           for (let i = 0; i < list.length; i++) {
               console.log(list[i].name);
               let address = '<tr>'
                   + '<td>#{tag}</td>'
                   + '<td>#{name}</td>'
                   + '<td>#{province}#{city}#{area}#{address}</td>'
                   + '<td>#{phone}</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>';

               address = address.replace(/#{aid}/g, list[i].aid);
               address = address.replace(/#{tag}/g, list[i].tag);
               address = address.replace("#{name}", list[i].name);
               address = address.replace("#{province}", list[i].provinceName);
               address = address.replace("#{city}", list[i].cityName);
               address = address.replace("#{area}", list[i].areaName);
               address = address.replace("#{address}", list[i].address);
               address = address.replace("#{phone}", list[i].phone);

               $("#address-list").append(address);
          }
           $(".add-def:eq(0)").hide();
      }
  });
}
</script>

2.完成后启动项目,打开浏览器先登录,再访问http://localhost:8080/web/address.html页面。

标签:getByUid,uid,展示,List,收获,list,replace,地址,address
来源: https://www.cnblogs.com/shuangshuangzi/p/16142986.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有