[Python] Django集成Angular代码实现前后端不分离

Angular与Django前后端不分离时，需要将angular的代码集成待Django中，搜了搜，网上居然没有一篇相关的教程，全是简单讲了讲AngularJS和Django的，也不全面，这就很离谱！！！

Angular原生的项目需要跑在webstorm上，所以代码不能直接使用，需要进行编译。

参考JAVA跟Angular前后端不分离的教程，趁着这次简单搞了一次Django集成Angular前端代码，写个简单的教程记录一下。

1. angular项目编译

不懂编译angular的前端小白，请自行百度。
angular项目编译之后，生成的dist文件夹目录结构大致如下：

- dist
  - index.html
  - x1.js
  - x2.js
  - ...
  ...  

2.将dist文件夹重命名为static移入Django项目

移入之后，Django项目的目录结构大致如下：

- Project
  - __init__.py
  - settings.py
  - urls.py
  - wsgi.py
- static
  - index.html
  - x1.js
  - x2.js
  - ...
  ...  
- templates
- user
  - migartions
    - ...
  - __init__.py
  - admin.py
  - apps.py
  - models.py

3. 修改项目的settings配置

为了直接使用angular编译出来的前端代码不做过多的修改，我们打开项目的settings.py文件，修改templates目录的配置，找到:

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        # 'DIRS': [os.path.join(BASE_DIR, 'templates')]   
        'DIRS': [os.path.join(BASE_DIR, 'static')]    # 将templates修改为static，这样Django就会去static目录下找模板(.html)文件了
        ,
        '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',
            ],
        },
    },
]

除了这样，我们还要修改静态文件的配置：

STATIC_URL = '/static/'
STATICFILES_DIRS = (
    os.path.join(BASE_DIR, 'static'),
)

4. 修改index.html

<base href="/static/">

以上就能访问到angular编写的前端页面了。但是还有点问题，请求静态文件的路由没有编写，所以显示的时候可能还会有问题。

接下来就是配置静态文件。

5. 一次配置所有静态文件路由

在settings.py内配置

STATIC_URL = '/static/'
STATICFILES_DIRS = (
    os.path.join(BASE_DIR, 'static'),
)

在urls.py内配置

from django.conf.urls import url
from django.views.static import serve
from MyProject.settings import STATICFILES_DIRS

urlpatterns = [
    ...
    url(r'^(?P<path>.*)$', serve, {'document_root': STATICFILES_DIRS[0]}),
    ...
]

如果你想知道为什么要这么写，可以看看：[Python] Django中的serve和FileResponse