入门指南

• 1. 准备工作
  • 1.1 准备开发环境
  • 1.2 Windows 10 安装Python 3.9.13
  • 1.3 Windows 10 安装MySQL 8.0.39
  • 1.4 Windows 10 安装Node.js 18.20.4
  • 1.5 Windows 10安装 Redis 5.0.14.1
  • 1.6 Windows 10安装VSCode
• 2. 项目安装部署
  • 2.1 下载源码
  • 2.2 配置后端
  • 2.3 启动后端
  • 2.4 配置前端
  • 2.5 启动前端
• 3. 排错指南
  • 3.1 Unknown database错误
  • 3.2 MySQLdb.OperationalError错误
  • 3.3 npm error code ERESOLVE错误
• 4. 参考资料

1. 准备工作

1.1 准备开发环境

下面以在Windows 10 上进行开发为示例。开发环境总览：

• 操作系统：Windows 10
• Python 推荐版本 3.9
• MySQL 推荐版本 8.0
• Node.js 推荐版本 18.20.4(LTS)
• Redis 推荐版本 5
• 开发工具 推荐 VSCode

说明：

• 如果需要更详细的开发环境安装教程，请参考《部署指南--基于Windows搭建开发环境》。

• 如果已准备好开发环境，直接跳到下一章节“项目安装部署”。

1.2 Windows 10 安装Python 3.9.13

Python下载地址

1.3 Windows 10 安装MySQL 8.0.39

MySQL下载地址

MySQL安装教程

1.4 Windows 10 安装Node.js 18.20.4

Node.js下载地址

1.5 Windows 10安装 Redis 5.0.14.1

Redis下载地址

1.6 Windows 10安装VSCode

VSCode下载地址

2. 项目安装部署

2.1 下载源码

下载master分支

git clone https://gitee.com/huge-dream/django-vue3-admin.git

2.2 配置后端

进入目录django-vue3-admin\backend\conf，复制env.example.py文件，重命名为env.py。按需修改配置。

• 数据库配置：如果使用MySQL 8.0 数据库，填写实际的地址、端口、用户名和密码。
• Redis配置：如果使用Redis 5 或以上，填写实际的地址、密码和数据库ID。

2.3 启动后端

进入目录django-vue3-admin\backend，安装依赖库

pip install -r requirements.txt

如果使用MySQL数据库，手动创建数据库django-vue3-admin。（如果使用SQLite数据库，请忽略）

数据库名称：django-vue3-admin
字符集：utf8mb4
排序规则：utf8mb4_general_ci

执行数据库迁移

python manage.py makemigrations
python manage.py migrate

初始化数据：向数据库写入初始化数据

python manage.py init

初始化省市县数据

python manage.py init_area

启动后端

python manage.py runserver 0.0.0.0:8000

访问后端：打开浏览器，输出后端IP地址和端口。例如：http://127.0.0.0:8000/

2.4 配置前端

进入目录django-vue3-admin\web，开发环境配置文件.env.development，用于开发时使用。

# 本地环境
ENV = 'development'

# 本地环境接口地址
VITE_API_URL = 'http://127.0.0.1:8000'

# 是否启用按钮权限
VITE_PM_ENABLED = true

进入目录django-vue3-admin\web，生产环境配置文件.env.production，用于生产部署时使用。

# 线上环境
ENV = 'production'

# 线上环境接口地址
VITE_API_URL = '/api' # docker-compose部署不需要修改，nginx容器自动代理了这个地址

# 是否启用按钮权限
VITE_PM_ENABLED = true

2.5 启动前端

进入目录django-vue3-admin\web，安装依赖

npm install

启动前端

npm run dev

访问前端：打开浏览器，输入前端IP地址和默认端口8080。示例：http://127.0.0.0:8080/。

默认账号：superadmin 密码：admin123456

如果能登录成功，说明后端和前端都启动正常。

3. 排错指南

3.1 Unknown database错误

错误描述

执行命令python manage.py makemigrations，出现错误Unknown database 'django-vue3-admin'

PS E:\python_workspace\django\dvadmin\django-vue3-admin\backend> python .\manage.py makemigrations
请先进行数据库迁移!
请先进行数据库迁移!
E:\python_workspace\django\dvadmin\venv\lib\site-packages\django\core\management\commands\makemigrations.py:158: RuntimeWarning: Got an error checking a consistent migration history performed for database connection 'default': (1049, "Unknown database 'django-vue3-admin'")
  warnings.warn(

解决方法：先手动创建django-vue3-admin数据库，再执行该命令。

3.2 MySQLdb.OperationalError错误

错误描述

执行命令python manage.py migrate，出现错误MySQLdb.OperationalError: (1049, "Unknown database 'django-vue3-admin'")

E:\python_workspace\django\dvadmin\django-vue3-admin\backend> python .\manage.py migrate
Traceback (most recent call last):
  File "E:\python_workspace\django\dvadmin\venv\lib\site-packages\django\db\backends\base\base.py", line 289, in ensure_connection
    self.connect()
  File "E:\python_workspace\django\dvadmin\venv\lib\site-packages\django\utils\asyncio.py", line 26, in inner
    return func(*args, **kwargs)
  File "E:\python_workspace\django\dvadmin\venv\lib\site-packages\django\db\backends\base\base.py", line 270, in connect        
    self.connection = self.get_new_connection(conn_params)
  File "E:\python_workspace\django\dvadmin\venv\lib\site-packages\django\utils\asyncio.py", line 26, in inner
    return func(*args, **kwargs)
  File "E:\python_workspace\django\dvadmin\venv\lib\site-packages\django\db\backends\mysql\base.py", line 247, in get_new_connection
    connection = Database.connect(**conn_params)
  File "E:\python_workspace\django\dvadmin\venv\lib\site-packages\MySQLdb\__init__.py", line 121, in Connect
    return Connection(*args, **kwargs)
  File "E:\python_workspace\django\dvadmin\venv\lib\site-packages\MySQLdb\connections.py", line 193, in __init__
    super().__init__(*args, **kwargs2)
MySQLdb.OperationalError: (1049, "Unknown database 'django-vue3-admin'")

解决方法：先在MySQL手动创建django-vue3-admin数据库，再执行该命令。

3.3 npm error code ERESOLVE错误

错误描述：

配置前端执行命令npm install，提示【npm error code ERESOLVE | npm error ERESOLVE unable to resolve dependency tree】

npm error code ERESOLVE
npm error ERESOLVE unable to resolve dependency tree
npm error
npm error While resolving: django-vue3-admin@3.0.4
npm error Found: eslint@9.10.0
npm error node_modules/eslint
npm error   dev eslint@"^9.9.0" from the root project
npm error
npm error Could not resolve dependency:
npm error peer eslint@"^6.0.0 || ^7.0.0 || ^8.0.0" from @typescript-eslint/parser@5.62.0
npm error node_modules/@typescript-eslint/parser
npm error   dev @typescript-eslint/parser@"^5.46.0" from the root project
npm error   peer @typescript-eslint/parser@"^5.0.0" from @typescript-eslint/eslint-plugin@5.62.0
npm error   node_modules/@typescript-eslint/eslint-plugin
npm error     dev @typescript-eslint/eslint-plugin@"^5.46.0" from the root project
npm error
npm error Fix the upstream dependency conflict, or retry
npm error this command with --force or --legacy-peer-deps
npm error to accept an incorrect (and potentially broken) dependency resolution.

解决方法：使用下面命令代替npm install

npm install --legacy-peer-deps

4. 参考资料

• Django-vue3-admin项目源码
• Django-vue3-admin项目文档
• Django 4.2官方文档

TIP

有任何疑问，欢迎在技术交流区留下您的见解，一起交流成长！