django與vue的完美結(jié)合_實(shí)現(xiàn)前后端的分離開(kāi)發(fā)之后在整合的方法
最近接到一個(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)目的名稱，可自定義。創(chuàng)建的項(xiàng)目會(huì)跟django中的app一樣的目錄登記。類似一個(gè)前端app一樣。
mysite 文件夾 blog 文件夾 和 firstvue文件夾 要在同一目錄級(jí)別
在創(chuàng)建時(shí)，會(huì)彈出很多選擇項(xiàng)，根據(jù)自己需求自定義修改。也可以全部回車，使用默認(rèn)的。這里我就直接全部回車。
三、編寫(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
以上這篇django與vue的完美結(jié)合_實(shí)現(xiàn)前后端的分離開(kāi)發(fā)之后在整合的方法就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
- vue-resource post數(shù)據(jù)時(shí)碰到Django csrf問(wèn)題的解決
- 使用django和vue進(jìn)行數(shù)據(jù)交互的方法步驟
- django和vue實(shí)現(xiàn)數(shù)據(jù)交互的方法
- django rest framework vue 實(shí)現(xiàn)用戶登錄詳解
- Python Django Vue 項(xiàng)目創(chuàng)建過(guò)程詳解
- Vue+Django項(xiàng)目部署詳解
- Django與Vue語(yǔ)法的沖突問(wèn)題完美解決方法
- Django+Vue.js搭建前后端分離項(xiàng)目的示例
- Django vue前后端分離整合過(guò)程解析
相關(guān)文章
您可以在幾分鐘內(nèi)編寫(xiě)一段 Python腳本和讓桌面擁有令人難以置信的相當(dāng)漂亮的 GUI應(yīng)用程序。這篇文章向您展示如何使用一 Python-著稱的 GUI 庫(kù)wxPython，來(lái)做到這一點(diǎn)的。向您的朋友和鄰居介紹！2008-10-10
這篇文章主要介紹了python基礎(chǔ)教程之縮進(jìn)介紹,本文以if語(yǔ)句為例講解python中的縮進(jìn),需要的朋友可以參考下2014-08-08
Monkey測(cè)試是Android平臺(tái)自動(dòng)化測(cè)試的一種手段，通過(guò)Monkey程序模擬用戶觸摸屏幕、滑動(dòng)Trackball、按鍵等操作來(lái)對(duì)設(shè)備上的程序進(jìn)行壓力測(cè)試，檢測(cè)程序多久的時(shí)間會(huì)發(fā)生異常2016-12-12
Python是一種非常動(dòng)態(tài)的語(yǔ)言，函數(shù)定義中完全沒(méi)有類型約束。下面這篇文章主要給大家詳細(xì)介紹了Python中類型檢查的相關(guān)資料，需要的朋友可以參考借鑒，下面來(lái)一起看看吧。2017-02-02
pandas中DataFrame提供了一個(gè)靈活高效的groupby功能,它使你能以一種自然的方式對(duì)數(shù)據(jù)集進(jìn)行切片、切塊、摘要等操作,下面這篇文章主要給大家介紹了關(guān)于Python?groupby函數(shù)詳解的相關(guān)資料,需要的朋友可以參考下2022-07-07
Python tkinter實(shí)現(xiàn)桌面軟件流程詳解
這篇文章主要介紹了Python tkinter做一個(gè)好用的桌面軟件，100%你會(huì)愛(ài)上它，文中的示例代碼講解詳細(xì)，快跟小編一起動(dòng)手試一試吧2022-10-10
python中count函數(shù)簡(jiǎn)單的實(shí)例講解
在本篇文章里小編給大家整理了關(guān)于python中count函數(shù)簡(jiǎn)單的實(shí)例講解，有興趣的朋友們可以參考下。2020-02-02
這篇文章主要來(lái)和大家分享一個(gè)Python提高運(yùn)維效率的腳本，文中的示例代碼講解詳細(xì)，具有一定的學(xué)習(xí)價(jià)值，感興趣的小伙伴可以參考下2023-05-05
Python 利用pandas和mysql-connector獲取Excel數(shù)據(jù)寫(xiě)入到MySQL數(shù)據(jù)庫(kù)
在實(shí)際應(yīng)用中,我們可能需要將Excel表格中的數(shù)據(jù)導(dǎo)入到MySQL數(shù)據(jù)庫(kù)中,以便于進(jìn)行進(jìn)一步的數(shù)據(jù)分析和處理,本文將介紹如何使用Python將Excel表格中的數(shù)據(jù)插入到MySQL數(shù)據(jù)庫(kù)中,需要的朋友可以參考下2023-10-10
這篇文章主要介紹了Django解決frame拒絕問(wèn)題的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12