vue项目美食杰菜谱大全实现（三）

接上篇，vue项目美食杰菜谱大全已经实现，今天来说一下菜单详情的实现

分析： 

        这个菜单详情页面，考验的知识很少，基本都是拿数据渲染

分为4大部分，四个组件：

        1.detail：

                detail组价：

                根据menuld请求数据（查看数据结构），渲染页面（如果没有menuld，提示框请登录）

                        注意事项：数据结构过多，在保存到组件中，提前写好默认值。避免在异步请求返回数据之前查找不到属性。

        2.菜谱头部：

                detail-header组件：

                1.根据数据，逐个渲染头部页面。用户信息中国，query传入用户id，跳转个人空间

                2.收藏按钮：判断是否是本人登录再显示

                3.收藏功能：判断是否登录，再请求，否则提示框，请先登录....

        3.菜的内容（用料，做法）：  

                detail-content组件：    

                1.根据数据，逐个渲染页面,菜品的步骤：编号使用数组下标+1即可（index）

                2.注意事项，一定要接收父组件传的数据props：{}接收

        4.评论：

                comment组价：

                1.拿数据根据数据，逐个渲染页面

                2.点击提交添加数据 向后端请求  评论内容，然后添加到页面

                3.注意：请先登录，再评论

                              写完评论后，文本为空

  接下来按照步骤一步一步实现

        首先在detail组价获取数据

<template>
  <div class="menu-detail">
    <detail-header :info="menuInfo"></detail-header>
    <detail-content :info="menuInfo"></detail-content>
    <Comment :info="menuInfo"></Comment>
  </div>
</template>
<script>
import DetailHeader from './detail-header'
import DetailContent from './detail-content'
import Comment from './comment'
import {menuInfo} from '@/service/api';
export default {
  components: {DetailHeader, DetailContent, Comment},
  data(){
    return {
      menuInfo:{
        userInfo:{},
        raw_material:{
          main_material:[],
          accessories_material:[]
        },
        steps:[],
      },//接收菜谱的详细信息
    }
  },
  watch:{
    $route:{
      async handler(){
        let {menuId} = this.$route.query;
        if(menuId){//发送请求
          menuInfo({menuId}).then(({data})=>{
            this.menuInfo=data.info;
          });
        }else{
          this.$message({
            showClose:true,
            message:'请重新进入',
            type:"warning"
          })
        }
      },
      immediate:true
    }
  }
}
</script>

watch监听一下获取数据通过后端api提供的方法用.then()异步获取数据，赋值给menuInfo，然后在data中存一下menuInfo，判断一下menuld，如果没有menuld，提示框请登录，重新进入。这一页主要是获取数据，然后子组件通过props接收数据。

        打印一下可以获取到的数据

  然后写菜谱头部

        先props接收一下info，是一个对象形式，空对象

props:{
   info:{
     type: Object,
     default: () => ({})
   }
},

        接着渲染数据

 

         接着

    

<ul class="detail-property clearfix">
    <li 
         v-for="item in info.properties_show"
         :key="item.parent_type"
    >
         <strong>{
  {item.parent_name}}</strong>
         <span>{
  {item.name}}</span>
    </li>
</ul>

然后写发布者的详情：

 

<div class="user">
      <router-link id="tongji_author_img" class="img" :to="{name:'space',query:{userId: info.userIn