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

本文涉及的产品
云数据库 Tair(兼容Redis),内存型 2GB
Redis 开源版,标准版 2GB
推荐场景:
搭建游戏排行榜
简介: 【畅购商城】订单模块之收货人列表

构建订单服务: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>
    <!--web起步依赖-->
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>
    </dependency>
    <!-- nacos 客户端 -->
    <dependency>
        <groupId>com.alibaba.nacos</groupId>
        <artifactId>nacos-client</artifactId>
    </dependency>
    <!-- nacos 服务发现 -->
    <dependency>
        <groupId>com.alibaba.cloud</groupId>
        <artifactId>spring-cloud-starter-alibaba-nacos-discovery</artifactId>
    </dependency>
    <!--redis-->
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-data-redis</artifactId>
    </dependency>
    <dependency>
        <groupId>redis.clients</groupId>
        <artifactId>jedis</artifactId>
    </dependency>
    <!-- openfeign 远程调用 -->
    <dependency>
        <groupId>org.springframework.cloud</groupId>
        <artifactId>spring-cloud-starter-openfeign</artifactId>
    </dependency>
    <!--swagger2-->
    <dependency>
        <groupId>io.springfox</groupId>
        <artifactId>springfox-swagger2</artifactId>
    </dependency>
    <dependency>
        <groupId>io.springfox</groupId>
        <artifactId>springfox-swagger-ui</artifactId>
    </dependency>
    <!--fastjson-->
    <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);
    }
}

步骤五:配置类


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

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

步骤一:拷贝配置类


9ef4120c0a8240af970ef288e105fe28.png

步骤二:编写mapper,使用通用mapper即可

f1388b5f57f64496a3b8cc65bf886ba2.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;
@Mapper
public interface AddressMapper extends BaseMapper<Address> {
    /**
     * 通过用户查询所有的地址
     * @return
     */
    @Select("SELECT * FROM tb_address WHERE user_id = #{userId}")
    public List<Address> findAllByUserId(@Param("userId") Long userId);
}

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


f50eee94630749ee91ab4173facf06e1.png

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

468c3a5a55a34e27af35d0c60fcb2e07.png

e01bdd4515c540919943bb0d9d60c766.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 组件,显示默认地址


561ff439b3cc49a289a297563be1f296.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,显示收货人地址列表

dbdceb4692f840c8b3856fbd16d24ea5.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>


相关实践学习
基于Redis实现在线游戏积分排行榜
本场景将介绍如何基于Redis数据库实现在线游戏中的游戏玩家积分排行榜功能。
云数据库 Redis 版使用教程
云数据库Redis版是兼容Redis协议标准的、提供持久化的内存数据库服务,基于高可靠双机热备架构及可无缝扩展的集群架构,满足高读写性能场景及容量需弹性变配的业务需求。 产品详情:https://www.aliyun.com/product/kvstore &nbsp; &nbsp; ------------------------------------------------------------------------- 阿里云数据库体验:数据库上云实战 开发者云会免费提供一台带自建MySQL的源数据库&nbsp;ECS 实例和一台目标数据库&nbsp;RDS实例。跟着指引,您可以一步步实现将ECS自建数据库迁移到目标数据库RDS。 点击下方链接,领取免费ECS&amp;RDS资源,30分钟完成数据库上云实战!https://developer.aliyun.com/adc/scenario/51eefbd1894e42f6bb9acacadd3f9121?spm=a2c6h.13788135.J_3257954370.9.4ba85f24utseFl
相关文章
|
7月前
|
前端开发 JavaScript Python
Django项目之电商购物商城 -- 新增收货地址
Django项目之电商购物商城 -- 新增收货地址
|
SQL 前端开发
创建订单【项目 商城】
创建订单【项目 商城】
68 0
|
SQL JSON 前端开发
加入购物车【项目 商城】
加入购物车【项目 商城】
62 0
|
SQL 存储 前端开发
显示购物车列表【项目 商城】
显示购物车列表【项目 商城】
145 0
|
SQL 前端开发
新增收货地址【项目 商城】
新增收货地址【项目 商城】
126 0
|
8月前
|
关系型数据库 测试技术 数据库
超市结算系统|Springboot+Vue通用超市结算收银系统
超市结算系统|Springboot+Vue通用超市结算收银系统
|
前端开发 小程序 安全
从零玩转系列之微信支付实战PC端装修我的订单页面1
从零玩转系列之微信支付实战PC端装修我的订单页面
98 0
|
存储 JSON 前端开发
从零玩转系列之微信支付实战PC端装修我的订单页面2
从零玩转系列之微信支付实战PC端装修我的订单页面
126 0
|
前端开发 JavaScript 数据库
获取省市区列表【项目 商城】
获取省市区列表【项目 商城】
289 0