வணக்கம்,我是Charlie!
在Day11當中,我們完成了總商品的API以及分類,而今天我們將完成商品詳情的後端API。
================================◉‿◉=================================
首先在urls.py中新增productDetail的URL pattern:
url(r'/detail/(?P<productID>[\w]{1,55})$',views.product),
接著在views.py中,新增productID這個參數:
def product(request,categoryID = None,productID = None):
接著在product view當中新增返回詳情的程式碼,如果productID不存在的話則返回badRequest:
if request.method == "GET" and productID is not None:
product = Product.objects.filter(id = productID)
if not product:
return R.badRequest("productID does not exist")
product = product[0]
return R.ok(product.toJson())
接著使用productID來做測試:
接著是前端的部分,因為我們的toJson中有包含了productID,所以可以用productID去拼接URL。
首先在indexPage.vue的地方,把img用a包起來,並使用:href綁定URL:
<a :href="'/#/productDetail/' + product.id"><img :src="'http://localhost:8000' + product.img" alt="" style="width:200px;height: 200px;"></a>
接著在product.js當中,新增getDetail方法:
export function getDetail(pid){
return axios.get(`http://${host()}:${port()}/product/detail/${pid}`)
}
接著在productDetail當中,新增item model跟created方法:
data(){
return {
isLogin:false,
amount: 1,
item: {},
}
},
created(){
var pid = this.$route.params.pid
getDetail(pid).then((response) => {
if(response.data.code == STATUS_OK){
this.item = response.data.data
}
else{
this.$fire({type:'error',text:response.data.data}).then(() => {
window.location.href = "/#/index"
window.location.reload
})
}
})
}
然後在上面的template當中插入資料:
// img
<img :src="'http://localhost:8000' + item.img" alt="" style="width: 200px;height: 200px;">
// productName
<b-row>
<h2>{{ item.name }}</h2>
</b-row>
// productPrice
<b-row>
<h3>${{ item.price }}</h3>
</b-row>
// spin
<b-row>
<b-col cols="3">
<b-form-spinbutton v-model="amount" min="1" :max="item.stored_amount"></b-form-spinbutton>
</b-col>
<b-col cols="3">
<span style="color:red;">剩餘數量: {{ item.stored_amount }}</span>
</b-col>
</b-row>
// info
<b-row style="padding-left:250px;" v-html="item.info">
</b-row>
就可以看到商品載入了:
另外還有種類商品頁的部分,一樣將img用a包覆起來:
<b-col v-for="product in products" :key="product.id">
<a :href="'/#/productDetail/' + product.id"><img :src="'http://localhost:8000' + product.img" alt="" style="width:200px;height: 200px;"></a>
<h4 class="productTitle">{{ product.name }}</h4>
<h5 class="productPrice">$ {{product.price}}</h5>
<div>
<b-button variant="info">
加入購物車
</b-button>
</div>
</b-col>
================================◉‿◉=================================
Day12結束了!在今天我們完成了商品詳情的顯示,而明天我們將完成加入購物車、購物車商品的API,See ya next day!