瑞吉外卖移动端开发笔记基于springBoot+mybatis-plus

港控/mmm° 2023-09-29 11:54 19阅读 0赞

**项目笔记来自于学习b站黑马程序员up主的瑞吉外卖项目后 个人整理的学习笔记，仅供学习参考；**

**目录**

手机验证码登录

短信发送

短信验证码登陆

发送验证码（给的资料有点残缺，这里修改了）

使用验证码登陆(使用map接收数据)

地址管理

手机端展示

菜品展示

套餐展示

购物车

添加菜品和套餐进购物车

查看购物车

清空购物车

减少购物车点菜品或者套餐

用户订单

用户下单功能

用户查看自己订单（自己补充的功能）

用户再来一单功能(自己写的)

项目优化

## 手机验证码登录 ##

### 短信发送 ###

这里使用的是阿里云短信，但是吧，对于个人来说，几乎是申请不到短信的模板签名，所以这里只能大概介绍一下怎么使用阿里云发送短信，具体调用阿里云短信服务的Java代码也会给出；

先引入maven坐标：

<dependency>
                <groupId>com.aliyun</groupId>
                <artifactId>aliyun-java-sdk-core</artifactId>
                <version>4.5.16</version>
            </dependency>
            <dependency>
                <groupId>com.aliyun</groupId>
                <artifactId>aliyun-java-sdk-dysmsapi</artifactId>
                <version>2.1.0</version>
            </dependency>

然后调用api:

package com.itheima.reggie.utils;
    
    import com.aliyuncs.DefaultAcsClient;
    import com.aliyuncs.IAcsClient;
    import com.aliyuncs.dysmsapi.model.v20170525.SendSmsRequest;
    import com.aliyuncs.dysmsapi.model.v20170525.SendSmsResponse;
    import com.aliyuncs.exceptions.ClientException;
    import com.aliyuncs.profile.DefaultProfile;
    
    /**
     * 短信发送工具类
     */
    public class SMSUtils {
    
    	/**
    	 * 发送短信
    	 * @param signName 签名
    	 * @param templateCode 模板
    	 * @param phoneNumbers 手机号
    	 * @param param 参数
    	 */
    	public static void sendMessage(String signName, String templateCode,String phoneNumbers,String param){
           
    		DefaultProfile profile = DefaultProfile.getProfile("cn-hangzhou", "", "");
    		IAcsClient client = new DefaultAcsClient(profile);
    
    		SendSmsRequest request = new SendSmsRequest();
    		request.setSysRegionId("cn-hangzhou");
    		request.setPhoneNumbers(phoneNumbers);
    		request.setSignName(signName);
    		request.setTemplateCode(templateCode);
    		request.setTemplateParam("{\"code\":\""+param+"\"}");
    		try {
    			SendSmsResponse response = client.getAcsResponse(request);
    			System.out.println("短信发送成功");
    		}catch (ClientException e) {
    			e.printStackTrace();
    		}
    	}
    }

### 短信验证码登陆 ###

**需求分析：**

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5pyq5p2l5b6I6ZW_77yM5Yir5Y-q55yL55y85YmN_size_20_color_FFFFFF_t_70_g_se_x_16][]**数据模型：**

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5pyq5p2l5b6I6ZW_77yM5Yir5Y-q55yL55y85YmN_size_20_color_FFFFFF_t_70_g_se_x_16 1][]

**前后端交互过程：**

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5pyq5p2l5b6I6ZW_77yM5Yir5Y-q55yL55y85YmN_size_20_color_FFFFFF_t_70_g_se_x_16 2][]

代码开发：

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5pyq5p2l5b6I6ZW_77yM5Yir5Y-q55yL55y85YmN_size_20_color_FFFFFF_t_70_g_se_x_16 3][]

导入user实体类；

创建userMapper:

package com.itheima.reggie.mapper;
    
    import com.baomidou.mybatisplus.core.mapper.BaseMapper;
    import com.itheima.reggie.entity.User;
    import org.apache.ibatis.annotations.Mapper;
    
    @Mapper
    public interface UserMapper extends BaseMapper<User> {
    }

创建service：

package com.itheima.reggie.service;
    
    import com.baomidou.mybatisplus.extension.service.IService;
    import com.itheima.reggie.entity.User;
    
    /**
     * @author LJM
     * @create 2022/4/18
     */
    public interface UserService extends IService<User> {
    }

实现service：

package com.itheima.reggie.service.impl;
    
    import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
    import com.itheima.reggie.entity.User;
    import com.itheima.reggie.mapper.UserMapper;
    import com.itheima.reggie.service.UserService;
    import org.springframework.stereotype.Service;
    
    /**
     * @author LJM
     * @create 2022/4/18
     */
    @Service
    public class UserServiceImpl extends ServiceImpl<UserMapper, User> implements UserService {
    }

导入工具类：

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5pyq5p2l5b6I6ZW_77yM5Yir5Y-q55yL55y85YmN_size_13_color_FFFFFF_t_70_g_se_x_16][]

#### 发送验证码（给的资料有点残缺，这里修改了） ####

注意这个资料有点残缺，补全：

在longin.html中找到这个获取验证码的方法，把一行注释，然后添加一行代码一行；

getCode(){
        this.form.code = ''
        const regex = /^(13[0-9]{9})|(15[0-9]{9})|(17[0-9]{9})|(18[0-9]{9})|(19[0-9]{9})$/;
        if (regex.test(this.form.phone)) {
            this.msgFlag = false
            //this.form.code = (Math.random()*1000000).toFixed(0)
            sendMsgApi({phone:this.form.phone})  //添加的
        }else{
            this.msgFlag = true
        }
    },

在login.js中添加一个方法：

function sendMsgApi(data){
        return $axios({
            'url':'/user/sendMsg',
            'method':'post',
            data
        })
    }

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5pyq5p2l5b6I6ZW_77yM5Yir5Y-q55yL55y85YmN_size_11_color_FFFFFF_t_70_g_se_x_16][]

在**登陆拦截器LongCheckFilter**中添加新的白名单：

String[] urls = new String[]{
            "/employee/login",
            "/employee/logout",
            "/backend/**",
            "/front/**",
            "/common/**",
            "/user/sendMsg", //移动端发送短信
            "/user/login"  // 移动端登陆
    };

并且在里面继续添加一个手机端登陆状态的放行判断：

//4-2判断移动端登录状态，如果已登录，则直接放行
            if(request.getSession().getAttribute("user") != null){
                //log.info("用户已登录，用户id为：{}",request.getSession().getAttribute("user"));
                //把用户id存储到本地的threadLocal
                Long userId = (Long) request.getSession().getAttribute("user");
                BaseContext.setCurrentId(userId);
    
    
                filterChain.doFilter(request,response);
                return;
            }

**编写controller：**

@Autowired
    private UserService userService;
    
    /**
     * 发送手机短信验证码
     * @param user
     * @return
     */
    @PostMapping("/sendMsg")
    public R<String> sendMsg(@RequestBody User user, HttpSession session){
        //获取手机号
        String phone = user.getPhone();
        if (StringUtils.isNotEmpty(phone)){
            //随机生成的4为验证码
            Integer integerCode = ValidateCodeUtils.generateValidateCode(4);
            String code = integerCode.toString();
            
            log.info("code={}",code);
            //调用阿里云提供的短信服务api完成发送短信  这里个人用户申请不了阿里云短信服务的签名，所以这里在后台输出了
            //SMSUtils.sendMessage("","","","");
    
            //把验证码存起来  这里使用session来存放验证码，当然也可以存到redis
            session.setAttribute(phone,code);
            return R.success("手机验证码发送成功");
        }
    
        return R.error("手机验证码发送失败");
    }

**功能测试：访问手机端，输入手机号，看能不能在后台打印验证码；**

#### 使用验证码登陆(使用map接收数据) ####

注意：测试的时候发现前端页面明明填了验证码，发现验证码并没有被携带在前端的请求参数中，所以后端也没有拿到验证码这个数据，一看就是前端发请求的地方的参数携带少了；修改一下参数就行；

async btnLogin(){
        if(this.form.phone && this.form.code){
            this.loading = true
            
            //const res = await loginApi({phone:this.form.phone})  这里是资料给的代码
            const res = await loginApi(this.form)  //这里是自己加的
            
            ....
    }

**controller层代码**：

/**
     * 移动端用户登录
     * @param map
     * @param session
     * @return
     */
    @PostMapping("/login")
    public R<User> login(@RequestBody Map map, HttpSession session){
        //log.info(map.toString());
    
        //获取手机号
        String phone = map.get("phone").toString();
    
        //获取验证码
        String code = map.get("code").toString();
    
        //从Session中获取保存的验证码
        Object codeInSession = session.getAttribute(phone);
    
        //进行验证码的比对（页面提交的验证码和Session中保存的验证码比对）
        if(codeInSession != null && codeInSession.equals(code)){
            //如果能够比对成功，说明登录成功
    
            LambdaQueryWrapper<User> queryWrapper = new LambdaQueryWrapper<>();
            queryWrapper.eq(User::getPhone,phone);
            //根据用户的手机号去用户表获取用户
            User user = userService.getOne(queryWrapper);
            if(user == null){
                //判断当前手机号对应的用户是否为新用户，如果是新用户就自动完成注册
                user = new User();
                user.setPhone(phone);
                user.setStatus(1); //可设置也可不设置，因为数据库我们设置了默认值
                //注册新用户
                userService.save(user);
            }
            //这一行容易漏。。保存用户登录状态
            session.setAttribute("user",user.getId()); //在session中保存用户的登录状态,这样才过滤器的时候就不会被拦截了
            return R.success(user);
        }
        return R.error("登录失败");
    }

功能测试：验证码正确后跳转到手机端；

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5pyq5p2l5b6I6ZW_77yM5Yir5Y-q55yL55y85YmN_size_16_color_FFFFFF_t_70_g_se_x_16][]

## 地址管理 ##

导入用户地址簿类：从资料中获取就行

数据模型：

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5pyq5p2l5b6I6ZW_77yM5Yir5Y-q55yL55y85YmN_size_20_color_FFFFFF_t_70_g_se_x_16 4][]

代码开发：

准备工作，导入AddressBook实体类，检查一下实体类的属性是否和数据库中的表字段一一对应；

创建mapper:

package com.itheima.reggie.mapper;
    
    import com.baomidou.mybatisplus.core.mapper.BaseMapper;
    import com.itheima.reggie.entity.AddressBook;
    import org.apache.ibatis.annotations.Mapper;
    import org.apache.ibatis.annotations.Select;
    
    import java.util.List;
    
    @Mapper
    public interface AddressBookMapper extends BaseMapper<AddressBook> {
    
    }

package com.itheima.reggie.service;
    
    import com.baomidou.mybatisplus.extension.service.IService;
    import com.itheima.reggie.entity.AddressBook;
    
    public interface AddressBookService extends IService<AddressBook> {
    
    }

实现类：

package com.itheima.reggie.service.impl;
    
    import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
    import com.itheima.reggie.entity.AddressBook;
    import com.itheima.reggie.mapper.AddressBookMapper;
    import com.itheima.reggie.service.AddressBookService;
    import org.springframework.stereotype.Service;
    
    @Service
    public class AddressBookServiceImpl extends ServiceImpl<AddressBookMapper, AddressBook> implements AddressBookService {
    
    }

**controller层编写：**

package com.itheima.reggie.controller;
    
    import com.baomidou.mybatisplus.core.conditions.query.LambdaQueryWrapper;
    import com.baomidou.mybatisplus.core.conditions.update.LambdaUpdateWrapper;
    import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
    import com.itheima.reggie.common.BaseContext;
    import com.itheima.reggie.common.R;
    import com.itheima.reggie.entity.AddressBook;
    import com.itheima.reggie.service.AddressBookService;
    import lombok.extern.slf4j.Slf4j;
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.util.CollectionUtils;
    import org.springframework.web.bind.annotation.*;
    
    import java.util.List;
    
    /**
     * 地址簿管理
     */
    @Slf4j
    @RestController
    @RequestMapping("/addressBook")
    public class AddressBookController {
    
        @Autowired
        private AddressBookService addressBookService;
    
        /**
         * 新增
         */
        @PostMapping
        public R<AddressBook> save(@RequestBody AddressBook addressBook) {
            addressBook.setUserId(BaseContext.getCurrentId());
            log.info("addressBook:{}", addressBook);
            addressBookService.save(addressBook);
            return R.success(addressBook);
        }
    
        /**
         * 设置默认地址
         */
        @PutMapping("default")
        public R<AddressBook> setDefault(@RequestBody AddressBook addressBook) {
            log.info("addressBook:{}", addressBook);
            LambdaUpdateWrapper<AddressBook> wrapper = new LambdaUpdateWrapper<>();
            wrapper.eq(AddressBook::getUserId, BaseContext.getCurrentId());
            wrapper.set(AddressBook::getIsDefault, 0);
            //SQL:update address_book set is_default = 0 where user_id = ?
            addressBookService.update(wrapper);
    
            addressBook.setIsDefault(1);
            //SQL:update address_book set is_default = 1 where id = ?
            addressBookService.updateById(addressBook);
            return R.success(addressBook);
        }
    
        /**
         * 根据id查询地址
         */
        @GetMapping("/{id}")
        public R get(@PathVariable Long id) {
            AddressBook addressBook = addressBookService.getById(id);
            if (addressBook != null) {
                return R.success(addressBook);
            } else {
                return R.error("没有找到该对象");
            }
        }
    
        /**
         * 查询默认地址
         */
        @GetMapping("default")
        public R<AddressBook> getDefault() {
            LambdaQueryWrapper<AddressBook> queryWrapper = new LambdaQueryWrapper<>();
            queryWrapper.eq(AddressBook::getUserId, BaseContext.getCurrentId());
            queryWrapper.eq(AddressBook::getIsDefault, 1);
    
            //SQL:select * from address_book where user_id = ? and is_default = 1
            AddressBook addressBook = addressBookService.getOne(queryWrapper);
    
            if (null == addressBook) {
                return R.error("没有找到该对象");
            } else {
                return R.success(addressBook);
            }
        }
    
        /**
         * 查询指定用户的全部地址
         */
        @GetMapping("/list")
        public R<List<AddressBook>> list(AddressBook addressBook) {
            addressBook.setUserId(BaseContext.getCurrentId());
            log.info("addressBook:{}", addressBook);
    
            //条件构造器
            LambdaQueryWrapper<AddressBook> queryWrapper = new LambdaQueryWrapper<>();
            queryWrapper.eq(null != addressBook.getUserId(), AddressBook::getUserId, addressBook.getUserId());
            queryWrapper.orderByDesc(AddressBook::getUpdateTime);
    
            //SQL:select * from address_book where user_id = ? order by update_time desc
            return R.success(addressBookService.list(queryWrapper));
        }
    }

功能测试：

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5pyq5p2l5b6I6ZW_77yM5Yir5Y-q55yL55y85YmN_size_12_color_FFFFFF_t_70_g_se_x_16][]

## 手机端展示 ##

### 菜品展示 ###

前端重点代码：

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5pyq5p2l5b6I6ZW_77yM5Yir5Y-q55yL55y85YmN_size_20_color_FFFFFF_t_70_g_se_x_16 5][]

//获取所有的菜品分类
    function categoryListApi() {
        return $axios({
          'url': '/category/list',
          'method': 'get',
        })
      }
    
    //获取购物车内商品的集合
    function cartListApi(data) {
        return $axios({
            'url': '/shoppingCart/list',
            'method': 'get',
            params:{...data}
        })
    }

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5pyq5p2l5b6I6ZW_77yM5Yir5Y-q55yL55y85YmN_size_20_color_FFFFFF_t_70_g_se_x_16 6][]

我们发现前端的展示页面中请求到了category的数据，服务器也响应了数据给前端页面，但是我们也看见了手机端并没有展示相关的套餐数据；这是因为在加载页面的时候，前端一共发了两个list请求，具体的请求看上面的前端代码，请求购物车信息的请求返回404，所以导致category的数据也没有被展示；

这里我们先在其他地方静态的接收购物车的请求，这样就可以先显示category的数据；先用假数据测试一下：

修改购物车的请求地址，

//获取购物车内商品的集合
    function cartListApi(data) {
        return $axios({
            //'url': '/shoppingCart/list',
            'url':'/front/cartData.json',
            'method': 'get',
            params:{...data}
        })
    }

// 假数据文件
    {"code":1,"msg":null,"data":[],"map":{}}

功能测试：

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5pyq5p2l5b6I6ZW_77yM5Yir5Y-q55yL55y85YmN_size_12_color_FFFFFF_t_70_g_se_x_16 1][]

但是我们也发现了bug，就是展示的菜品没有对应的口味信息，比如甜度，辣度。。。我们之前是添加过相关的口味数据的；

**这是因为我们在请求获取菜品信息的时候，我们返回的数据是R<List<Dish>> ，Dish这个类是没有相关的口味信息的，所以即便前端请求了这个口味的信息，但是后端是没有给它返回的，所以体现在前端就是口味信息没有展示出来；所以我们需要对DishController中的list接口进行修改；**

bug修复：

//方法改造
    @GetMapping("/list")
    public R<List<DishDto>> list(Dish dish){ //会自动映射的
        //这里可以传categoryId,但是为了代码通用性更强,这里直接使用dish类来接受（因为dish里面是有categoryId的）,以后传dish的其他属性这里也可以使用
        //构造查询条件
        LambdaQueryWrapper<Dish> queryWrapper = new LambdaQueryWrapper<>();
        queryWrapper.eq(dish.getCategoryId() != null ,Dish::getCategoryId,dish.getCategoryId());
        //添加条件，查询状态为1（起售状态）的菜品
        queryWrapper.eq(Dish::getStatus,1);
    
        //添加排序条件
        queryWrapper.orderByAsc(Dish::getSort).orderByDesc(Dish::getUpdateTime);
        List<Dish> list = dishService.list(queryWrapper);
    
        //进行集合的泛型转化
        List<DishDto> dishDtoList = list.stream().map((item) ->{
            DishDto dishDto = new DishDto();
            //为一个新的对象赋值，一定要考虑你为它赋过几个值，否则你自己都不知道就返回了null的数据
            //为dishDto对象的基本属性拷贝
            BeanUtils.copyProperties(item,dishDto);
            Long categoryId = item.getCategoryId();
            Category category = categoryService.getById(categoryId);
            if (category != null){
                String categoryName = category.getName();
                dishDto.setCategoryName(categoryName);
            }
            //为dishdto赋值flavors属性
            //当前菜品的id
            Long dishId = item.getId();
            //创建条件查询对象
            LambdaQueryWrapper<DishFlavor> lambdaQueryWrapper = new LambdaQueryWrapper();
            lambdaQueryWrapper.eq(DishFlavor::getDishId,dishId);
            //select * from dish_flavor where dish_id = ?
            //这里之所以使用list来条件查询那是因为同一个dish_id 可以查出不同的口味出来,就是查询的结果不止一个
            List<DishFlavor> dishFlavorList = dishFlavorService.list(lambdaQueryWrapper);
            dishDto.setFlavors(dishFlavorList);
    
            return dishDto;
        }).collect(Collectors.toList());
    
        return R.success(dishDtoList);
    }

### 套餐展示 ###

套餐展示的前端请求地址和携带的参数：

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5pyq5p2l5b6I6ZW_77yM5Yir5Y-q55yL55y85YmN_size_20_color_FFFFFF_t_70_g_se_x_16 7][]

在SetmealController中添加相应的方法来接收前端的请求：

/**
         * 根据条件查询套餐数据
         * @param setmeal
         * @return
         */
        @GetMapping("/list")
        public R<List<Setmeal>> list(Setmeal setmeal){
            LambdaQueryWrapper<Setmeal> queryWrapper = new LambdaQueryWrapper<>();
            queryWrapper.eq(setmeal.getCategoryId()!=null,Setmeal::getCategoryId,setmeal.getCategoryId());
            queryWrapper.eq(setmeal.getStatus()!=null,Setmeal::getStatus,setmeal.getStatus());
            queryWrapper.orderByDesc(Setmeal::getUpdateTime);
            List<Setmeal> list = setmealService.list(queryWrapper);
            return R.success(list);
    
        }

功能测试：

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5pyq5p2l5b6I6ZW_77yM5Yir5Y-q55yL55y85YmN_size_20_color_FFFFFF_t_70_g_se_x_16 8][]

## 购物车 ##

### 添加菜品和套餐进购物车 ###

数据模型： 购物车对应的数据表为shopping\_cart，具体结构如下：从资料中导入相关的实体类就行

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5pyq5p2l5b6I6ZW_77yM5Yir5Y-q55yL55y85YmN_size_20_color_FFFFFF_t_70_g_se_x_16 9][]

代码开发：

**加入购物车功能：**

加入购物车的前端请求和携带的参数：

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5pyq5p2l5b6I6ZW_77yM5Yir5Y-q55yL55y85YmN_size_20_color_FFFFFF_t_70_g_se_x_16 10][]

开发准备工作：

导入实体类ShoppingCart；

创建对应的mapper:

package com.itheima.reggie.mapper;
    import com.baomidou.mybatisplus.core.mapper.BaseMapper;
    import com.itheima.reggie.entity.ShoppingCart;
    import org.apache.ibatis.annotations.Mapper;
    import org.apache.ibatis.annotations.Select;
    import java.util.List;
    
    @Mapper
    public interface ShoppingCartMapper extends BaseMapper<ShoppingCart> {
    
    }

创建service：

package com.itheima.reggie.service;
    import com.baomidou.mybatisplus.extension.service.IService;
    import com.itheima.reggie.entity.ShoppingCart;
    
    public interface ShoppingCartService extends IService<ShoppingCart> {
    
    }

实现类:

package com.itheima.reggie.service.impl;
    import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
    import com.itheima.reggie.entity.ShoppingCart;
    import com.itheima.reggie.mapper.ShoppingCartMapper;
    import com.itheima.reggie.service.ShoppingCartService;
    import org.springframework.stereotype.Service;
    
    @Service
    public class ShoppingCartServiceImpl extends ServiceImpl<ShoppingCartMapper, ShoppingCart> implements ShoppingCartService {
    
    }

controller层开发：

@Autowired
    private ShoppingCartService shoppingCartService;
    
    /**
     * 添加购物车
     * @param shoppingCart
     * @return
     */
    @PostMapping("/add")
    public R<ShoppingCart> add(@RequestBody ShoppingCart shoppingCart){
    
        //先设置用户id,指定当前是哪个用户的购物车数据  因为前端没有传这个id给我们,但是这个id又非常重要（数据库这个字段不能为null）,
        // 所以要想办法获取到,我们在用户登录的时候就已经保存了用户的id
        Long currentId = BaseContext.getCurrentId();
        shoppingCart.setUserId(currentId);
    
        Long dishId = shoppingCart.getDishId();
    
        LambdaQueryWrapper<ShoppingCart> queryWrapper = new LambdaQueryWrapper<>();
        queryWrapper.eq(ShoppingCart::getUserId,currentId);
    
        if (dishId != null){
            //添加到购物车的是菜品
            queryWrapper.eq(ShoppingCart::getDishId,dishId);
        }else {
            //添加到购物车的是套餐
            queryWrapper.eq(ShoppingCart::getSetmealId,shoppingCart.getSetmealId());
        }
    
        //查询当前菜品是否或者是套餐是否在购物车中
        //SQL:select * from shopping_cart where user_id = ? and dish_id/setmeal_id = ?
        ShoppingCart cartServiceOne = shoppingCartService.getOne(queryWrapper);
    
        if (cartServiceOne != null) {
            //如果已经存在,就在原来的数量基础上加一
            Integer number = cartServiceOne.getNumber();
            cartServiceOne.setNumber(number+1);
            shoppingCartService.updateById(cartServiceOne);
        }else {
            //如果不存在,则添加到购物车，数量默认是1
            shoppingCart.setNumber(1);
            shoppingCartService.save(shoppingCart);
            cartServiceOne = shoppingCart;
        }
        return R.success(cartServiceOne);
    }

功能测试：

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5pyq5p2l5b6I6ZW_77yM5Yir5Y-q55yL55y85YmN_size_13_color_FFFFFF_t_70_g_se_x_16 1][]

不过这个只能把菜品或者是套餐加入到购物车，那个减号点了是没效果的；

### 查看购物车 ###

把相关的前端请求地址给改掉, 不再请求假数据，至于存放假数据的json文件是否删除，看你自己，删不删都没什么影响；

//获取购物车内商品的集合
    function cartListApi(data) {
        return $axios({
            'url': '/shoppingCart/list',
            //'url':'/front/cartData.json',
            'method': 'get',
            params:{...data}
        })
    }

**注意：一定要有用户的概念，不同用户看到的购物车是不一样的！！！**

controller：

/**
     * 查看购物车
     * @return
     * 前端没有传数据给我们，这里就不用接收了
     */
    @GetMapping
    public R<List<ShoppingCart>> list(){
        LambdaQueryWrapper<ShoppingCart> queryWrapper = new LambdaQueryWrapper<>();
        queryWrapper.eq(ShoppingCart::getUserId,BaseContext.getCurrentId());
        queryWrapper.orderByAsc(ShoppingCart::getCreateTime);
        List<ShoppingCart> list = shoppingCartService.list(queryWrapper);
        
        return R.success(list);
    }

功能测试：

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5pyq5p2l5b6I6ZW_77yM5Yir5Y-q55yL55y85YmN_size_12_color_FFFFFF_t_70_g_se_x_16 2][]

### 清空购物车 ###

/**
     * 清空购物车
     * @return
     */
    @DeleteMapping("/clean")
    public R<String> clean(){
    
        //sql:delete from shopping_cart where userId =？
        LambdaQueryWrapper<ShoppingCart> queryWrapper = new LambdaQueryWrapper<>();
        queryWrapper.eq(ShoppingCart::getUserId,BaseContext.getCurrentId());
        shoppingCartService.remove(queryWrapper);
        
        return R.success("清空购物车成功");
    
    }

### 减少购物车点菜品或者套餐 ###

前端请求： [http://localhost:8080/shoppingCart/sub][http_localhost_8080_shoppingCart_sub]

请求方式：post

携带参数可能是dish\_id 也可能是 setmealId，所以我们需要实体类shoppingCart来接收;

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5pyq5p2l5b6I6ZW_77yM5Yir5Y-q55yL55y85YmN_size_20_color_FFFFFF_t_70_g_se_x_16 11][]

遇到的bug: 就是购物车里面的菜品和套餐的数量可能会减少至负数！！！所以这里我们要在入库前做一次判断；**把数据库的该字段设置为无符号字段，所以当num数小于0的时候就会报错（500接口异常），但是左下角的小购物车还是会显示菜品为0，所以在后端的代码也要进行判断操作；**

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5pyq5p2l5b6I6ZW_77yM5Yir5Y-q55yL55y85YmN_size_20_color_FFFFFF_t_70_g_se_x_16 12][]

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5pyq5p2l5b6I6ZW_77yM5Yir5Y-q55yL55y85YmN_size_13_color_FFFFFF_t_70_g_se_x_16 2][]

在ShoppingCartController中添加下面的接口方法来接收请求：（这个是修改了一次的代码，思路用的是评论区一个老哥提供的思路）

/**
         * 客户端的套餐或者是菜品数量减少设置
         * 没必要设置返回值
         * @param shoppingCart
         */
        @PostMapping("/sub")
        @Transactional
        public R<ShoppingCart> sub(@RequestBody ShoppingCart shoppingCart){
    
            Long dishId = shoppingCart.getDishId();
            LambdaQueryWrapper<ShoppingCart> queryWrapper = new LambdaQueryWrapper<>();
    
            //代表数量减少的是菜品数量
            if (dishId != null){
                //通过dishId查出购物车对象
                queryWrapper.eq(ShoppingCart::getDishId,dishId);
                //这里必须要加两个条件，否则会出现用户互相修改对方与自己购物车中相同套餐或者是菜品的数量
                queryWrapper.eq(ShoppingCart::getUserId,BaseContext.getCurrentId());
                ShoppingCart cart1 = shoppingCartService.getOne(queryWrapper);
                cart1.setNumber(cart1.getNumber()-1);
                Integer LatestNumber = cart1.getNumber();
                if (LatestNumber > 0){
                    //对数据进行更新操作
                    shoppingCartService.updateById(cart1);
                }else if(LatestNumber == 0){
                    //如果购物车的菜品数量减为0，那么就把菜品从购物车删除
                    shoppingCartService.removeById(cart1.getId());
                }else if (LatestNumber < 0){
                    return R.error("操作异常");
                }
    
                return R.success(cart1);
            }
    
            Long setmealId = shoppingCart.getSetmealId();
            if (setmealId != null){
                //代表是套餐数量减少
                queryWrapper.eq(ShoppingCart::getSetmealId,setmealId).eq(ShoppingCart::getUserId,BaseContext.getCurrentId());
                ShoppingCart cart2 = shoppingCartService.getOne(queryWrapper);
                cart2.setNumber(cart2.getNumber()-1);
                Integer LatestNumber = cart2.getNumber();
                if (LatestNumber > 0){
                    //对数据进行更新操作
                    shoppingCartService.updateById(cart2);
                }else if(LatestNumber == 0){
                    //如果购物车的套餐数量减为0，那么就把套餐从购物车删除
                    shoppingCartService.removeById(cart2.getId());
                }else if (LatestNumber < 0){
                    return R.error("操作异常");
                }
                return R.success(cart2);
            }
                //如果两个大if判断都进不去
                return R.error("操作异常");
        }

## 用户订单 ##

### 用户下单功能 ###

需求分析：

注意：这里只是把用户的支付订单保存到数据库，因为真正的支付功能是需要去申请支付资质的，个人用户很难申请到；

数据模型：用户下单业务对应的数据表为order表和order\_detail表：

order:订单表；

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5pyq5p2l5b6I6ZW_77yM5Yir5Y-q55yL55y85YmN_size_20_color_FFFFFF_t_70_g_se_x_16 13][]

order\_detail：订单明细表；

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5pyq5p2l5b6I6ZW_77yM5Yir5Y-q55yL55y85YmN_size_20_color_FFFFFF_t_70_g_se_x_16 14][]

代码开发：

前端和服务器的交互过程：

第一次交互：

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5pyq5p2l5b6I6ZW_77yM5Yir5Y-q55yL55y85YmN_size_20_color_FFFFFF_t_70_g_se_x_16 15][]

然后点击去支付：然后前端就会发生[http://localhost:8080/order/submit][http_localhost_8080_order_submit]这个请求；并且携带三个参数：一个是地址，一个是字符方式，一个是客户的备注；

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5pyq5p2l5b6I6ZW_77yM5Yir5Y-q55yL55y85YmN_size_20_color_FFFFFF_t_70_g_se_x_16 16][]

开发准备工作：

导入实体类：order，order\_details

创建mapper：

package com.itheima.reggie.mapper;
    
    import com.baomidou.mybatisplus.core.mapper.BaseMapper;
    import com.itheima.reggie.entity.Orders;
    import org.apache.ibatis.annotations.Mapper;
    
    @Mapper
    public interface OrderMapper extends BaseMapper<Orders> {
    
    }

package com.itheima.reggie.mapper;
    
    import com.baomidou.mybatisplus.core.mapper.BaseMapper;
    import com.itheima.reggie.entity.OrderDetail;
    import org.apache.ibatis.annotations.Mapper;
    
    @Mapper
    public interface OrderDetailMapper extends BaseMapper<OrderDetail> {
    
    }

创建service及其实现：

package com.itheima.reggie.service;
    import com.baomidou.mybatisplus.extension.service.IService;
    import com.itheima.reggie.entity.Orders;
    
    public interface OrderService extends IService<Orders> {
    }

package com.itheima.reggie.service;
    import com.baomidou.mybatisplus.extension.service.IService;
    import com.itheima.reggie.entity.OrderDetail;
    
    public interface OrderDetailService extends IService<OrderDetail> {
    }

package com.itheima.reggie.service.impl;
    
    import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
    
    import com.itheima.reggie.entity.*;
    import com.itheima.reggie.mapper.OrderMapper;
    import com.itheima.reggie.service.*;
    import org.springframework.stereotype.Service;
    
    @Service
    public class OrderServiceImpl extends ServiceImpl<OrderMapper, Orders> implements OrderService {
    }

package com.itheima.reggie.service.impl;
    
    import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
    import com.itheima.reggie.entity.OrderDetail;
    import com.itheima.reggie.mapper.OrderDetailMapper;
    import com.itheima.reggie.service.OrderDetailService;
    import org.springframework.stereotype.Service;
    
    @Service
    public class OrderDetailServiceImpl extends ServiceImpl<OrderDetailMapper, OrderDetail> implements OrderDetailService {
    
    }

controller层开发：

前端请求的地址和携带的参数前面已经分析过了;

/**
     * 用户下单
     * @param orders
     * @return
     */
    @PostMapping("/submit")
    public R<String> submit(@RequestBody Orders orders){
        orderService.submit(orders);
        return R.success("下单成功");
    }

service添加submit方法：

/**
     * 用户下单
     * @param orders
     */
    public void submit(Orders orders);

方法的实现：

@Autowired
    private ShoppingCartService shoppingCartService;
    
    @Autowired
    private UserService userService;
    
    @Autowired
    private AddressBookService addressBookService;
    
    @Autowired
    OrderDetailService orderDetailService;
    
    /**
     * 用户下单
     * @param orders
     */
    @Override
    @Transactional
    public void submit(Orders orders) {
        //前端请求携带的参数是没有用户id的,所以要获取用户id
        Long userId = BaseContext.getCurrentId();
        //创建查询条件
        LambdaQueryWrapper<ShoppingCart> queryWrapper = new LambdaQueryWrapper<>();
        queryWrapper.eq(ShoppingCart::getUserId,userId);
        //查询当前用户的购物车数据
        List<ShoppingCart> shoppingCarts = shoppingCartService.list(queryWrapper);
        if (shoppingCarts == null || shoppingCarts.size()==0){
            throw new CustomException("购物车为空,不能下单");
        }
        //查询用户数据
        User user = userService.getById(userId);
        //查询用户地址
        Long addressBookId = orders.getAddressBookId();
        AddressBook addressBook = addressBookService.getById(addressBookId);
        if (addressBook==null){
            throw new CustomException("地址信息有误,不能下单");
        }
    
        Long orderId = IdWorker.getId();//使用工具生成订单号
        orders.setId(orderId);
    
        //进行购物车的金额数据计算 顺便把订单明细给计算出来
        AtomicInteger amount = new AtomicInteger(0);//使用原子类来保存计算的金额结果
        //这个item是集合中的每一个shoppingCarts对象,是在变化的
        List<OrderDetail> orderDetails = shoppingCarts.stream().map((item)->{
            //每对item进行一次遍历就产生一个新的orderDetail对象,然后对orderDetail进行设置,然后返回被收集,被封装成一个集合
            OrderDetail orderDetail = new OrderDetail();
            orderDetail.setOrderId(orderId);
            orderDetail.setNumber(item.getNumber());
            orderDetail.setDishFlavor(item.getDishFlavor());
            orderDetail.setDishId(item.getDishId());
            orderDetail.setSetmealId(item.getSetmealId());
            orderDetail.setName(item.getName());
            orderDetail.setImage(item.getImage());
            orderDetail.setAmount(item.getAmount());//单份的金额
            //addAndGet进行累加 item.getAmount()单份的金额  multiply乘  item.getNumber()份数
            amount.addAndGet(item.getAmount().multiply(new BigDecimal(item.getNumber())).intValue());
            return orderDetail;
    
        }).collect(Collectors.toList());
    
        //向订单插入数据,一条数据  因为前端传过来的数据太少了,所以我们需要对相关的属性进行填值
    
        orders.setOrderTime(LocalDateTime.now());
        orders.setCheckoutTime(LocalDateTime.now());
        orders.setStatus(2);
        //Amount是指订单总的金额
        orders.setAmount(new BigDecimal(amount.get()));//总金额
        orders.setUserId(userId);
        orders.setNumber(String.valueOf(orderId));
        if (user.getName() != null){
                orders.setUserName(user.getName());
            }
        orders.setConsignee(addressBook.getConsignee());
        orders.setPhone(addressBook.getPhone());
        orders.setAddress((addressBook.getProvinceName() == null ? "" : addressBook.getProvinceName())
                + (addressBook.getCityName() == null ? "" : addressBook.getCityName())
                + (addressBook.getDistrictName() == null ? "" : addressBook.getDistrictName())
                + (addressBook.getDetail() == null ? "" : addressBook.getDetail()));
        this.save(orders);
    
    
        //先明细表插入数据,多条数据
        orderDetailService.saveBatch(orderDetails);
    
        //清空购物车数据  queryWrapper封装了userId我们直接使用这个条件来进行删除就行
        shoppingCartService.remove(queryWrapper);
    }

**功能测试；**

### 用户查看自己订单（自己补充的功能） ###

在OrderController中添加下面的方法； **下面的功能实现是不完善的，我在我的另一篇博客进行了修改哦！博客链接：**[瑞吉外卖项目剩余功能补充\_未来很长，别只看眼前的博客-CSDN博客![icon-default.png_t_M3K6][]https://blog.csdn.net/weixin\_53142722/article/details/124371940][-CSDN_icon-default.png_t_M3K6_https_blog.csdn.net_weixin_53142722_article_details_124371940]

/**
     * 用户订单分页查询
     * @param page
     * @param pageSize
     * @return
     */
    @GetMapping("/userPage")
    public R<Page> page(int page, int pageSize){
    
        //分页构造器对象
        Page<Orders> pageInfo = new Page<>(page,pageSize);
        //构造条件查询对象
        LambdaQueryWrapper<Orders> queryWrapper = new LambdaQueryWrapper<>();
    
        //添加排序条件，根据更新时间降序排列
        queryWrapper.orderByDesc(Orders::getOrderTime);
        orderService.page(pageInfo,queryWrapper);
    
        return R.success(pageInfo);
    }

**功能测试；**

### **用户再来一单功能(自己写的)** ###

**由于这里没有写后台的确认订单功能，所以这里通过数据库修改订单状态来完成测试！**

![3235d957d87f4c248ae858672337a0be.png][]

先把数据库中的订单表中的status改一些为4：这样在前端才能点击这个再来一单

![099213c1f4b940fcb91fb5c81227692e.png][]

在order.html中可以看见这样一段前端代码:

<div class="btn" v-if="order.status === 4">  //状态是4才会让你点击下面这个再来一单
         <div class="btnAgain" @click="addOrderAgain(order)">再来一单
         </div>
    </div>

然后找到addOrderAgain这个方法：前端使用post请求，请求地址order/again

![ae61f2c211c5493d905a43feadd4e923.png][]

写后端接口：**不建议把业务代码写在controller，不然以后想复用的时候就会很麻烦的！！！**

**这里我偷懒了，所以写再controller中了；**

//客户端点击再来一单
        /**
         * 前端点击再来一单是直接跳转到购物车的，所以为了避免数据有问题，再跳转之前我们需要把购物车的数据给清除
         * ①通过orderId获取订单明细
         * ②把订单明细的数据的数据塞到购物车表中，不过在此之前要先把购物车表中的数据给清除(清除的是当前登录用户的购物车表中的数据)，
         * 不然就会导致再来一单的数据有问题；
         * (这样可能会影响用户体验，但是对于外卖来说，用户体验的影响不是很大，电商项目就不能这么干了)
         */
        @PostMapping("/again")
        public R<String> againSubmit(@RequestBody Map<String,String> map){
            String ids = map.get("id");
    
            long id = Long.parseLong(ids);
           
            LambdaQueryWrapper<OrderDetail> queryWrapper = new LambdaQueryWrapper<>();
            queryWrapper.eq(OrderDetail::getOrderId,id);
            //获取该订单对应的所有的订单明细表
            List<OrderDetail> orderDetailList = orderDetailService.list(queryWrapper);
    
            //通过用户id把原来的购物车给清空，这里的clean方法是视频中讲过的,建议抽取到service中,那么这里就可以直接调用了
            shoppingCartService.clean();
    
            //获取用户id
            Long userId = BaseContext.getCurrentId();
            List<ShoppingCart> shoppingCartList = orderDetailList.stream().map((item) -> {
                //把从order表中和order_details表中获取到的数据赋值给这个购物车对象
                ShoppingCart shoppingCart = new ShoppingCart();
                shoppingCart.setUserId(userId);
                shoppingCart.setImage(item.getImage());
                Long dishId = item.getDishId();
                Long setmealId = item.getSetmealId();
                if (dishId != null) {
                    //如果是菜品那就添加菜品的查询条件
                    shoppingCart.setDishId(dishId);
                } else {
                    //添加到购物车的是套餐
                    shoppingCart.setSetmealId(setmealId);
                }
                shoppingCart.setName(item.getName());
                shoppingCart.setDishFlavor(item.getDishFlavor());
                shoppingCart.setNumber(item.getNumber());
                shoppingCart.setAmount(item.getAmount());
                shoppingCart.setCreateTime(LocalDateTime.now());
                return shoppingCart;
            }).collect(Collectors.toList());
    
            //把携带数据的购物车批量插入购物车表  这个批量保存的方法要使用熟练！！！
            shoppingCartService.saveBatch(shoppingCartList);
    
            return R.success("操作成功");
        }

测试:自己参数就行；

## 项目优化 ##

使用Gitee管理项目的版本，使用redis作为缓存技术缓存移动端验证码，和移动端菜品，套餐；

介绍一下前后端开发，简单介绍一下swagger的使用；

后面有时间会再补充；

[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5pyq5p2l5b6I6ZW_77yM5Yir5Y-q55yL55y85YmN_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/e77701aae7d04c53b6b1b797be36b173.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5pyq5p2l5b6I6ZW_77yM5Yir5Y-q55yL55y85YmN,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5pyq5p2l5b6I6ZW_77yM5Yir5Y-q55yL55y85YmN_size_20_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/dc59cad69220430f9362458eb9dd79a7.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5pyq5p2l5b6I6ZW_77yM5Yir5Y-q55yL55y85YmN,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5pyq5p2l5b6I6ZW_77yM5Yir5Y-q55yL55y85YmN_size_20_color_FFFFFF_t_70_g_se_x_16 2]: https://img-blog.csdnimg.cn/17c360690a6e4d71b2aa8e0219853c46.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5pyq5p2l5b6I6ZW_77yM5Yir5Y-q55yL55y85YmN,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5pyq5p2l5b6I6ZW_77yM5Yir5Y-q55yL55y85YmN_size_20_color_FFFFFF_t_70_g_se_x_16 3]: https://img-blog.csdnimg.cn/653a6156e0e64717a8831c0ffc034a44.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5pyq5p2l5b6I6ZW_77yM5Yir5Y-q55yL55y85YmN,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5pyq5p2l5b6I6ZW_77yM5Yir5Y-q55yL55y85YmN_size_13_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/bcef018998f04a64958821e87e97cf0c.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5pyq5p2l5b6I6ZW_77yM5Yir5Y-q55yL55y85YmN,size_13,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5pyq5p2l5b6I6ZW_77yM5Yir5Y-q55yL55y85YmN_size_11_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/2a44037f52924b01bbd15edb6fbb6dcf.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5pyq5p2l5b6I6ZW_77yM5Yir5Y-q55yL55y85YmN,size_11,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5pyq5p2l5b6I6ZW_77yM5Yir5Y-q55yL55y85YmN_size_16_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/0394eeceb87e41c19ab65e475cfe0db2.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5pyq5p2l5b6I6ZW_77yM5Yir5Y-q55yL55y85YmN,size_16,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5pyq5p2l5b6I6ZW_77yM5Yir5Y-q55yL55y85YmN_size_20_color_FFFFFF_t_70_g_se_x_16 4]: https://img-blog.csdnimg.cn/2224621094764392a2e456d6d23ea401.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5pyq5p2l5b6I6ZW_77yM5Yir5Y-q55yL55y85YmN,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5pyq5p2l5b6I6ZW_77yM5Yir5Y-q55yL55y85YmN_size_12_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/713c28b35c494cc2bb09ab16bf4f6d78.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5pyq5p2l5b6I6ZW_77yM5Yir5Y-q55yL55y85YmN,size_12,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5pyq5p2l5b6I6ZW_77yM5Yir5Y-q55yL55y85YmN_size_20_color_FFFFFF_t_70_g_se_x_16 5]: https://img-blog.csdnimg.cn/438082af057546bf9b425cc20ad1b8e6.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5pyq5p2l5b6I6ZW_77yM5Yir5Y-q55yL55y85YmN,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5pyq5p2l5b6I6ZW_77yM5Yir5Y-q55yL55y85YmN_size_20_color_FFFFFF_t_70_g_se_x_16 6]: https://img-blog.csdnimg.cn/bd33e88d25514fc48f6fd223bda2c722.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5pyq5p2l5b6I6ZW_77yM5Yir5Y-q55yL55y85YmN,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5pyq5p2l5b6I6ZW_77yM5Yir5Y-q55yL55y85YmN_size_12_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/ec34839adae740d1ad4faaaf73a54442.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5pyq5p2l5b6I6ZW_77yM5Yir5Y-q55yL55y85YmN,size_12,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5pyq5p2l5b6I6ZW_77yM5Yir5Y-q55yL55y85YmN_size_20_color_FFFFFF_t_70_g_se_x_16 7]: https://img-blog.csdnimg.cn/61c0954dfd4e4749bb1326832a903b02.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5pyq5p2l5b6I6ZW_77yM5Yir5Y-q55yL55y85YmN,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5pyq5p2l5b6I6ZW_77yM5Yir5Y-q55yL55y85YmN_size_20_color_FFFFFF_t_70_g_se_x_16 8]: https://img-blog.csdnimg.cn/784f3d50f99440c6bca28e5d2de117ed.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5pyq5p2l5b6I6ZW_77yM5Yir5Y-q55yL55y85YmN,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5pyq5p2l5b6I6ZW_77yM5Yir5Y-q55yL55y85YmN_size_20_color_FFFFFF_t_70_g_se_x_16 9]: https://img-blog.csdnimg.cn/927c793c33d547628607a01ee094c7d4.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5pyq5p2l5b6I6ZW_77yM5Yir5Y-q55yL55y85YmN,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5pyq5p2l5b6I6ZW_77yM5Yir5Y-q55yL55y85YmN_size_20_color_FFFFFF_t_70_g_se_x_16 10]: https://img-blog.csdnimg.cn/7617eb64c3dc46dca9c9728460c63a1b.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5pyq5p2l5b6I6ZW_77yM5Yir5Y-q55yL55y85YmN,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5pyq5p2l5b6I6ZW_77yM5Yir5Y-q55yL55y85YmN_size_13_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/e689136cb60d4a88a7e04f16007c35cc.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5pyq5p2l5b6I6ZW_77yM5Yir5Y-q55yL55y85YmN,size_13,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5pyq5p2l5b6I6ZW_77yM5Yir5Y-q55yL55y85YmN_size_12_color_FFFFFF_t_70_g_se_x_16 2]: https://img-blog.csdnimg.cn/f1a3f4ef96e54f1495bc6bfb6cb3a5ad.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5pyq5p2l5b6I6ZW_77yM5Yir5Y-q55yL55y85YmN,size_12,color_FFFFFF,t_70,g_se,x_16
[http_localhost_8080_shoppingCart_sub]: http://localhost:8080/shoppingCart/sub
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5pyq5p2l5b6I6ZW_77yM5Yir5Y-q55yL55y85YmN_size_20_color_FFFFFF_t_70_g_se_x_16 11]: https://img-blog.csdnimg.cn/acff599f1a064f9c82ec5d561f6b9f26.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5pyq5p2l5b6I6ZW_77yM5Yir5Y-q55yL55y85YmN,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5pyq5p2l5b6I6ZW_77yM5Yir5Y-q55yL55y85YmN_size_20_color_FFFFFF_t_70_g_se_x_16 12]: https://img-blog.csdnimg.cn/ccc49832660d4075bdee37e346bb0c3e.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5pyq5p2l5b6I6ZW_77yM5Yir5Y-q55yL55y85YmN,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5pyq5p2l5b6I6ZW_77yM5Yir5Y-q55yL55y85YmN_size_13_color_FFFFFF_t_70_g_se_x_16 2]: https://img-blog.csdnimg.cn/cd6c2ee7098547d695d0d0651b770b35.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5pyq5p2l5b6I6ZW_77yM5Yir5Y-q55yL55y85YmN,size_13,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5pyq5p2l5b6I6ZW_77yM5Yir5Y-q55yL55y85YmN_size_20_color_FFFFFF_t_70_g_se_x_16 13]: https://img-blog.csdnimg.cn/5968b307a560414c9c2bedf83cf16b0f.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5pyq5p2l5b6I6ZW_77yM5Yir5Y-q55yL55y85YmN,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5pyq5p2l5b6I6ZW_77yM5Yir5Y-q55yL55y85YmN_size_20_color_FFFFFF_t_70_g_se_x_16 14]: https://img-blog.csdnimg.cn/b6bb2259ba724c4097eed8482a07fd83.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5pyq5p2l5b6I6ZW_77yM5Yir5Y-q55yL55y85YmN,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5pyq5p2l5b6I6ZW_77yM5Yir5Y-q55yL55y85YmN_size_20_color_FFFFFF_t_70_g_se_x_16 15]: https://img-blog.csdnimg.cn/3702ab26fb1948ccbf5ad10d7468aadc.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5pyq5p2l5b6I6ZW_77yM5Yir5Y-q55yL55y85YmN,size_20,color_FFFFFF,t_70,g_se,x_16
[http_localhost_8080_order_submit]: http://localhost:8080/order/submit
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5pyq5p2l5b6I6ZW_77yM5Yir5Y-q55yL55y85YmN_size_20_color_FFFFFF_t_70_g_se_x_16 16]: https://img-blog.csdnimg.cn/6f9c24a0e2404c08994359e19d89875d.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5pyq5p2l5b6I6ZW_77yM5Yir5Y-q55yL55y85YmN,size_20,color_FFFFFF,t_70,g_se,x_16
[icon-default.png_t_M3K6]: https://csdnimg.cn/release/blog_editor_html/release2.1.0/ckeditor/plugins/CsdnLink/icons/icon-default.png?t=M3K6
[-CSDN_icon-default.png_t_M3K6_https_blog.csdn.net_weixin_53142722_article_details_124371940]: https://blog.csdn.net/weixin_53142722/article/details/124371940
[3235d957d87f4c248ae858672337a0be.png]: https://img-blog.csdnimg.cn/3235d957d87f4c248ae858672337a0be.png
[099213c1f4b940fcb91fb5c81227692e.png]: https://img-blog.csdnimg.cn/099213c1f4b940fcb91fb5c81227692e.png
[ae61f2c211c5493d905a43feadd4e923.png]: https://img-blog.csdnimg.cn/ae61f2c211c5493d905a43feadd4e923.png