html5的web儲存

localstorage 沒有時間限制，只能儲存字串。可以在網頁之間傳輸資訊。

購物車的流程。

首先，我們在商品詳情頁點選加入購物車，把sku資訊儲存在localstorge中，當頁面跳轉到購物車頁面的時候，我們判斷有沒有登陸 ,沒有登陸的話，我們儲存在本地的購物車，也是localstoreage中，如果登入u了，我們把資料提交到後臺處理。

本地購物車也要判斷是否登陸，如果登陸，要進行和後臺的合併。

後臺新增的邏輯

我們把skuId和num傳送到後臺，後臺會將我們的購物車新增到redis中

public void addCart(Cart cart) {
//凡事走到這裡的，都是登入過的
 
//使用者名稱我們在token中已經解析過了
UserInfo userInfo = LoginInterceptor.getUserInfo();
String key = KEY_PREFIX + userInfo.getId();
//通過key獲取redis中的資料
BoundHashOperations<String, Object, Object> cartsData = redisTemplate.boundHashOps(key);
Long skuId = cart.getSkuId();
Integer num = cart.getNum();
Boolean boo = 
 
cartsData.hasKey(skuId.toString());
//如果購物車中存在此商品
if (boo) {
//修改購物車中商品的數量
//1.首先從redis中得到該商品
String json = cartsData.get(skuId.toString()).toString();
//將得到的資料解析成物件
Cart redisCart = JsonUtils.parse(json, Cart.class);
//修改物件中商品的數量
redisCart.setNum(redisCart.getNum() + num);
    } else {
//根據skuid查詢商品的詳細資訊
ResponseEntity
 
<Sku> skuResp = this.goodsClient.querySkuBySkuId(skuId);
if (!skuResp.hasBody()) {
logger.error("沒有查到相關sku的資訊:{}" + skuId);
throw new RuntimeException();
        }
//將資訊和數量封裝在cart中
Sku skuBody = skuResp.getBody();
cart.setImage(StringUtils.isBlank(skuBody.getImages()) ? "" : StringUtils.split(skuBody.getImages(), ",")[0]);
cart.setOwnSpec(skuBody.getOwnSpec());
cart.setPrice(skuBody.getPrice());
cart.setTitle(skuBody.getTitle());
cart.setUserId(userInfo.getId());
    }
//將此商品新增到redis中
cartsData.put(skuId.toString(), JsonUtils.serialize(cart));
}

查詢購物車

/**
 * 查詢購物車
*
 * @return
 */
public List<Cart> queryCart() {
UserInfo userInfo = LoginInterceptor.getUserInfo();
Long userId = userInfo.getId();
String key = KEY_PREFIX + userId;
if (!this.redisTemplate.hasKey(key)) {
return null;
    }
BoundHashOperations<String, Object, Object> cartData = this.redisTemplate.boundHashOps(key);
List<Object> values = cartData.values();
if (CollectionUtils.isEmpty(values)) {
return null;
    }
List<Cart> carts = new ArrayList<>();
for (Object value : values) {
Cart c = JsonUtils.parse(value.toString(), Cart.class);
carts.add(c);
    }
return carts;
}

這邊逐一將字串進行系列化，因為我們的stringrestemplate儲存到全是字串的形式。

更新商品的資訊，對商品的數量進行修改

public void updateCart(Long skuId, Integer num) {
//得到使用者的資訊
UserInfo userInfo = LoginInterceptor.getUserInfo();
Long userId = userInfo.getId();
String key = KEY_PREFIX + userId;
//根據key查詢到資料
if (this.redisTemplate.hasKey(key)) {
BoundHashOperations<String, Object, Object> cartData = this.redisTemplate.boundHashOps(key);
String json = cartData.get(skuId.toString()).toString();
Cart redisCart = JsonUtils.parse(json, Cart.class);
redisCart.setNum(num);
cartData.put(skuId.toString(), JsonUtils.serialize(redisCart));
    } else {
logger.error("您所修改的商品不存在");
    }

刪除購物車中商品的資訊

 * 刪除購物車
* @param skuId
 */
public void daleteCart(Long skuId) {
//首先得到登陸使用者的資訊
UserInfo userInfo = LoginInterceptor.getUserInfo();
Long userId = userInfo.getId();
String key = KEY_PREFIX + userId;
Boolean boo = this.redisTemplate.hasKey(key);
if (boo) {
BoundHashOperations<String, Object, Object> cartData = this.redisTemplate.boundHashOps(key);
cartData.delete(skuId.toString());
    }
}

購物車我們實現的功能

未登陸狀態，資料儲存在localstrage中

登陸後，未登陸的資料儲存到後臺，然後查詢資料，查詢到的資料就是本地加登陸狀態的資料。

在購物車微服務，我們也要校驗使用者有沒有登陸，並拿到用的id，我們採用springmvc的過濾器來做這個判斷。

過濾器的實現思路，首先用一個類繼承HandlerInterceptorAdapter類，選擇要實現的方法，哪個攔截器，前置後置，最終。

然後將這個攔截器新增到springmvc中

public class LoginInterceptor extends HandlerInterceptorAdapter {
private JwtProperties jwtProperties;
//一個執行緒域，存放登陸的物件
private static final ThreadLocal<UserInfo> t_user = new ThreadLocal<>();
public LoginInterceptor(JwtProperties jwtProperties) {
this.jwtProperties = jwtProperties;
    }
//獲取登陸使用者的方法
public static UserInfo getUserInfo() {
return t_user.get();
    }
@Override
public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
try {
//首先拿到令牌
String token = CookieUtils.getCookieValue(request, jwtProperties.getCookieName());
//判斷令牌是否是空
if (StringUtils.isBlank(token)) {
response.setStatus(HttpStatus.UNAUTHORIZED.value());
return false;
            }
//令牌不為空，解析得到使用者的資訊
UserInfo userInfo = JwtUtils.getInfoFromToken(token, jwtProperties.getPublicKey());
t_user.set(userInfo);
return true;
        } catch (Exception e) {
//丟擲異常，證明未登陸，401
response.setStatus(HttpStatus.UNAUTHORIZED.value());
return false;
        }
    }
@Override
public void afterCompletion(HttpServletRequest request, HttpServletResponse response, Object handler, @Nullable Exception ex) throws Exception {
t_user.remove();
    }
}

@Configuration
@EnableConfigurationProperties(JwtProperties.class)
public class MvcConfig implements WebMvcConfigurer {
//把配置檔案注入
@Autowired
private JwtProperties jwtProperties;
//將攔截器注入
@Bean
public LoginInterceptor loginInterceptor() {
return new LoginInterceptor(jwtProperties);
    }
@Override
public void addInterceptors(InterceptorRegistry registry) {
registry.addInterceptor(loginInterceptor()).addPathPatterns("/**");
    }