衣櫥管理實現

目標 (Goal):

• 用戶 (User): 能通過 UniApp 小程序上傳衣服圖片。

• 后端 (Backend): 接收圖片，存到云存儲，并將圖片信息（URL、用戶ID等）存入數據庫。

• 用戶 (User): 能在小程序里看到自己上傳的所有衣服圖片列表。

技術棧細化 (Refined Tech Stack for this Phase):

• 前端 (Frontend): UniApp (Vue 語法)

• 后端 (Backend): Node.js, Express.js

• 數據庫 (Database): MongoDB (使用 Mongoose ODM 操作會更方便)

• 圖片存儲 (Image Storage): 騰訊云 COS / 阿里云 OSS (必須使用云存儲)

• HTTP 請求庫 (Frontend): UniApp 內置的 uni.request 或 uni.uploadFile

• 文件上傳處理 (Backend): multer 中間件

• 云存儲 SDK (Backend): tcb-admin-node (如果用騰訊云開發) 或 cos-nodejs-sdk-v5 (騰訊云 COS) 或 ali-oss (阿里云 OSS)

• 認證 (Authentication): JWT (JSON Web Tokens)

1. 后端 (Node.js / Express) 實現

項目結構 (示例):

wardrobe-backend/
├── node_modules/
├── config/
│   ├── db.js         # 數據庫連接
│   └── cloudStorage.js # 云存儲配置 (密鑰等) - 不要硬編碼！用環境變量
├── controllers/
│   ├── authController.js
│   └── wardrobeController.js
├── middleware/
│   ├── authMiddleware.js  # JWT 驗證
│   └── uploadMiddleware.js # Multer 配置
├── models/
│   ├── User.js         # Mongoose User Schema
│   └── Clothes.js      # Mongoose Clothes Schema
├── routes/
│   ├── authRoutes.js
│   └── wardrobeRoutes.js
├── .env              # 環境變量 (數據庫URI, 云存儲密鑰, JWT Secret) - 加入 .gitignore
├── .gitignore
├── package.json
└── server.js         # Express 應用入口

關鍵代碼實現點:

(a) server.js (入口文件)

require('dotenv').config(); // Load environment variables
const express = require('express');
const cors = require('cors');
const connectDB = require('./config/db');
const authRoutes = require('./routes/authRoutes');
const wardrobeRoutes = require('./routes/wardrobeRoutes');// Connect to Database
connectDB();const app = express();// Middleware
app.use(cors()); // 允許跨域請求 (小程序需要)
app.use(express.json()); // 解析 JSON body
app.use(express.urlencoded({ extended: false })); // 解析 URL-encoded body// Routes
app.use('/api/auth', authRoutes);
app.use('/api/wardrobe', wardrobeRoutes); // 衣櫥相關路由// Basic Error Handling (can be improved)
app.use((err, req, res, next) => {console.error(err.stack);res.status(500).send({ message: 'Something broke!', error: err.message });
});const PORT = process.env.PORT || 5000;
app.listen(PORT, () => console.log(`Server running on port ${PORT}`));

(b) models/User.js & models/Clothes.js (Mongoose Schemas)

// models/User.js
const mongoose = require('mongoose');
const UserSchema = new mongoose.Schema({openid: { type: String, required: true, unique: true },// session_key: { type: String, required: true }, // 按需存儲，注意安全nickname: { type: String },avatarUrl: { type: String },// ... other fields
}, { timestamps: true });
module.exports = mongoose.model('User', UserSchema);// models/Clothes.js
const mongoose = require('mongoose');
const ClothesSchema = new mongoose.Schema({userId: { type: mongoose.Schema.Types.ObjectId, ref: 'User', required: true, index: true },imageUrl: { type: String, required: true }, // 圖片在云存儲的URLtags: { type: [String], default: [] },      // AI識別標簽 (暫時為空或默認值)notes: { type: String, default: '' },      // 用戶備注// ... 其他未來可能添加的字段 (顏色、類型等)
}, { timestamps: true });
module.exports = mongoose.model('Clothes', ClothesSchema);

(c) middleware/authMiddleware.js (JWT 驗證)

const jwt = require('jsonwebtoken');
const User = require('../models/User');const protect = async (req, res, next) => {let token;if (req.headers.authorization && req.headers.authorization.startsWith('Bearer')) {try {// Get token from headertoken = req.headers.authorization.split(' ')[1];// Verify tokenconst decoded = jwt.verify(token, process.env.JWT_SECRET); // 使用環境變量中的密鑰// Get user from the token (select -password if you store passwords)req.user = await User.findById(decoded.id).select('-session_key'); // 附加用戶信息到 reqif (!req.user) {return res.status(401).json({ message: 'Not authorized, user not found' });}next();} catch (error) {console.error(error);res.status(401).json({ message: 'Not authorized, token failed' });}}if (!token) {res.status(401).json({ message: 'Not authorized, no token' });}
};module.exports = { protect };

(d) routes/authRoutes.js & controllers/authController.js (登錄邏輯)

// routes/authRoutes.js
const express = require('express');
const { loginUser } = require('../controllers/authController');
const router = express.Router();
router.post('/login', loginUser);
module.exports = router;// controllers/authController.js
const axios = require('axios');
const jwt = require('jsonwebtoken');
const User = require('../models/User');const WX_APPID = process.env.WX_APPID;       // 小程序 AppID
const WX_SECRET = process.env.WX_SECRET;   // 小程序 Secret// Generate JWT
const generateToken = (id) => {return jwt.sign({ id }, process.env.JWT_SECRET, {expiresIn: '30d', // Token 有效期});
};const loginUser = async (req, res) => {const { code, userInfo } = req.body; // 前端發送 wx.login 的 code 和用戶信息if (!code) {return res.status(400).json({ message: 'Code is required' });}try {// 1. 用 code 換取 openid 和 session_keyconst url = `https://api.weixin.qq.com/sns/jscode2session?appid=${WX_APPID}&secret=${WX_SECRET}&js_code=${code}&grant_type=authorization_code`;const response = await axios.get(url);const { openid, session_key } = response.data;if (!openid) {return res.status(400).json({ message: 'Failed to get openid', error: response.data });}// 2. 查找或創建用戶let user = await User.findOne({ openid });if (!user) {// 如果需要用戶信息&