Django vue前后端分離整合過(guò)程解析
最近接到一個(gè)任務(wù)，就是用django后端，前段用vue，做一個(gè)普通的簡(jiǎn)單系統(tǒng)，我就是一搞后端的，聽(tīng)到vue也是比較震驚，之前壓根沒(méi)接觸過(guò)vue.
看了vue的一些文檔，還有一些項(xiàng)目，先說(shuō)一下django與vue的完美結(jié)合吧！
首先是創(chuàng)建一個(gè)django項(xiàng)目
django-admin startproject mysite # 創(chuàng)建mysite項(xiàng)目
django-admin startapp blog # 創(chuàng)建blog應(yīng)用
一、接下來(lái)就是安裝關(guān)于vue 的東西了
1、首先安裝node.js，官網(wǎng)地址：https://nodejs.org/zh-cn/download/
2、使用npm淘寶鏡像，避免npm下載速度過(guò)慢的問(wèn)題 npm install -g cnpm --registry=https://registry.npm.taobao.org
3、使用cnpm 下載vue-cli cnmp install -g cue-cli
二、在django項(xiàng)目中創(chuàng)建vue項(xiàng)目
首先，進(jìn)去django項(xiàng)目的項(xiàng)目目錄中，執(zhí)行：
vue-init webpack firstvue## firstvue為前端項(xiàng)目的名稱(chēng)，可自定義。創(chuàng)建的項(xiàng)目會(huì)跟django中的app一樣的目錄登記。類(lèi)似一個(gè)前端app一樣。
mysite 文件夾 blog 文件夾 和 firstvue文件夾 要在同一目錄級(jí)別
在創(chuàng)建時(shí)，會(huì)彈出很多選擇項(xiàng)，根據(jù)自己需求自定義修改。也可以全部回車(chē)，使用默認(rèn)的。這里我就直接全部回車(chē)。
三、編寫(xiě)vue前端項(xiàng)目，直接編寫(xiě)就是，調(diào)試則可以執(zhí)行。也可先不編寫(xiě)，跳過(guò)這一步
cd firstvue## 進(jìn)入到上一部創(chuàng)建的firstvue項(xiàng)目中
cnpm install ## 安裝需要的依賴(lài)模塊
cnpm run dev ## 運(yùn)行調(diào)式的服務(wù)，會(huì)啟動(dòng)一個(gè)web服務(wù)，訪問(wèn)localhost:8080 即可調(diào)式
四、vue項(xiàng)目寫(xiě)完后，打包vue項(xiàng)目，然后修改django配置，將vue集成到django中
cnpm run build ## 打包vue項(xiàng)目，會(huì)將所有東西打包成一個(gè)dist文件夾
五、接下來(lái)就是配置django中的setting文件了：
六、修改django的主目錄的urls文件：
七、啟動(dòng)django服務(wù)，訪問(wèn)localhost:8000 則可以出現(xiàn)vue的首頁(yè)。
python manage.py runserver
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Python使用Pandas讀寫(xiě)Excel實(shí)例解析
這篇文章主要介紹了Python使用Pandas讀寫(xiě)Excel實(shí)例解析,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-11-11
Python利用matplotlib繪制圓環(huán)圖(環(huán)形圖)的實(shí)戰(zhàn)案例
環(huán)形圖也被稱(chēng)為圓環(huán)圖,它在功能上與餅圖相同,只是中間有一個(gè)空白,并且能夠同時(shí)支持多個(gè)統(tǒng)計(jì)數(shù)據(jù),下面這篇文章主要給大家介紹了關(guān)于Python利用matplotlib繪制圓環(huán)圖的實(shí)戰(zhàn)案例,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-08-08
TensorFlow實(shí)現(xiàn)RNN循環(huán)神經(jīng)網(wǎng)絡(luò)
這篇文章主要介紹了TensorFlow實(shí)現(xiàn)RNN循環(huán)神經(jīng)網(wǎng)絡(luò)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-02-02
Python3用tkinter和PIL實(shí)現(xiàn)看圖工具
這篇文章給大家分享了Python3用tkinter和PIL實(shí)現(xiàn)看圖工具的詳細(xì)實(shí)例代碼，有興趣的朋友參考學(xué)習(xí)下。2018-06-06
Python實(shí)現(xiàn)視頻下載與合成的示例代碼
這篇文章主要為大家詳細(xì)介紹了Python是如何實(shí)現(xiàn)視頻的下載以及合成的，文中的實(shí)現(xiàn)步驟講解詳細(xì)，感興趣的小伙伴快跟隨小編一起學(xué)習(xí)一下吧2022-04-04
探索Python fcntl模塊文件鎖和文件控制的強(qiáng)大工具使用實(shí)例
這篇文章主要介紹了Python fcntl模塊文件鎖和文件控制的強(qiáng)大工具使用實(shí)例探索,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2024-01-01
pycharm之英文輸入法變成全角字符無(wú)法輸入問(wèn)題
這篇文章主要介紹了pycharm之英文輸入法變成全角字符無(wú)法輸入問(wèn)題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11
這篇文章主要為大家詳細(xì)介紹了Python3圖片文件批量重命名處理，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-10-10
Python打包文件夾的方法小結(jié)(zip,tar,tar.gz等)
這篇文章主要介紹了Python打包文件夾的方法,結(jié)合實(shí)例形式總結(jié)分析了Python打包成zip,tar,tar.gz等格式文件的操作技巧,需要的朋友可以參考下2016-09-09
這篇文章主要介紹了Python smtp郵件發(fā)送模塊用法教程,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-06-06