Django+Vue.js搭建前后端分离项目的示例

在写这篇文章的时候，顺带学习了一下关于Markdown的使用方法。

笔者是个渣渣，一切都是自己在摸索的学着，所以也谈不上什么体系、系统学习。在这里主要是为了实现把项目前后端分离开。

这里假设你的电脑上所需的django、vue.js已经有了，如果没有，往下拉就是vue.js的安装流程。django前面写过了，就不赘述了。

一，正常搭建前后端分离项目流程

1.创建django项目

命令：

django-admin startproject ulb_manager

结构：

├── manage.py
└── ulb_manager
  ├── __init__.py
  ├── settings.py
  ├── urls.py
  └── wsgi.py

2.进入项目根目录，创建一个app作为项目后端

命令：

cd ulb_manager
python manage.py startapp backend

结构比上面最基本的，多了一块backend

3.使用vue-cli创建一个vue.js项目作为项目前端

命令：

vue-init webpack frontend

界面：

Project name:（默认回车键）

Project description：（默认回车键）

Auther：（输入自己的名字，随意）

…：（默认yes和回车键，暂时不太懂，刚开始接触，网上也没查到这一块东西，就全部选择默认或者Yes了）

结构多了一块frontend

结构总结：

项目根目录有两个新文件夹，一个叫backend，一个叫frontend，分别是：backend Django的一个app、frontend Vue.js项目

4.使用webpack打包Vue.js项目

命令：

cd frontend
npm install
npm run build

5.使用Django的通用视图TemplateView

在项目根目录下urls.py（即ulb_manager/urls.py）使用通用视图创建最简单的模板控制器。

代码：

urlpatterns = [
  url(r'^admin/', admin.site.urls),
  url(r'^$',TemplateView.as_view(template_name="index.html")),
  #url(r'^api/',include('backend.urls', namespace='api'))
  #最后一行代码我注释掉，因为运行报错：Error:No module named 'backend.urls',暂时解决不掉，但是我运行的时候，注释掉这行代码，是能正常运行的。
]

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

打开settings.py(即ulb_manager/settings.py)找到TEMPLATES配置项，修改如下：

TEMPLATES = [
  {
    'BACKEND': 'django.template.backends.django.DjangoTemplates',
    #'DIRS': [],
    'DIRS':['frontend/dist'],
    'APP_DIRS': True,
    'OPTIONS': {								 
 1/2    1 2 下一页 尾页