本專案為「前後台分離」、「前後端分離」:
| 📁 資料夾名稱 |
📝 說明 |
🔗 GitHub 連結 |
| g4 |
儲存所有專案 |
---- |
| - pxzoo |
前台內容 |
前台 |
| - back |
後台內容 |
後台 |
| - api |
PHP 內容 |
API |
| - img |
資料庫的圖片內容 |
見 API 的 img 資料夾 |
遊客 即可瀏覽動物園的園區資訊、動物資料、最新消息，以及透過人氣投票支持喜歡的動物。- 遊客可註冊成為
會員，登入後可以留下評論與檢舉評論，可透過知識學堂取得優惠券，並且隨時進行線上購票付款流程，安排探索行程，然後在會員中心修改資料、檢視自己的訂單紀錄、優惠紀錄、評論紀錄。
服務櫃台人員 能使用網站協助遊客取得所需的訊息，簡化並加速遊客入園流程。
- 專案運行方式是使用
Node.js、npm、Vue vite。
- 核心相依項目（dependencies）
| 📌 項目 |
🏷️ 版本 |
| @chenfengyuan/vue-qrcode |
^2.0.0 |
| aos |
^2.3.4 |
| axios |
^1.6.7 |
| pinia |
^2.1.7 |
| view-ui-plus |
^1.3.15 |
| vue |
^3.3.11 |
| vue-cropper |
^1.1.1 |
| vue-native-websocket |
^2.0.15 |
| vue-qrcode |
^2.2.2 |
| vue-router |
^4.2.5 |
| ws |
^8.16.0 |
| 📌 項目 |
🏷️ 版本 |
| @vitejs/plugin-vue |
^4.5.2 |
| sass |
^1.70.0 |
| vite |
^5.0.10 |
| 📌 類別 |
🔧 技術 |
| 前端工具 |
CSS、HTML、JS、AJAX、Vue.js、View Design、pinia、chart.js |
| 後端工具 |
PHP、MySQL |
| 程式環境與工具 |
Sass、VSCode、MySQL Workbench、Wampserver、Vue Vite |
| 版控工具 |
git、GitHub、Sourcetree |
| 設計與專案管理工具 |
Figma、TimeTree |
| 📁 資料夾名稱 |
📝 說明 |
| css |
scss 轉檔後 css 檔案放置處 |
| page |
圖片放置處 |
| public |
圖片放置處(檔名不會隨打包改變) |
| src |
資源放置處 |
| - components |
vue 組件放置處 |
| - router |
index.js 放置處 |
| - stores |
pinia 檔案放置處 |
| - views |
畫面放置處 |
| - assets |
靜態資源放置處 |
| -- images |
圖片放置處 |
| -- js |
共用 .js 放置處 |
| -- scss |
scss 檔案放置處 |
帳號： PxZoOexample
密碼： PxZoOexample
- 前台需要登入才能使用的功能有:
- 會員中心
- 首頁 | 評論、檢舉
- 立即購票
- 知識學堂 | 領取優惠券
- 取得前台專案
git clone https://github.com/SkerLeon/pxzoo.git
- 進入專案目錄
- 前台安裝套件
- 運行前台專案
本專案開發者及主責頁面/功能:
- SkerLeon: 園區介紹、知識學堂/優惠券產出、會員中心/購票紀錄的 QRCODE 產出
- yhkekeke: 立即購票
- huang607 : 首頁、Header、Footer、Fixed
- Hsuan1128: 登入、註冊、會員中心(包含會員資訊、購票紀錄、優惠票券、會員留言)
- Ying-Jung189 : 動物資訊、動物內頁、最新消息、消息內頁
- wenchieh0119 : 人氣投票、知識學堂