全栈“食”代：用 Django + Nuxt 实现美食分享网站（上）

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

本文所涉及的源代码都放在了 Github 上，如果您觉得我们写得还不错，希望您能给❤️这篇文章点赞+Github仓库加星❤️哦~ 本文代码改编自 Scotch。

项目初始化

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

预备知识

本教程假定你已经知道了

• 基本的 Python 3 语言知识，包括使用 pip 安装包
• Django 框架的基础概念（MTV 架构），可参考这篇教程进行学习
• Vue 的基础概念，以及用 npm 工具链的使用，可参考这篇教程
• 前后端分离的基本概念，包括前端如何通过发起 HTTP(S) 请求从后端获取数据

学习目标

学完这篇教程后，你将：

• 了解用 pipenv 工具管理 Python 依赖
• 学会用 Django REST Framework 快速开发 REST API
• 学会用 Nuxt 框架快速开发 SPA（单页应用），能够从后端获取数据并渲染

用 pipenv 初始化 Python 环境

首先创建项目目录，并进入：

$ mkdir recipes_app && cd recipes_app

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

$ pip install pipenv
$ pipenv shell

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

• Django: Django 框架本身，提供了丰富且强大的服务器开发组件；
• DRF (Django Rest Framework)：Django 框架的超级搭档，大大方便了 REST API 的开发；
• Django CORS Headers：用于实现跨域资源请求（CORS）的 Django 中间件（如果你不了解 CORS，可以参考阮一峰的日志）。

安装命令如下：

(recipes_app-nV3wuGJ1) $ pipenv install django django-rest-framework django-cors-headers

这时 pipenv 便产生了 Pipfile 文件，它的作用就类似 Node 项目中的 package.json 文件：

[[source]]
url = "https://mirrors.aliyun.com/pypi/simple/"
verify_ssl = true
name = "pypi"

[packages]
django = "*"
django-rest-framework = "*"
django-cors-headers = "*"

[dev-packages]

[requires]
python_version = "3.6"

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

(recipes_app-nV3wuGJ1) $ django-admin startproject api
(recipes_app-nV3wuGJ1) $ cd api
(recipes_app-nV3wuGJ1) $ python manage.py startapp core

接着进行数据库迁移，并创建用于登录后台管理的超级用户：

(recipes_app-nV3wuGJ1) $ python manage.py migrate
(recipes_app-nV3wuGJ1) $ python manage.py createsuperuser

按照问题输入信息即可。要记住用户名和密码哦！然后运行开发服务器：

(recipes_app-nV3wuGJ1) $ python manage.py runserver

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

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

用 Django 实现 REST API

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

The web framework for perfectionists with deadlines.

“为赶时间的完美主义者而生！”

全局配置

首先，在全局配置文件 settings.py 中做如下改动：

1. 在 INSTALLED_APPS 中添加 rest_framework、corsheaders 和 core，前两个分别是 Django Rest Framework 和 Django CORS Headers 的应用，最后一个是我们网站的应用；
2. 在 MIDDLEWARE 中添加 corsheaders.middleware.CorsMiddleware，注册跨域请求中间件（注意一定要放在最前面！）;
3. 设置 CORS_ORIGIN_WHITELIST，添加跨域请求白名单，这里我们先写上 http://localhost:3000，后面开发前端时将用到；
4. 设置 LANGUAGE_CODE 为 zh-hans，可以将后台管理设置为中文，非常方便；
5. 设置 MEDIA_URL 和 MEDIA_ROOT，用于在开发中提供图片资源文件的访问。

具体代码如下：

# ...

INSTALLED_APPS = [
    # 默认的 App ...

    'rest_framework',
    'corsheaders',
    'core',
]

MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware',
    # 默认的中间件 ...
]

CORS_ORIGIN_WHITELIST = (
    'http://localhost:3000',
)

# ...

LANGUAGE_CODE = 'zh-hans'

MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')

实现 core 应用

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

1. 定义数据模型（models.py），用于实现和数据库之间的绑定；
2. 定义后台管理配置（admin.py），用于在后台管理系统中进行操作；
3. 定义序列化器（serializers.py），仅当实现 REST API 时需要，用于提供数据模型的 JSON 序列化（或其他数据交换格式）；
4. 定义视图（views.py），用于实现具体的业务逻辑；
5. 定义路由（urls.py），用于定义路由规则，将其映射到相应的视图；
6. 将应用路由接入全局路由文件（api/urls.py）中。

我们从第一步开始，完成菜谱 Recipe 数据模型如下：

from django.db import models


class Recipe(models.Model):
    DIFFICULTY_LEVELS = (
        ('Easy', '容易'),
        ('Medium', '中等'),
        ('Hard', '困难'),
    )
    name = models.CharField(max_length=120, verbose_name='名称')
    ingredients = models.CharField(max_length=400, verbose_name='食材')
    picture = models.FileField(verbose_name='图片')
    difficulty = models.CharField(choices=DIFFICULTY_LEVELS, max_length=10,
                                  verbose_name='制作难度')
    prep_time