京淘项目Day20

最新推荐文章于 2024-11-17 16:38:15 发布
最新推荐文章于 2024-11-17 16:38:15 发布
阅读量228 收藏 1
点赞数
文章标签： json javascript 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_53854615/article/details/124677040
版权
本文详细介绍了电商网站购物车的操作，包括数量更新和删除，涉及到前端交互、后端控制器和服务的实现。同时，阐述了权限控制机制，使用Spring MVC拦截器判断用户登录状态，并利用ThreadLocal在请求间共享数据。最后，讨论了订单创建、提交及查询的流程，包括前端表单处理、后端服务的事务控制和数据存储。
摘要由CSDN通过智能技术生成

1.完成京淘购物车操作

1.1 数量更新操作

1.1.1 页面分析

1).页面URL分析
在这里插入图片描述

2).页面html分析

<div class="quantity-form" data-bind="">
    <a href="javascript:void(0);" class="decrement" clstag="clickcart|keycount|xincart|diminish1" id="decrement">-</a>
    <input type="text" class="quantity-text" itemPrice="${cart.itemPrice}" itemId="${cart.itemId}" value="${cart.num }" id="changeQuantity-11345721-1-1-0">
    <a href="javascript:void(0);" class="increment" clstag="clickcart|keycount|xincart|add1" id="increment">+</a>
</div>

3).页面JS

$(".increment").click(function(){//＋
			var _thisInput = $(this).siblings("input");
			_thisInput.val(eval(_thisInput.val()) + 1);
			$.post("/cart/update/num/"+_thisInput.attr("itemId")+"/"+_thisInput.val(),function(data){
				TTCart.refreshTotalPrice();
			});
		});

1.1.3 编辑CartController

/**
     * 购物车数量更新操作
     * URL地址: http://www.jt.com/cart/update/num/1474391990/16
     * 参数:    itemId,num
     * 返回值:  没有 void
     */
    @RequestMapping("/update/num/{itemId}/{num}")
    @ResponseBody //将返回值转化为json   代表ajax程序结束
    public void updateNum(Cart cart){

        long userId = 7;
        cart.setUserId(userId);
        cartService.updateNum(cart);
    }

1.1.2 编辑CartService

 //sql: update tb_cart set num=#{num},updated=#{updated} where user_id=#{userId} and
    //     item_id = #{itemId}
    @Override
    public void updateNum(Cart cart) {
        Cart temp = new Cart();
        temp.setNum(cart.getNum());
        QueryWrapper queryWrapper = new QueryWrapper();
        queryWrapper.eq("user_id", cart.getUserId());
        queryWrapper.eq("item_id", cart.getItemId());
        cartMapper.update(temp,queryWrapper);
    }

1.2 购物车删除操作

1.2.1 页面分析

业务说明: 当用户点击删除按钮时,应该重定向到购物车展现页面.
在这里插入图片描述

1.2.2 编辑CartController

 /**
     * URL地址:http://www.jt.com/cart/delete/1474391990.html
     * 返回值:  String类型
     */
    @RequestMapping("/delete/{itemId}")
    public String deleteCart(Cart cart){

        long userId = 7;
        cart.setUserId(userId);
        cartService.deleteCart(cart);
        return "redirect:/cart/show.html";
    }

1.2.3 编辑CartService

  @Override
    public void deleteCart(Cart cart) {
        //根据对象中不为null的属性充当where条件
        cartMapper.delete(new QueryWrapper<>(cart));
    }

2 关于前台权限控制

2.1 业务说明

当用户在没有登录的条件下,不允许访问敏感业务数据例如购物车/订单业务等…
难点:
1.如何判断用户是否登录? 1.检查cookie 2.检查redis
2.如何控制权限? 拦截器!

2.2 拦截器业务实现原理

2.2.1 SpringMVC流程图复习

在这里插入图片描述

2.2.2 拦截器工作流程

在这里插入图片描述

2.2.3 配置拦截器

在这里插入图片描述

2.2.4 编辑拦截器接口

package com.jt.interceptor;

import com.jt.pojo.User;
import com.jt.util.CookieUtil;
import com.jt.util.ObjectMapperUtil;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Component;
import org.springframework.util.StringUtils;
import org.springframework.web.servlet.HandlerInterceptor;
import org.springframework.web.servlet.ModelAndView;
import redis.clients.jedis.JedisCluster;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.util.function.Predicate;
@Component  //将对象交给Spring容器管理
public class UserInterceptor implements HandlerInterceptor {

    @Autowired
    private JedisCluster jedisCluster;

    /**
     * 通过拦截器实现拦截,重定向系统登录页面
     * @param request
     * @param response
     * @param handler
     * @return
     * @throws Exception
     *
     * 返回值说明:
     *      boolean   false 表示拦截 一般配合重定向方式使用
     *
     * 业务调用:
     *      1.获取cookie中的数据
     *      2.检查redis中是否有数据
     *      3.校验用户是否登录.
     */
    @Override
    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
        //1.获取cookie中的数据,检查是否登录
        String ticket = CookieUtil.getCookieValue(request, "JT_TICKET");
        if(StringUtils.hasLength(ticket) && jedisCluster.exists(ticket)){//判断数据是否有值
                //2.动态获取user信息
                String json = jedisCluster.get(ticket);
                //3.将json转化为用户对象
                User user = ObjectMapperUtil.toObj(json, User.class);
                request.setAttribute("JT_USER", user);
                return true;    //表示程序放行
        }

        //实现用户重定向
        response.sendRedirect("/user/login.html");
        return false;
    }

    @Override
    public void postHandle(HttpServletRequest request, HttpServletResponse response, Object handler, ModelAndView modelAndView) throws Exception {

    }

    @Override
    public void afterCompletion(HttpServletRequest request, HttpServletResponse response, Object handler, Exception ex) throws Exception {

        request.removeAttribute("JT_USER");
    }
}

2.2.5 编辑CartController在这里插入图片描述

2.3 ThreadLocal

2.3.1 ThreadLocal作用

名称: 本地线程变量
作用: 在同一个线程内,实现数据共享.
在这里插入图片描述

2.3.2 封装工具API

package com.jt.util;

import com.jt.pojo.User;

public class UserThreadLocal {
    //线程的一个属性  ThreadLocal是线程安全的
    private static ThreadLocal<User> threadLocal = new ThreadLocal<>();

    public static void set(User user){
        threadLocal.set(user);
    }

    public static User get(){

        return threadLocal.get();
    }

    public static void remove(){

        threadLocal.remove();   //删除数据
    }
}

2.3.3 基于ThreadLocal实现数据取赋值操作

1.拦截器赋值
在这里插入图片描述

2.用户取值
在这里插入图片描述

3.数据销毁
在这里插入图片描述

3.订单模块

3.1 订单确认页面跳转

3.1.1 业务分析

说明: 当点击去结算按钮时,应该跳转到订单确认页面order-cart.jsp.
在这里插入图片描述

3.1.2 编辑OrderController

package com.jt.controller;

import com.alibaba.dubbo.config.annotation.Reference;
import com.jt.pojo.Cart;
import com.jt.service.DubboCartService;
import com.jt.util.UserThreadLocal;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;

import java.util.List;

@Controller
@RequestMapping("/order")
public class OrderController {

    @Reference
    private DubboCartService cartService;

    /**
     * 业务说明:
     *      当点击按钮时,跳转到订单确认页面  cartList购物车数据
     * URL地址：http://www.jt.com/order/create.html
     * 参数:  userId
     * 返回值: 页面逻辑名称 order-cart
     * 页面取值: ${carts}
     */
    @RequestMapping("/create")
    public String orderCreate(Model model){

        long userId = UserThreadLocal.get().getId();
        List<Cart> cartList = cartService.findCartListByUserId(userId);
        model.addAttribute("carts",cartList);
        return "order-cart";
    }





}

3.1.3 页面效果展现

在这里插入图片描述

3.2 订单项目创建

3.2.1 创建订单项目

在这里插入图片描述

3.2.2 添加继承/依赖/插件

 <dependencies>
        <dependency>
            <groupId>com.jt</groupId>
            <artifactId>jt-common</artifactId>
            <version>1.0-SNAPSHOT</version>
        </dependency>
    </dependencies>

    <!--添加插件 有main方法时 需要添加插件-->
    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
                <configuration>
                    <excludes>
                        <exclude>
                            <groupId>org.projectlombok</groupId>
                            <artifactId>lombok</artifactId>
                        </exclude>
                    </excludes>
                </configuration>
            </plugin>
        </plugins>
    </build>

3.2.3 关于订单表设计说明

在这里插入图片描述

3.2.4 编辑POJO

在这里插入图片描述

3.2.5 代码结构如下

在这里插入图片描述

3.3 SpringMVC 参数传递方式

3.3.1 为简单参数赋值

<input  type="text" name="username"  value="admin" />

	public void addUser(String username){
	}

3.3.2 为对象赋值

<input  type="text" name="id"  value="100" />
<input  type="text" name="username"  value="admin" />
<input  type="text" name="age"  value="18" />

public void addUser(User user){
}

3.3.3 为对象引入赋值

问题: 有时可能遇到重名属性! 如何处理?

<input  type="text" name="name"  value="二郎神" />
	<input  type="text" name="age"  value="30" />
	<input  type="text" name="dog.name"  value="啸天犬" />
	<-- 为list集合赋值   -->
	<input  type="text" name="hobbys[0]"  value="敲代码" />

//利用对象的方式进行封装
public class User {
	private String name;
	private Integer age;
	private Dog dog;
	private List hobbys
}

public class Dog {
	private String name;
	private Integer age;
}

//	SpringMVC 参数接收
public void addUser(User user){
}

3.4 订单提交

3.4.1 页面分析

1).页面URL分析
在这里插入图片描述

2).参数说明
在这里插入图片描述

3).POJO对象封装
在这里插入图片描述

4).页面JS分析

jQuery.ajax( {
			type : "POST",
			dataType : "json",
			url : "/order/submit",
			//将name属性与值进行拼接 形式 name=value1&name2=value2&name3=value3......
			//表单序列化,可以简化参数写法
			data : $("#orderForm").serialize(),
			cache : false,
			success : function(result) {    //SysResult对象
				if(result.status == 200){   //要求返回orderId
					location.href = "/order/success.html?id="+result.data;
				}else{
					$("#submit_message").html("订单提交失败，请稍后重试...").show();
				}
			},
			error : function(error) {
				$("#submit_message").html("亲爱的用户请不要频繁点击, 请稍后重试...").show();
			}
		});

3.4.2 编辑OrderController

/**
     * 实现订单入库操作
     * url分析:   http://www.jt.com/order/submit
     * 参数:      整个form表单 Order对象
     * 返回值:    SysResult对象
     * 页面取值:  要求返回orderId
     */
    @RequestMapping("/submit")
    @ResponseBody
    public SysResult submit(Order order){
        long userId = UserThreadLocal.get().getId();
        order.setUserId(userId);
        String orderId = orderService.saveOrder(order);
        //完成订单之后,应该删除购物车.. 分布式事务....
        //cartService.deleteCart();
        return SysResult.success(orderId);
    }

3.4.3 编辑OrderService

package com.jt.service;

import java.util.Calendar;
import java.util.Date;
import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.transaction.annotation.Transactional;

import com.alibaba.dubbo.config.annotation.Service;
import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.baomidou.mybatisplus.core.conditions.update.UpdateWrapper;
import com.jt.mapper.OrderItemMapper;
import com.jt.mapper.OrderMapper;
import com.jt.mapper.OrderShippingMapper;
import com.jt.pojo.Order;
import com.jt.pojo.OrderItem;
import com.jt.pojo.OrderShipping;

@Service
public class OrderServiceImpl implements DubboOrderService {
	
	@Autowired
	private OrderMapper orderMapper;
	@Autowired
	private OrderShippingMapper orderShippingMapper;
	@Autowired
	private OrderItemMapper orderItemMapper;

	/**
	 * 完成3张表入库操作
	 * order表入库
	 * orderItem表入库
	 * OrderShipping表入库
	 * 动态生成orderId.设定默认状态
	 * 注意数据库事务控制
	 * @param order
	 * @return
	 */
	@Override
	@Transactional
	public String saveOrder(Order order) {
		//动态生成主键
		String orderId = "" + order.getUserId() + System.currentTimeMillis();
		//1.完成订单入库操作
		order.setOrderId(orderId).setStatus(1);
		orderMapper.insert(order);
		System.out.println("订单入库操作成功!!!");

		//2.完成订单物流入库
		OrderShipping orderShipping = order.getOrderShipping();
		orderShipping.setOrderId(orderId);
		orderShippingMapper.insert(orderShipping);
		System.out.println("订单物流入库成功!!!");

		//3.完成订单商品入库操作
		List<OrderItem> orderItems = order.getOrderItems();
		for (OrderItem orderItem : orderItems){
			orderItem.setOrderId(orderId);
			orderItemMapper.insert(orderItem);
		}
		System.out.println("订单全部入库成功!!!!");
		return orderId;
	}
}

3.5 订单查询

3.5.1 业务分析

说明: 当用户订单入库之后,应该跳转到订单的成功页面. 格式如下:
页面数据: ${order}

在这里插入图片描述
在这里插入图片描述

3.5.2 编辑OrderController

/**
     * 实现订单查询
     * url: http://www.jt.com/order/success.html?id=71613981329562
     * 参数: orderId
     * 返回值: 成功页面 success.jsp
     * 页面取值: Order对象(包含其它2个业务数据) ${order.orderId}
     */
    @RequestMapping("/success")
    public String success(String id,Model model){
        //根据id 查询订单对象
        Order order = orderService.findOrderById(id);
        model.addAttribute("order", order);
        return "success";
    }

3.5.3 编辑OrderService

@Override
	public Order findOrderById(String id) {

		Order order = orderMapper.selectById(id);
		OrderShipping orderShipping = orderShippingMapper.selectById(id);
		QueryWrapper queryWrapper = new QueryWrapper();
		queryWrapper.eq("order_id", id);
		List<OrderItem> orderItems = orderItemMapper.selectList(queryWrapper);
		return order.setOrderShipping(orderShipping).setOrderItems(orderItems);
	}

3.5.4 页面效果
在这里插入图片描述

weixin_53854615
关注
学习JavaEE的day20
03-04
在“学习JavaEE的day20”这个主题中，我们主要关注的是Java企业版（JavaEE）的进阶学习。JavaEE是Java平台的一个版本，它为开发分布式、多层的企业级应用程序提供了丰富的框架和API。这个阶段的学习通常涵盖了更复杂...
京淘项目-20
qq_36703564的博客
08-24 450
1.京淘权限设计 1.1 业务说明 当用户在不登录的条件下,不允许访问购物车/订单等受限的系统.并且重定向到用户的登录页面. 问题: 1.如何校验用户是否登录? Cookie /Redis 2.如何拦截用户的请求呢? 拦截器设定. 1.2 拦截器实现用户权限校验 1.2.1 SpringMVC调用原理图 说明:通过图中的分析 handler处理器负责Controller之后的所有的业务处理. 1.2.2 mvc拦截器执行的示意图 实现WebMvcConfigurer接口，其中有三个方法，分别代表不同状态
Day-18-购物车模块的实现，商品的加购和删除,登录以后才可以查看购物车,订单等
czx1254678152的博客
03-10 3516
购物车模块的实现 1-编辑POJO对象 @TableName("tb_cart") @Data @Accessors(chain = true) public class Cart extends BasePojo{ @TableId(type = IdType.AUTO) private Long id; private Long userId; private Long itemId; private String itemTitle; priv
Prism 01 day 项目源码
09-06
1、数据绑定。 2、命令绑定。 3、启动修改。
go语言day20实现投票功能项目包
08-02
go语言day20实现投票功能项目包
Day20AddressBook
03-04
标题 "Day20AddressBook" 暗示我们正在探讨一个关于地址簿应用程序的项目，很可能是用C#编程语言实现的。C#是一种广泛用于开发Windows桌面应用、Web应用和游戏的面向对象的编程语言，由Microsoft开发并支持.NET框架...
Day20-21
03-28
而压缩包子文件的"Day20-21-main"可能是一个课程、项目或代码的主文件，但没有更多信息来解释它的具体内容。 为了提供详细的IT知识，我需要更具体的信息，例如这20-21天的学习内容是关于编程语言（如Python、Java）...
简单分析数据被序列化后的内容
2301_76723322的博客
11-17 408
JSON 字符串是以UTF-8 编码的字节数组表示的。Go 的[]byte类型可以帮助我们逐个访问 JSON 字符串中的每个字节。通过解析字节数组，我们可以看到 JSON 的每个字符（包括汉字）如何被编码和存储。这行代码使用fmt.Printf格式化输出字节数组内容，按索引字节值字符表示三列对齐显示。通过 %-10d和 %-15q的格式控制，可以确保输出整齐，便于阅读和分析。%q格式化符号特别适合显示字符串和字符的字面值，同时处理 Unicode 和转义字符。
24.11.13 Javascript3
2401_87910368的博客
11-13 640
2.渲染(通过特定api 把元素显示到页面中的某个为止 挂载到dom树上)注意:js中随机数需要手动计算 通过取整 扩倍 移动区间 得到需要的随机数。两个步骤 1.生成出元素(虚拟dom结构 可以设置属性 页面上没有)//4数组遍历 //Array可对元素属性进行调整。//innerHTML可以解析html标签。JSON javascript对象标记。js中会table描述为数组(了解)js操作时 需要先获取元素。原生js动态操作(了解)同样可以使用简化操作。//2.数组中的内容。//3.数组常用方法。
python json详解
stephenbruce的博客
11-15 757
Python 的 json 模块提供了强大的功能来处理 JSON 数据。通过 json.dump() 和 json.dumps()，你可以将 Python 对象序列化为 JSON 格式；通过 json.load() 和 json.loads()，你可以将 JSON 数据反序列化为 Python 对象。利用这些功能，你可以轻松地在 Python 程序中处理 JSON 数据。
自定义反序列化过程
半夏陌殇Earth
11-14 275
需求：student对象中name属性，序列化时将该属性映射为stuname，反序列化时将 Json中的NAME键值对映射到name属性中。
新功能介绍​
weixin_43715205的博客
11-13 336
近期基于客户实际需求，基于现有的数合建模平台，开发了基于API接口的数据接入功能，旨在帮助您轻松地将各种API接口的数据结构化并存储到数据库中。支持主子表结构，能够自动生成数据库结构，并提供直观的界面编辑功能，让您能够轻松管理表名称和外键关系。能够处理各种JSON格式的数据，无论您的API返回的是简单的键值对还是复杂的嵌套结构，我们都能够将其有效地存储到数据库中。支持主子表结构，允许您定义复杂的数据关系，并通过外键约束来维护这些关系，确保数据的一致性和完整性。2. 数据结构化存储​。5. 界面编辑功能​。
swagger （一）导出iOS包
Wondgirl的极客世界
11-15 324
swagger2.7.2导出iOS端代码
02-SpringBoot3Web开发
小钟不想敲代码
11-14 867
02-SpringBoot3 Web开发
微信小程序开发，仿小红书瀑布流实现
商城app+新闻app+备忘录记事本app视频教程在某站【浩宇软件开发】
11-14 972
lib: 3.6.4)解决方案：这个报错在控制台提示的很明显了，需要在.json文件中设置。温馨提示： 仅支持作为。即可 ，如下图所示。
python基础知识（四）——发送请求、接口关联
万丈高楼平地起
11-15 373
python基础知识（四）——发送请求、接口关联
羲和小医生0.1
最新发布
weixin_54366286的博客
11-17 102
创建一个名为“羲和小医生”的医学类问答机器人，我们使用Python和一些常用的库来实现。这个项目将包括以下几个部分：数据处理：准备和处理训练数据。模型训练：使用bert-base-chinese模型进行微调。GUI开发：使用tkinter库创建图形用户界面。项目结构README.md。
Java基础夯实——1.7 序列化
m0_60235638的博客
11-14 1010
java序列化，序列化
C# 编程教程 - Day20 深入学习要点
文件标题“day20,C#.zip”指的是一个压缩包文件，该文件的命名意味着它可能包含了与C#编程语言相关的教学内容、项目代码、示例或教程，对应于学习日或课程的第二十天。文件本身是一个ZIP格式的压缩文件，通常用于...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值