前后端一体转前后端分离（非完备/学习后留档）

1.当前情况

django前后端一体，前端使用三件套，最终目标是将前端转为vue为主体。django仅提供API

2.重写之前的前后端一体项目

前端和后端耦合

• HTML 模板（users.html、home.html）直接由 Django 渲染。
• 逻辑（查询数据库 + 渲染模板）和视图views强绑定。

路由耦合

• Django urls.py 同时管理 API 路径和前端页面路径。（体现在app/urls.py中）

# app/urls.py
urlpatterns = [
    path('', views.home, name='home'),  # 新增：根路径 '/' 前端路径
    path("users/", views.user_list, name="user_list"), # 前端路径
    path('users/add/', views.add_user, name='add_user'), # Ajax新增用户 API路径
]

# config/urls.py
urlpatterns = [
    path("admin/", admin.site.urls),
    path('',include("app.urls")),
]

（迁移的时候，我们要把 前端路径逐步淘汰，只保留 API 路径，最后由 Vue 去消费 API 并渲染界面。）

• 所有页面跳转都要走 Django 的模板路由。（页面跳转 = 用户点击链接 / 按钮 → 浏览器请求一个新的 URL → Django 后端接收请求，views → 返回一个 完整的 HTML 页面。）「跳转」是靠 Django urls.py 控制的，Django 决定返回哪个 HTML。

  重点是每次跳转都会整页刷新。

交互方式有限

• 通过表单 / 简单的 JS + Ajax 调 Django 视图。
• 无法实现前端复杂组件化和动态交互。

前端改动成本高

• 改 UI 必须动 Django 模板 + 重新渲染。
• 无法享受 Vue 的组件复用、响应式更新、生态库。

3.重构前需要准备什么

确定新架构

• Django 只负责提供 API（RESTful / GraphQL）。
• Vue 负责页面渲染和交互。
• 前后端通过 JSON 通信。

环境准备

• Django：安装 djangorestframework、django-cors-headers。
• Vue：新建 frontend 项目（Vite + Vue 3 + axios）。

保证旧系统可运行

• 不要一次删光 Django 模板，先保证「原系统能跑」作为 fallback。

明确渐进式迁移策略

• 不是一次性重写，而是 一个页面一个页面迁移。
• 同时保留「旧模板 + 新 API」，逐步替换。

4.边写边测试

第 1 阶段：抽取 API

• 在 Django 中为已有的功能增加 API 版本（不影响原模板）。
• 比如：/users/（旧模板）+ /api/users/（新 API）。
• 测试 API 是否能返回 JSON。

第 2 阶段：新建 Vue 项目 & 联调

• 在 Vue 中写一个页面，调用 Django 的 /api/users/，展示用户列表。
• 和旧的 Django 模板页面做对照测试。
• 保证「同一份数据，旧的能显示，新的 Vue 也能显示」。

第 3 阶段：替换单个功能

• 先替换 新增用户 功能：Vue 页面通过表单 → 调 Django API → 刷新前端数据。
• 确认新增用户在旧模板和新 Vue 界面都能看到。
• 这样即使 Vue 出问题，还能回退 Django 模板。

第 4 阶段：逐步替换所有页面

• 把 Django 模板逐渐淘汰，只保留后端 API。
• Vue 逐渐成为唯一的前端。

第 5 阶段：前后端彻底分离

• Django 完全转为 API 层。
• Vue 单独运行，并通过 nginx / Django 配置静态资源部署。

5.测试策略

单元测试（Django）

• 给 API 写简单测试，确保 GET /api/users/ 和 POST /api/users/add/ 工作正常。

对照测试

• 保持旧模板和新 Vue 同时存在，做对比测试。
• 先不删旧功能，确保随时可以回退。

逐步替换

• 每次只替换一个功能/页面，避免大规模重构带来的未知风险。

推荐路线

1. 阶段 1（小范围试水）
   • 先重构 /users/ 页面为 Vue + API。
   • 保留 Django 模板版，作为对照测试。
2. 阶段 2（扩展功能页）
   • 再挑一些类似的业务页面迁移，比如用户详情、用户编辑等。
3. 阶段 3（迁移主页面）
   • 最后才替换 home 页面，把它改成 Vue 的入口（挂载 Vue App，接管路由）。
   • 这时 Django 就彻底变成 API 提供者了。

6.主要工作

1.先建home页面

2.配置路由 npm install vue-router，在src下建router文件夹，在其中新建index.js进行配置，然后再main.js挂载

3.功能页面，先写静态前端框架，再接django的api，修改App.vue

4.安装axios ，npm install axios，修改功能页面，

5.pip install django-cors-headers解决跨域问题，要在django中settings.py中添加。

6.pip install djangorestframework，同样要在settings中配置

7.创建序列化器app/serializers.py ，UserSerializer是 Django REST framework (DRF) 的核心概念之一。序列化器（Serializer） = Django model ↔ JSON 的桥梁，把 Django 的模型对象 → 转换成 JSON， 把前端发来的 JSON → 转换成 Django 模型，可加验证逻辑。

8.修改视图views，要重构的先写，其他的不用管

9.配置路由urls.py

10.运行前后端测试API

问题总结

1.数据库问题，对于复杂数据库暂且不知道如何解决。

菜鸟教程中值得看的

vue

1.目录结构

2.基础语法

3.声明式渲染

4.组件

5.监听属性

6.样式绑定

7.事件处理及之后的内容

django

ps

都是个人对于特定项目的想法，