Django+Vue全栈旅游管理系统开发实战-代码聚汇网

Django+Vue全栈旅游管理系统开发实战

眠子子子

1. 项目概述：Django+Vue全栈旅游计划管理系统

这个全栈项目采用Django作为后端框架，Vue.js作为前端框架，构建了一个功能完整的个人旅游计划管理平台。我在实际开发中发现，这种技术组合特别适合需要快速迭代的中小型Web应用——Django自带强大的ORM和Admin后台，能快速搭建数据模型；而Vue的组件化开发则让前端交互变得灵活高效。

系统核心功能包括：

旅游行程的创建/编辑/删除
景点信息管理与路线规划
预算计算与费用记录
多设备同步与分享功能

技术选型心得：Django的auth模块直接解决了用户系统难题，而Vue的响应式特性完美适配动态行程调整的需求。这个组合避免了重复造轮子，让开发者能聚焦业务逻辑。

2. 技术架构设计

2.1 前后端分离方案

采用典型的RESTful API交互模式：

code复制Django后端 <--JSON--> Vue前端

我在项目中使用Django REST framework构建API，实测发现这三个配置最关键：

python复制# settings.py
REST_FRAMEWORK = {
    'DEFAULT_AUTHENTICATION_CLASSES': [
        'rest_framework.authentication.SessionAuthentication',
        'rest_framework.authentication.TokenAuthentication'
    ],
    'DEFAULT_PERMISSION_CLASSES': [
        'rest_framework.permissions.IsAuthenticated'
    ]
}

2.2 数据库设计要点

通过Django模型定义核心数据关系：

python复制class Trip(models.Model):
    user = models.ForeignKey(User, on_delete=models.CASCADE)
    title = models.CharField(max_length=100)
    start_date = models.DateField()
    end_date = models.DateField()
    
class Destination(models.Model):
    trip = models.ForeignKey(Trip, on_delete=models.CASCADE)
    name = models.CharField(max_length=100)
    arrival_time = models.DateTimeField()
    coordinates = models.JSONField()  # 存储经纬度

避坑提醒：使用JSONField存储动态结构数据（如景点详情）比传统关系型字段更灵活，但要注意Django版本兼容性。

3. 核心功能实现

3.1 行程动态编辑功能

前端采用Vue的draggable组件实现拖拽排序：

vue复制<draggable 
  v-model="destinations"
  @end="onDragEnd">
  <div v-for="item in destinations" :key="item.id">
    {{ item.name }} - {{ formatTime(item.arrival_time) }}
  </div>
</draggable>

后端对应需要处理顺序更新：

python复制# views.py
@api_view(['POST'])
def update_destination_order(request):
    new_order = request.data.get('order')
    with transaction.atomic():
        for idx, dest_id in enumerate(new_order):
            Destination.objects.filter(id=dest_id).update(order=idx)
    return Response({'status': 'success'})

3.2 地图集成方案

使用vue2-leaflet加载地图：

javascript复制import { LMap, LTileLayer, LMarker } from 'vue2-leaflet'

export default {
  components: { LMap, LTileLayer, LMarker },
  data() {
    return {
      zoom: 13,
      center: [51.505, -0.09],
      markers: []
    }
  }
}

实测发现：国内地图服务需特别注意坐标系问题，GCJ-02与WGS84的转换是常见坑点。

4. 部署实战经验

4.1 宝塔面板部署流程

安装Python项目管理器
添加Django项目，选择Python3.8+
配置静态文件路径
设置Nginx反向代理

关键nginx配置：

nginx复制location /api {
    proxy_pass http://127.0.0.1:8000;
    proxy_set_header Host $host;
}

location / {
    root /www/vue-dist;
    try_files $uri $uri/ /index.html;
}

4.2 跨域解决方案

开发环境配置CORS：

python复制# settings.py
CORS_ALLOWED_ORIGINS = [
    "http://localhost:8080",
    "http://127.0.0.1:8080"
]

生产环境更推荐Nginx层解决：

nginx复制add_header 'Access-Control-Allow-Origin' '$http_origin' always;
add_header 'Access-Control-Allow-Credentials' 'true' always;

5. 典型问题排查指南

问题现象	可能原因	解决方案
Vue页面空白	静态资源路径错误	修改vue.config.js的publicPath
地图加载失败	API密钥未配置	检查Leaflet的tileLayer URL
登录状态丢失	Token过期时间太短	调整DEFAULT_TOKEN_TTL
拖拽后顺序未保存	未触发update事件	检查draggable组件的@end绑定

我在项目上线后还遇到过Vue生产环境静态资源404的问题，最终发现是宝塔面板的静态文件缓存策略导致。解决方法是在Nginx配置中添加：

nginx复制location /static {
    alias /www/static;
    expires 7d;
    add_header Cache-Control "public";
}

这个项目让我深刻体会到，Django+Vue的组合在开发效率与性能表现上取得了很好的平衡。特别是Django Admin直接生成的后台管理界面，省去了大量CRUD页面的开发工作。如果下次再做类似项目，我会提前规划好API文档规范，使用Swagger等工具来自动生成接口文档，能进一步提升前后端协作效率。