Django+Vue前后端分离项目

导语

编码三原则：

• 实用为主，效果为主
• 官网是最好的教程，其它只是辅助
• 不要重复造轮子，但应该知道其工作原理

第一个项目，让我们从简单一点的开始：音乐列表

技术栈

• 后端：Python、Django(Ninja)、
• 前端：Vue3、Ts、vite
• 数据库：sqlite3

视频教程
代码地址

提醒：Ninja是Django框架所用的一个库，如果需要了解，请移步官网，或者我的教程

后端实现

参考项目
基本版本信息：
Python:3.8.10
Django:4.0.7
Django-ninja:0.17.0

环境及数据准备

• 准备一个文件夹，存放后端内容：back_end
• 初始化django项目：django-admin startproject myproject
• 创建music应用：python manage.py startapp music ,将music应用添加到settings.py/INSTALLED_APPS中
• 创建数据模型，生成数据表
  1、检测你对模型文件的修改，并且把修改的部分储存为一次迁移 python manage.py makemigrations
  2、数据库里创建新定义的模型的数据表 python manage.py migrate
• 批量模拟数据
  1、通过创建接口手动创建一些
  2、利用脚本自动生成一些
  2.1、需要一份原始数据
  2.2、在应用下面创建management/commands目录，创建生成数据的脚本python .\manage.py ingest_track

验证增删改查

前端实现

基本版本信息：
Vue:3.2.37
Vite:3.1.0
Typescript:4.6.4

环境准备

• 准备一个文件夹，存放前端内容：front_end(直接用指令初始化：npm init vite@latest)
• 按照提示输入以下指令
  
• 对布局进行一些调整，删除多余的东西
• 在components创建新的Music.vue
• 先写axios接口，首先安装axios npm install axios
• 安装npm install element-plus --save， 再按需引入element-plus

前后端打通，数据请求的基本实现

前端的静态布局

整体逻辑的完整实现

实现过程中遇到的一些问题及解决方法

• 跨域问题解决

报错：has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.
解决办法

• message弹窗失败的坑

在main.ts中增加
//引入Elmessage和Elloading的css样式文件
import ‘element-plus/theme-chalk/el-loading.css’;
import ‘element-plus/theme-chalk/el-message.css’