虚拟试衣间-云尚衣橱小程序-衣橱管理实现

衣橱管理实现

目标 (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) {// 如果需要用户信息&