python+Django+vue 搭建前后端分离项目

步骤一 : 创建项目所在文件夹。

步骤二: 进入CMD模式输入 :

django-admin startproject backend

步骤三 : 进入backend

步骤四:查看Django后端服务器情况。

显示下面情况表示正常。

步骤五 : 回退到项目根目录,输入:

django-admin startapp anime

anime是你的app的名字(anime和backend同级)

创建完成 :

接下来开始创建前端。

步骤六: 使用vue-cli在根目录创建一个名称叫【frontend】的Vue.js项目作为项目前端

vue-init webpack frontend

步骤七 : 使用 webpack 打包vue项目

cd frontend
npm install
npm run build

构建完成会生成一个文件夹，名字叫dist，里面有一个 index.html 和一个文件夹static。

步骤八 : 找到backend/ urls.py文件作出如下修改

from django.contrib import admin
from django.urls import path
from django.views.generic.base import TemplateView # 注意加上这句urlpatterns = [# path('admin/', admin.site.urls),path('admin/', admin.site.urls),path(r'', TemplateView.as_view(template_name="index.html")),
]

步骤九 : 配置Django项目的模板搜索路径和静态文件搜索路径找到根目录下 backend/settings.py文件并打开，找到TEMPLATES配置项，修改如下:

TEMPLATES = [{'BACKEND': 'django.template.backends.django.DjangoTemplates','DIRS': ['frontend/dist'],'APP_DIRS': True,'OPTIONS': {'context_processors': ['django.template.context_processors.debug','django.template.context_processors.request','django.contrib.auth.context_processors.auth','django.contrib.messages.context_processors.messages',],},},
]
# Add for vue.js
STATICFILES_DIRS = [os.path.join(BASE_DIR, "frontend/dist/static"),
]

步骤十 : 运行

python manage.py runserver

Reference : https://www.cnblogs.com/zhixi/p/9996832.html

python+Django+vue 搭建前后端分离项目相关推荐

python+django+vue搭建前后端分离项目Part1
文章目录 Python环境搭建安装django框架创建django项目新建static静态文件夹创建django App(后端) 创建vue项目(前端) 集成vue项目到django 打包vu ...
python+django+vue搭建前后端分离项目Part3——后端django
文章目录创建django项目数据库创建和连接创建 Django APP 后端搭建模型层model.py 视图层view.py 路由配置数据迁移参考文章创建django项目 (my_dja ...
python+django+vue搭建前后端分离项目Part2——前端Vue
文章目录创建vue项目主要文件及其作用 src/components/ src/router/index.js src/main.js static/ 创建vue项目 (my_django) XX ...
python django vue +VSCode 前后端分离
(文章里的链接不是我写的,都是引用别人的,我只是记录查看) 编辑器:vscode 语言:python 后端:django 前端:vue 前后端分离一.项目框架搭建 https://blog.csdn ...
Django vue 搭建前后端分离的web 二
bootstrap的安装和使用: 安装: 在vue项目下使用npm直接安装即可: 由于bootstrap依赖jQuery,所以第一步安装jQuery: npm install jquery 检查在pa ...
从零到一 django + vue 构建前后端分离项目
(本文在win10环境下进行) django 和 vue 的优点 django的python血统,开发起来基本上是站在巨人的肩膀上,用起来顺手,加上drf这个restful API 框架,SaltSt ...
Django vue 搭建前后端分离的web 三
Django连接数据库(MySQL) : 第一步:使用命令[pip install mysqlclient ],可以下载并安装最新版本的mysqlclient 第二步:创建数据库:create dat ...
php node.js django,Vue.js和Django搭建前后端分离项目示例详解
本篇文章主要介绍了Django+Vue.js搭建前后端分离项目的示例,具有一定参考价值,有兴趣的可以了解一下在写这篇文章的时候,顺带学习了一下关于Markdown的使用方法. 笔者是个渣渣,一切都是 ...
B站云E办Vue+SpringBoot前后端分离项目——MVC三层架构搭建后台项目
本项目来源B站云E办,笔记整理了项目搭建的过程和涉及的知识点.对于学习来说,不是复制粘贴代码即可,要知其然知其所以然.希望我的笔记能为大家提供思路,也欢迎各位伙伴的指正. 项目前端学习笔记目录 B站云 ...

python+Django+vue 搭建前后端分离项目

python+Django+vue 搭建前后端分离项目相关推荐

最新文章

热门文章