尚品汇-H5移动端整合系统（五十五）

（1）运行前端页面

（2）启动前端页面

（3）添加搜索分类接口

（4）购物车模块修改

（5）登录模块

（6）订单模块

（7）支付系统

（8）查看我的订单

（1）运行前端页面

将页面放入nginx中配置nginx.conf

复制代码

server {
        listen       8989;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            root   h5;
            index  index.html index.htm;
        }
        #error_page  404              /404.html;
        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }     
    }

前面用的8086，这里新添加一个server

重要！ 访问首页之后点击我的设置修改 base路径改为当前网关地址 http://localhost

（2）启动前端页面

ServerGatewayApplication :80/

ServiceProductApplication [devtools] :8206/

ServiceListApplication [devtools] :8203/

ServiceItemApplication [devtools] :8202/

查看首页，

商品检索：

在Nacos网关配置中添加配置

|-----------------------------------------------------------------------------------|
| - id: service-list uri: lb://service-list predicates: - Path=/*/list/** # 路径匹配 |

商品详情

需要项目启动，启动成功后就行获取数据列表

其次需要修改配置：

（3）添加搜索分类接口

这个分类接口不同需要修改：

service-product

代码跟原来写的一样，只是路经不同，新建一个conttroller

复制代码

/**
 * date:2022/6/21 10:34
 * 描述：
 **/
@RestController
@RequestMapping("/api/product/")
public class IndexApiController {
    @Autowired
    private ManageService manageService;

    @GetMapping("getBaseCategoryList")
    public Result getBaseCategoryList(){
        //  调用服务层方法
        List<JSONObject> list = manageService.getBaseCategoryList();
        return Result.ok(list);
    }
}

（4）购物车模块修改

实现选择清空状态保存：

购物车控制器：

复制代码

@GetMapping("/allCheckCart/{isChecked}")
public Result allCheckCart(@PathVariable Integer isChecked,HttpServletRequest request){
    //  获取用户Id
    String userId = AuthContextHolder.getUserId(request);
    //  判断用户Id 为空
    if (StringUtils.isEmpty(userId)){
        userId = AuthContextHolder.getUserTempId(request);
    }

    //  调用方法
    this.cartService.allCheckCart(userId,isChecked);
    //  默认返回
    return Result.ok();
}

接口：

复制代码

/**
 * 选中购物车列表
 * @param userId
 * @param isChecked
 */
void allCheckCart(String userId, Integer isChecked);

实现类：

复制代码

@Override
public void allCheckCart(String userId, Integer isChecked) {
    //  获取到购物车key
    String cartKey = this.getCartKey(userId);
    List<CartInfo> cartInfoList = this.redisTemplate.opsForHash().values(cartKey);

    //  声明一个Map 集合
    HashMap<String, Object> hashMap = new HashMap<>();
    //  循环遍历
    for (CartInfo cartInfo : cartInfoList) {
        cartInfo.setIsChecked(isChecked);
        hashMap.put(cartInfo.getSkuId().toString(),cartInfo);
    }
    //  将数据存储到购物车中
    this.redisTemplate.opsForHash().putAll(cartKey,hashMap);
}

选中后，再刷新页面也可以选中：

清空: /api/cart/clearCart

复制代码

@GetMapping("clearCart")
public Result clearCart(HttpServletRequest request){
    // 如何获取userId
    String userId = AuthContextHolder.getUserId(request);
    if (StringUtils.isEmpty(userId)) {
        // 获取临时用户Id
        userId = AuthContextHolder.getUserTempId(request);
    }
    cartService.clearCart(userId);
    return Result.ok();
}

/**
 * 清空购物车
 * @param userId
 */
void clearCart(String userId);

@Override
public void clearCart(String userId) {
    //  获取购物车key
    String cartKey = getCartKey(userId);
    //  删除数据
    redisTemplate.delete(cartKey);
}

点击清空：

清空后刷新页面就没了

（5）登录模块

点击结算，判断是否登录，进行跳转登录页面

登录模块信息发生变化：

将原来的接收对象UserInfo 改为LoginVo

复制代码

@Data
@ApiModel(description="登录对象")
public class LoginVo {

    @ApiModelProperty(value = "手机号")
    private String phone;

    @ApiModelProperty(value = "密码")
    private String password;

    @ApiModelProperty(value = "IP")
    private String ip;
}

这里可以改登录的接口实体类，先进行演示，但是已改就不能通用了，我们可以吧这个接口改成通用的接口，或者重新写一个登录的接口

复制代码

@PostMapping("login")
public Result login(@RequestBody LoginVo loginVo, HttpServletRequest request){

   控制器内容不变
}

接口：

复制代码

UserInfo login(LoginVo loginVo);

实现类：

复制代码

@Override
public UserInfo login(LoginVo loginVo) {
    //  select * from user_info where login_name = ? and passwd = ?
    QueryWrapper<UserInfo> userInfoQueryWrapper = new QueryWrapper<>();
    //  admin
    userInfoQueryWrapper.eq("login_name",loginVo.getPhone());
    //  111111 ---> 加密之后的数据。 对其进行了md5加密
    String passwd = loginVo.getPassword();
    String newPassword = DigestUtils.md5DigestAsHex(passwd.getBytes());
    //  96e79218965eb72c92a549dd5a330112
    userInfoQueryWrapper.eq("passwd",newPassword);
    UserInfo info = userInfoMapper.selectOne(userInfoQueryWrapper);
    //  判断
    if (info!=null){
        return info;
    }
    return null;
}

登录成功跳转到订单页面：

（6）订单模块

点击去结算：

收货地址列表

控制器：http://localhost/api/user/userAddress/auth/findUserAddressList

复制代码

//  http://localhost/api/user/userAddress/auth/findUserAddressList
@GetMapping("userAddress/auth/findUserAddressList")
public Result findUserAddressList(HttpServletRequest request){
    String userId = AuthContextHolder.getUserId(request);
    return Result.ok(userAddressService.findUserAddressListByUserId(userId));
}

（7）支付系统

这里我们现为了演示，先修改部分代码，到时候需要提供两个接口

复制代码

生成二维码：要替换掉原来的对象

AlipayTradeWapPayRequest alipayRequest = new AlipayTradeWapPayRequest();
bizContent.put("product_code", "QUICK_WAP_WAY");

（8）查看我的订单

添加一个状态查询参数：

复制代码

@GetMapping("/auth/{page}/{limit}")
    public Result getOrderPage(@PathVariable Long page,
                               @PathVariable Long limit,
                               HttpServletRequest request){
        //  获取到用户Id
        String userId = AuthContextHolder.getUserId(request);
        String orderStatus = request.getParameter("orderStatus");
        //  声明一个 page 对象
        Page<OrderInfo> orderInfoPage = new Page<>(page, limit);

        //  调用服务层方法查询数据：第二个参数？
        IPage<OrderInfo> infoIPage = this.orderService.getOrderPage(orderInfoPage,userId,orderStatus);
        //  返回数据
        return Result.ok(infoIPage);
    }

复制代码

    @Override
    public IPage<OrderInfo> getOrderPage(Page<OrderInfo> orderInfoPage, String userId, String orderStatus) {


        IPage<OrderInfo> infoIPage = orderInfoMapper.selectUserOrderPage(orderInfoPage,userId,orderStatus);
        //  获取到订单状态：中文
        infoIPage.getRecords().stream().forEach(orderInfo -> {
            orderInfo.setOrderStatusName(OrderStatus.getStatusNameByStatus(orderInfo.getOrderStatus()));
        });
        //  返回数据。
        return infoIPage;
    }

复制代码

IPage<OrderInfo> selectUserOrderPage(Page<OrderInfo> orderInfoPage, @Param("userId") String userId, @Param("orderStatus")String orderStatus);

复制代码

<select id="selectUserOrderPage" resultMap="OrderInfoMap">
    SELECT
        oi.id,
        oi.consignee,
        oi.consignee_tel,
        oi.total_amount,
        oi.order_status,
        oi.user_id,
        oi.payment_way,
        oi.delivery_address,
        oi.order_comment,
        oi.out_trade_no,
        oi.trade_body,
        oi.create_time,
        oi.expire_time,
        oi.process_status,
        od.id detail_id,
        od.order_id,
        od.sku_id,
        od.sku_name,
        od.img_url,
        od.order_price,
        od.sku_num,
        od.create_time
    FROM
        order_info oi
            INNER JOIN order_detail od ON od.order_id = oi.id
     <where>
          AND user_id = #{userId}
          AND oi.order_status NOT IN ('CLOSED', 'SPLIT')
          <if test="orderStatus != null and orderStatus != ''">
            and oi.order_status = #{orderStatus}
          </if>
     </where>
    ORDER BY
        oi.id DESC
</select>