第三十天：UI切版 & 元件-第五部分情境练习(注册表单、产品清单、登入页面)

铁人赛的最後一天
以三个前端比较常见的情境练习需求来总结第五部分

今天的内容

一、注册表单
二、产品清单
三、登入页面
四、总结

一、注册表单

按下上方的注册後，会弹出注册表单的视窗

1. 包含「帐号」、「密码」、「密码确认」、「县市」、「同意服务条款」
2. 每个栏位皆为必填，如果其中有个栏位没填写，或者没有勾选「同意服务条款」，送出後，会跳出错误讯息「有栏位尚未正确填写」
3. 确认密码必须和密码相同，格式为「至少八个字元，包含一个英文字母和数字」
4. 县市的资料包含所有的台湾县市，可以做文字筛选
5. 点选文字terms & conditions，会跳出服务条款的内容

二、产品清单

建立一个产品清单的页面
可以透过上方的筛选栏位，筛选下方的资料

(一)栏位筛选

1. 商品名称：包含输入的文字，没填写代表不限
2. 价钱、日期：介於头尾区间，没填写代表无限小或无限大
3. 商品分类：有勾选的分类
4. 按下筛选後，依照上方的栏位筛选条件进行筛选
5. 按下清除筛选後，清除所有的筛选条件

(二)编辑功能

将第二十八天的编辑功能，加上「变更产品预览图的功能」

按下「修改」後，才会将变更套用到对应的资料上

三、登入页面

将第十六天的登入表单改良
登入的过程中，显示载入中画面

四、总结

虽然铁人赛结束了
不过还有部分的内容未写完
明天补完比赛的心得後，接着往下谈到全域资料和SSR模式