企业官网建设流程全解析

网站的优点有哪些,东莞网站制作模板,wordpress后台设置中文,自己做的网站怎样赚钱基于Python加Vue的毕业设计实战#xff1a;从零构建全栈项目并规避常见陷阱 毕业设计季#xff0c;实验室里最常见的对话是#xff1a; A#xff1a;你前端调通了吗#xff1f; B#xff1a;通了#xff0c;但 422 报错#xff0c;后端说我字段不对。 A#xff1a;你…基于Python加Vue的毕业设计实战从零构建全栈项目并规避常见陷阱毕业设计季实验室里最常见的对话是A你前端调通了吗B通了但 422 报错后端说我字段不对。A你字段名是不是又和下划线混着用了如果你也卡在类似循环这篇笔记把“从 0 到可上线”踩过的坑一次性摊开。技术栈锁定 Python Vue3项目载体选了一个“任务管理系统”——功能简单却足以覆盖认证、分页、搜索、文件上传、Docker 部署等毕设必备要素。读完你可以直接套壳换成“图书管理”“疫情登记”“二手交易”等任何业务场景。1. 全栈毕设六大痛点跨域浏览器拦截 OPTIONS 预检Vue 开发环境 8080 端口调不到后端 5000。接口文档缺失今天改字段明天忘同步前端永远不知道后端到底返回啥。状态管理混乱Vue 组件里直接写 axiostoken 存 localStorage刷新 404。无统一错误处理后端抛 500前端控制台一片红用户只看到空白页。部署流程空白本地 npm run dev 一切正常上到服务器 404 刷新就崩。安全“裸奔”密码明文、JWT 永不过期、CORS 全开答辩现场被评委当场锤。2. 技术选型FastAPI vs Flask Vue3 组合 API2.1 后端抉择维度FlaskFastAPI自动生成文档需三方插件flask-restx原生 SwaggerReDoc异步支持通过 asgiref 勉强原生 async/await数据校验手动或 marshmallowPydantic 强制学习曲线平缓稍陡但类型提示友好结论想最快跑通 MVP可选 Flask想“写完接口即文档”并顺手把性能拉高直接 FastAPI。下文代码以 FastAPI 为主Flask 差异点用注释补充。2.2 前端为什么 Vue3组合式 API 让逻辑复用更直观适合毕设这种“页面不多但逻辑杂”的场景Vite 冷启动 300 ms告别 webpack 三分钟官方生态Router、Pinia一并升级坑比 Vue2 少。3. 核心实现拆解3.1 项目骨架back/ # Python 后端 ├─ main.py ├─ models.py ├─ schemas.py ├─ deps.py └─ requirements.txt front/ # Vue3 前端 ├─ src/ │ ├─ api/ │ ├─ stores/ │ ├─ views/ │ └─ components/ └─ vite.config.ts docker-compose.yml3.2 统一依赖与配置back/main.pyfrom fastapi import FastAPI from contextlib import asynccontextmanager from tortoise.contrib.fastapi import register_tortoise from core.config import settings # 集中读取 .env from api.v1 import auth, task # 路由分层 asynccontextmanager async def lifespan(app: FastAPI): # 启动事件 yield # 关闭事件 app FastAPI( titleTaskMan, version1.0.0, lifespanlifespan, docs_url/docs if settings.DEBUG else None, ) # 注册路由 app.include_router(auth.router, prefix/api/v1) app.include_router(task.router, prefix/api/v1) # ORM 绑定 register_tortoise( app, db_urlsettings.DATABASE_URL, modules{models: [models]}, generate_schemasTrue, add_exception_handlersTrue, )核心思想配置与代码分离十二因子应用生产环境关闭 Swagger避免接口裸奔。3.3 用户认证JWT 哈希back/schemas.pyfrom pydantic import BaseModel, EmailStr, Field class UserCreate(BaseModel): email: EmailStr password: str Field(min_length6) class Token(BaseModel): access_token: str token_type: str bearerback/auth.pyfrom passlib.context import CryptContext from jose import jwt from datetime import datetime, timedelta from core.config import settings pwd_ctx CryptContext(schemes[bcrypt], deprecatedauto) def hash_password(pw: str) - str: return pwd_ctx.hash(pw) def verify_password(pw: str, hashed: str) - bool: return pwd_ctx.verify(pw, hashed) def create_token(sub: str) - str: expire datetime.utcnow() timedelta(minutessettings.ACCESS_TOKEN_EXPIRE) return jwt.encode({sub: sub, exp: expire}, settings.SECRET_KEY, algorithmHS256)使用 passlib算法 bcrypt成本因子 12ACCESS_TOKEN_EXPIRE 可在 .env 按分钟配置答辩演示时调成 5 分钟评委直呼专业。3.4 依赖注入自动验签back/deps.pyfrom fastapi import Depends, HTTPException, status from fastapi.security import OAuth2PasswordBearer from jose import jwt, JWTError from core.config import settings oauth2_scheme OAuth2PasswordBearer(tokenUrl/api/v1/auth/login) async def get_current_user(token: str Depends(oauth2_scheme)): try: payload jwt.decode(token, settings.SECRET_KEY, algorithms[HS256]) user_id: str payload.get(sub) if user_id is None: raise HTTPException(status_code401, detailToken无效) except JWTError: raise HTTPException(status_code401, detailToken无效) return user_id之后在任意路由函数里加user_id: str Depends(get_current_user)即可拿到当前用户逻辑层与鉴权层彻底解耦。3.5 业务示例任务分页back/task.pyfrom fastapi import APIRouter, Depends, Query from typing import Optional from deps import get_current_user from models import Task from tortoise.contrib.pydantic import pydantic_queryset_creator TaskOut pydantic_queryset_creator(Task) router.get(/tasks, response_modellist[TaskOut]) async def list_tasks( page: int Query(1, ge1), size: int Query(10, ge1, le100), user_id: str Depends(get_current_user), ): offset (page - 1) * size qs Task.filter(owner_iduser_id).offset(offset).limit(size) return await TaskOut.from_queryset(qs)利用 Tortoise-ORM 的 pydantic_queryset_creator省去手写序列化page size 参数自动加入 Swagger 调试页前端同学感动落泪。3.6 Vue3 端调用封装front/src/api/request.tsimport axios, { AxiosError } from axios; import { useRouter } from vue-router; import { ElMessage } from element-plus; const request axios.create({ baseURL: import.meta.env.VITE_API_BASE, // 不同环境读取不同 .env timeout: 10000, }); request.interceptors.request.use((config) { const token localStorage.getItem(token); if (token) config.headers.Authorization Bearer ${token}; return config; }); request.interceptors.response.use( (resp) resp.data, (err: AxiosError) { if (err.response?.status 401) { localStorage.removeItem(token); useRouter().push(/login); } ElMessage.error((err.response?.data as any)?.detail || 请求异常); return Promise.reject(err); } ); export default request;统一弹出错误提示避免每页写 catch401 自动跳转刷新掉线问题秒解。组件内使用import request from /api/request; export function listTasks(params: { page: number; size: number }) { return request.get(/tasks, { params }); }配合script setupconst tasks ref([]); async function load() { const { data } await listTasks({ page: 1, size: 20 }); tasks.value data; } onMounted(load);4. 性能与安全把“能跑”变成“能上线”密码哈希已用 bcryptJWT 签发加 exp刷新机制可选“滑动刷新”毕设阶段先硬过期降低复杂度开启 HTTPS 后CSRF 威胁下降但仍建议后端 POST/PUT/DELETE 统一走 JSON不解析application/x-www-form-urlencoded天然免疫 CSRF若需表单提交在 FastAPI 中加CSRFProtect中间件前端在 Cookie 获取csrf_token后手动回传 HeaderX-CSRF-Token接口幂等性创建资源用 POST返回 201 资源 URI关键操作提供幂等键如客户端生成 UUID后端以唯一索引兜底防止重复提交限流生产环境用slowapiFlask或fastapi-limiter依赖 Redis毕设演示可在 Nginx 层limit_req一把梭。5. 生产环境避坑指南.env 管理后端用python-dotenv前端 Vite 以VITE_*前缀暴露绝不提交.env.production到 GitCI 通过仓库 Secret 注入。静态资源 404Vue 路由history模式下刷新页面会请求后端/task/123Nginx 需配location / { try_files $uri $uri/ /index.html; }同时把/assets指到alias /app/front/dist/assets;开启gzip_static on首屏提速 30%。跨域消失术生产环境让 Nginx 同一端口反代前后端CORS 仅保留allow-origin: *的 OPTIONS 预检消失评分老师再挑不出刺。Docker 多阶段构建# front/Dockerfile FROM node:18-alpine as builder WORKDIR /app COPY package*.json . RUN npm ci COPY . . RUN npm run build FROM nginx:alpine COPY --frombuilder /etc/nginx/conf.d/default.conf /etc/nginx/conf.d COPY --frombuilder /app/dist /usr/share/nginx/html最终镜像仅 23 MBpush 到阿里云镜像仓库服务器 1 分钟拉完。日志与监控后端统一 JSON 日志容器 stdout 收集用prometheus grafana做进程监控毕设答辩放一张 QPS 面板瞬间高大上。6. 代码可维护性再进一步单元测试后端pytest pytest-cov把 JWT 依赖用override_dependencies注入假用户CI 要求覆盖率 ≥ 80%前端vitest 测纯函数Cypress 跑通登录→新建任务→断言列表CI/CDGitHub Actions 监听main分支 push跑测试→构建镜像→SSH 到云主机docker compose up -d提交 PR 自动评论预览地址老师体验新功能不用远程桌面。7. 结语把“能交”升级成“能秀”毕业设计不是终点而是第一次把“写代码”变成“交付产品”。把上面的目录结构、认证流程、部署脚本原封不动拷过去换成你的业务模型就能在两周内拿出一套可上线、可演示、可扩展的全栈作品。下一步挑一个最不顺眼的模块写单测再把 GitHub Actions 跑通让评委在答辩现场看到自动部署的 green pass——那一刻你不再只是“学生”而是可以签字的“工程师”。