iT邦幫忙

2021 iThome 鐵人賽

DAY 3
0
Modern Web

30天肝出購物網站系列 第 3

Day03: 03 - 頁面刻劃(2) - 登入、註冊、訂單

Hi,こんにちは,我是Charlie!
在Day02當中,我們開始了新專案,並且刻出了首頁。
今天,我們將持續的刻畫頁面,做出登入、註冊、訂單頁面。

================================◉‿◉=================================

首先,是登入頁面的部份。
登入頁面可以使用b-form完成,同理註冊也是。
b-form可以設置@submit跟@reset方法,submit就是表單提交時的動作,而reset就是表單清空的動作,標籤可以寫成:

<b-form @submit="onSubmit" @reset="onReset">
					
</b-form>

而在methods中必須同步新增onSubmit跟onReset方法:

 methods:{
    onSubmit(){
      alert("on submit!")
    },
    onReset(){
      alert("on reset!")
    }
 }

而b-form裡面可以設置b-form-group,b-form-group可以設置label,也就是input的label,語法為以下格式:

<b-form-group label=”用戶名:” label-for=”username” id=”username_group”>
</b-form-group>

再來是b-form-input,這個是b-form當中的輸入框,可以設置type(輸入框屬性)、placeholder(“提示文字”),還可以設置required屬性(可選),讓input可以設置為必須填入。也可以設置v-model,讓input綁定Vue app data。語法可以像下面一樣:

<b-form-input id=”input_username” v-model=”username” placeholder=”請輸入用戶名” required>

</b-form-input>

再來是b-button的type,在b-form當中有submit跟reset方法,所以我們的b-button會用以下兩種語法:

<b-button type=”submit” variant=”info”>登入</b-button>
<b-button type=”reset” variant=”danger”>清空</b-button>

所以我們可以這樣寫登入頁面:

<b-form @submit="onSubmit" @reset="onReset" style="width:100%;">
	<b-form-group
	id="username_group"
	label="用戶名:"
	label-for="username"
	style="margin:10px;"
	>
		<b-form-input
		id="username"
		placeholder="請輸入用戶名"
		v-model="username"
		>
		</b-form-input>
	</b-form-group>
	<b-form-group
	id="password_group"
	label="密碼:"
	label-for="password"
	style="margin:10px;"
	>
		<b-form-input
		id="password"
		placeholder="請輸入密碼"
		type="password"
		v-model="password"
		>
		</b-form-input>
	</b-form-group>
	<b-button type="submit" variant="info" style="width:80px;margin:10px;">登入</b-button>
	<b-button type="reset" variant="danger" style="width:80px;margin:10px;">清空</b-button>
</b-form>

而最終成品如下:
https://ithelp.ithome.com.tw/upload/images/20210917/20141666VCiQuDIXgM.png

而添加required參數後,當欄位為空時,會出現提示訊息:
https://ithelp.ithome.com.tw/upload/images/20210917/20141666l9kggetE3G.png

另外註冊頁面如下:
https://ithelp.ithome.com.tw/upload/images/20210917/201416666A7E3btI3m.png

比較要注意的是,註冊頁面必須加上一些validation,例如:

<b-form-group
id="address_group"
label="地址:"
label-for="address"
style="margin:10px;"
>
	<b-form-input
	id="address"
	placeholder="請輸入地址"
	v-model="address"
	required
	>
	</b-form-input>
	<div v-show="!isValid">
		{{ addressErrMsg }}
	</div>
</b-form-group>

因為註冊驗證需要前後端都驗證,所以會新增ErrMsg,讓輸入資料錯誤時會顯示出訊息,並且避免送往後端造成崩潰。

再來是訂單的部分,訂單的頁面設計再放一次:
https://ithelp.ithome.com.tw/upload/images/20210917/20141666LiBuPDJJLG.png

上面的搜尋部分一樣可以使用form完成,而下面的可以使用table跟select完成。

首先是上面的search,這邊比較值得注意的是,如果是要使用inline-form,並且有多個元素在同一列,必須使用b-row跟b-col包裹,才能使其同列,

所以上面的b-form程式碼會像這樣:

<b-form @submit="onSearchSubmit" inline>
	<b-row>
		<b-col cols="9">
			<b-form-input
			id="searchText"
			placeholder="搜尋訂單編號"
			v-model="searchText"
			required
			>
			</b-form-input>
		</b-col>
		<b-col cols="1">
			<b-button type="submit" variant="info"><img src="@/assets/search.svg" alt="" style="width:20px;height: 20px;"></b-button>
		</b-col>
	</b-row>
</b-form>

這裡的搜尋icon同樣也是使用iconhub的圖標庫。

再來是下面的訂單列,首先是排序的部分,一樣使用b-row跟b-col,然後使用b-form-select:

<b-row>
	<b-col cols="1">
		<span>sort by</span>
	</b-col>
	<b-col cols="3">
		<b-form-select
		id="sortOrder"
		:options="[{ text: '排序', value: null }, '日期', '編號', '商品數量']"
		:value="null"
		></b-form-select>
	</b-col>
</b-row>

其中的options則是選單值,text中放入預設顯示的內容。

再來是列表,這裡我們使用b-table,b-table可以使用v-bind:items,items為Vue app data,另外我們需要b-table的fields屬性,因為後端傳回的資料不會是中文,field可以這樣設置:

fields:[{key:”orderno”,label:”訂單編號”}]

所以除了button以外,可以這樣寫:

/*template*/
<b-table striped hover :items="orders" :fields="fields"></b-table>

// vue
data(){
  return {
    isLogin:false,
    searchText:"",
    fields:[{key:"orderno",label:"訂單編號"},{key:"detail",label:"詳情"},{key:"date",label:"日期"}],
    orders:[
      {
        orderno:"0a00b0c",
        detail: "耳機 x1 ...",
        date: "2021-09-17 01:45 a.m.",
      }
    ]
  }
},

而有關詳情的部分,要用template來實現,首先新增一個orderId,並且在fields當中增加:

fields:[{key:"orderno",label:"訂單編號"},{key:"detail",label:"詳情"},{key:"date",label:"日期"},{key:"orderId",label:"前往"}],
orders:[
  {
    orderno:"0a00b0c",
    detail: "耳機 x1 ...",
    date: "2021-09-17 01:45 a.m.",
    orderId:"1"
  }
]

接著在b-table當中新增template,設定button:

<template #cell(orderId)="data">
	<b-button variant="info" @click="renderDetail(data.value)">前往詳情</b-button>
</template>

renderDetail方法則設置在methods當中。

而新增完後,最終結果如下:
https://ithelp.ithome.com.tw/upload/images/20210917/20141666xtrthijoXy.png

================================◉‿◉=================================

Day03結束了!今天我們完成了登入、註冊以及訂單,而明天我們將完成訂單詳情,還有輪播圖跟Django後端的部分,See ya next day!


上一篇
Day02: 02 - 前端 - 開啟專案、頁面刻劃、bootstrap-vue使用
下一篇
Day04: 04 - 頁面刻劃(3) -商品詳情、訂單詳情、個人資料
系列文
30天肝出購物網站30

尚未有邦友留言

立即登入留言