加入购物车
<p>[TOC]</p>
<h5>简要描述</h5>
<ul>
<li>向购物车中加入菜品</li>
</ul>
<h5>前端页面和服务端交互过程</h5>
<ul>
<li>点击 [加入购物车] 或者 [+] 按钮，页面发送ajax请求，请求服务端，将菜品或者套餐添加到购物车</li>
</ul>
<h5>触发事件</h5>
<pre><code><div class="addCart" @click="addCart(setMealDialog.item)" v-if="!setMealDialog.item.number">加入购物车</div></code></pre>
<h5>接口调用</h5>
<pre><code>const res = await addCartApi(params)
if(res.code === 1){
this.dishList.forEach(dish=>{
if(dish.id === item.id){
dish.number = res.data.number
}
})
if(this.setMealDialog.show){
item.number = res.data.number
}
this.getCartData()
}else{
this.$notify({ type:'warning', message:res.msg});
}</code></pre>
<h5>请求URL</h5>
<ul>
<li><code>[context-path]/shoppingCart/add</code></li>
</ul>
<h5>请求方式</h5>
<ul>
<li>POST </li>
</ul>
<h5>请求参数</h5>
<table>
<thead>
<tr>
<th style="text-align: left;">参数名</th>
<th style="text-align: left;">类型</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left;">amount</td>
<td style="text-align: left;">decimal(10,2)</td>
<td>金额</td>
</tr>
<tr>
<td style="text-align: left;">image</td>
<td style="text-align: left;">varchar(200)</td>
<td>图片</td>
</tr>
<tr>
<td style="text-align: left;">name</td>
<td style="text-align: left;">varchar(64)</td>
<td>名称</td>
</tr>
<tr>
<td style="text-align: left;">id</td>
<td style="text-align: left;">bigint</td>
<td>编号</td>
</tr>
</tbody>
</table>
<h5>接口API</h5>
<pre><code>function addCartApi(data){
return $axios({
'url': '/shoppingCart/add',
'method': 'post',
data
})
}</code></pre>
<h5>返回示例</h5>
<pre><code>code: 1
data: {id: "1609085965423616002", name: "畅享2人套餐", userId: "1605795539925098497", dishId: null,…}
map: {}
msg: null</code></pre>
<h5>返回参数说明</h5>
<table>
<thead>
<tr>
<th style="text-align: left;">参数名</th>
<th style="text-align: left;">类型</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left;">code</td>
<td style="text-align: left;">int</td>
<td>返回码，1：成功；0 或其他：失败</td>
</tr>
<tr>
<td style="text-align: left;">data</td>
<td style="text-align: left;">object</td>
<td>返回数据</td>
</tr>
<tr>
<td style="text-align: left;">map</td>
<td style="text-align: left;">map</td>
<td>动态数据</td>
</tr>
<tr>
<td style="text-align: left;">msg</td>
<td style="text-align: left;">string</td>
<td>错误信息</td>
</tr>
</tbody>
</table>
<h5>备注</h5>
<p>data有两种返回值</p>
<pre><code>public static <T> R<T> success(T object) {
R<T> r = new R<T>();
r.data = object;
r.code = 1;
return r;
}
public static <T> R<T> error(String msg) {
R r = new R();
r.msg = msg;
r.code = 0;
return r;
}</code></pre>
<h5>后端接口请求参数</h5>
<ul>
<li>@RequestBody 接收前端传递给后端的json字符串中的数据(请求体ShoppingCart中的数据)</li>
</ul>
<h5>后端代码</h5>
<pre><code>@PostMapping("/add")
public R<ShoppingCart> add(@RequestBody ShoppingCart shoppingCart){
log.info(shoppingCart.toString());
Long dishId = shoppingCart.getDishId();
LambdaQueryWrapper<ShoppingCart> queryWrapper = new LambdaQueryWrapper<>();
queryWrapper.eq(ShoppingCart::getUserId,BaseContext.getCurrentId());
shoppingCart.setUserId(BaseContext.getCurrentId());
if (dishId != null){
queryWrapper.eq(ShoppingCart::getDishId,shoppingCart.getDishId());
}else {
queryWrapper.eq(ShoppingCart::getSetmealId,shoppingCart.getSetmealId());
}
ShoppingCart one = shoppingCartService.getOne(queryWrapper);
if (one == null){
shoppingCart.setCreateTime(LocalDateTime.now());
shoppingCart.setNumber(1);
shoppingCartService.save(shoppingCart);
one = shoppingCart;
}else {
one.setNumber(one.getNumber() + 1);
shoppingCartService.updateById(one);
}
return R.success(one);
}</code></pre>