[Node.js] - fashe 購物網站
本篇主要介紹 fashe 購物網站 功能及架構,自學完 Node.js 後,找一個電商網站來模仿並加上自己設計,另外加上管理者後台控制功能.
網站應用技術
技術介紹:
- 前端框架:
Bootstrap
- 前端程式語言:
JavaScript
、jQuery
- 後端框架:
Node.js
- 資料庫:
PostgreSQL
- 雲端伺服器:
Heroku
網站功能簡介
網站功能主要切分兩類 使用者、管理者
- 使用者:
- 註冊、登入、修改個人資料
- 選購商品、刪除訂單商品、送出訂單、查看已送出訂單
- 管理者:
- 商品:對商品可以新增、刪除、修改、查詢
- 後台只能有管理者能進入
網站前端介紹:
主要分為4個部分:首頁、商品選購頁面、關於頁面、聯繫頁面
首頁:
關於頁面:
聯繫頁面:
「商品頁面」放在下分跟商品流程一起說明,下面分兩部份解說「使用者註冊和登入」、「商品選購」
使用者註冊和登入
點選右上方註冊即可進入到 「註冊頁面」
註冊成功後網頁會自動導入到 「登入頁面」,而登入後就自動導回首頁
若 email 有重複被註冊,系統也會判定後倒回登入頁面
也可以點選右上方人頭「修改個人資料」:
商品選購:
商品頁面:
商品頁面每頁呈現最多六筆商品,透過分頁管理來呈現
使用者可點選任意商品後,進入商品更詳細的頁面,並且可以點選右方的 size
和 數量
,選購完後點選 ADD CART
即可加入購物車
出現已加入購物車後,右上角購物車就會加入剛剛選購的商品
點擊 「view cart」按鈕就可看到目前購物車內有什麼商品,若買錯也可點擊「垃圾桶」刪除商品,下方訂購者資訊只要登入,系統會自動帶上使用者資訊,點擊按鈕後進到第二階段:
進到第二階段後,主要是讓使用者再次「確認訂單」無誤後即可送出訂單,此夜不能再作修改,若要修改要再回到上一頁做修正
送出訂單後,會到第三階段「訂單完成」頁面,主要是讓使用者看看這次的訂單,但是已經送出了,若有誤要盡快聯繫賣家
訂單查詢:
若使用者要查詢目前已送出過得訂單,可點選右上角 「order」按鈕,查看已出的訂單,會顯示每筆訂單的「總金額」、「訂單時間」、「訂單詳細」
網站後台介紹:
要登入後台介面管理者必須先從前端用「管理者帳號」登入,若透過網址隨意進入,皆會倒回登入頁面要求使用管理者帳號登入
若不是用「管理者」登入,會重新倒回登入頁面,請求重新登入
商品管理頁面:
商品管理頁面,每頁最多呈現五筆,管理者可以對商品進行「刪除」與「修改」
查詢頁面:
商品修改頁面:
商品新增