Django+Vue 前后端分离 前期配置踩坑_我如何用pycharm+vue,将python+django的web进行前后端分离?

操作系统：Windows 10
后端：Python3.8 + Pycharm
前端：Vue + IDEA
技术栈：Vue3 + TypeScript + redis + MySQL

node.js配置淘宝镜像源：npm config set registry https://registry.npmmirror.com
git clone配置端口：git config --global http.proxy http://127.0.0.1:7890
一文搞定Django+Vue 前后端分离的前期配置（有许多坑），新手老鸟都可以作参考，但本文不适合纯小白。
如果下面哪一方法不管用，请在评论区留言，我会积极解决问题。

Django连接MySQL配置

在app下的【settings.py】里找到DATABASES，改为下面的语句，其中NAME为对应数据库的名称，PASSWORD为自己MySQL的密码。

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.mysql',
        'NAME': '****',
        'USER': 'root',
        'PASSWORD': '****',
        'HOST': '127.0.0.1',
        'PORT': '3306',
    }
}
1
2
3
4
5
6
7
8
9
10

---

在【_ init _.py】注册文件里写入以下内容：

import pymysql
pymysql.version_info = (2, 1, 1, "final", 0)
pymysql.install_as_MySQLdb()
1
2
3

备注：上面代码中的2，1，1是mysqlclient的版本，我的就是2.1.1。

踩坑经历：不配置这个2，1，1，后面使用manage.py命令会报错：mysqlclient 1.4.3 or newer is required; you have 1.0.3.

---

还有一个配置，【settings.py】找到INSTALLED_APPS，添加好自己的app名。

---

使用migrate建立数据库表

踩坑：如果你的app下没有【migrations】目录，则需要先运行这个命令：

python manage.py makemigrations app --empty
1

写完models.py的一些类后，运行下面的命令来建立数据库表：

python manage.py makemigrations 
1

python manage.py migrate
1

踩坑经历：如果app下没有【migrations】目录，makemigrations就是无效的，数据库表也不会正确为我创建。

---

Django配置跨域

最简单粗暴的方法就是直接取消csrf_Token校验，就是注释掉【settings.py】的这一行：
'django.middleware.csrf.CsrfViewMiddleware',

踩坑：接下来介绍的django-cors-headers方法不管用（因为csrf_Token这个东西是Django方便自己的中间件用的，前后端分离的情况下要配置很多地方，甚至在具体功能实现的模块那也要配置，这里我只简单介绍django-cors-headers的跨域配置方法，并不能生效）：
先安装django-cors-headers包：

pip install django-cors-headers 
1

然后【settings.py】文件添加下面的内容：

INSTALLED_APPS = [
    'corsheaders', # 注意！必须在app前面
    'app',
]
 
MIDDLEWARE = [
    'django.contrib.sessions.middleware.SessionMiddleware',
    'corsheaders.middleware.CorsMiddleware',  # 注意！必须在这个位置
    'django.middleware.common.CommonMiddleware',
]
 
CORS_ALLOW_CREDENTIALS = True  # 允许携带cookie信息
CORS_ORIGIN_ALLOW_ALL = True  # 允许所有来源进行跨域请求
 
# 跨域时，允许在请求头中携带的参数字段
CORS_ALLOW_HEADERS = (
    'accept',
    'accept-encoding',
    'authorization',
    'content-type',
    'dnt',
    'origin',
    'user-agent',
    'x-csrftoken',
    'x-requested-with',
    'Pragma',
    'token'
)
 
# 对应的发送的请求的跨域
CORS_ALLOW_METHODS = (
    'DELETE',
    'GET',
    'OPTIONS',
    'PATCH',
    'POST',
    'PUT',
)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

---

Django配置缓存

Django支持好几种缓存系统，但是当今是redis如日中天的时代

安装django-redis包：

pip install django-redis
1

【settings.py】文件添加下面的内容：

CACHES = {
    "default": {
        "BACKEND": "django_redis.cache.RedisCache",
        "LOCATION": "redis://127.0.0.1:6379/1",
        "OPTIONS": {
            "CLIENT_CLASS": "django_redis.client.DefaultClient",
        }
    }
}
1
2
3
4
5
6
7
8
9

备注：配置缓存是为了存储用户信息，过去前后端不分离时用Session就完事了，但是现在是前后端分离。

---

创建Vue项目

用Vite

Vite 需要 Node.js 版本 14.18+，16+。有些模板需要依赖更高的 Node 版本才能正常运行。
搭建一个 Vite 项目：

npm create vite@latest
1

根据 Python 的 PEP 8 标准，Python 的项目名称应该使用小写字母和下划线，而不能包含大写字母或其他特殊字符。这里我将项目命名为web_vue：
Ok to proceed?【Y】
Project name:【web_vue】
Select a framework:【Vue】
Select a variant:【TypeScript】
创建好项目后，进入项目目录，运行命令：npm install

---

用vue/cli

如果你想要用脚手架创建vue项目，先安装vue/cli：

npm i -g @vue/cli
1

使用脚手架创建命令：

vue create web_vue
1

【Manually select features】
用空格勾选【Babel】【JavaScript】【Router】
vue采用【3.x】
Use history mode for router? 选择【Yes】，其他【No】
npm包信息存储在【In package.json】
一一一一一一一一一一一一一一一一一一一一一一
创建好vue项目后，用IDEA或者你喜欢的开发工具打开。

说明：选择TypeScript语法是为了更方便地引入Element Plus组件，ts也完全兼容JavaScript语法。

踩坑建议：npm很多命令需要管理员权限，我用IDEA管理vue项目，所以我应该右键IDEA→属性→兼容性
勾选 以管理员的身份运行此程序 ，这样用IDEA打开的终端就有管理员权限了。

---

Vite项目初始配置

博主是用Vite创建的项目，语法为TypeScript。
先安装老三样吧：

npm install element-plus axios vue-router --save
1

安装自动导入插件（官方推荐）

npm install -D unplugin-vue-components unplugin-auto-import
1

踩坑：Vite项目用常规方法在main.ts导入element-plus老是报错，换成上面的自动导入插件就解决了。

---

【vite.config.ts】写入如下内容，配置了自动导入插件，同时还配置了跨域代理：

import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import {ElementPlusResolver} from 'unplugin-vue-components/resolvers'

export default defineConfig({
    plugins: [
        [vue()],
        AutoImport({
            imports: ['vue', 'vue-router'],
            dts: "src/auto-import.d.ts",
            resolvers: [ElementPlusResolver()],
        }),
        Components({
            resolvers: [ElementPlusResolver()],
        }),
    ],
    server:{
        proxy: {
            // 跨域代理
            '/api': {
                target: 'http://localhost:8000/ ',
                changeOrigin: true,
                rewrite: (path) => path.replace(/^\/api/, ''),
                ws: true,
            },
        },

    }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

---

src目录下创建router目录，然后在router目录创建【index.ts】文件并写入如下内容：

import Login from "../components/Login.vue";
import Home from "../components/Home.vue";
import { createRouter, createWebHistory } from "vue-router";

const routes = [
    { path: '/', component: Login },
    { path: '/home', component: Home },
];

export default createRouter({
    history: createWebHistory(),
    routes,
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14

备注：鼠标悬停在报错位置，即可快速新建Login.vue和Home.vue。

---

【main.ts】文件重新写一下：

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from "./router";
import 'element-plus/dist/index.css'

const app = createApp(App)

app.use(router)
app.mount('#app')
1
2
3
4
5
6
7
8
9
10

---

【App.vue】内容基本删完了，变成了这个样子：

<template>
  <router-view/>
</template>

<style>
</style>
1
2
3
4
5
6