学习的时候查了网上的Django+Vue3案例，资料都比较老，在借助Ai工具的辅导下翻新了案例，总算是走通了python web全栈的最小路径（做了查询和新增打通，本地的，没部署服务器），Django用的是5.2.4版本(25年7月发布)，Vue用的是3.5.24版本(25年11月发布)类型选的TypeScript。因为前后端都是自己写，所以就把前后端联调的大部分操作在前面就配置了，而不是到后面再去处理。
过程中通过和kimi、豆包反复“唠嗑”，体验上来说kimi的空格幻觉比较重，我代码粘给它，就说我有哪个地方多了空格导致代码错误，实际根本没空格问题（豆包就没这个幻觉）。豆包的思考过程时间会稍微多点，默认会弹问题思考结构的思路，等待体验上没Kimi舒服，但是解决问题的能力比Kimi更好。如果用户提问的提示词比较粗或缺乏，以及提问没有切到关键点上，都会出现多轮问答而无法获得有效意见的情况。
一、Django基础准备
1、创建Django项目，取名DjangoVue，使用现有环境；
2、创建数据库，在Navicat的localhost上创建新数据库按照如图配置；
3、安装mysqlclient，通过python解释器安装mysqlclient，这是database设为mysql的前提；
4、更改项目settings文件中的数据库设置
5、执行数据库迁移，python manage.py migrate
6、运行检查 python manage.py runserver
二、Django应用创建
1、创建后端应用 python manage.py startapp backend 在项目的settings中检查APP注册。
2、创建数据模型:
① 在应用的models.py中创建模型；
② 创建迁移文件，修改数据库；
③ mysql上检查新创建的表；
3、创建序列化文件，在应用下新建serializers.py文件，序列化数据模型(for接口)。
4、创建接口，进入应用的views.py文件
① 导入rest_framework家的三件套、导入模型表、导入序列化文件；
② 创建新增接口、查询接口
5、配置应用路由，为应用创建urls.py文件
① 导入path库、导入数据模型；
② 设置urlpatterns，添加书籍查询、添加地址、对应视图；
6、配置项目路由，在项目的urls.py文件
① 导入path、include、TemplateView
② 给路由地址包个api，include指向应用的urls.py
③ 设置根路径返回vue打包的模板index,html
④ 设置re_path为后端找不到地址时托底。
7、安装Django跨域支持的库
① 进入Django项目所在文件夹(项目主体文件的上级)
② 在命令行中输入：pip install djangorestframework django-cors-headers
8、配置跨域设置，在项目的settings.py文件
① 在INSTALLED_APPS中查看是否有了corsheaders，
如果没有就补上；
② 在MIDDLEWARE中增加跨域的中间件，放在第一行；
③ 添加CORS_ALLOWED_ORIGINS设置跨域对象；
9、配置静态文件收集，在项目的settings.py文件
① 设置STATIC_URL用于前端请求标识；
② 设置STATIC_ROOT用在collectstatic后存放文件目录，生产环境服务器找本地目录用；
③ 设置STATICFILES_DIRS用于设定开发环境下静态文件收集地址；
④ TEMPLATES中增加DIRS设置，给BASE_DIR配上Django自身模版目录templates、配上vue打包后的目录frontend_dist
三、创建Vue项目
1、用vite创建Vue3
① 进入Djnango项目所在文件夹，输入：
npm create vite@latest 项目名
② 进入交互式选择，先选择vue，再选择typescript
③ 点击http://locahost:5173/浏览器跳出vue初始效果
2、安装vue项目所需依赖，进入VUE项目文件夹位置的命令行窗口，
① 输入npm install 用于安装基础依赖；
② 输入npm install axios vue-router@4 element-plus 安装异步、路由、ui库；
3、构建工具配置，在vite.config,ts文件中，在默认内容上增加
① extensions指定导入文件时可以省略的文件后缀列表；
② base设置相对路径；
③ build构建打包相关配置，outDir设置打包目录，assetsDir设置静态资源子目录；
4、项目结构准备
① 在SRC文件夹下新建api、router、views三个文件夹；
② 在api文件夹下，创建book.js；
③ 在router文件夹下，创建index.ts；
④ 在views文件夹下，创建BookAdd.vue、BookList.vue页面组件。
5、路由设置，在index.ts中（src/router文件夹下）
① 导入createRouter、createWebHistory
② 创建路由规则数组，设置根路径、重定向路径；设置导航按钮对应的懒加载路径；
③ 创建路由实例并导出，设置路由模式为createWebHistory,将路由规则数组给到路由实例；
6、接口处理，在book.js文件中
1、导入axios库；
2、设置异步请求的基础api地址；
3、设置书本列表查询、添加的箭头函数，并用export暴露出去；
7-1、页面组件---BookList.vue文件中
·页面结构部分：
① 使用el-table绑定数据books；
② 添加id、book_name、author三列，允许author为空；
·逻辑与数据部分：
① 导入响应式变量ref、钩子函数onMounted、导入listBook接口函数；
② 创建响应式变量books，默认为空；
③ 把数据请求放入钩子函数，获取成功时将data给books。无论成败都做console.log
7-2、页面组件---BookAdd.vue文件中
·页面结构部分：
1、使用el-form绑定form；
2、添加两个输入框，一个提交按钮。输入框分别绑定form的title、author字段，提交按钮绑定sumbit函数，按钮名为“保存”；
·逻辑和数据部分：
1、导入响应式变量reactive、addBook接口函数；
2、创建响应式表单数据form，初始title、author为空；
3、创建sumbit函数，调用接口，传递form，成功后弹出提示；
7-3、页面组件-在APP.vue中
① 使用el-menu构建导航，设置横向布局，具体导航对象配置好路由路径；
② 添加router-view放置路由视图容器，承载导航的具体组件；
8、入口文件处理，在在main.ts中
① 创建vue应用实例;
② 导入UI组件库ElementPlus、全局样式、路由实例、根组件；
③ 创建应用实例.挂载路由插件.全局注册组件库.挂载应用到#app元素；
四、联调与打包
1、前后端联调
① 后端项目执行：python manage.py runserver启动后端，浏览器访问http://127.0.0.1:8000/books
② 在前端项目执行：npm run dev启动前端，浏览器访问 http://localhost:5173，测试查询与新增；
2、前端打包构建，进入vue项目所在目录
① 运行npm run build # 生成 dist
② xcopy /E /I dist ..\frontend_dist #将打包结果放在执行目录
3、Django生产构建，进入Django项目所在目录
① 收集部署前的静态资源，仅本地验证时可省略；
python manage.py collectstatic --noinput
② 运行Django项目，python manage.py runserver浏览器访问http://127.0.0.1:8000/books 实现查询和新增；
完成Django项目集成Vue
