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 ## 安裝需要的依賴模塊 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í)有所幫助,也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章:
1. IntelliJ IDEA安裝插件的方法步驟2. 理解PHP5中static和const關(guān)鍵字3. php模擬實(shí)現(xiàn)斗地主發(fā)牌4. spring acegi security 1.0.0 發(fā)布5. Vue封裝一個(gè)TodoList的案例與瀏覽器本地緩存的應(yīng)用實(shí)現(xiàn)6. Vuex localStorage的具體使用7. jQuery 實(shí)現(xiàn)DOM元素拖拽交換位置的實(shí)例代碼8. .Net Core使用Coravel實(shí)現(xiàn)任務(wù)調(diào)度的完整步驟9. vue 使用localstorage實(shí)現(xiàn)面包屑的操作10. MyBatis中的JdbcType映射使用詳解

網(wǎng)公網(wǎng)安備