vue项目美食杰 -- 发布菜谱

最新推荐文章于 2023-03-21 11:43:07 发布

Im_xiaopei

最新推荐文章于 2023-03-21 11:43:07 发布

阅读量285

点赞数

分类专栏：项目专栏文章标签： vue.js

本文链接：https://blog.csdn.net/Im_xiaopei/article/details/120516296

版权

本文介绍了如何在Vue.js项目中实现美食杰的发布菜谱功能，涵盖了前后端交互、Element-UI的使用。通过Element-UI布局和样式设计，结合后台接口获取并显示数据。详细讲解了数据结构的设定、子组件的运用以及添加、删除功能的实现。最后阐述了提交发布功能的步骤，当用户点击提交时，将所有数据通过后端接口发送，完成菜谱发布。

摘要由CSDN通过智能技术生成

不知不觉间，vue美食杰项目已经实现了很多了，我都有点始料未及呢，今天进行的部分呢，是项目中的发布菜谱功能，在这个页面中，我们会学习到前后端的交互，Element-ui的使用等等。。。

先看下效果图：

第一部分：

第二部分：

第三部分：

第一部分：使用Element-ui来实现页面布局和样式，调用后台接口请求到数据渲染到页面上

将请求来的数据赋值给data定义的属性，渲染到页面上

getProperty().then(({ data }) => {
      console.log(data);
      this.propertyies = data;
      console.log(this.propertyies);
      this.backData.property = data.reduce((o, item) => {
        o[item.title] = "";
        return o;
      }, {});