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

最新推荐文章于 2024-08-08 07:46:04 发布

不想悲伤到天明

最新推荐文章于 2024-08-08 07:46:04 发布

阅读量2.3k

点赞数 1

分类专栏： Python

本文链接：https://blog.csdn.net/qq_41661809/article/details/113699733

版权

Python 专栏收录该内容

28 篇文章 6 订阅

订阅专栏

本文详细介绍了如何使用Django搭建后端服务器，并与Vue.js前端进行整合。首先创建Django项目和应用，然后通过vue-cli初始化Vue.js项目，构建前端。接着配置Django的URLs和静态文件路径，使Django能够找到前端的HTML和静态文件。最后，启动Django服务器，实现前后端分离的应用。

摘要由CSDN通过智能技术生成

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

步骤二: 进入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"),
]

步骤十 : 运行