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

在上篇中，我们分别用 Django 和 Nuxt 实现了后端和前端的雏形。在这一部分，我们将实现前后端之间的通信，使得前端可以从后端获取数据，并且将进一步丰富网站的功能。

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

从服务器获取数据

在这一部分，我们将真正实现一个全栈应用——让前端能够向后端发起请求，从而获取想要的数据。

配置 Django 的静态文件服务

首先我们要配置一下 Django 服务器，使前端能够访问其静态文件。调整 api/api/urls.py 文件如下：

# ...
from django.conf import settings
from django.conf.urls.static import static

urlpatterns = [
    path('admin/', admin.site.urls),
    path('api/', include('core.urls')),
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)



注意
这样配置静态文件路由的方式仅应当在开发环境下使用。在生产环境下（settings.py 中的 DEBUG 设为 False 时），静态文件路由将自动失效（因为 Django 并不适合作为静态文件服务器，应该选用类似 Nginx 之类的服务器，在后续教程中我们将更深入地讨论）。

实现前端的数据请求功能
在客户端，我们先要对 Nuxt 进行全局配置。Nuxt 包括 axios 包，这是一个非常出色的基于 Promise 的 HTTP 请求库。在 nuxt.config.js 中的 axios 一项中添加 Django 服务器的 URL：
export default {
  // ...

  
  axios: {
    baseURL: 'http://localhost:8000/api',
  },

  // ...
}

将食谱列表页面中暂时填充的假数据删去，通过 asyncData 方法获取数据。由于我们之前配置好了 axios，所以 asyncData 函数可以获取到 $axios 对象用于发起 HTTP 请求。我们实现页面加载的数据获取以及 deleteRecipe 事件，代码如下：






实现食谱详情页面
我们进一步实现食谱详情页面。在 pages/recipes 目录中创建 _id 目录，在其中添加 index.vue 文件，代码如下：






实现之后的页面如下：

继续在 pages/recipes/_id 中实现 add.vue （创建食谱页面）如下：






实现的页面如下：

一点强迫症：全局页面跳转效果
在这一节中，我们将演示如何在 Nuxt 中添加全局样式文件，来实现前端页面之间的跳转效果。
首先在 assets 目录中创建 css 目录，并在其中添加 transition.css 文件，代码如下：
.page-enter-active,
.page-leave-active {
  transition: opacity .3s ease;
}

.page-enter,
.page-leave-to {
  opacity: 0;
}

在 Nuxt 配置文件中将刚才写的 transition.css 中添加到全局 CSS 中：
export default {
  // ...

  
  css: [
    '~/assets/css/transition.css',
  ],
  
  // ...
}

欧耶，一个具有完整增删改查功能、实现了前后端分离的美食分享网站就完成了！

想要学习更多精彩的实战技术教程？来图雀社区逛逛吧。


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

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

吃货天堂

{{ recipe.name }}

食材

准备时间 ⏱

制作难度

制作指南

{{ recipe.name }}

Vue.js相关栏目本月热门文章