下一章:

二、django-vue-admin开源项目二次开发——修改默认菜单_做测试的喵酱的博客-CSDN博客

一、源码地址

注意,一定要使用这个地址。(使用其他地址下载下来的感觉代码缺失,踩了大坑)

django-vue-admin: 基于RBAC模型的权限控制的一整套基础开发平台,前后端分离,后端采用 django+django-rest-framework,前端采用 vue+ElementUI。

二、准备工作

Python >= 3.8.0 (推荐3.9+版本)
nodejs >= 14.0 (推荐最新)
Mysql >= 5.7.0 (可选,默认数据库sqlite3,推荐8.0版本)
Redis(可选,最新版)
项目运行及部署 | Django-Vue-Admin

三、前端

3.1 环境检查

查看当前node.js版本

node -v

注意,这个项目node 18 版本,会报错。

我使用的是node16版本 

帮助文档:

mac卸载与安装指定版本node.js_做测试的喵酱的博客-CSDN博客

3.2 启动项目

1、克隆项目

git clone https://gitee.com/dvadmin/django-vue-admin-pro.git

2、进入项目目录

cd web

3、安装依赖

方式一:

npm install --registry=https://registry.npm.taobao.org

方式二:

先安装cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

 再使用cnpm安装依赖

sudo cnpm install --registry=https://registry.npm.taobao.org

4、 启动服务
npm run dev

5、浏览器访问 http://localhost:8080

# .env.development 文件中可配置启动端口等参数

3.3 发布项目

发布♗

# 构建测试环境
npm run build:stage

# 构建生产环境
npm run build:prod

四、后端项目

4.1 前提

下载项目,前端和后端是在一起的。

使用pycharm打开 后端项目的时候,要直接打开backend项目,而不是打开django-vue-admin目录。

1. 进入项目目录 cd backend

2、在项目根目录中,复制 ./conf/env.example.py 文件为一份新的到 ./conf 文件夹下,并重命名为 env.py

4.2 数据库配置

conf/env.py 配置数据库信息

数据库 ENGINE ,默认演示使用 sqlite3 数据库,正式环境建议使用 mysql 数据库

4.2.1 配置sqlite3 数据库

# sqlite3 设置
DATABASE_ENGINE = "django.db.backends.sqlite3"
DATABASE_NAME = os.path.join(BASE_DIR, "db.sqlite3")

# 使用mysql时,改为此配置
# DATABASE_ENGINE = "django.db.backends.mysql"
# DATABASE_NAME = 'backend' # mysql 时使用

# 数据库地址 改为自己数据库地址
DATABASE_HOST = "127.0.0.1"
# # 数据库端口
DATABASE_PORT = 3306
# # 数据库用户名
DATABASE_USER = "root"
# # 数据库密码
DATABASE_PASSWORD = "123456"

4.2.2 配置mysql 数据库

centos卸载mysql5.7&安装mysql8.0_做测试的喵酱的博客-CSDN博客

1、mysql数据库版本建议:8.0 mysql数据库字符集:utf8mb4

2、在mysql中,创建名为backend的库

CREATE DATABASE backend charset=utf8mb4;

3、在 env.py 中配置数据库信息 

# 使用mysql时,改为此配置
DATABASE_ENGINE = "django.db.backends.mysql"
DATABASE_NAME = 'backend' # mysql 时使用

# 数据库地址 改为自己数据库地址
DATABASE_HOST = "127.0.0.1"
# # 数据库端口
DATABASE_PORT = 3306
# # 数据库用户名
DATABASE_USER = "root"
# # 数据库密码
DATABASE_PASSWORD = "123456"

4.3 本地项目,安装依赖 

pip3 install -r requirements.txt

4.4  编辑__init__.py文件

在setting.py文件所在的同一目录下的__init__.py文件

编辑__init__.py文件。加入以下代码

import pymysql
pymysql.version_info = (1, 4, 13, "final", 0)
pymysql.install_as_MySQLdb()

4.5 数据库迁移

生成迁移脚本

python3 manage.py makemigrations

执行迁移 

python3 manage.py migrate

初始化数据 

python3 manage.py init

启动项目 

python3 manage.py runserver 127.0.0.1:8000
或者:
python3 manage.py runserver 0.0.0.0:8000
 

初始账号:superadmin 密码:admin123456

后端接口文档地址:http://127.0.0.1:8000/swagger

五、前后端联调

5.1 启动后端项目

python3 manage.py runserver 0.0.0.0:8000

启动项目后,查一下后端的ip地址 

5.2 启动前端项目

1、修改前端项目监听的后端地址

将两个文件: .env.development 与.env.test 中的监听地址,改成真实的后端地址

# 后端接口地址及端口(域名)
VUE_APP_API = "http://192.168.43.224:8000"

2、启动项目:

npm run serve

http://192.168.43.224:8080/

登录前端页面

初始账号:superadmin 密码:admin123456



后台手册 | Django-Vue-Admin

后台手册 | Django-Vue-Admin

Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐