Vue 出一個女友吧!-產品頁面

前言

接下來是製作產品相關的 API,這邊將會講到商品建立、取得商品列表、修改商品以及刪除商品

產品取得

首先我們先來製作取得產品列表,那麼先前已經製作了 Products 的元件,所以就直接在這邊執行 AJAX 取得產品列表

1
2
3
4
5
6
7
8
9
10
11
12
13
getProduct() {
const vm = this;
const url = `${process.env.VUE_APP_HEXURL}/api/${process.env.VUE_APP_HEXNAME}/admin/products/all`
vm.$http.get(url)
.then((response) => {
if (response.data.success) {
vm.products = response.data.products;
}
})
.catch((error) => {

});
},

並且在一進入畫面時就透過 created 生命週期執行 AJAX 行為,成功的話就可以在 Vue Tools 上找到回傳回來的資料

Image

但是這邊 AJAX 的 URL 會稍微改一下,不使用 /all,而是使用 ${process.env.VUE_APP_HEXURL}/api/${process.env.VUE_APP_HEXNAME}/admin/products

接下來就是將資料渲染到畫面上,這邊直接用 bootstrap table 元件來做渲染

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<template lang="pug">
div
table.table
thead
tr
th(width="150px") 分類
th 標題
th(width="100px") 單位
th(width="100px") 原價
th(width="100px") 售價
th(width="150px") 狀態
th(width="150px") 功能
tbody
tr(v-for='item,key in products', :key='key')
td {{ item.category }}
td {{ item.title }}
td {{ item.unit }}
td.text-right {{ item.price }}
td.text-right {{ item.origin_price }}
td
span(v-if="item.is_enabled") 啟用
span(v-else) 關閉
td
a(href="#").btn.btn-outline-primary 編輯
a(href="#").btn.btn-outline-primary 刪除
</template>

產品新增&產品刪除

產品列表就這樣子做完哩,接下來就是要做產品新增的部分,那麼我們會使用到 Bootstrap 現成的 Model 來製作,所以模板就會透過 click 事件來開啟 Model,例如

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
.text-right
a(href="#", @click="openModel('new')").btn.btn-outline-primary 新增
table.table
thead
tr
th(width="150px") 分類
th 標題
th(width="100px") 單位
th(width="100px") 原價
th(width="100px") 售價
th(width="150px") 狀態
th(width="150px") 功能
tbody
tr(v-for='item,key in products', :key='key')
td {{ item.category }}
td {{ item.title }}
td {{ item.unit }}
td.text-right {{ item.price }}
td.text-right {{ item.origin_price }}
td
span(v-if="item.is_enabled") 啟用
span(v-else) 關閉
td
a(href="#", @click="openModel('edit')").btn.btn-outline-primary 編輯
a(href="#", @click="openModel('delete')").btn.btn-outline-primary 刪除

然後透過 jQuery 的方法來開啟 Models

1
2
3
openModel(status) {
$('#productModal').modal();
}

此時應該會發現 $ is not defined, 所以我們在 JS 最前方要寫入

1
2
/* global $ */ // 為了解決 ESLINT 提示問題
import $ from 'jquery';

這樣就可以開啟 Model哩

開啟

另外我在 openModel 這邊稍微增加了一點邏輯判斷

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
openModel(status) {
switch(status){
case 'edit':
this.modelTitle = '修改產品';
$('#productModal').modal();
break;
case 'delete':
this.modelTitle = '刪除產品'
$('#delProductModal').modal();
break;
default:
this.modelTitle = '新增產品';
$('#productModal').modal();
break;
}

接下來開始製作產品新增的方法,先新增一個方法叫 updataProducts並且新增與修改都會共用同一個方法,所以內容如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
const vm = this;
let url = `${process.env.VUE_APP_HEXURL}/api/${process.env.VUE_APP_HEXNAME}/admin/product`
if (vm.httpMethods === 'put') {
url = `${process.env.VUE_APP_HEXURL}/api/${process.env.VUE_APP_HEXNAME}/admin/product/${vm.tempProduct.id}`
}
vm.$http[vm.httpMethods](url, {data: vm.tempProduct})
.then((response) => {
if (response.data.success) { // 確保資料更改或建立在隱藏 Model
$('#productModal').modal('hide');
vm.getProduct(); // 新增或修改之後就重新取的資料
}
})
.catch((error) => {
console.log(error);
$('#productModal').modal('hide');
})

所以這邊最終的 PUG 如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
div
.text-right
a(href="#", @click="openModel('new',{})").btn.btn-outline-primary 新增
table.table
thead
tr
th(width="150px") 分類
th 標題
th(width="100px") 單位
th(width="100px") 原價
th(width="100px") 售價
th(width="150px") 狀態
th(width="150px") 功能
tbody
tr(v-for='item,key in products', :key='key')
td {{ item.category }}
td {{ item.title }}
td {{ item.unit }}
td.text-right {{ item.price }}
td.text-right {{ item.origin_price }}
td
span(v-if="item.is_enabled") 啟用
span(v-else) 關閉
td
a(href="#", @click="openModel('edit', item)").btn.btn-outline-primary 編輯
a(href="#", @click="openModel('delete')").btn.btn-outline-primary 刪除

產品刪除

產品刪除就比較簡單一點了,先建立一個 deleteProducts 方法。然後依照 API 文件撰寫即可

1
2
3
4
5
6
7
8
9
10
11
12
13
14
const vm = this;
const url = `${process.env.VUE_APP_HEXURL}/api/${process.env.VUE_APP_HEXNAME}/admin/product/${vm.tempProduct.id}`
vm.$http[vm.httpMethods](url)
.then((response) => {
console.log(response);
if (response.data.success) {
$('#delProductModal').modal('hide');
vm.getProduct();
}
})
.catch((error) => {
console.log(error);
$('#delProductModal').modal('hide');
})

那這邊就是一個大概的產品頁面哩,下一章節會來講如何加入預載 loading 效果

補充

checkbox 預設在使用的時候會是 truefalse,如果希望變成 10,那就要這樣子寫

1
input(type="checkbox", :true-value='1', :false-value='0')

Liker 讚賞

這篇文章如果對你有幫助,你可以花 30 秒登入 LikeCoin 並點擊下方拍手按鈕(最多五下)免費支持與牡蠣鼓勵我。
或者你可以也可以請我「喝一杯咖啡(Donate)」。

Buy Me A Coffee Buy Me A Coffee

Google AD

撰寫一篇文章其實真的很花時間,如果你願意「關閉 Adblock (廣告阻擋器)」來支持我的話,我會非常感謝你 ヽ(・∀・)ノ