本篇文章主要介紹了Django+Vue.js搭建前后端分離項目的示例，具有一定參考價值，有興趣的可以了解一下

在寫這篇文章的時候，順帶學(xué)習(xí)了一下關(guān)于Markdown的使用方法。

筆者是個渣渣，一切都是自己在摸索的學(xué)著，所以也談不上什么體系、系統(tǒng)學(xué)習(xí)。在這里主要是為了實現(xiàn)把項目前后端分離開。

這里假設(shè)你的電腦上所需的django、vue.js已經(jīng)有了，如果沒有，往下拉就是vue.js的安裝流程。django前面寫過了，就不贅述了。

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

1.創(chuàng)建django項目

命令：django-admin startproject ulb_manager

結(jié)構(gòu)：├── manage.py

└── ulb_manager

├── __init__.py

├── settings.py

├── urls.py

└── wsgi.py

2.進入項目根目錄，創(chuàng)建一個app作為項目后端

命令：cd ulb_manager

python manage.py startapp backend

結(jié)構(gòu)比上面最基本的，多了一塊backend

3.使用vue-cli創(chuàng)建一個vue.js項目作為項目前端

命令：vue-init webpack frontend

界面：

Project name:(默認(rèn)回車鍵)

Project description：(默認(rèn)回車鍵)

Auther：(輸入自己的名字，隨意)

...：(默認(rèn)yes和回車鍵，暫時不太懂，剛開始接觸，網(wǎng)上也沒查到這一塊東西，就全部選擇默認(rèn)或者Yes了)

結(jié)構(gòu)多了一塊frontend

結(jié)構(gòu)總結(jié)：

項目根目錄有兩個新文件夾，一個叫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)使用通用視圖創(chuàng)建最簡單的模板控制器。

代碼：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：之前學(xué)習(xí)django，是要在settings.py下的INSTALLED_APPS配置項下添加app的，所以我自己添加了'backend'。

7.配置靜態(tài)文件搜索路徑

打開settings.py(ulb_manager/settings.py)，找到STATICFILES_DIRS配置項，配置如下：# Add for vue.js

STATICFILES_DIRS = [

os.path.join(BASE_DIR, "frontend/dist/static"),

]

如果沒有，自己添加。

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

運行界面

二，安裝vue.js

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

1.node.js

vue.js的推薦安裝環(huán)境是node.js，因此，我是先安裝的node.js。

登陸node.js官網(wǎng)，下載最新的v6.11.1版本。

2.npm

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

3.cnpm

在命令行中輸入命令：npm install -g cnpm --registry=http://registry.npm.taobao.org

等待安裝完成。

4.安裝vue-cli腳手架構(gòu)建工具

在命令行中輸入命令：npm install -g vue-cli

等待安裝結(jié)束。

到此，vue-cli已經(jīng)安裝完成。

PS:暫時摸不清楚如何把文件的目錄樹結(jié)構(gòu)在Markdown里寫出來。

有所修改，因為完全按照原版搬上來根本無法運行。寫了一個最基本的框架。像個無頭蒼蠅一樣……(而且也買不起云主機……新手也沒必要買)

Markdown用起來覺得很自由，而且還能調(diào)用一些html的指令，還是蠻有意思的，雖然還沒摸清楚，到底能調(diào)用多少、哪些指令……

總結(jié)

以上是生活随笔為你收集整理的php node.js django,Vue.js和Django搭建前后端分离项目示例详解的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。