【畅购商城】订单模块之收货人列表

千千梦丶琪  金牌会员 | 2024-12-30 05:08:19 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 992|帖子 992|积分 2976

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要 登录 才可以下载或查看，没有账号？立即注册

x
目录
构建订单服务：8100
收货人列表
接口
后端实现：JavaBean
后端实现
前端实现
构建订单服务：8100


步骤一：构建项目，changgou4-service-orders

步骤二：修改pom.xml文件，添加依赖
  2. <dependencies>
  3.     <!--自定义项目-->
  4.     <dependency>
  5.         <groupId>com.czxy.changgou</groupId>
  6.         <artifactId>changgou4-common-db</artifactId>
  7.     </dependency>
  8.     <dependency>
  9.         <groupId>com.czxy.changgou</groupId>
  10.         <artifactId>changgou4-common-auth</artifactId>
  11.     </dependency>
  12.     <dependency>
  13.         <groupId>com.czxy.changgou</groupId>
  14.         <artifactId>changgou4-pojo</artifactId>
  15.     </dependency>
  17.     <!--web起步依赖-->
  18.     <dependency>
  19.         <groupId>org.springframework.boot</groupId>
  20.         <artifactId>spring-boot-starter-web</artifactId>
  21.     </dependency>
  23.     <!-- nacos 客户端 -->
  24.     <dependency>
  25.         <groupId>com.alibaba.nacos</groupId>
  26.         <artifactId>nacos-client</artifactId>
  27.     </dependency>
  29.     <!-- nacos 服务发现 -->
  30.     <dependency>
  31.         <groupId>com.alibaba.cloud</groupId>
  32.         <artifactId>spring-cloud-starter-alibaba-nacos-discovery</artifactId>
  33.     </dependency>
  34.     <!--redis-->
  35.     <dependency>
  36.         <groupId>org.springframework.boot</groupId>
  37.         <artifactId>spring-boot-starter-data-redis</artifactId>
  38.     </dependency>
  39.     <dependency>
  40.         <groupId>redis.clients</groupId>
  41.         <artifactId>jedis</artifactId>
  42.     </dependency>
  43.     <!-- openfeign 远程调用 -->
  44.     <dependency>
  45.         <groupId>org.springframework.cloud</groupId>
  46.         <artifactId>spring-cloud-starter-openfeign</artifactId>
  47.     </dependency>
  48.     <!--swagger2-->
  49.     <dependency>
  50.         <groupId>io.springfox</groupId>
  51.         <artifactId>springfox-swagger2</artifactId>
  52.     </dependency>
  53.     <dependency>
  54.         <groupId>io.springfox</groupId>
  55.         <artifactId>springfox-swagger-ui</artifactId>
  56.     </dependency>
  57.     <!--fastjson-->
  58.     <dependency>
  59.         <groupId>com.alibaba</groupId>
  60.         <artifactId>fastjson</artifactId>
  61.     </dependency>
  63.     <!--微信支付-->
  64.     <dependency>
  65.         <groupId>com.github.wxpay</groupId>
  66.         <artifactId>wxpay-sdk</artifactId>
  67.         <version>0.0.3</version>
  68.     </dependency>
  70. </dependencies>
复制代码
步骤三：修改yml 文件
  1. server:
  2.   port: 8100
  4. spring:
  5.   application:
  6.     name: order-service
  7.   datasource:
  8.     url: jdbc:mysql://127.0.0.1:3306/changgou_db?useUnicode=true&characterEncoding=UTF-8&serverTimezone=UTC
  9.     username: root
  10.     password: 1234
  11.     driver-class-name: com.mysql.jdbc.Driver
  12.     druid:
  13.       initial-size: 5
  14.       min-idle: 5
  15.       max-active: 20
  16.       max-wait: 1000
  17.       test-on-borrow: true
  18.   redis:
  19.     database:   0
  20.     host: 127.0.0.1
  21.     port: 6379
  22.   cloud:
  23.     nacos:
  24.       discovery:
  25.         server-addr: 127.0.0.1:8848   #nacos服务地址
  27. sc:
  28.   worker:
  29.     workerId: 1
  30.     datacenterId: 1
  31.   jwt:
  32.     secret: sc@Login(Auth}*^31)&czxy% # 登录校验的密钥
  33.     pubKeyPath: D:/rsa/rsa.pub # 公钥地址
  34.     priKeyPath: D:/rsa/rsa.pri # 私钥地址
  35.     expire: 360 # 过期时间,单位分钟
  36.   pay:
  37.     appID: wx8397f8696b538317
  38.     mchID: 1473426802
  39.     key: T6m9iK73b0kn9g5v426MKfHQH7X8rKwb
  40.     httpConnectTimeoutMs: 5000
  41.     httpReadTimeoutMs: 10000
复制代码
 步骤四：启动类
  1. package com.czxy.changgou4;
  3. import org.springframework.boot.SpringApplication;
  4. import org.springframework.boot.autoconfigure.SpringBootApplication;
  5. import org.springframework.cloud.client.discovery.EnableDiscoveryClient;
  6. import org.springframework.cloud.openfeign.EnableFeignClients;
  8. @SpringBootApplication
  9. @EnableDiscoveryClient
  10. @EnableFeignClients
  11. public class CGOrderServiceApplication {
  12.     public static void main(String[] args) {
  13.         SpringApplication.run(CGOrderServiceApplication.class, args);
  14.     }
  15. }
复制代码
步骤五：设置类

收货人列表

接口

  1. GET http://localhost:10010/order-service/address
  2. {
  3.     "code": 20000,
  4.     "message": "查询成功",
  5.     "data": [
  6.         {
  7.             "id": 1,
  8.             "userId": 1,
  9.             "shr_name": "小明",
  10.             "shr_mobile": "13344445555",
  11.             "shr_province": "江苏省",
  12.             "shr_city": "宿迁市",
  13.             "shr_area": "沭阳县",
  14.             "shr_address": "常州路57号",
  15.             "isdefault": 0
  16.         }
  17.     ],
  18.     "other": {}
  19. }
复制代码
后端实现：JavaBean

步骤一：创建Address所在对象

步骤二：根据表结构和接口规范，编写内容

  1. package com.czxy.changgou4.pojo;
  3. import com.baomidou.mybatisplus.annotation.IdType;
  4. import com.baomidou.mybatisplus.annotation.TableField;
  5. import com.baomidou.mybatisplus.annotation.TableId;
  6. import com.baomidou.mybatisplus.annotation.TableName;
  7. import com.fasterxml.jackson.annotation.JsonProperty;
  8. import lombok.Data;
  10. /**
  11. * Created by liangtong.
  12. */
  13. @TableName("tb_address")
  14. @Data
  15. public class Address {
  17.     @TableId(type = IdType.AUTO)
  18.     private Integer id;
  19.     //用户ID
  20.     @TableField(value = "user_id")
  21.     private Integer userId;
  22.     //收货人姓名
  23.     @TableField(value = "shr_name")
  24.     @JsonProperty("shr_name")
  25.     private String shrName;
  26.     //收货人手机
  27.     @TableField(value = "shr_mobile")
  28.     @JsonProperty("shr_mobile")
  29.     private String shrMobile;
  30.     //收货人省份
  31.     @TableField(value = "shr_province")
  32.     @JsonProperty("shr_province")
  33.     private String shrProvince;
  34.     //收货人城市
  35.     @TableField(value = "shr_city")
  36.     @JsonProperty("shr_city")
  37.     private String shrCity;
  38.     //收货人地区
  39.     @TableField(value = "shr_area")
  40.     @JsonProperty("shr_area")
  41.     private String shrArea;
  42.     //收货人详情地址
  43.     @TableField(value = "shr_address")
  44.     @JsonProperty("shr_address")
  45.     private String shrAddress;
  46.     //1:默认;0:不是
  47.     @TableField(value = "isdefault")
  48.     @JsonProperty("isdefault")
  49.     private Integer isdefault;
  51. }
复制代码
后端实现

需求：查询当前登录用户收货人列表
需要通过token获得用户信息
步骤一：拷贝设置类

步骤二：编写mapper，利用通用mapper即可

  1. package com.czxy.changgou4.mapper;
  3. import com.baomidou.mybatisplus.core.mapper.BaseMapper;
  4. import com.czxy.changgou4.pojo.Address;
  5. import org.apache.ibatis.annotations.Mapper;
  7. @Mapper
  8. public interface AddressMapper extends BaseMapper<Address> {
  9.     /**
  10.      * 通过用户查询所有的地址
  11.      * @return
  12.      */
  13.     @Select("SELECT * FROM tb_address WHERE user_id = #{userId}")
  14.     public List<Address> findAllByUserId(@Param("userId") Long userId);
  15. }
复制代码
步骤三：编写service接口，编写findAllByUserId 方法完成功能
  1. package com.czxy.changgou4.service;
  3. import com.baomidou.mybatisplus.extension.service.IService;
  4. import com.czxy.changgou4.pojo.Address;
  6. import java.util.List;
  8. public interface AddressService extends IService<Address> {
  10.     /**
  11.      * 查询指定用户的所有地址
  12.      * @param userId
  13.      * @return
  14.      */
  15.     public List<Address> findAllByUserId(Long userId) ;
  16. }
复制代码
步骤四：编写service实现
  1. package com.czxy.changgou4.service.impl;
  3. import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
  4. import com.czxy.changgou4.mapper.AddressMapper;
  5. import com.czxy.changgou4.pojo.Address;
  6. import com.czxy.changgou4.pojo.User;
  7. import com.czxy.changgou4.service.AddressService;
  8. import org.springframework.stereotype.Service;
  9. import org.springframework.transaction.annotation.Transactional;
  11. import java.util.List;
  13. @Service
  14. @Transactional
  15. public class AddressServiceImpl extends ServiceImpl<AddressMapper, Address> implements AddressService {
  16.     @Override
  17.     public List<Address> findAllByUserId(Long userId) {
  18.         return baseMapper.findAllByUserId(userId);
  19.     }
  20. }
复制代码
步骤五：编写controller
  1. package com.czxy.changgou4.controller;
  3. import com.czxy.changgou4.config.JwtProperties;
  4. import com.czxy.changgou4.pojo.Address;
  5. import com.czxy.changgou4.pojo.User;
  6. import com.czxy.changgou4.service.AddressService;
  7. import com.czxy.changgou4.utils.JwtUtils;
  8. import com.czxy.changgou4.vo.BaseResult;
  9. import org.springframework.web.bind.annotation.GetMapping;
  10. import org.springframework.web.bind.annotation.RequestMapping;
  11. import org.springframework.web.bind.annotation.RestController;
  13. import javax.annotation.Resource;
  14. import javax.servlet.http.HttpServletRequest;
  15. import java.util.List;
  17. @RestController
  18. @RequestMapping("/address")
  19. public class AddressController {
  21.     @Resource
  22.     private AddressService addressService;
  24.     @Resource
  25.     private JwtProperties jwtProperties;
  27.     @Resource
  28.     private HttpServletRequest request;
  30.     @GetMapping
  31.     public BaseResult queryAddress(){
  33.         //1 获得用户信息
  34.         // 1.1 获得token
  35.         String token = request.getHeader("Authorization");
  36.         // 1.2 解析token
  37.         User loginUser = null;
  38.         try {
  39.             loginUser = JwtUtils.getObjectFromToken(token, jwtProperties.getPublicKey(),User.class);
  40.         } catch (Exception e) {
  41.             return BaseResult.error("token失效或未登录");
  42.         }
  44.         //2 查询
  45.         List<Address> list = this.addressService.findAllByUserId( loginUser.getId() );
  47.         return BaseResult.ok("查询成功", list );
  48.     }
  50. }
复制代码
前端实现


需求：查询全部的收货人所在
为了操作方便，需要利用filter过滤默认所在

步骤一：修改 apiclient.js ，添加查询收货人列表函数


步骤二：修改 flow2.vue 组件，页面加载成功，查询当前登录用户全部的收货人所在
同时过滤默认所在数据
  1. mounted() {
  2.     // 查询收获人地址
  3.     this.getAddressFn()
  4.   },
  5.   data() {
  6.     return {
  7.       addressList: [],      //所有的地址
  8.       defaultAddress: {},   //默认地址
  9.     }
  10.   },
  11.   methods: {
  12.     async getAddressFn() {
  13.       let { data } = await this.$request.getAddress()
  14.       // 所有收获人地址
  15.       this.addressList = data.data
  16.       //默认地址
  17.       this.defaultAddress = this.addressList.filter(item => item.isdefault == 1)[0];
  18.     }
  19.   },
复制代码
 步骤三：修改 flow2.vue 组件，显示默认所在

  1. <div class="address_info">
  2.    <!-- 默认地址 -->
  3.    <p>{{defaultAddress.shr_name}}  {{defaultAddress.shr_mobile}} </p>
  4.    <p>{{defaultAddress.shr_province}} {{defaultAddress.shr_city}} {{defaultAddress.shr_area}} {{defaultAddress.shr_address}} </p>
  5. </div>
复制代码
步骤四：修改flow2.vue，显示收货人所在列表

  1. <!-- 列表页面 -->
  2. <li :class="{'cur': addr.isdefault == 1}" v-for="(addr,index) in addressList" :key="index">
  3.     <input type="radio" name="address" checked="addr.isdefault == 1" />
  4.         {{addr.shr_name}} {{addr.shr_province}} {{addr.shr_city}} {{addr.shr_area}} {{addr.shr_address}} {{addr.shr_mobile}}
  5.     <a href="" v-if="addr.isdefault == 0">设为默认地址</a>
  6.     <a href="">编辑</a>
  7.     <a href="">删除</a>
  8. </li>
复制代码
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
回复

使用道具 举报

0 个回复

倒序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

千千梦丶琪

金牌会员
这个人很懒什么都没写!

楼主热帖

标签云

AI 运维 CIO 存储 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表