0%

Django + Nuxt 实现美食分享网站(一)

项目初始化

在这一系列教程中,我们将会实现一个全栈美食分享网站,后端用 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 文件:

Pipfile
[[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_frameworkcorsheaderscore,前两个分别是 Django Rest Framework 和 Django CORS Headers 的应用,最后一个是我们网站的应用;
  2. MIDDLEWARE 中添加 corsheaders.middleware.CorsMiddleware,注册跨域请求中间件(注意一定要放在最前面!);
  3. 设置 CORS_ORIGIN_WHITELIST,添加跨域请求白名单,这里我们先写上 http://localhost:3000,后面开发前端时将用到;
  4. 设置 LANGUAGE_CODEzh-hans,可以将后台管理设置为中文,非常方便;
  5. 设置 MEDIA_URLMEDIA_ROOT,用于在开发中提供图片资源文件的访问。

具体代码如下:

api/api/settings.py
# ...
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
[tuture-add] 'rest_framework',
[tuture-add] 'corsheaders',
[tuture-add] 'core',
]

MIDDLEWARE = [
[tuture-add] 'corsheaders.middleware.CorsMiddleware',
'django.middleware.security.SecurityMiddleware',
'django.contrib.sessions.middleware.SessionMiddleware',
'django.middleware.common.CommonMiddleware',
# ...
'django.middleware.clickjacking.XFrameOptionsMiddleware',
]

[tuture-add]CORS_ORIGIN_WHITELIST = (
[tuture-add] 'http://localhost:3000',
[tuture-add])
[tuture-add]
ROOT_URLCONF = 'api.urls'

TEMPLATES = [
# ...
# Internationalization
# https://docs.djangoproject.com/en/2.0/topics/i18n/

[tuture-del]LANGUAGE_CODE = 'en-us'
[tuture-add]LANGUAGE_CODE = 'zh-hans'

TIME_ZONE = 'UTC'

# ...
# https://docs.djangoproject.com/en/2.0/howto/static-files/

STATIC_URL = '/static/'
[tuture-add]
[tuture-add]MEDIA_URL = '/media/'
[tuture-add]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 数据模型如下:

api/core/models.py
from django.db import models

[tuture-del]# Create your models here.
[tuture-add]
[tuture-add]class Recipe(models.Model):
[tuture-add] DIFFICULTY_LEVELS = (
[tuture-add] ('Easy', '容易'),
[tuture-add] ('Medium', '中等'),
[tuture-add] ('Hard', '困难'),
[tuture-add] )
[tuture-add] name = models.CharField(max_length=120, verbose_name='名称')
[tuture-add] ingredients = models.CharField(max_length=400, verbose_name='食材')
[tuture-add] picture = models.FileField(verbose_name='图片')
[tuture-add] difficulty = models.CharField(choices=DIFFICULTY_LEVELS, max_length=10,
[tuture-add] verbose_name='制作难度')
[tuture-add] prep_time = models.PositiveIntegerField(verbose_name='准备时间')
[tuture-add] prep_guide = models.TextField(verbose_name='制作指南')
[tuture-add]
[tuture-add] class Meta:
[tuture-add] verbose_name = '食谱'
[tuture-add] verbose_name_plural = '食谱'
[tuture-add]
[tuture-add] def __str__(self):
[tuture-add] return '{} 的食谱'.format(self.name)

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

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

api/core/admin.py
from django.contrib import admin
[tuture-add]from .models import Recipe

# Register your models here.
[tuture-add]admin.site.register(Recipe)

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

api/core/serializers.py
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'
)

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

api/core/views.py
[tuture-del]from django.shortcuts import render
[tuture-add]from rest_framework import viewsets
[tuture-add]from .serializers import RecipeSerializer
[tuture-add]from .models import Recipe

[tuture-del]# Create your views here.
[tuture-add]
[tuture-add]class RecipeViewSet(viewsets.ModelViewSet):
[tuture-add] serializer_class = RecipeSerializer
[tuture-add] queryset = Recipe.objects.all()

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

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

api/core/urls.py
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)),
]

router 为我们自动生成以下路由:

  • /recipes/:创建食谱(POST 方法)或读取食谱列表(GET方法);
  • /recipes/{id}:获取单个食谱(GET)、更新单个食谱(PUT)或删除食谱(DELETE)。

注意

在 Django 路由定义中不包括 HTTP 方法,具体的 HTTP 方法可以在视图中读取并判断。

最后一步,我们将 core 子应用中的路由接入全局路由:

api/api/urls.py
# ...
2. Add a URL to urlpatterns: path('blog/', include('blog.urls'))
"""
from django.contrib import admin
[tuture-del]from django.urls import path
[tuture-add]from django.urls import path, include

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

没错,关于食谱的增删改查的 API 我们全都实现了!不信?先运行开发服务器:

(recipes_app-nV3wuGJ1) $ python manage.py runserver

由于 Django REST Framework 为我们提供了测试 API 的 Web 界面,因此这里就不用 Postman 等工具进行测试了。用浏览器访问 localhost:8000/api/recipes,就进入了如下所示的 API 测试页面:

这个页面的下方还有添加数据(发起 POST 请求)的表单,我们填一些数据,然后点击 POST 按钮:

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

用 Nuxt.js 实现网站首页

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

用脚手架初始化 Nuxt 项目

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

$ npx create-nuxt-app client

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

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

  • assets:存放图片、CSS、JS 等原始资源文件
  • components:存放 Vue 组件
  • layouts:存放应用布局文件,布局可在多个页面中使用
  • middleware:存放应用的中间件。Nuxt 中的中间件指页面渲染前执行的自定义函数(本教程中不需要)
  • pages:应用的视图和路由。Nuxt 会根据此目录中的 .vue 文件自动创建应用的路由
  • plugins: 存放 JavaScript 插件,用于在应用启动前加载(本教程中不需要)
  • static:存放通常不会改变的静态文件,并且将直接映射到路由(即可通过 /static/picture.png 访问)
  • store:存放 Vuex Store 文件(本教程中不需要)

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

编写前端首页

我们在 client/pages 中创建 index.vue 文件,并在其中实现我们的前端首页:

client/pages/index.vue
<template>
<header>
<div class="text-box">
<h1>吃货天堂 😋</h1>
<p class="mt-3">制作我们喜爱的美食 ❤️ ️</p>
<nuxt-link class="btn btn-outline btn-large btn-info" to="/recipes">
查看食谱
<span class="ml-2">&rarr;</span>
</nuxt-link>
</div>
</header>
</template>

<script>
export default {
head() {
return {
title: "首页"
};
}
};
</script>

<style>
header {
min-height: 100vh;
background-image: linear-gradient(
to right,
rgba(0, 0, 0, 0.9),
rgba(12, 5, 5, 0.4)
),
url("/images/banner.jpg");
background-position: center;
background-size: cover;
position: relative;
}
.text-box {
position: absolute;
top: 50%;
left: 10%;
transform: translateY(-50%);
color: #fff;
}
.text-box h1 {
font-family: cursive;
font-size: 5rem;
}
.text-box p {
font-size: 2rem;
font-weight: lighter;
}
</style>

模板(Template)+ 脚本(Script)+ 样式(Style),经典的 Vue.js 组件。

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

真是让人食欲大开!

数据展示:实现食谱列表

接下来我们将演示如何展示数据,并实现食谱列表页面。

实现 RecipeCard 组件

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

client/components/RecipeCard.vue
<template>
<div class="card recipe-card">
<img :src="recipe.picture" class="card-img-top" />
<div class="card-body">
<h5 class="card-title">{{ recipe.name }}</h5>
<p class="card-text">
<strong>成分:</strong>
{{ recipe.ingredients }}
</p>
<div class="action-buttons">
<nuxt-link :to="`/recipes/${recipe.id}/`" class="btn btn-sm btn-success">查看</nuxt-link>
<nuxt-link :to="`/recipes/${recipe.id}/edit/`" class="btn btn-sm btn-primary">编辑</nuxt-link>
<button @click="onDelete(recipe.id)" class="btn btn-sm btn-danger">删除</button>
</div>
</div>
</div>
</template>

<script>
export default {
props: ["recipe", "onDelete"]
};
</script>

<style>
.card-img-top {
height: 12rem;
width: 100%;
}

.recipe-card {
border: none;
box-shadow: 0 1rem 1.5rem rgba(0, 0, 0, 0.6);
}
</style>

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

了解 Nuxt 的路由功能

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

例如我们这样安排 pages 下面的目录结构👇:

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

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

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'
}
]
}

提示

如果想要更深入地了解 Nuxt 的路由功能,请参考官方文档

实现食谱列表页面

创建食谱列表页面 pages/recipes/index.vue(先使用假数据填充),代码如下:

client/pages/recipes/index.vue
[tuture-add]<template>
[tuture-add] <main class="container mt-5">
[tuture-add] <div class="row">
[tuture-add] <div class="col-12 text-right mb-4">
[tuture-add] <div class="d-flex justify-content-between">
[tuture-add] <h3>吃货天堂</h3>
[tuture-add] <nuxt-link to="/recipes/add" class="btn btn-info">添加食谱</nuxt-link>
[tuture-add] </div>
[tuture-add] </div>
[tuture-add] <template v-for="recipe in recipes">
[tuture-add] <div :key="recipe.id" class="col-lg-3 col-md-4 col-sm-6 mb-4">
[tuture-add] <recipe-card :onDelete="deleteRecipe" :recipe="recipe"></recipe-card>
[tuture-add] </div>
[tuture-add] </template>
[tuture-add] </div>
[tuture-add] </main>
[tuture-add]</template>
[tuture-add]
[tuture-add]<script>
[tuture-add]import RecipeCard from "~/components/RecipeCard.vue";
[tuture-add]
[tuture-add]const sampleData = [
[tuture-add] {
[tuture-add] id: 1,
[tuture-add] name: "通心粉",
[tuture-add] picture: "/images/food-1.jpeg",
[tuture-add] ingredients: "牛肉, 猪肉, 羊肉",
[tuture-add] difficulty: "easy",
[tuture-add] prep_time: 15,
[tuture-add] prep_guide:
[tuture-add] "Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis, porro. Dignissimos ducimus ratione totam fugit officiis blanditiis exercitationem, nisi vero architecto quibusdam impedit, earum "
[tuture-add] },
[tuture-add] {
[tuture-add] id: 2,
[tuture-add] name: "羊肉串",
[tuture-add] picture: "/images/food-2.jpeg",
[tuture-add] ingredients: "牛肉, 猪肉, 羊肉",
[tuture-add] difficulty: "easy",
[tuture-add] prep_time: 15,
[tuture-add] prep_guide:
[tuture-add] "Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis, porro. Dignissimos ducimus ratione totam fugit officiis blanditiis exercitationem, nisi vero architecto quibusdam impedit, earum "
[tuture-add] },
[tuture-add] {
[tuture-add] id: 3,
[tuture-add] name: "炒饭",
[tuture-add] picture: "/images/banner.jpg",
[tuture-add] ingredients: "牛肉, 猪肉, 羊肉",
[tuture-add] difficulty: "easy",
[tuture-add] prep_time: 15,
[tuture-add] prep_guide:
[tuture-add] "Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis, porro. Dignissimos ducimus ratione totam fugit officiis blanditiis exercitationem, nisi vero architecto quibusdam impedit, earum "
[tuture-add] }
[tuture-add]];
[tuture-add]
[tuture-add]export default {
[tuture-add] head() {
[tuture-add] return {
[tuture-add] title: "食谱列表"
[tuture-add] };
[tuture-add] },
[tuture-add] components: {
[tuture-add] RecipeCard
[tuture-add] },
[tuture-add] asyncData(context) {
[tuture-add] let data = sampleData;
[tuture-add] return {
[tuture-add] recipes: data
[tuture-add] };
[tuture-add] },
[tuture-add] data() {
[tuture-add] return {
[tuture-add] recipes: []
[tuture-add] };
[tuture-add] },
[tuture-add] methods: {
[tuture-add] deleteRecipe(recipe_id) {
[tuture-add] console.log(deleted`${recipe.id}`);
[tuture-add] }
[tuture-add] }
[tuture-add]};
[tuture-add]</script>
[tuture-add]
[tuture-add]<style scoped>
[tuture-add]</style>

打开前端网站,可以看到我们刚才实现的食谱列表页面:

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

图雀社区 微信公众号

扫一扫关注上方公众号,拉学习群和答疑解惑

  • 本文作者: 图雀社区
  • 本文链接: https://tuture.co/2019/10/18/0818be0/
  • 版权声明: 本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!