1. 项目背景与核心需求
校园二手交易平台一直是高校学生群体的刚需。每到毕业季和开学季，大量教材、电子产品、生活用品在校园内流转，但传统的QQ群、微信群交易方式存在信息杂乱、交易风险高、缺乏信用体系等问题。"云享校园"正是为了解决这些痛点而设计的现代化校园二手交易系统。
这个项目采用前后端分离架构，后端使用Python生态中的Django+Flask双框架组合，前端基于Vue.js实现响应式界面。选择这样的技术栈主要基于以下考虑：
- Django提供完善的ORM和Admin后台，适合快速构建数据模型
- Flask轻量灵活，适合实现API接口和微服务
- Vue.js的组件化开发模式与前后端分离架构完美契合
- PyCharm作为Python开发者的首选IDE，提供完整的开发环境支持
2. 技术架构设计
2.1 整体架构方案
系统采用经典的三层架构：
code复制前端层(Vue.js) ←HTTP→ 业务逻辑层(Flask) ←→ 数据访问层(Django ORM)
↑
(RESTful API)
这种架构的优势在于：
- 前后端完全解耦，可独立开发和部署
- Django的ORM提供稳健的数据持久化方案
- Flask灵活的路由系统更适合API开发
- Vue的响应式特性带来流畅的用户体验
2.2 数据库设计
使用Django的models.py定义核心数据模型：
python复制from django.db import models
class User(models.Model):
username = models.CharField(max_length=50, unique=True)
password = models.CharField(max_length=100)
student_id = models.CharField(max_length=20)
phone = models.CharField(max_length=15)
credit_score = models.IntegerField(default=100)
class Product(models.Model):
CATEGORY_CHOICES = [
('book', '教材图书'),
('digital', '数码产品'),
('daily', '生活用品'),
]
seller = models.ForeignKey(User, on_delete=models.CASCADE)
title = models.CharField(max_length=100)
description = models.TextField()
price = models.DecimalField(max_digits=8, decimal_places=2)
category = models.CharField(max_length=20, choices=CATEGORY_CHOICES)
status = models.CharField(max_length=10, default='available')
publish_time = models.DateTimeField(auto_now_add=True)
注意：Django的Model设计要遵循"Fat Models, Thin Views"原则，将业务逻辑尽量放在Model层。
3. 后端实现细节
3.1 Django核心配置
首先配置settings.py关键参数：
python复制INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'corsheaders', # 跨域支持
'rest_framework', # DRF
'trade', # 业务app
]
# 跨域配置
CORS_ALLOW_CREDENTIALS = True
CORS_ALLOW_ALL_ORIGINS = True
3.2 Flask API开发
创建商品查询API示例：
python复制from flask import Flask, jsonify
from flask_cors import CORS
import pymysql
app = Flask(__name__)
CORS(app)
@app.route('/api/products/<category>', methods=['GET'])
def get_products(category):
conn = pymysql.connect(
host='localhost',
user='root',
password='password',
database='campus_trade'
)
cursor = conn.cursor(pymysql.cursors.DictCursor)
cursor.execute(
"SELECT * FROM trade_product WHERE category=%s AND status='available'",
(category,)
)
results = cursor.fetchall()
cursor.close()
conn.close()
return jsonify({'code': 200, 'data': results})
提示：实际项目中应该使用数据库连接池，避免频繁创建连接。
4. 前端Vue实现
4.1 项目初始化
使用Vue CLI创建项目：
bash复制vue create campus-trade-frontend
cd campus-trade-frontend
vue add element-ui # 添加Element UI组件库
4.2 商品列表组件
关键代码示例：
vue复制<template>
<div class="product-list">
<el-row :gutter="20">
<el-col
v-for="product in products"
:key="product.id"
:xs="24" :sm="12" :md="8" :lg="6"
>
<el-card shadow="hover">
<img :src="product.image" class="product-image">
<div class="product-info">
<h3>{{ product.title }}</h3>
<p class="price">¥{{ product.price }}</p>
<el-button type="primary" @click="showDetail(product)">
查看详情
</el-button>
</div>
</el-card>
</el-col>
</el-row>
</div>
</template>
<script>
export default {
data() {
return {
products: []
}
},
async created() {
const res = await this.$http.get('/api/products/book')
this.products = res.data.data
}
}
</script>
5. 开发环境配置
5.1 PyCharm专业版设置
- 安装Python插件和Vue.js插件
- 配置Django支持：File → Settings → Languages & Frameworks → Django
- 启用JavaScript支持并配置ESLint
- 设置Database工具连接MySQL
5.2 常见环境问题解决
问题1：Django与Flask端口冲突
- 解决方案：修改Flask默认端口
python复制if __name__ == '__main__':
app.run(port=5001) # 避免与Django的8000冲突
问题2：跨域访问被阻止
- 解决方案：安装django-cors-headers
bash复制pip install django-cors-headers
6. 项目部署方案
6.1 生产环境架构
推荐部署方案：
code复制Nginx(前端静态文件+反向代理)
↑
uWSGI(Django) ↑
↑ Gunicorn(Flask)
MySQL Redis(缓存)
6.2 Docker化部署
编写Docker-compose.yml示例：
yaml复制version: '3'
services:
db:
image: mysql:5.7
environment:
MYSQL_ROOT_PASSWORD: password
MYSQL_DATABASE: campus_trade
ports:
- "3306:3306"
backend:
build: ./backend
ports:
- "8000:8000"
depends_on:
- db
frontend:
build: ./frontend
ports:
- "8080:80"
7. 项目优化方向
-
性能优化：
- 添加Redis缓存热门商品数据
- 实现Elasticsearch全文搜索
- 使用Celery异步处理图片上传
-
安全增强：
- JWT身份验证替代Session
- 敏感数据加密存储
- 接口限流防刷
-
用户体验：
- 实现WebSocket即时通讯
- 添加商品收藏功能
- 开发微信小程序版本
在实际开发中，我建议先实现核心交易流程，再逐步添加这些增强功能。Django Admin可以快速搭建后台管理系统，初期不必花费太多时间在前端管理界面上。Flask的灵活性让我们可以轻松添加新的API接口，而不会影响现有功能。