Phoenix's Blog

Node.js | fashe購物網站

2019-09-06

[Node.js] - fashe 購物網站

本篇主要介紹 fashe 購物網站 功能及架構,自學完 Node.js 後,找一個電商網站來模仿並加上自己設計,另外加上管理者後台控制功能.

網站應用技術

技術介紹:

  • 前端框架: Bootstrap
  • 前端程式語言:JavaScriptjQuery
  • 後端框架: Node.js
  • 資料庫:PostgreSQL
  • 雲端伺服器:Heroku

網站功能簡介

網站功能主要切分兩類 使用者管理者

  • 使用者:
    • 註冊、登入、修改個人資料
    • 選購商品、刪除訂單商品、送出訂單、查看已送出訂單
  • 管理者:
    • 商品:對商品可以新增、刪除、修改、查詢
    • 後台只能有管理者能進入

網站前端介紹:

主要分為4個部分:首頁、商品選購頁面、關於頁面、聯繫頁面

  • 首頁:

  • 關於頁面:

  • 聯繫頁面:

「商品頁面」放在下分跟商品流程一起說明,下面分兩部份解說「使用者註冊和登入」、「商品選購」

使用者註冊和登入

點選右上方註冊即可進入到 「註冊頁面」

註冊成功後網頁會自動導入到 「登入頁面」,而登入後就自動導回首頁

若 email 有重複被註冊,系統也會判定後倒回登入頁面

也可以點選右上方人頭「修改個人資料」:

商品選購:

商品頁面:

商品頁面每頁呈現最多六筆商品,透過分頁管理來呈現
使用者可點選任意商品後,進入商品更詳細的頁面,並且可以點選右方的 size數量 ,選購完後點選 ADD CART 即可加入購物車

出現已加入購物車後,右上角購物車就會加入剛剛選購的商品

點擊 「view cart」按鈕就可看到目前購物車內有什麼商品,若買錯也可點擊「垃圾桶」刪除商品,下方訂購者資訊只要登入,系統會自動帶上使用者資訊,點擊按鈕後進到第二階段:

進到第二階段後,主要是讓使用者再次「確認訂單」無誤後即可送出訂單,此夜不能再作修改,若要修改要再回到上一頁做修正

送出訂單後,會到第三階段「訂單完成」頁面,主要是讓使用者看看這次的訂單,但是已經送出了,若有誤要盡快聯繫賣家

訂單查詢:

若使用者要查詢目前已送出過得訂單,可點選右上角 「order」按鈕,查看已出的訂單,會顯示每筆訂單的「總金額」、「訂單時間」、「訂單詳細」

網站後台介紹:

要登入後台介面管理者必須先從前端用「管理者帳號」登入,若透過網址隨意進入,皆會倒回登入頁面要求使用管理者帳號登入

若不是用「管理者」登入,會重新倒回登入頁面,請求重新登入

商品管理頁面:

商品管理頁面,每頁最多呈現五筆,管理者可以對商品進行「刪除」與「修改」

查詢頁面:

商品修改頁面:

商品新增

fashe 網站 Demo:

fashe 網站連結

tags: Node.js
Tags: Node.js