全栈“食”代：用Django+Nuxt实现美食分享网站（一）腾讯云开发者社区

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

安装命令如下：

(recipes_app-nV3wuGJ1)$pipenvinstalldjangodjango-rest-frameworkdjango-cors-headers这时pipenv便产生了Pipfile文件，它的作用就类似Node项目中的package.json文件：

(recipes_app-nV3wuGJ1)$pythonmanage.pymigrate(recipes_app-nV3wuGJ1)$pythonmanage.pycreatesuperuser按照问题输入信息即可。要记住用户名和密码哦！然后运行开发服务器：

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

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

Thewebframeworkforperfectionistswithdeadlines.

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

具体代码如下：

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

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

fromdjango.contribimportadminfrom.modelsimportRecipe#Registeryourmodelshere.admin.site.register(Recipe)第三步，定义序列化器serializers.py（脚手架并不会自动创建，需要手动创建）。序列化器是DjangoRestFramework提供的功能，能够非常方便地将Django数据模型序列化成相应的JSON数据格式。在这里，我们定义一个RecipeSerializer，并在classMeta中指定对应的数据模型为刚才创建的Recipe，并选择相应的字段展示：

fromrest_frameworkimportviewsetsfrom.serializersimportRecipeSerializerfrom.modelsimportRecipeclassRecipeViewSet(viewsets.ModelViewSet):serializer_class=RecipeSerializerqueryset=Recipe.objects.all()只需指定serializer_class（序列器类）和queryset（模型查询集），就自动定义好了模型的添加、删除、查询和修改！虽然视图集非常强大，但是如果要实现更加灵活的业务逻辑，那么还是要为每个接口定义单独的视图类才行。

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

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

(recipes_app-nV3wuGJ1)$pythonmanage.pyrunserver由于DjangoRESTFramework为我们提供了测试API的Web界面，因此这里就不用Postman等工具进行测试了。用浏览器访问localhost:8000/api/recipes[9]，就进入了如下所示的API测试页面：

这个页面的下方还有添加数据（发起POST请求）的表单，我们填一些数据，然后点击POST按钮：

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

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

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

$npxcreate-nuxt-appclient之后脚手架应用会询问一系列问题，按下面的截图进行选择（当然作者名填自己）：

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

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

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

模板（Template）+脚本（Script）+样式（Style），经典的Vue.js组件。

我们刚刚创建了pages目录下的index.vue文件，这意味着当访问根路由/时，这个文件将被访问到。通过npmrundev运行我们的前端页面（记得在client子目录下运行！），可以看到：

真是让人食欲大开！

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

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

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

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

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

pages├──README.md├──index.vue└──recipes├──_id│├──edit.vue│└──index.vue├──add.vue└──index.vue_id目录（或者其他以单下划线开头的目录或.vue文件）被称作是动态路由（DynamicRouting），可以接受参数作为URL的一部分。上面的pages目录自动生成下面的router：

创建食谱列表页面pages/recipes/index.vue（先使用假数据填充），代码如下：

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

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

[1]

[2]

[3]

[4]

[5]

[6]

[7]

[8]

[9]

localhost:8000/api/recipes:localhost:8000/api/recipes

[10]

localhost:8000/api/recipes/1:localhost:8000/api/recipes/1