
从服务器获取数据
在这一部分,我们将真正实现一个全栈应用——让前端能够向后端发起请求,从而获取想要的数据。
配置 Django 的静态文件服务
首先我们要配置一下 Django 服务器,使前端能够访问其静态文件。调整 api/api/urls.py 文件如下:
# ... |
注意
这样配置静态文件路由的方式仅应当在开发环境下使用。在生产环境下(settings.py 中的 DEBUG
设为 False
时),静态文件路由将自动失效(因为 Django 并不适合作为静态文件服务器,应该选用类似 Nginx 之类的服务器,在后续教程中我们将更深入地讨论)。
实现前端的数据请求功能
在客户端,我们先要对 Nuxt 进行全局配置。Nuxt 包括 axios 包,这是一个非常出色的基于 Promise 的 HTTP 请求库。在 nuxt.config.js 中的 axios
一项中添加 Django 服务器的 URL:
// ... |
将食谱列表页面中暂时填充的假数据删去,通过 asyncData
方法获取数据。由于我们之前配置好了 axios,所以 asyncData
函数可以获取到 $axios
对象用于发起 HTTP 请求。我们实现页面加载的数据获取以及 deleteRecipe
事件,代码如下:
<!-- ... --> |
实现食谱详情页面
我们进一步实现食谱详情页面。在 pages/recipes 目录中创建 _id 目录,在其中添加 index.vue 文件,代码如下:
[tuture-add]<template> |
为了测试前端页面能否真正从后端获取数据,我们先要在后端数据库中添加一些数据,而这对 Django 来说就非常方便了。进入 api 目录,运行 python manage.py runserver
打开服务器,然后进入后台管理页面(http://localhost:8000/admin),添加一些数据:
再运行前端页面,可以看到我们刚刚在 Django 后台管理中添加的项目:
实现食谱的编辑和创建页面
有了前面的铺垫,实现食谱的添加和删除也基本上是按部就班了。我们在 pages/recipes/_id 中分别实现 edit.vue
(食谱编辑页面) 和 add.vue
(创建食谱页面)如下。
[tuture-add]<template> |
实现之后的页面如下:
[tuture-add]<template> |
实现的页面如下:
一点强迫症:全局页面跳转效果
在这一节中,我们将演示如何在 Nuxt 中添加全局样式文件,来实现前端页面之间的跳转效果。
首先在 assets 目录中创建 css 目录,并在其中添加 transition.css 文件,代码如下:
.page-enter-active, |
在 Nuxt 配置文件中将刚才写的 transition.css 中添加到全局 CSS 中:
// ... |
欧耶,一个具有完整增删改查功能、实现了前后端分离的美食分享网站就完成了!