如何使用Django和vue.js原型製作Web應用程序

>本文演示瞭如何使用Django和vue.js快速原型響應式，反應性的Web應用程序，並具有完整的管理界面。 我們將介紹設置項目，集成數據庫，實現vue.js組件，使用VUEX管理應用程序狀態以及使用Vue路由器進行無縫導航。

密鑰功能：

響應式和反應性Web應用程序的快速原型製作。
• >與django和vue.js.
的無縫全棧開發 使用django模板中的vue.js組件的動態用戶界面。
使用Vuex的有效狀態管理。
使用VUE路由器和Django的URL調度程序的平滑頁面過渡。
徹底測試和諧組件相互作用。
• 1。項目設置：

>本節假設您已經安裝了Python。 有關詳細說明，請參閱有關安裝的官方Django文檔。

>創建一個虛擬環境：

使用

（或為Python 3.3）。使用適當的操作系統命令激活它（有關詳細信息，請參見文章）。
• > 在激活的環境中 安裝django：virtualenv myenvironment運行python3 -m venv myenvironment。
• >創建一個django項目：使用pip install django。
• 創建一個django應用程序：使用。 請記住將django-admin startproject myproject添加到
>
• >。 django-admin startapp myapp 2。使用DJANGO的數據庫設置：myapp.apps.MyappConfigINSTALLED_APPS> myproject/settings.py>我們將使用DJANGO模型定義後端數據庫，該模型隨後將與VUEX集成以進行前端狀態管理。

定義模型（myApp/models.py）：具有適當字段的模型（請參閱代碼文章）。

在管理員（myapp/admin.py）中註冊模型：

註冊

>和
• 模型（請參閱代碼的文章）。 創建遷移：Articlerun Author和
。
• 。 Article 3。帶有VUE組件的基本接口：Author
• 本節詳細介紹了django模板中vue.js組件的集成。
  • > django view（myapp/views.py）：>創建一個視圖，從數據庫中獲取文章和作者並呈現一個模板（請參閱代碼文章）。
  >
  • > django template（myapp/app/myapp/template.html）：使用bootstrap創建一個基本模板（請參閱代碼文章）。 此模板將包括vue.js應用程序。
  • > vue.js組件：為文章和作者列表和各個項目創建VUE組件（請參閱代碼）。 請注意，使用定界符[[>和]]避免與Django的模板語言發生衝突。

  4。將Vuex商店連接到Django數據庫：

  >

  vuex將管理應用程序狀態，將前端連接到django後端數據。

  • > vuex Store：在Django模板中創建一個Vuex商店，並使用Django的模板語言從Django視圖中獲取數據填充它（請參閱代碼文章）。 這包括通過slug檢索數據的獲取器。 >

  5。使用Django和Vue路由器路由：>

  我們將使用Django的URL調度程序和VUE路由器進行無縫的客戶端導航。
  > django urls（myproject/urls.py）：
  • >配置URL來處理不同的路由（請參閱代碼文章）。 vue路由器：
  使用Vue路由器的HTML5歷史模式定義路由，以啟用沒有頁面重新加載的平滑過渡（請參閱代碼的文章）。
  • 6。測試：

  >創建一個django superuser： run。

  • 運行本地服務器： run。 > python manage.py createsuperuser
  填充數據庫：
  • 訪問admin接口（https://www.php.cn/link/e86c39706a2a2a503333ed14f935353535353f015e>），以增加作者和藝術品。 python manage.py runserver測試應用程序：
  瀏覽網站以驗證功能。
  • 完整的SPA代碼和進一步的開發：
  >
  • 單頁應用程序的完整代碼可在GitHub上獲得（原始文章中提供的鏈接）。 本文還通過使用Django REST框架添加REST API來討論擴展應用程序，並用vue.js中的Axios將其用於完整的CRUD功能。 這將允許直接從前端創建，更新和刪除條目。 FAQS：
  本文以全面的常見問題解答部分結束，該部分涉及整合Django和vue.js的各個方面，包括部署，測試，錯誤處理以及Django功能（表格，ORM）和vue.js.

  >之間的特定集成點

以上是如何使用Django和vue.js原型製作Web應用程序的詳細內容。更多資訊請關注PHP中文網其他相關文章！