企业官网建设流程全解析

简介：这是一套面向计算机专业本科生的毕业设计级旅游系统实战项目，聚焦景点酒店预订与游记分享场景，适用于Django+Vue全栈开发学习与课程设计参考。资源包含完整前后端源码、MySQL数据库脚本、配套毕业论文及实操视频教程，覆盖需求分析、系统设计、编码实现到部署演示全流程。压缩包共817个文件，71.59MB，其中Python后端逻辑（57个.py）、Vue前端组件（49个.vue）、静态资源（162个.svg/79个.gif/51个.jpg）和样式脚本（55个.css/166个.js）构成主体，辅以.bat运行脚本、.sql建库文件及.bak备份模板，结构清晰便于分层学习与调试。已有68人下载学习，读者可直接部署运行，深入理解角色权限控制（管理员/用户双端）、景点购票与酒店预定核心业务流、游记UGC模块实现，以及前后端分离架构下的接口联调与数据安全处理方案。

1. 用 Python+Django+Vue+MySQL 搭建景点酒店预订系统：不是拼凑技术栈，而是理清前后端分离的职责边界

一个毕业设计项目叫“景点酒店预订旅游系统”，光看标题容易误以为是套模板——Python 写后端、Vue 做页面、MySQL 存数据，三件套一装就完事。但实际落地时，90% 的学生卡在「为什么登录成功却拿不到用户信息」「Vue 调接口总返回 403」「Django Admin 里改了酒店库存，前端页面不刷新」这类问题上。根本原因不是不会写代码，而是没厘清前后端分离中每个环节的契约关系：Django 不只是吐 JSON，它要定义清晰的 API 协议、状态码语义、CSRF 策略和跨域规则；Vue 不只是发 axios 请求，它得管理 token 生命周期、路由守卫拦截、错误提示粒度；MySQL 更不只是建几张表，它的索引设计直接影响搜索景点响应速度，外键约束决定订单与房间状态的一致性。这个系统真正考验的是对 Web 开发链路的闭环理解——从用户点击“预订”那一刻起，请求如何穿过 Nginx（或开发服务器）、Django 中间件、ORM 查询、JSON 序列化，再经 Vue 的 Promise 链、Vuex/Pinia 状态更新、组件 re-render 最终呈现。适合正在做毕设、想把项目跑通且能讲清楚每层逻辑的开发者，尤其需要避开“照着教程复制粘贴却不知为何而设”的陷阱。

2. Django 后端：从零初始化 API 服务，重点解决认证、跨域与数据一致性

2.1 初始化 Django 项目并配置 MySQL 连接

新建虚拟环境后安装核心依赖：

python -m venv venv source venv/bin/activate # Linux/macOS # venv\Scripts\activate.bat # Windows pip install django djangorestframework django-cors-headers mysqlclient

创建项目与应用：

django-admin startproject travel_backend . python manage.py startapp hotels python manage.py startapp bookings

在settings.py中配置 MySQL（注意：mysqlclient需提前安装 C 编译工具链，Windows 用户推荐用pymysql替代并在__init__.py中注册）：

# travel_backend/settings.py DATABASES = { 'default': { 'ENGINE': 'django.db.backends.mysql', 'NAME': 'travel_db', 'USER': 'root', 'PASSWORD': 'your_password', 'HOST': '127.0.0.1', 'PORT': '3306', 'OPTIONS': { 'charset': 'utf8mb4', 'init_command': "SET sql_mode='STRICT_TRANS_TABLES'", }, } }

提示：utf8mb4是必须项，否则景点名称含 emoji（如 🌊⛰️）会报错；STRICT_TRANS_TABLES防止 MySQL 静默截断字段，保障数据完整性。

2.2 定义核心模型与外键约束逻辑

hotels/models.py中建模需体现业务强约束：

from django.db import models from django.contrib.auth.models import User class Hotel(models.Model): name = models.CharField(max_length=100) address = models.TextField() star_rating = models.PositiveSmallIntegerField(choices=[(i, f"{i}星") for i in range(1, 6)]) # 每个酒店可关联多个景点（多对多），用中间表显式管理距离与描述 nearby_scenic_spots = models.ManyToManyField('ScenicSpot', through='HotelScenicRelation') class RoomType(models.Model): hotel = models.ForeignKey(Hotel, on_delete=models.CASCADE, related_name='room_types') name = models.CharField(max_length=50) # 如“豪华大床房” price_per_night = models.DecimalField(max_digits=8, decimal_places=2) total_count = models.PositiveIntegerField() # 总房间数 available_count = models.PositiveIntegerField() # 可预订数（关键！避免超卖） class Booking(models.Model): user = models.ForeignKey(User, on_delete=models.CASCADE) room_type = models.ForeignKey(RoomType, on_delete=models.PROTECT) # PROTECT 防止删除在订房型 check_in = models.DateField() check_out = models.DateField() status = models.CharField(max_length=20, choices=[ ('pending', '待确认'), ('confirmed', '已确认'), ('cancelled', '已取消'), ], default='pending')

RoomType.available_count是库存核心字段，不能靠应用层计算，必须由数据库事务保证原子性。后续下单逻辑将用SELECT ... FOR UPDATE锁行实现。

2.3 构建 RESTful API 并处理跨域与认证

安装django-cors-headers解决开发阶段跨域：

# settings.py INSTALLED_APPS += ['corsheaders'] MIDDLEWARE.insert(0, 'corsheaders.middleware.CorsMiddleware') CORS_ALLOWED_ORIGINS = [ "http://localhost:8080", # Vue 开发服务器地址 ] # 生产环境必须禁用 CORS_ALLOW_ALL_ORIGINS=True

用 DRF 实现景点搜索 API（带分页与模糊匹配）：

# hotels/views.py from rest_framework import generics, status from rest_framework.response import Response from .models import ScenicSpot from .serializers import ScenicSpotSerializer class ScenicSpotSearchView(generics.ListAPIView): serializer_class = ScenicSpotSerializer pagination_class = PageNumberPagination def get_queryset(self): query = self.request.query_params.get('q', '').strip() if not query: return ScenicSpot.objects.none() # 使用 MySQL 全文索引需先建索引：ALTER TABLE hotels_scenicspot ADD FULLTEXT(name, description); return ScenicSpot.objects.filter( models.Q(name__icontains=query) | models.Q(description__icontains=query) ).order_by('-popularity_score')

注意：icontains在大数据量下性能差，上线前必须为name和description字段添加复合索引：CREATE INDEX idx_spot_search ON hotels_scenicspot (name, description);。全文索引仅当查询词长度 > 4 且需相关性排序时启用。

2.4 实现安全的预订流程：事务锁与状态机

bookings/views.py中的关键逻辑：

from django.db import transaction from django.db.models import F from rest_framework.views import APIView class BookingCreateView(APIView): def post(self, request): room_type_id = request.data.get('room_type_id') check_in = request.data.get('check_in') check_out = request.data.get('check_out') try: with transaction.atomic(): # 锁定该房型记录，防止并发超卖 room = RoomType.objects.select_for_update().get(id=room_type_id) if room.available_count <= 0: return Response({'error': '房间已售罄'}, status=status.HTTP_400_BAD_REQUEST) # 创建订单（此时库存未减） booking = Booking.objects.create( user=request.user, room_type=room, check_in=check_in, check_out=check_out, status='pending' ) # 原子性扣减库存 RoomType.objects.filter(id=room_type_id).update( available_count=F('available_count') - 1 ) return Response({'booking_id': booking.id}, status=status.HTTP_201_CREATED) except RoomType.DoesNotExist: return Response({'error': '房型不存在'}, status=status.HTTP_404_NOT_FOUND) except Exception as e: return Response({'error': str(e)}, status=status.HTTP_400_BAD_REQUEST)

此实现确保：即使 100 个用户同时点击“预订同一房型”，数据库层面只允许一人成功，其余返回 400。select_for_update()在 MySQL 中生成SELECT ... FOR UPDATE语句，锁住对应行直至事务结束。

3. Vue 前端：构建可维护的预订交互流，重点处理 token 管理与状态同步

3.1 初始化 Vue 3 项目并配置 Axios 拦截器

使用 Vite 创建项目：

npm create vite@latest travel-frontend -- --template vue cd travel-frontend npm install npm install axios pinia @vue/router

在src/utils/request.js中封装带认证的请求：

import axios from 'axios' const api = axios.create({ baseURL: 'http://127.0.0.1:8000/api/', // Django 开发服务器地址 timeout: 10000, }) // 请求拦截器：自动携带 token api.interceptors.request.use( config => { const token = localStorage.getItem('auth_token') if (token) { config.headers.Authorization = `Token ${token}` } return config }, error => Promise.reject(error) ) // 响应拦截器：统一处理 401 未授权 api.interceptors.response.use( response => response, error => { if (error.response?.status === 401) { localStorage.removeItem('auth_token') // 跳转登录页，保留原路径用于登录后重定向 window.location.href = `/login?redirect=${encodeURIComponent(window.location.pathname)}` } return Promise.reject(error) } ) export default api

提示：Django REST Framework 默认使用 TokenAuthentication，需在settings.py中启用：REST_FRAMEWORK = {'DEFAULT_AUTHENTICATION_CLASSES': ['rest_framework.authentication.TokenAuthentication']}。Vue 端登录成功后，务必将response.data.token存入localStorage，而非sessionStorage（后者关闭标签页即丢失，导致用户反复登录）。

3.2 实现景点搜索与酒店详情页的响应式交互

src/views/ScenicSearch.vue中使用 Composition API：

<template> <div class="search-container"> <input v-model="searchQuery" @keyup.enter="performSearch" placeholder="搜索景点名称或描述..." class="search-input" /> <button @click="performSearch" class="search-btn">搜索</button> <div v-if="loading" class="loading">加载中...</div> <div v-else-if="error" class="error">{{ error }}</div> <div v-else class="results"> <div v-for="spot in spots" :key="spot.id" class="spot-card"> <h3>{{ spot.name }}</h3> <p>{{ spot.description.substring(0, 100) }}...</p> <router-link :to="`/hotels?scenic_id=${spot.id}`" class="view-hotels"> 查看附近酒店 </router-link> </div> </div> </div> </template> <script setup> import { ref, onMounted } from 'vue' import api from '@/utils/request' const searchQuery = ref('') const spots = ref([]) const loading = ref(false) const error = ref('') const performSearch = async () => { if (!searchQuery.value.trim()) return loading.value = true error.value = '' try { const res = await api.get('scenic-spots/search/', { params: { q: searchQuery.value } }) spots.value = res.data.results } catch (e) { error.value = e.response?.data?.error || '搜索失败，请重试' } finally { loading.value = false } } onMounted(() => { // 页面加载时默认搜索热门景点 searchQuery.value = '西湖' performSearch() }) </script>

此组件关键点：

• @keyup.enter触发搜索，符合用户预期；
• router-link传递scenic_id参数，供酒店列表页过滤；
• onMounted中预加载热门景点，提升首屏体验；
• 错误提示明确到具体原因（如后端返回的error字段），而非笼统“网络错误”。

3.3 订单提交与库存实时反馈

src/views/BookingForm.vue中处理预订：

<template> <form @submit.prevent="submitBooking" class="booking-form"> <div class="form-group"> <label>入住日期</label> <input type="date" v-model="formData.check_in" required /> </div> <div class="form-group"> <label>离店日期</label> <input type="date" v-model="formData.check_out" required /> </div> <div class="form-group"> <label>房型</label> <select v-model="formData.room_type_id" required> <option value="">请选择</option> <option v-for="room in availableRooms" :key="room.id" :value="room.id" > {{ room.name }} - ¥{{ room.price_per_night }}/晚 (剩余{{ room.available_count }}间) </option> </select> </div> <button type="submit" :disabled="isSubmitting"> {{ isSubmitting ? '提交中...' : '立即预订' }} </button> </form> </template> <script setup> import { ref, computed } from 'vue' import api from '@/utils/request' const props = defineProps({ hotelId: { type: Number, required: true } }) const formData = ref({ room_type_id: '', check_in: '', check_out: '' }) const isSubmitting = ref(false) // 动态获取当前酒店可用房型（含实时库存） const availableRooms = computed(async () => { try { const res = await api.get(`hotels/${props.hotelId}/rooms/`) return res.data } catch (e) { console.error('获取房型失败', e) return [] } }) const submitBooking = async () => { isSubmitting.value = true try { const res = await api.post('bookings/', formData.value) alert(`预订成功！订单号：${res.data.booking_id}`) // 清空表单并跳转订单页 formData.value = { room_type_id: '', check_in: '', check_out: '' } } catch (e) { alert(e.response?.data?.error || '预订失败，请检查输入') } finally { isSubmitting.value = false } } </script>

注意：availableRooms使用computed而非onMounted一次性获取，确保用户切换日期时库存数字实时更新。但需警惕频繁请求，生产环境应在后端加缓存（如 Redis 缓存 30 秒）。

4. 数据库优化与部署验证：让系统在真实场景下稳定运行

4.1 MySQL 关键索引与查询性能压测

针对高频查询场景建立索引：

-- 景点搜索：加速 name 和 description 的 LIKE 查询 CREATE INDEX idx_scenic_name_desc ON hotels_scenicspot (name, description); -- 预订查询：按用户查历史订单（常用） CREATE INDEX idx_booking_user_status ON bookings_booking (user_id, status); -- 房型库存：按酒店查可用房型（列表页核心） CREATE INDEX idx_room_hotel_avail ON hotels_roomtype (hotel_id, available_count); -- 时间范围查询：查某日期区间内可订房型（搜索页关键） CREATE INDEX idx_room_date ON bookings_booking (room_type_id, check_in, check_out);

使用EXPLAIN验证查询计划：

EXPLAIN SELECT * FROM hotels_roomtype WHERE hotel_id = 123 AND available_count > 0; -- 确保 type=ref, key=idx_room_hotel_avail, rows 较小

提示：避免在WHERE子句中对字段使用函数（如DATE(check_in)），会导致索引失效。Django ORM 中应使用__date查询：Booking.objects.filter(check_in__date=today)。

4.2 Django + Vue 本地联调排错清单

4.3 生产环境最小化部署方案

Django 生产部署不建议直接用runserver，推荐gunicorn+nginx：

# 安装 gunicorn pip install gunicorn # 启动 gunicorn（监听 8000 端口，4 个工作进程） gunicorn travel_backend.wsgi:application --bind 127.0.0.1:8000 --workers 4 --timeout 120 # nginx 配置片段（/etc/nginx/sites-enabled/travel） upstream django_app { server 127.0.0.1:8000; } server { listen 80; server_name your-domain.com; location /static/ { alias /path/to/your/staticfiles/; } location / { proxy_pass http://django_app; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; } }

Vue 打包后部署：

# 在 Vue 项目根目录执行 npm run build # 输出文件在 dist/ 目录，将其内容复制到 nginx 的 root 目录（如 /var/www/travel-frontend）

注意：Vue 路由若用history模式，需在 nginx 中配置try_files $uri $uri/ /index.html;，否则刷新页面会 404。

5. 毕设答辩高价值技巧：用三个可视化证据证明系统可靠性

5.1 展示数据库事务一致性证据

在答辩 PPT 中插入一张 MySQL 命令行截图，显示并发预订测试结果：

-- 模拟两个用户同时预订同一房型（ID=5） -- 用户A执行： START TRANSACTION; SELECT available_count FROM hotels_roomtype WHERE id=5 FOR UPDATE; UPDATE hotels_roomtype SET available_count = available_count - 1 WHERE id=5; COMMIT; -- 用户B在同一时刻执行相同语句，观察其等待时间及最终结果 -- 截图显示：用户A成功，用户B的 UPDATE 等待 3 秒后执行，`available_count` 准确减为 0 SELECT id, available_count FROM hotels_roomtype WHERE id=5; -- 输出：5 | 0

此证据直接回应“如何防止超卖”这一高频问题，比口头解释“用了事务”更有说服力。

5.2 展示前端请求链路追踪

在 Chrome 开发者工具 Network 标签页中，筛选XHR请求，截取一个完整预订流程：

• POST /api/bookings/请求头含Authorization: Token xxx；
• 响应状态码201 Created，响应体含{"booking_id": 123}；
• 紧接着GET /api/user/profile/自动触发（因路由守卫重定向），验证 token 有效性。

标注箭头说明：Token 由登录接口返回 → 存入 localStorage → Axios 拦截器自动注入 → Django 后端验证通过 → 返回用户数据。这串证据链证明“前后端分离的认证机制已闭环”。

5.3 展示性能优化对比数据

用 Apache Bench 工具压测搜索接口：

# 优化前（无索引） ab -n 100 -c 10 'http://127.0.0.1:8000/api/scenic-spots/search/?q=西湖' # 优化后（加索引） ab -n 100 -c 10 'http://127.0.0.1:8000/api/scenic-spots/search/?q=西湖'

制作对比表格：

表格下方注明：“索引使高并发搜索响应进入亚秒级，满足旅游平台用户对实时性的要求”。数据比“做了优化”更有力。

本文还有配套的精品资源，点击获取