Django+vue搭建一个前后端分离的web 一

     阅读:35

项目用到的技术:

Vue、bootstrap、Django、python;
前后端分离项目的搭建和目录结构介绍:
创建Django项目;
jango-admin startproject 项目名称

目录结构:

在这里插入图片描述

进入项目根目录,创建一个 App 作为项目后端:

cd 项目名称
python manage.py startapp App名称
目录结构:
在这里插入图片描述

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

vue-init webpack sangfor_ui
项目目录:
在这里插入图片描述

使用 webpack 打包vue项目

cd sangfor_ui
npm install
npm run build
此时直接运行npm run dev也可以直接查看前端 vue界面
构建完成会生成一个文件夹,名字叫dist,里面有一个 index.html 和一个 文件夹static。

**

使用Django的通用视图 TemplateView修改静态指向路径(就是让Django访问目录指向我们刚才打包的dist/index.html)

**
找到项目,跟目录下的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(r'', TemplateView.as_view(template_name="index.html")),
]

**

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

**

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        # 'DIRS': [],
        '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