泛亚电竞Django 作为 Python 社区最受欢迎的 Web 框架之一，凭借其高度抽象的组件和强大方便的脚手架，将快速且流畅的开发体验演绎到了极致。而 Nuxt 作为从 Vue.js 进化而来的前端框架，能够轻松胜任复杂的 SPA（单页应用）开发。两者相遇，能够擦出怎样的火花？这篇教程将用 Django + Nuxt 实现带有完整的增删改查（CRUD）功能的全栈应用。最后郑重警告：

　　在这一系列教程中，我们将会实现一个全栈美食分享网站，后端用 Django 实现，前端则是 Nuxt 框架，下面是最终完成后的项目效果：

　　在这个项目中，我们用pipenv来管理 Python 项目的环境依赖。Pipenv 是 Python 社区偶像级大师 Kenneth Reitz 牵头开发的开发流程优化工具，立志集所有项目管理工具（Node 的 npm、Ruby 的 bundler、PHP 的 composer 等等）的优势为一体。我们通过下面的命令安装 pipenv，并创建项目的依赖环境：

　　如果看到命令提示符前面出现(recipes_app-nV3wuGJ1)的提示（后面那串随机字符串可能不一样），就表明我们已经成功地创建了项目独有的虚拟环境！我们接着安装 Django “三件套”：

　　然后用 Django 脚手架创建服务器项目api的基本结构，并进入到api创建一个子应用core：

　　访问localhost:8000/admin，可以看到后台管理的登录页面。输入刚才创建的超级用户的用户名和密码，就进入了后台管理系统，如下所示：

　　熟悉的界面，但是——没什么东西，而且全是英文！别担心，后面我们会一个个搞定。

　　接下来我们将实现本项目所需要用的所有 API。对，你没有听错，我们会在这一步实现所有后端接口，大概只 10 分钟左右可以敲完！这就是 Django 的宣言：

　　接下来就是实现core这个 Django 应用。实现一个 Django 应用大致都是按照这样的流程：

　　其中，class Meta定义了Recipe的元数据；__str__方法定义了一个菜谱对象转换为字符串时应该怎样显示。这些设置的作用在打开后台管理系统之后就会很清晰了。想要了解更多关于 Django 数据模型的知识，请参考相关中文文档。

　　第二步，为core子应用配置相应的后台管理功能。非常简单，只需注册定义好的Recipe模型：

　　第三步，定义序列化器 serializers.py（脚手架并不会自动创建，需要手动创建）。序列化器是 Django Rest Framework 提供的功能，能够非常方便地将 Django 数据模型序列化成相应的 JSON 数据格式。在这里，我们定义一个RecipeSerializer，并在class Meta中指定对应的数据模型为刚才创建的Recipe，并选择相应的字段展示：

　　第四步，实现视图。这里我们采用开挂模式，直接调用 Django Rest Framework 提供的模型视图集（ModelViewset）直接搞定数据模型的增删改查逻辑：

　　只需指定serializer_class（序列器类）和queryset（模型查询集），就自动定义好了模型的添加、删除、查询和修改！虽然视图集非常强大，但是如果要实现更加灵活的业务逻辑，那么还是要为每个接口定义单独的视图类才行。

　　第五步，实现路由。由于我们上一步使用了视图集，因此只需先调用DefaultRouter自动生成相关的路由，然后加入记录路由映射的列表urlpatterns中：

　　没错，关于食谱的增删改查的 API 我们全都实现了！不信？先运行开发服务器：

　　这个页面的下方还有添加数据（发起 POST 请求）的表单，我们填一些数据，然后点击 POST 按钮：

　　然后再次访问食谱列表页面，就有我们刚刚添加的食谱了！此外，你还可以尝试访问单个食谱的详情页面（例如localhost:8000/api/recipes/1），并且可以通过 Web 页面直接修改或删除哦！

　　Django 的 MTV 架构固然优秀，但是随着现在的业务逻辑越来越多地向前端倾斜（也就是现在流行的富前端应用），其中的 T（Template）需要更强大的武器来解决，这里就是我们的第二位主角 Nuxt。

　　我们将把所有的前端代码放到 client 目录中，不过无需自己创建，我们调用 nuxt 的脚手架来创建前端应用：

　　之后脚手架应用会询问一系列问题，按下面的截图进行选择（当然作者名填自己）：

　　我们对 Nuxt 脚手架生成的目录结构稍作讲解。可以看到 client 目录下有以下子目录：

　　middleware：存放应用的中间件。Nuxt 中的中间件指页面渲染前执行的自定义函数（本教程中不需要）

　　plugins: 存放 JavaScript 插件，用于在应用启动前加载（本教程中不需要）

　　static：存放通常不会改变的静态文件，并且将直接映射到路由（即可通过

　　本项目所用到的图片资源请访问我们的GitHub 仓库，并下载到对应的目录中。

　　我们刚刚创建了 pages 目录下的 index.vue 文件，这意味着当访问根路由/时，这个文件将被访问到。通过npm run dev运行我们的前端页面（记得在 client 子目录下运行！），可以看到：

　　首先，实现将会在多个页面中反复使用的食谱卡片组件RecipeCard如下：

　　在这个组件中，我们定义了两个props，分别是recipe（代表食谱对象）和onDelete（删除时的回调函数），并在模板中使用这两个成员。

　　在实现第二个页面之前，我们有必要先了解一下 Nuxt 的路由功能——通过 pages 目录下的文档结构，就可以自动生成 vue-router 的路由器配置！

　　_id目录（或者其他以单下划线开头的目录或 .vue 文件）被称作是动态路由（Dynamic Routing），可以接受参数作为 URL 的一部分。上面的 pages 目录自动生成下面的router：

　　到这儿，我们分别实现了这个全栈食谱网站的前端和后端应用，这篇教程的第一部分也就结束了。在接下来的教程中，我们将实现前后端之间的通信，并进一步实现食谱的详情及添加页面，不见不散！