本專案為「前後台分離」、「前後端分離」:
| 📁 資料夾名稱 | 📝 說明 | 🔗 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 |
- 開發相依項目（devDependencies）
| 📌 項目 | 🏷️ 版本 |
|---|---|
| @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- 進入專案目錄
cd pxzoo- 前台安裝套件
npm install- 運行前台專案
npm run dev本專案開發者及主責頁面/功能:
- SkerLeon: 園區介紹、知識學堂/優惠券產出、會員中心/購票紀錄的 QRCODE 產出
- yhkekeke: 立即購票
- huang607 : 首頁、Header、Footer、Fixed
- Hsuan1128: 登入、註冊、會員中心(包含會員資訊、購票紀錄、優惠票券、會員留言)
- Ying-Jung189 : 動物資訊、動物內頁、最新消息、消息內頁
- wenchieh0119 : 人氣投票、知識學堂