djang +vue 搭建一体化前后端分离项目

一、项目实现的功能

项目实现数据的收录以及统计，pdf的生成。以及新闻的展示。

二、项目搭建

1. 所需环境

项目采用语言为python3.6，Django==2.0.5，djangorestframework==3.8.2。所用第三方包如下

cairocffi==0.8.1
CairoSVG==2.1.3
certifi==2018.4.16
cffi==1.11.5
chardet==3.0.4
coreapi==2.3.3
coreschema==0.0.4
cssselect2==0.2.1
defusedxml==0.5.0
Django==2.0.5
django-ckeditor==5.5.0
django-cors-headers==2.3.0
django-filter==2.0.0
django-js-asset==1.1.0
django-rest-auth==0.9.3
django-suit==0.2.26
djangorestframework==3.8.2
djangorestframework-jwt==1.11.0
html5lib==1.0.1
httplib2==0.11.3
idna==2.7
image==1.5.24
itypes==1.1.0
Jinja2==2.10
MarkupSafe==1.0
mysqlclient==1.3.12
openapi-codec==1.3.2
pdfkit==0.6.1
pdfrw==0.4
Pillow==5.2.0
pycparser==2.18
PyJWT==1.6.4
PyPDF2==1.26.0
Pyphen==0.9.4
pytz==2018.4
reportlab==3.5.2
requests==2.19.1
simplejson==3.16.0
six==1.11.0
tinycss2==0.6.1
uritemplate==3.0.0
urllib3==1.23
webencodings==0.5.1

2.创建后端项目

本项目用pycharm新建一个django项目，安装所需包之后，除自己所需的项目文件之外，项目目录如图所示：

3.创建前端项目

本机需安装node.js>=10.4.1 npm>=6.1，所需安装教程，自行搜索。

3.1 使用vue-cli创建一个vuejs项目作为项目前端

进入项目文件输出命令

vue-init webpack frontend

项目分为两大模块，

• 以django为主的后端
• 以及frontend前端文件夹

4. 前后端的结合

4.1 前端构建

将前后端需求完成后首先进入前端：

cd frontend
npm install
npm run build

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

4.2 使用django的通用视图TemplateView

找到项目根 urls.py (即ulb_manager/urls.py)，使用通用视图创建最简单的模板控制器，访问 『/』时直接返回 index.html

urlpatterns = [
    # path(r'^', include(rounter.urls)),
    path('', TemplateView.as_view(template_name='index.html')),
    path('admin/', admin.site.urls),]
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

4.3 配置Django项目的模板搜索路径

在settings里面设置django找到vue项目里的index.html，找到TEMPLATES配置项，修改如下:

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR, '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',
            ],
        },
    },
]

注意这里的 frontend 是VueJS项目目录，dist则是运行 npm run build 构建出的index.html与静态文件夹 static 的父级目录

这时启动Django项目，访问 / 则可以访问index.html，但是还有问题，静态文件都是404错误，下一步我们解决这个问题

4.4 配置静态文件搜索路径

STATIC_URL = '/static/'
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, "frontend/dist/static"),
]
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')

这样Django不仅可以将/ulb 映射到index.html，而且还可以顺利找到静态文件

此时访问 /ulb 我们可以看到使用Django作为后端的VueJS helloworld

4.5 开发环境

每次部署需要将vue编译即

npm run build

单独运行vue项目时，需解决django的跨域问题，有两种方法解决，一种是在VueJS层上做转发（proxyTable），另一种是在Django层注入header，这里我使用后者，用Django的第三方包 django-cors-headers 来解决跨域问题
安装

pip install django-cors-headers
配置（两步）

1. settings.py 修改

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]

这里要注意中间件加载顺序，列表是有序的哦

1. settings.py 添加

CORS_ORIGIN_ALLOW_ALL = True

至此开发环境已经完成。