Django vue前後端分離整合過程解析

2022-09-26 19:00:21 字數 1213 閱讀 8663

最近接到乙個任務,就是用django後端,前段用vue,做乙個普通的簡單系統,我就是一搞後端的,聽到vue也是比較震驚,之前壓根沒接觸過vue.

看了vue的一些文件,還有一些專案,先說一下django與vue的完美結合吧!

首先是建立一dulhocpfsr個django專案

django-admin startproject mysite # 建立mysite專案

django-admin startapp blog # 建立blog應用

一、接下來就是安裝關於vue 的東西了

1、首先安裝node.js,官網位址:

2、使用npm**映象,避免npm**速程式設計客棧度過慢的問題 npm install -g cnpm --registry=https:程式設計客棧

3、使用cnpm **vue-cli cnmp install -g cue-cli

二、在django專案中建立vue專案

首先,進去django專案的專案目錄中,執行:

vue-init webpack firstvue## firstvue為前端專案的名稱,可自定義。建立的專案會跟django中的app一樣的目錄登記。類似乙個前端app一樣。

mysdulhocpfsrite 資料夾 blog 資料夾 和 firstvue資料夾 要在同一目錄級別

在建立時,會彈出很多選擇項,根據自己需求自定義修改。也可以全部回車,使用預設的。這裡我就直接全部回車。

三、編寫vue前端專案,直接編寫就是,除錯則可以執行。也可先不編寫,跳過這一步

cd firstvue## 進入到上一部建立的firstvue專案中

cnpm install ## 安裝需要的依賴模組

cnpm run dev ## 執行調式的服務,會啟動乙個web服務,訪問localhost:8080 即可調式

四、vue專案寫完後,打包vue專案,然後修改django配置,將vue整合到django中

cnpm run build ## 打包vue專案,會將所有東西打包成乙個dist資料夾

五、接下來就是配置django中的setting檔案了:

六、修改django的主目錄的u程式設計客棧rls檔案:

七、啟動django服務,訪問localhost:8000 則可以出現vue的首頁。

python manage.py runserver

本文標題: django vue前後端分離整合過程解析

本文位址:

前後端分離(django vue)實現分頁器

在當前子應用courses下建立乙個分頁器的檔案pagination.py,from rest framework.pagination import pagenumberpagination class coursepagenumberpagination pagenumberpagination...

django vue前後端分離跨域問題

跨域問題,主要通過後端允許來解決,分為兩步 一 安裝django cors headers pip install django cors headers 解決跨域 corsheaders middleware 解決跨域 corsheaders.middleware.corsmiddleware c...

前後端分離

關於前後端分離的一些好的文章推薦 前端框架 為什麼前後端分離 最直白的理解,我認為是因為在開發過程中,前端總是需要等待後端的環境搭建好之後,前端才能獲取相關資料,對於前端的開發影響很大,事實上前端並不關心後端的開發,那麼有沒有方法不讓後端影響前端的開發呢?其實後端提供的是什麼?乙個執行伺服器,乙個就...