美食杰项目（六）发布菜谱

前言

• 本节给大家讲的是美食杰项目的发布菜谱的主要功能和具体样式，希望我的代码能够帮助到你，也希望你能够看懂

---

具体效果

实现的具体功能

按照效果图实现静态页面布局
可以使用element-ui框架
实现上传图片功能
默认为3个可以增加，删除，最少为1个
点击提交，成功发布菜谱
1
2
3
4
5

代码思路

主页面完成具体的样式，可以看element ui的具体框架来实现具体样式
根据选项来实现具体口味和烹饪方法
将主料辅料功能实现组件化封装
将上传图片进行组件化封装
将选的具体数据传给接口实现发布菜谱 
1
2
3
4
5

主要引入的element ui的具体样式

点击这里跳转到的element ui上传图片的具体样式和使用
点击这里跳转到的element ui中input的具体样式和使用
点击这里跳转到的element ui中select的具体样式和使用

相关代码

由于前面将编辑资料的时候说过上传图片的具体功能和样式，如果想要了解编辑资料可以
点击这里跳转到编辑个人资料页面看上传图片的样式

• 主页面为总组件发布菜谱的主要功能都在这里面所以代码有点多、主页面的相关代码：

<template>
 <div class="box">
   <p class="title">欢迎发布新菜谱，先介绍一下你的大作</p>
   <div class="top">
     <div class="headline">
       <p>标题</p>
       <input type="text" placeholder="请输入内容" v-model="backData.title" />
     </div>
     <div class="property">
       <p>属性</p>
       <el-select
         v-for="item in property"
         :key="item.parent_type"
         :placeholder="item.parent_name"
         v-model="backData.property[item.title]"
       >
         <el-option
           v-for="option in item.list"
           :key="option.type"
           :label="option.name"
           :value="option.type"
         ></el-option>
       </el-select>
     </div>
     <div class="classify">
       <p>菜谱分类</p>
       <el-select v-model="backData.classify" placeholder="请选择">
         <el-option-group
           v-for="item in classify"
           :key="item.parent_type"
           :label="item.parent_name"
         >
           <el-option
             v-for="option in item.list"
             :key="option.type"
             :label="option.name"
             :value="option.type"
           >
           </el-option>
         </el-option-group>
       </el-select>
     </div>
     <div class="articles">
       <p>成品图（328*440）</p>
       <div>
         <upload-img
           action="/api/upload/?type=product"
           
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47