Django+Vue.js搭建前后端分離項(xiàng)目的示例
在寫(xiě)這篇文章的時(shí)候，順帶學(xué)習(xí)了一下關(guān)于Markdown的使用方法。
筆者是個(gè)渣渣，一切都是自己在摸索的學(xué)著，所以也談不上什么體系、系統(tǒng)學(xué)習(xí)。在這里主要是為了實(shí)現(xiàn)把項(xiàng)目前后端分離開(kāi)。
這里假設(shè)你的電腦上所需的django、vue.js已經(jīng)有了，如果沒(méi)有，往下拉就是vue.js的安裝流程。django前面寫(xiě)過(guò)了，就不贅述了。
一，正常搭建前后端分離項(xiàng)目流程
1.創(chuàng)建django項(xiàng)目
命令：
django-admin startproject ulb_manager
結(jié)構(gòu)：
├── manage.py └── ulb_manager ├── __init__.py ├── settings.py ├── urls.py └── wsgi.py
2.進(jìn)入項(xiàng)目根目錄，創(chuàng)建一個(gè)app作為項(xiàng)目后端
命令：
cd ulb_manager python manage.py startapp backend
結(jié)構(gòu)比上面最基本的，多了一塊backend
3.使用vue-cli創(chuàng)建一個(gè)vue.js項(xiàng)目作為項(xiàng)目前端
命令：
vue-init webpack frontend
界面：
Project name:（默認(rèn)回車鍵）
Project description：（默認(rèn)回車鍵）
Auther：（輸入自己的名字，隨意）
...：（默認(rèn)yes和回車鍵，暫時(shí)不太懂，剛開(kāi)始接觸，網(wǎng)上也沒(méi)查到這一塊東西，就全部選擇默認(rèn)或者Yes了）
結(jié)構(gòu)多了一塊frontend
結(jié)構(gòu)總結(jié)：
項(xiàng)目根目錄有兩個(gè)新文件夾，一個(gè)叫backend，一個(gè)叫frontend，分別是：backend Django的一個(gè)app、frontend Vue.js項(xiàng)目
4.使用webpack打包Vue.js項(xiàng)目
命令：
cd frontend npm install npm run build
5.使用Django的通用視圖TemplateView
在項(xiàng)目根目錄下urls.py（即ulb_manager/urls.py）使用通用視圖創(chuàng)建最簡(jiǎn)單的模板控制器。
代碼：
urlpatterns = [
url(r'^admin/', admin.site.urls),
url(r'^$',TemplateView.as_view(template_name="index.html")),
#url(r'^api/',include('backend.urls', namespace='api'))
#最后一行代碼我注釋掉，因?yàn)檫\(yùn)行報(bào)錯(cuò)：Error:No module named 'backend.urls',暫時(shí)解決不掉，但是我運(yùn)行的時(shí)候，注釋掉這行代碼，是能正常運(yùn)行的。
]
6.配置Django項(xiàng)目的模板搜索路徑
打開(kāi)settings.py(即ulb_manager/settings.py)找到TEMPLATES配置項(xiàng)，修改如下：
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配置項(xiàng)下添加app的，所以我自己添加了'backend'。
7.配置靜態(tài)文件搜索路徑
打開(kāi)settings.py(ulb_manager/settings.py)，找到STATICFILES_DIRS配置項(xiàng)，配置如下：
# Add for vue.js STATICFILES_DIRS = [ os.path.join(BASE_DIR, "frontend/dist/static"), ]
如果沒(méi)有，自己添加。
到這里，運(yùn)行django項(xiàng)目已經(jīng)可以正常運(yùn)行了。正常運(yùn)行的界面如下：
運(yùn)行界面
二，安裝vue.js
如果電腦上，沒(méi)有vue.js，以下是安裝vue.js的過(guò)程：
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:暫時(shí)摸不清楚如何把文件的目錄樹(shù)結(jié)構(gòu)在Markdown里寫(xiě)出來(lái)。
有所修改，因?yàn)橥耆凑赵姘嵘蟻?lái)根本無(wú)法運(yùn)行。寫(xiě)了一個(gè)最基本的框架。像個(gè)無(wú)頭蒼蠅一樣……（而且也買(mǎi)不起云主機(jī)……新手也沒(méi)必要買(mǎi)）
Markdown用起來(lái)覺(jué)得很自由，而且還能調(diào)用一些html的指令，還是蠻有意思的，雖然還沒(méi)摸清楚，到底能調(diào)用多少、哪些指令……
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
本文主要介紹了Vue3中事件總線的具體使用，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
vue3實(shí)現(xiàn)多個(gè)表格同時(shí)滾動(dòng)并固定表頭
這篇文章主要給大家介紹了vue3中多個(gè)表格怎么同時(shí)滾動(dòng)并且固定表頭,文中通過(guò)代碼示例給大家講解的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-02-02
這篇文章主要介紹了vue修改Element的el-table樣式的4種方法，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下2020-09-09
基于Vue3實(shí)現(xiàn)數(shù)字華容道游戲的示例代碼
這篇文章主要為大家詳細(xì)介紹了如何利用Vue編寫(xiě)一個(gè)數(shù)字華容道游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要給大家介紹了關(guān)于vite基本常見(jiàn)配置講解的相關(guān)資料,最近做項(xiàng)目要求將webpack打包方式換成vite,下面將詳細(xì)講解一下配置vite需要改動(dòng)的東西,需要的朋友可以參考下2023-11-11
computed 計(jì)算屬性是通過(guò)屬性計(jì)算得來(lái)的屬性，watch屬性變化，就會(huì)觸發(fā)監(jiān)聽(tīng)的函數(shù)。下面通過(guò)本文給大家介紹Vue中的 computed 和 watch，感興趣的朋友一起看看吧2018-06-06
這篇文章主要介紹了vue如何查找數(shù)組中符合條件的對(duì)象，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了vue中全局變量的定義和使用，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-06-06
vue+swiper實(shí)現(xiàn)時(shí)間軸效果
這篇文章主要為大家詳細(xì)介紹了vue+swiper實(shí)現(xiàn)時(shí)間軸效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
vue監(jiān)聽(tīng)鍵盤(pán)事件的相關(guān)總結(jié)
這篇文章主要介紹了vue監(jiān)聽(tīng)鍵盤(pán)事件的相關(guān)總結(jié)，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2021-01-01