03购物车渲染

这篇博客详细介绍了在微服务架构下购物车的渲染过程,包括购物车渲染服务的搭建、feign调用、前端页面处理、商品数量变更、删除商品、订单服务对接OAuth认证、微服务间认证实现、动态获取当前登录人以及页面配置等关键步骤。通过这些步骤,实现了用户友好的购物车功能。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

3.购物车渲染

在这里插入图片描述

如上图所示,用户每次将商品加入购物车,或者点击购物车列表的时候,先经过订单购物车后端渲染服务,再通过feign调用购物车订单微服务来实现购物车的操作,例如:加入购物车、购物车列表。

3.1购物车渲染服务搭建

在changgou_web中搭建订单购物车微服务工程 changgou_web_order ,该工程主要实现购物车和订单的渲染操作。
(1) pom.xml依赖

<dependencies>
	<dependency>
		<groupId>com.changgou</groupId>
		<artifactId>changgou_service_order_api</artifactId>
		<version>1.0-SNAPSHOT</version>
	</dependency>
	<dependency>
		<groupId>com.changgou</groupId>
		<artifactId>changgou_common</artifactId>
		<version>1.0-SNAPSHOT</version>
	</dependency>
	<dependency>
		<groupId>org.springframework.boot</groupId>
   		<artifactId>spring-boot-starter-thymeleaf</artifactId>
	</dependency>
</dependencies>
		

(2)application.yml配置

server:
  port: 9011
spring:
  application:
    name: order-web
  main:
    allow-bean-definition-overriding: true   #当遇到同样名字的时候,是否允许覆盖注册
  thymeleaf:
    cache: false
eureka:
  client:
    service-url:
      defaultZone: http://127.0.0.1:6868/eureka
  instance:
    prefer-ip-address: true
feign:
  hystrix:
    enabled: true
  client:
    config:
      default:   #配置全局的feign的调用超时时间  如果 有指定的服务配置 默认的配置不会生效
        connectTimeout: 60000 # 指定的是 消费者 连接服务提供者的连接超时时间 是否能连接  单位是毫秒
        readTimeout: 80000  # 指定的是调用服务提供者的 服务 的超时时间()  单位是毫秒
#hystrix 配置
hystrix:
  command:
    default:
      execution:
        timeout:
          #如果enabled设置为false,则请求超时交给ribbon控制
          enabled: true
        isolation:
          strategy: SEMAPHORE
          thread:
            # 熔断器超时时间,默认:1000/毫秒
            timeoutInMilliseconds: 80000
#请求处理的超时时间
ribbon:
  ReadTimeout: 4000
  #请求连接的超时时间
  ConnectTimeout: 3000

(3)创建启动类
创建com.changgou.OrderApplication启动类,代码如下:

package com.changgou.web.order;

import com.changgou.interceptor.FeignInterceptor;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.cloud.netflix.eureka.EnableEurekaClient;
import org.springframework.cloud.openfeign.EnableFeignClients;
import org.springframework.context.annotation.Bean;

@SpringBootApplication
@EnableEurekaClient
@EnableFeignClients(basePackages = {
   
   "com.changgou.order.feign"})
public class WebOrderApplication {
   
   

    public static void main(String[] args) {
   
   
        SpringApplication.run(WebOrderApplication.class,args);
    }

    @Bean
    public FeignInterceptor feignInterceptor(){
   
   
        return  new FeignInterceptor();
    }
}

(4)静态资源拷贝
资源\成品页面\cart.html页面拷贝到工程中,如下图:

在这里插入图片描述

3.2购物车列表渲染

3.2.1feign创建

在changgou_service_order_api中添加CartFeign接口,并在接口中创建添加购物车和查询购物车列表,代码如下:

package com.changgou.order.feign;

import com.changgou.entity.Result;
import org.springframework.cloud.openfeign.FeignClient;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestParam;

import java.util.Map;

@FeignClient(name = "order")
public interface CartFeign {
   
   

    @GetMapping("/cart/addCart")
    public Result addCart(@RequestParam("skuId") String skuId, @RequestParam("num") Integer num);

    @GetMapping("/cart/list")
    public Map list();
}

在changgou_web_order中创建com.changgou.order.controller.CartController,并添加查询购物车集合方法和添加购物车方法,代码如下:

package com.changgou.web.order.controller;

import com.changgou.entity.Result;
import com.changgou.entity.StatusCode;
import com.changgou.order.feign.CartFeign;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping
好的,如果您想使用接口获取购物车数据并进行渲染,可以按照以下步骤进行操作: 1. 首先,需要定义一个函数来获取购物车数据: ``` function getCartData(userId) { return fetch(`http://finalShop.lzaly.cn/shopCar/getShopCarByUserId/${userId}`) .then(response => response.json()) .then(data => { return data; }) .catch(error => { console.error(error); return null; }); } ``` 这个函数接受一个用户 ID 作为参数,然后使用 Fetch API 发送请求获取购物车数据。如果请求成功,会将响应数据解析为 JSON 格式,并返回解析后的数据。如果请求失败,会将错误打印到控制台上,并返回 null。 2. 接下来,需要定义一个函数来渲染购物车数据: ``` function renderCart(cartData) { // TODO: 根据购物车数据渲染页面 } ``` 这个函数接受一个购物车数据对象作为参数,并根据数据对象来渲染页面。由于具体的页面结构和渲染方式可能会有所不同,因此这里只能提供一个示例代码。 3. 最后,可以将这两个函数组合起来,实现购物车数据的获取和渲染: ``` const userId = 123; // 假设用户 ID 是 123 getCartData(userId) .then(cartData => { if (cartData) { renderCart(cartData); } }); ``` 这段代码首先获取用户 ID,然后调用 `getCartData` 函数来获取购物车数据。如果获取成功,会将数据传递给 `renderCart` 函数来进行渲染。如果获取失败,则不会进行渲染。 希望这些信息能够帮到您。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值