如何使用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中文网其他相关文章！