遇到的一个小问题,记录下
在学习vue,向后端发送数据的时候,需要根据发送数据的不同,来决定发送写法
新增:目前在做的项目中,新增,只是给后端传了一个id过去了,所以前端写法是:
this.axios.post(`http://127.0.0.1:8000/api/cart/store`, {product_id: product_id})
.then((res) => {this.$router.push({name: 'index'})
后端路由:
Route::post('store', 'CartController@store');
后端控制器对应的用Request接收,
public function store(Request $request){}
删除写法略有不同,前端为:
this.axios.delete(`http://127.0.0.1:8000/api/cart/destroy/${id}`)
.then((res) => {this.init()})
后端路由:
Route::delete('destroy/{id}', 'CartController@destroy');
后端控制器
public function destroy($id)
{
Cart::destroy($id);
return Cart::cart_count();
}
状态切换前端模版写法:
<div class="xm-input-number">
<div class="input-sub" @click="change_num(cart,'dec')"
:class="{active:cart.num >1}"></div>
<div class="input-num"><span>{{cart.num}}</span></div>
<div class="input-add active"@click="change_num(cart,'add')"></div>
</div>
两个小点需要注意:
-
@click="change_num(cart,'dec')方法后面是带参数的,cart是值,dec是type; -
:class="{active:cart.num >1}"当cart.num >1的时候,class="active"才生效;
前端路由:
change_num(cart, type) {
var data = {
id: cart.id,
type: type
}
if (type == 'dec' && cart.num == 1) {return false}
this.axios.patch('http://127.0.0.1:8000/api/cart/change_num', data)
.then((res) => {this.init()})}
data是封装了需要传给后端的id和type,
后端路由:
Route::patch('change_num', 'CartController@change_num');
后端控制器:
public function change_num(Request $request)
{
if ($request->type == 'add') {
Cart::where('id', $request->id)->increment('num');
} elseif ($request->type == 'dec') {
Cart::where('id', $request->id)->decrement('num');
}
return Cart::cart_count();
}
