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

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

目录

构建订单服务：8100

收货人列表

接口

后端实现：JavaBean

后端实现：

前端实现

添加联系人

需求

显示添加表单

接口

后端实现

前端实现

构建订单服务：8100

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

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

  1. <dependencies>
  2.     <!--自定义项目-->
  3.     <dependency>
  4.         <groupId>com.czxy.changgou</groupId>
  5.         <artifactId>changgou4-common-db</artifactId>
  6.     </dependency>
  7.     <dependency>
  8.         <groupId>com.czxy.changgou</groupId>
  9.         <artifactId>changgou4-common-auth</artifactId>
  10.     </dependency>
  11.     <dependency>
  12.         <groupId>com.czxy.changgou</groupId>
  13.         <artifactId>changgou4-pojo</artifactId>
  14.     </dependency>
  16.     <!--web起步依赖-->
  17.     <dependency>
  18.         <groupId>org.springframework.boot</groupId>
  19.         <artifactId>spring-boot-starter-web</artifactId>
  20.     </dependency>
  22.     <!-- nacos 客户端 -->
  23.     <dependency>
  24.         <groupId>com.alibaba.nacos</groupId>
  25.         <artifactId>nacos-client</artifactId>
  26.     </dependency>
  28.     <!-- nacos 服务发现 -->
  29.     <dependency>
  30.         <groupId>com.alibaba.cloud</groupId>
  31.         <artifactId>spring-cloud-starter-alibaba-nacos-discovery</artifactId>
  32.     </dependency>
  33.     <!--redis-->
  34.     <dependency>
  35.         <groupId>org.springframework.boot</groupId>
  36.         <artifactId>spring-boot-starter-data-redis</artifactId>
  37.     </dependency>
  38.     <dependency>
  39.         <groupId>redis.clients</groupId>
  40.         <artifactId>jedis</artifactId>
  41.     </dependency>
  42.     <!-- openfeign 远程调用 -->
  43.     <dependency>
  44.         <groupId>org.springframework.cloud</groupId>
  45.         <artifactId>spring-cloud-starter-openfeign</artifactId>
  46.     </dependency>
  47.     <!--swagger2-->
  48.     <dependency>
  49.         <groupId>io.springfox</groupId>
  50.         <artifactId>springfox-swagger2</artifactId>
  51.     </dependency>
  52.     <dependency>
  53.         <groupId>io.springfox</groupId>
  54.         <artifactId>springfox-swagger-ui</artifactId>
  55.     </dependency>
  56.     <!--fastjson-->
  57.     <dependency>
  58.         <groupId>com.alibaba</groupId>
  59.         <artifactId>fastjson</artifactId>
  60.     </dependency>
  62.     <!--微信支付-->
  63.     <dependency>
  64.         <groupId>com.github.wxpay</groupId>
  65.         <artifactId>wxpay-sdk</artifactId>
  66.         <version>0.0.3</version>
  67.     </dependency>
  69. </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. }

步骤五：配置类

b52b107cc1174d91a9cd9a54039b73df.png

收货人列表

#

接口

  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地址对象

d9c10927358f40aea40df1bce828dfe8.png

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

  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获得用户信息

步骤一：拷贝配置类

a6158ba3956d456e814e3d22861a0aa0.png

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

cf46bf46603e4bdb947ff79b124acf53.png

步骤三：编写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过滤默认地址

68c2db0e246a4bc5bd8e59b7b91789c0.png

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

92453a84c7024687866dccddf667eb47.png

步骤二：修改 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 组件，显示默认地址

986eb94b116a47a19e9685336ebbf64b.png

  1. <div class="address_info">
  2.    <!-- 默认地址 -->
  3.    <p>{
  4.    {defaultAddress.shr_name}}  {
  5.    {defaultAddress.shr_mobile}} </p>
  6.    <p>{
  7.    {defaultAddress.shr_province}} {
  8.    {defaultAddress.shr_city}} {
  9.    {defaultAddress.shr_area}} {
  10.    {defaultAddress.shr_address}} </p>
  11. </div>

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

489f52cdb38244b2aa5020adf09c2d96.png

  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.         {
  5.    {addr.shr_name}} {
  6.    {addr.shr_province}} {
  7.    {addr.shr_city}} {
  8.    {addr.shr_area}} {
  9.    {addr.shr_address}} {
  10.    {addr.shr_mobile}}
  11.     <a href="" v-if="addr.isdefault == 0">设为默认地址</a>
  12.     <a href="">编辑</a>
  13.     <a href="">删除</a>
  14. </li>

添加联系人

需求

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

19a22cc6616c4cd9acdd08d3d72d6058.png

显示添加表单

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

79732f438dca49668e13ec7f69489db8.png

  1. data() {
  2.     return {
  3.       addressList: [],      //所有的地址
  4.       defaultAddress: {},   //默认地址
  5.       showNew: false,       //是否显示新地址
  6.     }
  7.   },

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

328ff0b082fd4582a2b9501a900fbc69.png

  1.      <!-- 列表页面 -->
  2.               <li :class="{'cur': showNew==false && addr.isdefault == 1}" v-for="(addr,index) in addressList" :key="index">
  3.                 <input type="radio" name="address" checked="addr.isdefault == 1" @click="clickRadio(addr)" />
  4.                   {
  5.    {addr.shr_name}} {
  6.    {addr.shr_province}} {
  7.    {addr.shr_city}} {
  8.    {addr.shr_area}} {
  9.    {addr.shr_address}} {
  10.    {addr.shr_mobile}}
  11.                 <a href="" v-if="addr.isdefault == 0">设为默认地址</a>
  12.                 <a href="">编辑</a>
  13.                 <a href="">删除{
  14.    {showNew==false && addr.isdefault == 1}} </a>
  15.               </li>
  16.               <li  :class="{'cur': showNew==true}"><input type="radio" name="address" class="new_address"  @click="showNew=true"  />使用新地址</li>
  17.             </ul>
  18.             <form action="" v-show="showNew" class="none" name="address_form">

#

接口

  1. POST http://localhost:10010/order-service/address
  2. {
  3.     "shr_name": "张三",
  4.     "shr_mobile": "13344445555",
  5.     "shr_province": "江苏省",
  6.     "shr_city": "宿迁市",
  7.     "shr_area": "沭阳县",
  8.     "shr_address": "常州路57号"
  9. }

#

后端实现

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

f0dac67a865a4162bb16998f7b5eaf2a.png

  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;
  6. import org.apache.ibatis.annotations.Param;
  7. import org.apache.ibatis.annotations.Update;
  9. @Mapper
  10. public interface AddressMapper extends BaseMapper<Address> {
  12.     /**
  13.      * 修改用户默认地址
  14.      * @param userId
  15.      * @param defaultValue
  16.      */
  17.     @Update("update tb_address set isdefault = #{defaultValue} where user_id = #{userId}")
  18.     public void updateDefault(@Param("userId") Integer userId, @Param("defaultValue") int defaultValue);
  19. }

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

31adb965449448a59f7008ce8b8df058.png

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

步骤三：修改service实现

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

c5f664487e4548a99468740e590495b0.png

步骤四：修改controller

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

#

前端实现

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

5522a04b473248a0b6864d493ca74023.png

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

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

  1. data() {
  2.     return {
  3.       addressList: [],      //所有的地址
  4.       defaultAddress: {},   //默认地址
  5.       showNew : false,    //是否显示添加
  6.       newAddress : {      //新地址，需要与表单进行数据绑定
  7.         shr_name:"",
  8.         shr_mobile:"",
  9.         shr_province:"",
  10.         shr_city:"",
  11.         shr_area:"",
  12.         shr_address:""
  13.       },
  14.     }
  15.   },

e3d34607a61548d293b1b908324d45f0.png

步骤三：表单元素绑定

66c315e3b1aa461ebbeac130d5ca1b15.png

步骤四：绑定提交事件

1870074e3397451093c8fa333fe9e4f5.png

  1. methods: {
  2.     async getAddressFn() {
  3.       let { data } = await this.$request.getAddress()
  4.       // 所有收获人地址
  5.       this.addressList = data.data
  6.       //默认地址
  7.       this.defaultAddress = this.addressList.filter(item => item.isdefault == 1)[0];
  8.     },
  9.     async addAddresssFn (){
  10.       let {data } = await this.$request.addNewAddress(this.newAddress)
  11.       if(data.code == 1){
  12.         // 重新查询
  13.         this.getAddressFn()
  14.         // 表单隐藏，数据清空
  15.         this.showNew = false;
  16.         this.newAddress = {
  17.           shr_name:"",
  18.           shr_mobile:"",
  19.           shr_province:"",
  20.           shr_city:"",
  21.           shr_area:"",
  22.           shr_address:""
  23.         }
  24.       }
  25.     },
  26.   },

发表评论

表情：
评论列表 （有 0 条评论，221人围观）

还没有评论，来说两句吧...

相关阅读