怎么在Django中使用Vue.js實現前后端分離

本篇文章為大家展示了怎么在Django中使用Vue.js實現前后端分離，內容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細介紹希望你能有所收獲。

一，正常搭建前后端分離項目流程

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': {
      'context_processors': [
        'django.template.context_processors.debug',
        'django.template.context_processors.request',
        'django.contrib.auth.context_processors.auth',
        'django.contrib.messages.context_processors.messages',
      ],
    },
  },
]

PS：之前學習django，是要在settings.py下的INSTALLED_APPS配置項下添加app的，所以我自己添加了'backend'。

7.配置靜態文件搜索路徑

打開settings.py(ulb_manager/settings.py)，找到STATICFILES_DIRS配置項，配置如下：

# Add for vue.js
STATICFILES_DIRS = [
  os.path.join(BASE_DIR, "frontend/dist/static"),
]

如果沒有，自己添加。

到這里，運行django項目已經可以正常運行了。正常運行的界面如下：

運行界面

二，安裝vue.js

如果電腦上，沒有vue.js，以下是安裝vue.js的過程：

1.node.js

vue.js的推薦安裝環境是node.js，因此，我是先安裝的node.js。

登陸node.js官網，下載最新的v6.11.1版本。

2.npm

集成于Node.js中，不需要裝。

3.cnpm

在命令行中輸入命令：

npm install -g cnpm --registry=http://registry.npm.taobao.org

等待安裝完成。

4.安裝vue-cli腳手架構建工具

在命令行中輸入命令：

npm install -g vue-cli

上述內容就是怎么在Django中使用Vue.js實現前后端分離，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關注億速云行業資訊頻道。