【畅购商城】订单模块之添加联系人

╰+哭是因爲堅強的太久メ 2024-03-31 14:08 84阅读 0赞

**目录**

构建订单服务：8100

收货人列表

接口

后端实现：JavaBean

后端实现：

前端实现

添加联系人

需求

显示添加表单

接口

后端实现

前端实现

## **构建订单服务：8100** ##

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

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

<dependencies>
        
        <dependency>
            <groupId>com.czxy.changgou</groupId>
            <artifactId>changgou4-common-db</artifactId>
        </dependency>
        <dependency>
            <groupId>com.czxy.changgou</groupId>
            <artifactId>changgou4-common-auth</artifactId>
        </dependency>
        <dependency>
            <groupId>com.czxy.changgou</groupId>
            <artifactId>changgou4-pojo</artifactId>
        </dependency>
    
        
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
    
        
        <dependency>
            <groupId>com.alibaba.nacos</groupId>
            <artifactId>nacos-client</artifactId>
        </dependency>
    
        
        <dependency>
            <groupId>com.alibaba.cloud</groupId>
            <artifactId>spring-cloud-starter-alibaba-nacos-discovery</artifactId>
        </dependency>
        
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-data-redis</artifactId>
        </dependency>
        <dependency>
            <groupId>redis.clients</groupId>
            <artifactId>jedis</artifactId>
        </dependency>
        
        <dependency>
            <groupId>org.springframework.cloud</groupId>
            <artifactId>spring-cloud-starter-openfeign</artifactId>
        </dependency>
        
        <dependency>
            <groupId>io.springfox</groupId>
            <artifactId>springfox-swagger2</artifactId>
        </dependency>
        <dependency>
            <groupId>io.springfox</groupId>
            <artifactId>springfox-swagger-ui</artifactId>
        </dependency>
        
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>fastjson</artifactId>
        </dependency>
    
        
        <dependency>
            <groupId>com.github.wxpay</groupId>
            <artifactId>wxpay-sdk</artifactId>
            <version>0.0.3</version>
        </dependency>
    
    </dependencies>

步骤三：修改yml 文件

server:
      port: 8100
    
    spring:
      application:
        name: order-service
      datasource:
        url: jdbc:mysql://127.0.0.1:3306/changgou_db?useUnicode=true&characterEncoding=UTF-8&serverTimezone=UTC
        username: root
        password: 1234
        driver-class-name: com.mysql.jdbc.Driver
        druid:
          initial-size: 5
          min-idle: 5
          max-active: 20
          max-wait: 1000
          test-on-borrow: true
      redis:
        database:   0
        host: 127.0.0.1
        port: 6379
      cloud:
        nacos:
          discovery:
            server-addr: 127.0.0.1:8848   #nacos服务地址
    
    sc:
      worker:
        workerId: 1
        datacenterId: 1
      jwt:
        secret: sc@Login(Auth}*^31)&czxy% # 登录校验的密钥
        pubKeyPath: D:/rsa/rsa.pub # 公钥地址
        priKeyPath: D:/rsa/rsa.pri # 私钥地址
        expire: 360 # 过期时间,单位分钟
      pay:
        appID: wx8397f8696b538317
        mchID: 1473426802
        key: T6m9iK73b0kn9g5v426MKfHQH7X8rKwb
        httpConnectTimeoutMs: 5000
        httpReadTimeoutMs: 10000

步骤四：启动类

package com.czxy.changgou4;
    
    import org.springframework.boot.SpringApplication;
    import org.springframework.boot.autoconfigure.SpringBootApplication;
    import org.springframework.cloud.client.discovery.EnableDiscoveryClient;
    import org.springframework.cloud.openfeign.EnableFeignClients;
    
    @SpringBootApplication
    @EnableDiscoveryClient
    @EnableFeignClients
    public class CGOrderServiceApplication {
        public static void main(String[] args) {
            SpringApplication.run(CGOrderServiceApplication.class, args);
        }
    }

步骤五：配置类

![b52b107cc1174d91a9cd9a54039b73df.png][]

### **收货人列表** ###

###  ###

### **接口** ###

GET http://localhost:10010/order-service/address
    {
        "code": 20000,
        "message": "查询成功",
        "data": [
            {
                "id": 1,
                "userId": 1,
                "shr_name": "小明",
                "shr_mobile": "13344445555",
                "shr_province": "江苏省",
                "shr_city": "宿迁市",
                "shr_area": "沭阳县",
                "shr_address": "常州路57号",
                "isdefault": 0
            }
        ],
        "other": {}
    }

###  ###

### **后端实现：JavaBean** ###

步骤一：创建Address地址对象

![d9c10927358f40aea40df1bce828dfe8.png][]

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

package com.czxy.changgou4.pojo;
    
    import com.baomidou.mybatisplus.annotation.IdType;
    import com.baomidou.mybatisplus.annotation.TableField;
    import com.baomidou.mybatisplus.annotation.TableId;
    import com.baomidou.mybatisplus.annotation.TableName;
    import com.fasterxml.jackson.annotation.JsonProperty;
    import lombok.Data;
    
    /**
     * Created by liangtong.
     */
    @TableName("tb_address")
    @Data
    public class Address {
    
        @TableId(type = IdType.AUTO)
        private Integer id;
        //用户ID
        @TableField(value = "user_id")
        private Integer userId;
        //收货人姓名
        @TableField(value = "shr_name")
        @JsonProperty("shr_name")
        private String shrName;
        //收货人手机
        @TableField(value = "shr_mobile")
        @JsonProperty("shr_mobile")
        private String shrMobile;
        //收货人省份
        @TableField(value = "shr_province")
        @JsonProperty("shr_province")
        private String shrProvince;
        //收货人城市
        @TableField(value = "shr_city")
        @JsonProperty("shr_city")
        private String shrCity;
        //收货人地区
        @TableField(value = "shr_area")
        @JsonProperty("shr_area")
        private String shrArea;
        //收货人详情地址
        @TableField(value = "shr_address")
        @JsonProperty("shr_address")
        private String shrAddress;
        //1:默认;0:不是
        @TableField(value = "isdefault")
        @JsonProperty("isdefault")
        private Integer isdefault;
    
    }

### **后端实现：** ###

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

需要通过token获得用户信息

步骤一：拷贝配置类

![a6158ba3956d456e814e3d22861a0aa0.png][]

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

![cf46bf46603e4bdb947ff79b124acf53.png][]

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

package com.czxy.changgou4.service;
    
    import com.baomidou.mybatisplus.extension.service.IService;
    import com.czxy.changgou4.pojo.Address;
    
    import java.util.List;
    
    public interface AddressService extends IService<Address> {
    
        /**
         * 查询指定用户的所有地址
         * @param userId
         * @return
         */
        public List<Address> findAllByUserId(Long userId) ;
    }

步骤四：编写service实现

package com.czxy.changgou4.service.impl;
    
    import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
    import com.czxy.changgou4.mapper.AddressMapper;
    import com.czxy.changgou4.pojo.Address;
    import com.czxy.changgou4.pojo.User;
    import com.czxy.changgou4.service.AddressService;
    import org.springframework.stereotype.Service;
    import org.springframework.transaction.annotation.Transactional;
    
    import java.util.List;
    
    @Service
    @Transactional
    public class AddressServiceImpl extends ServiceImpl<AddressMapper, Address> implements AddressService {
        @Override
        public List<Address> findAllByUserId(Long userId) {
            return baseMapper.findAllByUserId(userId);
        }
    }

步骤五：编写controller

package com.czxy.changgou4.controller;
    
    import com.czxy.changgou4.config.JwtProperties;
    import com.czxy.changgou4.pojo.Address;
    import com.czxy.changgou4.pojo.User;
    import com.czxy.changgou4.service.AddressService;
    import com.czxy.changgou4.utils.JwtUtils;
    import com.czxy.changgou4.vo.BaseResult;
    import org.springframework.web.bind.annotation.GetMapping;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.RestController;
    
    import javax.annotation.Resource;
    import javax.servlet.http.HttpServletRequest;
    import java.util.List;
    
    @RestController
    @RequestMapping("/address")
    public class AddressController {
    
        @Resource
        private AddressService addressService;
    
        @Resource
        private JwtProperties jwtProperties;
    
        @Resource
        private HttpServletRequest request;
    
        @GetMapping
        public BaseResult queryAddress(){
    
            //1 获得用户信息
            // 1.1 获得token
            String token = request.getHeader("Authorization");
            // 1.2 解析token
            User loginUser = null;
            try {
                loginUser = JwtUtils.getObjectFromToken(token, jwtProperties.getPublicKey(),User.class);
            } catch (Exception e) {
                return BaseResult.error("token失效或未登录");
            }
    
            //2 查询
            List<Address> list = this.addressService.findAllByUserId( loginUser.getId() );
    
            return BaseResult.ok("查询成功", list );
        }
    
    }

### 前端实现 ###

需求：查询所有的收货人地址

为了操作方便，需要使用filter过滤默认地址

![68c2db0e246a4bc5bd8e59b7b91789c0.png][]

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

![92453a84c7024687866dccddf667eb47.png][]

步骤二：修改 flow2.vue 组件，页面加载成功，查询当前登录用户所有的收货人地址

同时过滤默认地址数据

mounted() {
        // 查询收获人地址
        this.getAddressFn()
      },
      data() {
        return {
          addressList: [],      //所有的地址
          defaultAddress: {},   //默认地址
        }
      },
      methods: {
        async getAddressFn() {
          let { data } = await this.$request.getAddress()
          // 所有收获人地址
          this.addressList = data.data
          //默认地址
          this.defaultAddress = this.addressList.filter(item => item.isdefault == 1)[0];
        }
      },

步骤三：修改 flow2.vue 组件，显示默认地址

![986eb94b116a47a19e9685336ebbf64b.png][]

<div class="address_info">
       
       <p>{
       {defaultAddress.shr_name}}  {
       {defaultAddress.shr_mobile}} </p>
       <p>{
       {defaultAddress.shr_province}} {
       {defaultAddress.shr_city}} {
       {defaultAddress.shr_area}} {
       {defaultAddress.shr_address}} </p>
    </div>

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

![489f52cdb38244b2aa5020adf09c2d96.png][]

<li :class="{'cur': addr.isdefault == 1}" v-for="(addr,index) in addressList" :key="index">
        <input type="radio" name="address" checked="addr.isdefault == 1" />
            {
       {addr.shr_name}} {
       {addr.shr_province}} {
       {addr.shr_city}} {
       {addr.shr_area}} {
       {addr.shr_address}} {
       {addr.shr_mobile}}
        <a href="" v-if="addr.isdefault == 0">设为默认地址</a>
        <a href="">编辑</a>
        <a href="">删除</a>
    </li>

## **添加联系人** ##

### 需求 ###

需求：新添加的联系人为默认联系人

![19a22cc6616c4cd9acdd08d3d72d6058.png][]

### **显示添加表单** ###

修改flow2.vue，显示添加表单

![79732f438dca49668e13ec7f69489db8.png][]

data() {
        return {
          addressList: [],      //所有的地址
          defaultAddress: {},   //默认地址
          showNew: false,       //是否显示新地址
        }
      },

使用变量，控制添加表单的显示与隐藏

![328ff0b082fd4582a2b9501a900fbc69.png][]

<li :class="{'cur': showNew==false && addr.isdefault == 1}" v-for="(addr,index) in addressList" :key="index">
                    <input type="radio" name="address" checked="addr.isdefault == 1" @click="clickRadio(addr)" />
                      {
       {addr.shr_name}} {
       {addr.shr_province}} {
       {addr.shr_city}} {
       {addr.shr_area}} {
       {addr.shr_address}} {
       {addr.shr_mobile}}
                    <a href="" v-if="addr.isdefault == 0">设为默认地址</a>
                    <a href="">编辑</a>
                    <a href="">删除{
       {showNew==false && addr.isdefault == 1}} </a>
                  </li>
                  <li  :class="{'cur': showNew==true}"><input type="radio" name="address" class="new_address"  @click="showNew=true"  />使用新地址</li>
                </ul>
                <form action="" v-show="showNew" class="none" name="address_form">

###  ###

### **接口** ###

POST http://localhost:10010/order-service/address
    {
        "shr_name": "张三",
        "shr_mobile": "13344445555",
        "shr_province": "江苏省",
        "shr_city": "宿迁市",
        "shr_area": "沭阳县",
        "shr_address": "常州路57号"
    }

###  ###

### **后端实现** ###

步骤一：修改mapper，添加指定用户的地址默认状态

![f0dac67a865a4162bb16998f7b5eaf2a.png][]

package com.czxy.changgou4.mapper;
    
    import com.baomidou.mybatisplus.core.mapper.BaseMapper;
    import com.czxy.changgou4.pojo.Address;
    import org.apache.ibatis.annotations.Mapper;
    import org.apache.ibatis.annotations.Param;
    import org.apache.ibatis.annotations.Update;
    
    @Mapper
    public interface AddressMapper extends BaseMapper<Address> {
    
        /**
         * 修改用户默认地址
         * @param userId
         * @param defaultValue
         */
        @Update("update tb_address set isdefault = #{defaultValue} where user_id = #{userId}")
        public void updateDefault(@Param("userId") Integer userId, @Param("defaultValue") int defaultValue);
    }

步骤二：修改service，添加地址，并将新地址设置成默认地址。

![31adb965449448a59f7008ce8b8df058.png][]

/**
     * 添加新地址，并设置成默认地址
     * @param address
     */
    public void addAddress(Address address) ;

步骤三：修改service实现

/**
     * 添加新地址，并设置成默认地址
     * @param address
     */
    public void addAddress(Address address) {
        //修改指定用户的状态
        this.addressMapper.updateDefault(address.getUserId(),0);
    
        //添加新地址，默认
        address.setIsdefault(1);
        this.addressMapper.insert(address);
    }

![c5f664487e4548a99468740e590495b0.png][]

步骤四：修改controller

@PostMapping
    public BaseResult addAddress(@RequestBody Address address){
        //1 获得用户信息
        // 1.1 获得token
        String token = request.getHeader("Authorization");
        // 1.2 解析token
        User loginUser = null;
        try {
            loginUser = JwtUtils.getObjectFromToken(token, jwtProperties.getPublicKey(),User.class);
        } catch (Exception e) {
            return BaseResult.error("token失效或未登录");
        }
    
        address.setUserId(loginUser.getId().intValue());
        this.addressService.addAddress(address);
        return BaseResult.ok("添加成功");
    }

###  ###

### **前端实现** ###

步骤一：修改apiclient.js，添加函数

![5522a04b473248a0b6864d493ca74023.png][]

addNewAddress : ( params ) => {
        return axios.post("/order-service/address" , params )
      },

步骤二：修改 flow2.vue ，添加成员变量

data() {
        return {
          addressList: [],      //所有的地址
          defaultAddress: {},   //默认地址
          showNew : false,    //是否显示添加
          newAddress : {      //新地址，需要与表单进行数据绑定
            shr_name:"",
            shr_mobile:"",
            shr_province:"",
            shr_city:"",
            shr_area:"",
            shr_address:""
          },
        }
      },

![e3d34607a61548d293b1b908324d45f0.png][]

步骤三：表单元素绑定

![66c315e3b1aa461ebbeac130d5ca1b15.png][]

步骤四：绑定提交事件

![1870074e3397451093c8fa333fe9e4f5.png][]

methods: {
        async getAddressFn() {
          let { data } = await this.$request.getAddress()
          // 所有收获人地址
          this.addressList = data.data
          //默认地址
          this.defaultAddress = this.addressList.filter(item => item.isdefault == 1)[0];
        },
        async addAddresssFn (){
          let {data } = await this.$request.addNewAddress(this.newAddress)
          if(data.code == 1){
            // 重新查询
            this.getAddressFn()
            // 表单隐藏，数据清空
            this.showNew = false;
            this.newAddress = {
              shr_name:"",
              shr_mobile:"",
              shr_province:"",
              shr_city:"",
              shr_area:"",
              shr_address:""
            }
          }
        },
      },

[b52b107cc1174d91a9cd9a54039b73df.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/5481fcee4e4a400a8e8cf50f3c1798d2.png
[d9c10927358f40aea40df1bce828dfe8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/6bb6a74aa24d4d8fad6945264a9972d6.png
[a6158ba3956d456e814e3d22861a0aa0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/b85860e9f99b4e358f3ae63674759be2.png
[cf46bf46603e4bdb947ff79b124acf53.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/7d5fa87e5f234d1ebb70a4dd6768fb46.png
[68c2db0e246a4bc5bd8e59b7b91789c0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/bb45951d77744acd99445f8180274e53.png
[92453a84c7024687866dccddf667eb47.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/43f6863d8e924df3bb040a9298f062fd.png
[986eb94b116a47a19e9685336ebbf64b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/10992eedf847498596b8b6dbcd669b6f.png
[489f52cdb38244b2aa5020adf09c2d96.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/b3a5cf9da48949bcbef4713d35d9f531.png
[19a22cc6616c4cd9acdd08d3d72d6058.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/0b67f0d07bc6424880d3c39ccc0a8f9e.png
[79732f438dca49668e13ec7f69489db8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/1087bd7300a44d8d878c3ce9aff238ee.png
[328ff0b082fd4582a2b9501a900fbc69.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/aa8131673a2844e6bd7ee7fd32dc214b.png
[f0dac67a865a4162bb16998f7b5eaf2a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/0d67848955d24b918b82eca385554988.png
[31adb965449448a59f7008ce8b8df058.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/17ab8a9c43204bfc895b76ac23360f00.png
[c5f664487e4548a99468740e590495b0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/e32969ad2e9b40f791230257747777af.png
[5522a04b473248a0b6864d493ca74023.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/71a369d024af4b64a8c9a8eff41ae433.png
[e3d34607a61548d293b1b908324d45f0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/56fa8b0c9fcf4177a559e9f48b84708c.png
[66c315e3b1aa461ebbeac130d5ca1b15.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/1cb18f2ca0ef45308c12ba3be6f67c8a.png
[1870074e3397451093c8fa333fe9e4f5.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/607d472b67ec4a1b9fdcdd8e290971ae.png