本文将介绍如何使用 Vue.js 和 Django 构建一个 Web 应用程序。Vue.js 是一个流行的 JavaScript 框架，用于构建交互性的前端应用程序，而 Django 是一个流行的 Python Web 框架，用于构建 Web 应用程序后端。本文将向你展示如何集成这两个框架以创建一个完整的 Web 应用程序。
准备工作
在开始之前，确保您已安装以下软件：
- Python 3.x
- Node.js
- vue-cli
构建后端
我们将从构建后端开始，因为这是提供数据和服务的地方。在本文中，我们将使用 Django，因为它是广泛使用的 Web 框架之一。
创建项目
我们将首先创建一个 Django 项目。在命令行界面中输入以下命令：
django-admin startproject vue-django
它将创建一个名为 vue-django 的文件夹，其中包含 Django 项目的主目录。
创建应用
在 Django 中，应用是项目中的可重用组件。现在，我们将为我们的项目创建一个应用。在项目的根目录中运行以下命令：
python manage.py startapp api
它将创建一个名为“api”的目录，其中包含该应用程序的主要代码。
向应用添加模型
模型是 Django 中用来描述数据模板的类。它们定义了应用程序中将存储的数据以及如何组织该数据。在我们的示例中，我们将创建一个简单的模型，用于存储待办事项。
打开 api/models.py 文件，输入以下内容：
from django.db import models
class TodoItem(models.Model):
title = models.CharField(max_length=100)
completed = models.BooleanField(default=False)我们定义了一个 TodoItem 模型，它保存待办事项的标题和完成状态。我们使用 CharField 存储标题，它允许我们最多使用 100 个字符，BooleanField 用于存储完成状态。
创建视图
视图是将数据传递到前端的地方。视图对来自 URL 的请求进行响应，并向前端返回数据。在我们的应用中，我们将使用 Django 的 REST 框架创建视图。REST API 是一种用于在客户端和服务器之间传递数据的 Web API，它使用 HTTP 请求处理数据。通过使用 REST，我们可以构建出高度灵活和可扩展的接口，具有广泛的兼容性。
打开 api/views.py 文件，输入以下内容：
from rest_framework import viewsets
from .serializers import *
from .models import *
class TodoItemViewSet(viewsets.ModelViewSet):
queryset = TodoItem.objects.all()
serializer_class = TodoItemSerializer在这个视图类中，我们使用了 viewset，可以认为是一个 Django 视图的增强版。它提供了更多的功能，如自动实现常见的 REST 路由。我们的 TodoItemViewSet viewset 继承了 ModelViewSet，这意味着该视图集支持标准的 CRUD 功能。我们还为 queryset 定义了一个查询集，这将返回所有 TodoItem 实例。serializer_class 将在下一步中创建。
创建序列化器
序列化器将模型实例转换为 JSON 格式，以便与前端进行通信。在我们的应用中，我们将使用 Django 的 REST 框架创建序列化器。
打开 api/serializers.py 文件，输入以下内容：
from rest_framework import serializers
from .models import *
class TodoItemSerializer(serializers.ModelSerializer):
class Meta:
model = TodoItem
fields = '__all__'在这个序列化器中，我们定义了一个 Meta 类，它指定了模型和我们希望序列化器公开的所有字段。由于我们希望在前端中显示所有的字段，因此我们使用 fields = 'all' 指定了所有字段。
视图集添加路由
视图集必须添加到路由中，以便 Django 能够找到它们。创建 api/urls.py 文件，并输入以下内容：
-- -------------------- ---- -------
---- ----------- ------ ----- -------
---- -------------- ------ -------
---- ------ ------ -
------ - -----------------------
------------------------------ ----------------
----------- - -
-------- ----------------------
-我们使用 Django 的 REST 框架中的 routers 定义路由器，并为 TodoItemViewSet 创建了一个默认路由器。loaders.urls 模块的主要功能是与 django.urls 模块类似，提供 URL 对象。我们可以通过将 REST 框架路由器添加到 api/urls.py 文件中，并通过 include 函数将它们包含在应用中来包含路由。
运行后端服务器
在 cmd 中，输入以下命令来运行本地 Django Web 服务器：
python manage.py runserver
现在，在浏览器中打开 http://localhost:8000/，你将看到 Django 的默认欢迎页面。
构建前端
创建项目
使用vue-cli创建新项目，打开 cmd，运行以下命令:
vue create frontend
我们将使用默认设置，所以一路回车直到项目生成完毕。
安装依赖
在项目根目录下，依次输入以下命令安装依赖：
npm install vue-router npm install axios npm install bootstrap npm install jquery popper.js npm install
- vue-router: 是 Vue.js 的官方路由管理器，用于构建基于 Vue.js 的单页应用程序。
- axios: 是一个基于 promise 的 HTTP 库，用于处理 Web 应用中的异步请求，由于在本文中要向后端 API 发送请求，因此我们需要安装它。
- bootstrap: 是一个流行的前端框架，包含了许多重要的 CSS 样式和 JavaScript 插件，它可以帮助您快速构建美观的用户界面。
- jquery 和 popper.js：是 Bootstrap 所需的依赖项。
配置项目
打开 frontend/src/main.js，添加以下代码块：
-- -------------------- ---- ------- ------ ---------------------------------- ------ -------------------------------------- ------ --------------------- ------ --- ---- ----- ------ --- ---- ----------- ------ ------ ---- ---------- ------------------------ - ----- --- ----- ------- ------- - -- ------ -----------------
这段代码引入了我们需要的依赖，并通过 import 语句导入了相关文件。在 new Vue 实例中，我们添加了路由和 App 组件并将其渲染到 #app div 中。
创建待办事项组件
我们的应用程序将显示待办事项列表。为此，我们需要创建一个 TodoList 组件，并将其添加到我们的应用程序中。
在 frontend/src/components 文件夹中创建一个名为 TodoList.vue 的新文件，输入以下内容：
-- -------------------- ---- -------
----------
---- ------------------------
---- ------------
---- -----------------
-------- ---------
------
---- -----------------
------------ -------------- ---------- ----------- ------ ---------------- ------------------
------
------
----
---- ------------------
---- ----------------- ------ -- ---------- -------------
---- ------------
---- -----------------
----- --------- ------------ ------------------ ----- -------------- ---------
------
---- --------------- ------------
------------ ------ ----- ------- ------- ---- ------------ -- ---------- ----------- --------------------------
------- ---------- ---------- ------- -------------------------------------------------
------
------
----
------
------
---- -------
----------
------
------
-----------
--------
------ ----- ---- -------
------ ------- -
----- -----------
---- -- -
------ -
---------- ---
---------- ----
-
--
-------- -
------------- -------- -- -
-----
-----------------------------------------
-------------- -- -
-------------- - -------------
--
----------- -- -
-------------- - -----
--
--
--------------- -------- ---------- -
-- ------------- --- ---- --- ---- -- ------ ----------------------- -
----------------------------------------------------------------------------------------
-
-
--
------- -- -
-------------------
-
-
---------
-------
---------- -
---------------- -------------
-
--------这个组件包含以下内容：
一个显示待办事项列表的容器。
一个显示标题的
元素和一个链接，此链接用于添加新的待办事项。
一个循环，用于显示添加到 todoItems 数据数组的每个待办事项。
一个条件语句，用于检查是否 todoItems 数组已加载。如果已加载，下列内容将显示：
- 显示待办事项的标题
- 一个图标，用于编辑待办事项。
- 一个删除按钮，用于删除待办事项。
- 用于分隔每个待办事项的水平线。
如果数据数组尚未加载，则显示一个“加载中…”消息。
创建添加待办事项组件
我们还需要创建组件以添加新的待办事项。为此，我们将创建一个名为 AddTodo.vue 的组件。
在 frontend/src/components 文件夹中创建一个名为 AddTodo.vue 的新文件，输入以下内容：
-- -------------------- ---- -------
----------
---- ------------------
---- ------------
---- ------------------
------- ---- ---------
----
----- ---------------------------------
---- -------------------
------ -------------------------
------ ----------- -------------------- ---------- ----------------
------
------- ------------- ---------- ----------------------------
-------
------
------
------
-----------
--------
------ ----- ---- -------
------ ------- -
----- ----------
---- -- -
------ -
------ --
-
--
-------- -
-------------- -- -
----------------------------------------------- -
------ -----------
---------- -----
---------- -- -
----------- ---- ----- ---------------
---------- - --
-------------- -- -
--------------------
------------ ------ ---- -------
--
-
-
-
---------我们将使用相同的行间样式来应用相同的样式。
创建编辑待办事项组件
我们还需要创建组件以编辑待办事项。在 frontend/src/components 文件夹中创建命名为 EditTodo.vue 的新文件，输入以下内容：
-- -------------------- ---- -------
----------
---- ------------------
---- ------------
---- ------------------
-------- ---- ---------
----
----- ---------------------------------
---- -------------------
------ -------------------------
------ ----------- -------------------- ---------- -------------------------
------
---- -------------------
------ ----------------------------------
------ --------------- -------------------- -------------- -----------------------------
------
------- ------------- ---------- ----------------------------
-------
------
------
------
-----------
--------
------ ----- ---- -------
------ - ---------- - ---- ------
------ ------- -
----- -----------
---- -- -
------ -
--------- --
-
--
--------- -
---------------
------
--
--
-------- -
-------------- -- -
------------------------------------------------------ ---------------------- -- -
----------- ---- ------- ---------------
-------------- -- -
--------------------
------------ -------- ---- -------
--
-
--
------- -- -
------------- - --------------------------------
-
-
---------注意，在此组件中，我们使用了一个名为 mapGetters 的函数，它来自 Vuex。它将从 store 中获取所需的值。
配置路由
我们现在需要将我们的组件添加到我们应用的路由中。
打开 frontend/src/router/index.js 文件，输入以下内容：
-- -------------------- ---- -------
------ --- ---- -----
------ ------ ---- ------------
------ -------- ---- -----------------------
------ ------- ---- ----------------------
------ -------- ---- -----------------------
---------------
------ ------- --- --------
----- ----------
------- -
-
----- ----
----- -------
---------- --------
--
-
----- ------------
----- ------
---------- -------
--
-
----- -----------------
----- -------
---------- ---------
------ ----
-
-
--这个文件定义了三个路由：
- “/”路由用于演示待办事项列表。
- “/add-todo”路由用于演示添加新待办事项的表单。
- “/edit-todo/:id” 路由用于显示编辑待办事项的表单，并接受一个 ID 参数。
抽象 API 调用
Axios 是一个强大的 JavaScript 库，它可以轻松处理与 Web 服务的交互（如 REST API）。但是，大多数情况下，我们会多次调用相同的 API，并在各种访问页面时调用。在 Vue.js 中，可以通过引入 Axios 实例来解决这个问题。
在 frontend/src/api/index.js 文件中输入以下内容，创建一个名为 API 的文件：
-- -------------------- ---- -------
------ ----- ---- -------
------ --------- -- -
------ --------------
-------- -------------------------
---------------- ------
-------- -
--------- -------------------
--------------- ------------------
-
--
-现在你可以将这个文件导入其他文件中，并通过 API 对象调用进行抽象。
添加 Vuex 状态管理
Vuex 是 Vue.js 的官方状态管理库。它允许您在单个全局对象中存储和操作应用程序的所有状态。在我们的应用程序中，我们将使用 Vuex 存储待办事项的状态。
在 src/state/store.js 文件夹中输入以下内容，创建名为 shop.js 的文件：
-- -------------------- ---- -------
------ --- ---- -----
------ ---- ---- ------
------ --- ---- --------
-------------
------ ------- --- ------------
------ -
---------- --
--
---------- -
-------------- ------- ------ -
--------------- - -----
--
------------- ------- ----- -
--------------------------
--
---------------- ------- ----- -
----- ----- - ---------------------------------- -- ----------- --- --------
----------------------------- -- -----
--
---------------- ------- ------- -
----- ----- - ---------------------------------- -- ----------- --- -------
----------------------------- --
-
--
-------- -
--------------- -- ------ -- -
--------------------------------------- -- -
------------------------ --------------
--
--
----------- -- ------ -- ----- -
-------------------------- ------------------- -- -
----------------------- --------------
--
--
-------------- -- ------ -- ----- -
-----------------
------------------------------------ ------------------- -- -
-------------------------- --------------
--
--
-------------- -- ------ -- ------- -
---------------------------------------------- -- -
-------------------------- -------
--
-
--
-------- -
----- ------- -- ---- -- -
------ ----------------------------- -- ----------- --- -------------
-
-
--在这个文件中，我们定义了一些 Vuex 状态管理的概念：
- state 定义了我们的应用程序的状态。在这里，我们只定义了一个 todoItems 数组，它用于存储我们的待办事项。
- mutations 定义了如何在我们的应用程序中修改状态。我们定义了四个 mutation：SET_TODO_ITEMS，ADD_TODO_ITEM，UPDATE_TODO_ITEM 和 DELETE_TODO_ITEM。
- actions 定义了提交 mutations 所需的函数。在这里，我们定义了四个动作：getAllTodoItems，addTodoItem，updateTodoItem 和 deleteTodoItem。
- getters 用于获取和修改存储在 Vuex 根状态上的组件的计算属性。在这里，我们定义了一个名为 item 的 getter，该 getter 接受 id 参数并返回具有该 id 的 todo item。
将 Vuex 状态添加到我们的应用程序中
现在我们已经创建了我们的 Vuex store，我们需要将它导入应用程序并让它生效。打开 src/main.js 文件，输入以下内容：
-- -------------------- ---- ------- ------ --- ---- ----- ------ --- ---- ----------- ------ ------ ---- ---------- ------ ----- ---- --------------- ------ ---------------------------------- ------ -------------------------------------- ------ --------------------- ------------------------ - ----- --- ----- ------- ------ ------- - -- ------ -----------------
在这个文件中，我们使用 import 语句引入我们从 Vuex 创建的 store 对象。
更新 TodoList 组件
现在我们已经将待办事项的状态管理委托给 Vuex，我们需要更新 TodoList 组件以依赖于 Vuex store。
在 frontend/src/components/TodoList.vue 文件中，输入以下代码：
-- -------------------- ---- -------
----------
---- ------------------------
---- ------------
---- -----------------
-------- ---------
------
---- -----------------
------------ -------------- ---------- ----------- ------ ---------------- ------------------
------
------
----
---- ------------------
---- ----------------- ------ -- ---------- -------------
---- ------------
---- -----------------
----- --------- ------------ ------------------ ----- -------------- ---------
------
---- --------------- ------------
------------ ------ ----- ------- ------- ---- ------------ -- ---------- ----------- --------------------------
------- ---------- ---------- ------- -------------------------------------------------
------
------
----
------
------
---- -------
----------
------
------
-----------
--------
------ - -------- - ---- ------
------ - ---------- - ---- ------
------ ----- ---- -------
------ ------- -
----- -----------
--------- -
-------------
-----------
--
--
---- -- -
------ -
---------- ----
-
--
-------- -
---------------
------------
---
------------- -------- -- -
-----
-----------------------------------------
-------------- -- -
-------------- - -------------
--
----------- -- -
-------------- - -----
--
--
--------------- -------- ---------- -
-- ------------- --- ---- --- ---- -- ------ ----------------------- -
----------------------------
-
-
--
------- -- -
-------------------
-
-
---------
-------
---------- -
---------------- -------------
-
--------在这里，我们使用了名称为 todoItems 的计算属性代替普通的数组。
运行应用
为了运行应用程序，请打开一个命令提示符，导航到 vue-django 目录，并运行以下命令：
python manage.py runserver
在您的浏览器中，转到 http://localhost:8000/ 来访问我们的 Django API。现在我们需要启动 Vue.js。
在另一个命令提示符窗口中，导航到 frontend 文件夹并运行以下命令：
npm run serve
Now，我们已经为 Vue.js 和 Django 构建了一个完整的 Web 应用程序。恭喜你！
结论
Vue.js 和 Django 是两个广泛使用的框架，用于构建 Web 应用程序。在本文中，我们介绍了如何使用这两个框架构建一个完整的 Web 应用程序。我们从 Django 的创建和配置开始，然后转向 Vue.js 的构建。我们构建了三个组件，分别用于列出待办事项，添加待办事项和编辑待办事项。我们还使用 Axios 库发送 HTTP 请求，使用 Vuex 管理我们的应用程序状态。最后，在运行我们的应用程序之前，我们还告诉您如何在 Windows 和 Linux 上设置并运行开发环境。通过本教程，您已经学会了构建 Web 应用程序的基本知识，现在，趁着这股热潮，快快动手尝试吧！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/674974d3a1ce006354604023