確認產品數量
跟資料庫比對
加入按鈕程式碼:
到JS官網
https://releases.jquery.com/
選
顯示
貼到程式碼
用開發者工具看是否有報錯
先測試彈出視窗
程式碼
<style>
.special-text {
text-align: center;
background-color: yellowgreen;
}
</style>
<div>
<a href="/">商品列表</a>
<a href="/contact-us">聯絡我們</a>
</div>
<h2>商品列表</h2>
<img src="https://origaminojikan.com/wp-content/uploads/2022/10/origami_50892-500x375.jpg" width="600" height="400" alt="一張圖片">
<table>
<thead>
<tr>
<td>標題</td>
<td>內容</td>
<td>價格</td>
<td></td>
</tr>
</thead>
<tbody>
@foreach ($products as $product)
<tr>
@if ($product->id == 1)
<td class="special-text">{{ $product->title }}</td>
@else
<td>{{ $product->title }}</td>
@endif
<td>{{ $product->content }}</td>
<td style="{{ $product->price <200 ? 'color: red;font-size:22px':''}}">{{ $product->price }}</td>
<td><input class="check_product" type="button" value="確認商品數量" data-id="{{ $product->id }}"></td>
</tr>
@endforeach
</tbody>
</table>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"
integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
crossorigin="anonymous">
</script>
<script>
$('.check_product').on('click',function () {
alert('123')
})
</script>
測試完修改成我們要的功能:
True表示數量夠
加入的程式碼:
<td><input class="check_product" type="button" value="確認商品數量" data-id="{{ $product->id }}"></td>
</tr>
@endforeach
設定路由 Route::post('/products/check-product', 'ProductController@checkProduct');
寫controller跟
程式碼
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\DB;
use App\Models\Product;
class ProductController extends Controller
{
/**
* Display a listing of the resource.
*
* @return \Illuminate\Http\Response
*/
public function index(Request $request)
{
//$data = $this->getDate();
//$data = DB::table('sbl_teams')->get();
$data = DB::table('products')->get();
//dump($data);
return response($data);
}
public function checkProduct(Request $request)
{
$id = $request->all()['id'];
$product = Product::find($id);
if ($product->quantity > 0) {
return response(true);
} else {
return response(false);
}
}
/**
* Show the form for creating a new resource.
*
* @return \Illuminate\Http\Response
*/
public function create()
{
//
}
/**
* Store a newly created resource in storage.
*
* @param \Illuminate\Http\Request $request
* @return \Illuminate\Http\Response
*/
/*public function store(Request $request)
{
$data = $this->getDate();
$newData = $request->all();
array_push($data,$newData);
return response($data);
}*/
public function store(Request $request)
{
$data = $this->getDate(); // 獲取現有数据集合
$newData = $request->all(); // 獲取 POST 请求的數據
$data->push(collect($newData)); // 使用集合的 push 方法
return response($data); // 返回更新後的集合
}
/**
* Display the specified resource.
*
* @param int $id
* @return \Illuminate\Http\Response
*/
public function show($id)
{
//
}
/**
* Show the form for editing the specified resource.
*
* @param int $id
* @return \Illuminate\Http\Response
*/
public function edit($id)
{
//
}
/**
* Update the specified resource in storage.
*
* @param \Illuminate\Http\Request $request
* @param int $id
* @return \Illuminate\Http\Response
*/
public function update(Request $request, $id)
{
$form = $request->all();
$data = $this ->getDate();
$selecteData = $data->where('id',$id)->first();
$selecteData = $selecteData->merge(collect($form));
return response($selecteData);
}
/**
* Remove the specified resource from storage.
*
* @param int $id
* @return \Illuminate\Http\Response
*/
public function destroy($id)
{
$data = $this->getDate();
$data = $data->filter(function ($product) use ($id) {
return $product['id'] != $id;
});
return response($data->values());
}
public function getDate()
{
return collect([
collect([
'id' => 0,
'title' => '測試商品一',
'content' => '這是一個很棒的商品',
'price' => 50
]),
collect([
'id' => 1,
'title' => '測試商品2',
'content' => '這是一個棒的商品',
'price' => 30
]),
]);
}
}
-----------
畫面確認
+
修改資料表的數量來做確認
大家明天見~腸胃炎趕快好~