下一章:
二、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