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

不知不觉间，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;}, {});// console.log(data);// console.log(this.backData);}),

<h5>标题</h5><el-input class="create-input" placeholder="请输入内容" v-model="backData.title"></el-input><h5>属性</h5><div><el-selectv-for="item in propertyies":key="item.parent_type"v-model="backData.property[item.title]":placeholder="item.parent_name"><el-optionv-for="option in item.list":key="option.type":value="option.type":label="option.name"@click="add"></el-option></el-select></div>

第二部分：因为使用了Element-ui组件，并且需要将输入的内容发送给后端，结合Elementui的官网，需要设置一个固定的数据结构，这里是定义在data中的数据结构，并进行了一些处理：

 backData: {title: "",property: {}, classify: "",product_pic_url: 'https://s1.c.meishij.net/n/images/upload_big_img.png?=1561906961', // 成品图URLproduct_story: '', // 成品图故事raw_material: {// 料main_material: Array(3).fill(1).map(()=>({... raw_materia_struct})), // 主料accessories_material: Array(3).fill(1).map(()=>({... raw_materia_struct})) // 辅料},steps: Array(3).fill(1).map(()=>({...steps_struct}))},

这里我使用了子组件：

<section class="create-introduce"><h5>主料</h5><Stuff v-model="backData.raw_material.main_material"></Stuff><h5>辅料</h5><Stuff v-model="backData.raw_material.accessories_material"></Stuff></section>

stuff.vue：

 <div class="stuff"><div class="clearfix"><div class="raw-item"><el-input placeholder="请输入内容" style="width: 200px" ></el-input><el-input placeholder="请输入内容" style="width: 100px" ></el-input><i class="delete-icon el-icon-close" ></i></div></div><el-button  class="eaeaea" type="primary" size="medium" icon="el-icon-plus">增加一项</el-button></div>

在这个组件中进行数据的保存，功能的操作，但需要注意的是最终都是需要在父组件中进行，

这里定义添加和删除的功能操作：

 methods:{add(){// this.$emit('input',[//   ...this.value,//   {"name":'',"specs":''}// ])this.value.splice(index,1)},remove(index){const newValue=this.value.filter((item,i)=>{return i!==index})this.$emit('input',newValue)}}
}

第三部分，主要是提交发布功能，步骤图功能和第二部分一致，点击添加，点击删除，只剩一个时不可删除，所以这里展示提交功能：

点击提交时，将收集到的数据整体通过后端接口发送回后端。菜谱就发送成功了，完事。

祝生活安好。。

vue项目美食杰 -- 发布菜谱相关推荐

vue项目美食杰菜谱大全实现（三）
接上篇,vue项目美食杰菜谱大全已经实现,今天来说一下菜单详情的实现分析: 这个菜单详情页面,考验的知识很少,基本都是拿数据渲染分为4大部分,四个组件: 1.detail: detail组价: 根 ...
vue项目美食杰菜谱大全实现（二）
接上篇,vue项目美食杰菜谱大全实现效果图分析: 整体分为三大部分 1.先实现菜谱分类头部实现 (1)先实现家常菜谱中华菜系和各地小吃的实现,通过后端获取到数据,渲染页面(2)再实现第一部中的每一 ...
vue 美食杰发布菜谱
文章目录 header.vue create.vue stuff.vue step-upload.vue upload-img.vue header.vue <router-link to=&q ...
vue项目美食杰菜谱大全实现
效果图分析 1.先实现菜谱分类头部实现 (1)先实现家常菜谱中华菜系和各地小吃的实现 (2)再实现第一部中的每一项 2.实现左边筛选中的功能 (1)先实现工艺,口味,难度,人数 (2)实现第一步中包 ...
vue项目美食杰--菜谱大全
项目已经接近尾声了,难度也随之增加,不过,世上无难事,只要肯登攀,遇到困难,打倒它,然后在遇到更大的困难..当然了,在这个过程中我们的技术和心理素质也会逐步的提高..今天分享一个小小难度的部分,菜谱大 ...
美食杰-发布菜单（完整版）
一,效果展示二,效果概要 1.获取数据 2.数据渲染 3.赋值数据 4.点击提交审核三,技术掌握 1.熟悉element组件库 2.掌握vue-cli脚手架 3.掌握vue-router路由 4. ...
vue项目构建打包发布三部曲
一.vue项目的创建 1.首先第一肯定是要有Node.js及npm这个不多说了 2.安装脚手架此时可以直接浏览-但是现在肯定有很多小白想将他发布到gitHub上并可以浏览,使用vue全家桶制作自己的 ...
Vue 项目的成功发布和部署
最近一直在尝试对 Vue 项目进行打包和发布,发现通过 npm run build 打包生成的 dist 文件不能直接放到服务器下面进行部署,否则会出现以下问题: 究其原因是,无法正确找到相关 js ...
Vue 项目创建并发布
1.# 全局安装 vue-cli npm install vue-cli -g // 如果还没安装 2.# 创建一个基于 webpack 模板的新项目 vue init webpack myproje ...

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

vue项目美食杰 -- 发布菜谱相关推荐

最新文章

热门文章