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

项目用到的技术：

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 adminfrom django.urls import pathfrom 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.jsSTATICFILES_DIRS = [os.path.join(BASE_DIR, "frontend/dist/static"),]

到此基本就配置完成了，运行命令就可以直接查看效果

python manage.py runserver