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

    目录

    构建订单服务：8100

    收货人列表

    接口

    后端实现：JavaBean

    后端实现

    前端实现

    构建订单服务：8100

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

    步骤二：修改pom.xml文件，添加依赖

    1.  
    2. <dependencies>
    3.     
    4.     <dependency>
    5.         <groupId>com.czxy.changgougroupId>
    6.         <artifactId>changgou4-common-dbartifactId>
    7.     dependency>
    8.     <dependency>
    9.         <groupId>com.czxy.changgougroupId>
    10.         <artifactId>changgou4-common-authartifactId>
    11.     dependency>
    12.     <dependency>
    13.         <groupId>com.czxy.changgougroupId>
    14.         <artifactId>changgou4-pojoartifactId>
    15.     dependency>
    16.  
    17.     
    18.     <dependency>
    19.         <groupId>org.springframework.bootgroupId>
    20.         <artifactId>spring-boot-starter-webartifactId>
    21.     dependency>
    22.  
    23.     
    24.     <dependency>
    25.         <groupId>com.alibaba.nacosgroupId>
    26.         <artifactId>nacos-clientartifactId>
    27.     dependency>
    28.  
    29.     
    30.     <dependency>
    31.         <groupId>com.alibaba.cloudgroupId>
    32.         <artifactId>spring-cloud-starter-alibaba-nacos-discoveryartifactId>
    33.     dependency>
    34.     
    35.     <dependency>
    36.         <groupId>org.springframework.bootgroupId>
    37.         <artifactId>spring-boot-starter-data-redisartifactId>
    38.     dependency>
    39.     <dependency>
    40.         <groupId>redis.clientsgroupId>
    41.         <artifactId>jedisartifactId>
    42.     dependency>
    43.     
    44.     <dependency>
    45.         <groupId>org.springframework.cloudgroupId>
    46.         <artifactId>spring-cloud-starter-openfeignartifactId>
    47.     dependency>
    48.     
    49.     <dependency>
    50.         <groupId>io.springfoxgroupId>
    51.         <artifactId>springfox-swagger2artifactId>
    52.     dependency>
    53.     <dependency>
    54.         <groupId>io.springfoxgroupId>
    55.         <artifactId>springfox-swagger-uiartifactId>
    56.     dependency>
    57.     
    58.     <dependency>
    59.         <groupId>com.alibabagroupId>
    60.         <artifactId>fastjsonartifactId>
    61.     dependency>
    62.  
    63.     
    64.     <dependency>
    65.         <groupId>com.github.wxpaygroupId>
    66.         <artifactId>wxpay-sdkartifactId>
    67.         <version>0.0.3version>
    68.     dependency>
    69.  
    70. dependencies>

    步骤三：修改yml 文件

    1. server:
    2.   port: 8100
    3.  
    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服务地址
    26.  
    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;
    2.  
    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;
    7.  
    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;
    2.  
    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;
    9.  
    10. /**
    11.  * Created by liangtong.
    12.  */
    13. @TableName("tb_address")
    14. @Data
    15. public class Address {
    16.  
    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;
    50.  
    51. }

    后端实现

    需求：查询当前登录用户收货人列表

    需要通过token获得用户信息

    步骤一：拷贝配置类

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

    1. package com.czxy.changgou4.mapper;
    2.  
    3. import com.baomidou.mybatisplus.core.mapper.BaseMapper;
    4. import com.czxy.changgou4.pojo.Address;
    5. import org.apache.ibatis.annotations.Mapper;
    6.  
    7. @Mapper
    8. public interface AddressMapper extends BaseMapper
       {
    9.     /**
    10.      * 通过用户查询所有的地址
    11.      * @return
    12.      */
    13.     @Select("SELECT * FROM tb_address WHERE user_id = #{userId}")
    14.     public List
       findAllByUserId(@Param("userId") Long userId);
    15. }

    步骤三：编写service接口，编写findAllByUserId 方法完成功能

    1. package com.czxy.changgou4.service;
    2.  
    3. import com.baomidou.mybatisplus.extension.service.IService;
    4. import com.czxy.changgou4.pojo.Address;
    5.  
    6. import java.util.List;
    7.  
    8. public interface AddressService extends IService
       {
    9.  
    10.     /**
    11.      * 查询指定用户的所有地址
    12.      * @param userId
    13.      * @return
    14.      */
    15.     public List
       findAllByUserId(Long userId) ;
    16. }

    步骤四：编写service实现

    1. package com.czxy.changgou4.service.impl;
    2.  
    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;
    10.  
    11. import java.util.List;
    12.  
    13. @Service
    14. @Transactional
    15. public class AddressServiceImpl extends ServiceImpl implements AddressService {
    16.     @Override
    17.     public List
       findAllByUserId(Long userId) {
    18.         return baseMapper.findAllByUserId(userId);
    19.     }
    20. }

    步骤五：编写controller

    1. package com.czxy.changgou4.controller;
    2.  
    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;
    12.  
    13. import javax.annotation.Resource;
    14. import javax.servlet.http.HttpServletRequest;
    15. import java.util.List;
    16.  
    17. @RestController
    18. @RequestMapping("/address")
    19. public class AddressController {
    20.  
    21.     @Resource
    22.     private AddressService addressService;
    23.  
    24.     @Resource
    25.     private JwtProperties jwtProperties;
    26.  
    27.     @Resource
    28.     private HttpServletRequest request;
    29.  
    30.     @GetMapping
    31.     public BaseResult queryAddress(){
    32.  
    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.         }
    43.  
    44.         //2 查询
    45.         List
       list = this.addressService.findAllByUserId( loginUser.getId() );
    46.  
    47.         return BaseResult.ok("查询成功", list );
    48.     }
    49.  
    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. "address_info">
    2.    
    3.    
      {{defaultAddress.shr_name}}  {{defaultAddress.shr_mobile}} 
    4.    
      {{defaultAddress.shr_province}} {{defaultAddress.shr_city}} {{defaultAddress.shr_area}} {{defaultAddress.shr_address}}

    • 步骤四：修改flow2.vue，显示收货人地址列表

    2. "{'cur': addr.isdefault == 1}" v-for="(addr,index) in addressList" :key="index">
    3.     "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.     "" v-if="addr.isdefault == 0">设为默认地址
    6.     "">编辑
    7.     "">删除
  • 相关阅读:
    K线形态识别_锤头线和吊颈线(绞刑线)
    spring security url动态授权
    [第二十三篇]——Docker 安装 Apache之SpringCloud大型企业分布式微服务云架构源码
    vcruntime140_1.dll 无法继续执行代码的修复方法分享
    MES系统是如何解决工厂上的难题的？
    Prompt-To-Prompt——仅通过文本进行图像编辑
    时序预测 | MATLAB实现TCN时间卷积神经网络的时间序列预测
    【零基础学Python】后端开发篇 第二十一节--Python Web开发二：Django的安装和运行
    【Python简明教程三十（完结）】字符串格式化
    【物理应用】基于matlab GUI气象参数计算综合指标和IAQI【含Matlab源码 2116期】
  • 原文地址：https://blog.csdn.net/weixin_45481821/article/details/128053168