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

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

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

接下来我们将实现本项目所需要用的所有 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')

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 = models.PositiveIntegerField(verbose_name='准备时间')
    prep_guide = models.TextField(verbose_name='制作指南')

    class meta:
 verbose_name = '食谱'
 verbose_name_plural = '食谱'

    def __str__(self):
 return '{} 的食谱'.format(self.name)

from django.contrib import admin
from .models import Recipe

# Register your models here.
admin.site.register(Recipe)

from rest_framework import serializers
from .models import Recipe


class RecipeSerializer(serializers.ModelSerializer):

    class meta:
 model = Recipe
 fields = (
     'id', 'name', 'ingredients', 'picture',
     'difficulty', 'prep_time', 'prep_guide'
 )

from rest_framework import viewsets
from .serializers import RecipeSerializer
from .models import Recipe


class RecipeViewSet(viewsets.ModelViewSet):
    serializer_class = RecipeSerializer
    queryset = Recipe.objects.all()

from django.urls import path, include
from rest_framework.routers import DefaultRouter
from .views import RecipeViewSet

router = DefaultRouter()
router.register(r'recipes', RecipeViewSet)

urlpatterns = [
    path('', include(router.urls)),
]

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('api/', include('core.urls')),
]

(recipes_app-nV3wuGJ1) $ python manage.py runserver

$ npx create-nuxt-app client

pages
├── README.md
├── index.vue
└── recipes
    ├── _id
    │   ├── edit.vue
    │   └── index.vue
    ├── add.vue
    └── index.vue

router: {
  routes: [
    {
      name: 'index',
      path: '/',
      component: 'pages/index.vue'
    },
    {
      name: 'recipes',
      path: '/recipes',
      component: 'pages/recipes/index.vue'
    },
    {
      name: 'recipes-add',
      path: '/recipes/add',
      component: 'pages/recipes/add.vue'
    },
    {
      name: 'recipes-id',
      path: '/recipes/:id?',
      component: 'pages/recipes/_id/index.vue'
    },
    {
      name: 'recipes-id-edit',
      path: '/recipes/:id?/edit',
      component: 'pages/recipes/_id/edit.vue'
    }
  ]
}