美食杰项目（四）美食详情页

前言：

• 本节给大家讲的是美食杰项目的美食详情页的主要功能和具体样式，希望我的代码能够帮助到你，也希望你能够看懂有所收获

---

具体样式

• 头部样式
  

• 内容样式
  

• 评论样式
  

实现效果

完成具体样式的渲染
完成评论的渲染并且可以实现发布评论的功能

代码思路

通过点击美食图片实现跳转，跳转到食品详情页，并将用户的id传进路由
利用id请求到美食的详细信息
并将这些数据传给相应的组件实现低耦合高边距
各个组件拿到数据之后挨个进行渲染
评论思路：
	利用v-model将评论的内容拿到
	利用接口的将评论的内容保存到接口数据里

---

相应的组件

相关代码

• detail组件为总组件，里面包含了页面的头部组件，内容组件，评论组件，路由跳转到此组件，相关代码：

<template>
  <div class="detail">
    <!-- 通过父传子将值传到响应的组件 -->
    <!-- 头部 -->
    <detailHeader :menuInfo="menuInfo"></detailHeader>
    <!-- 内容 -->
    <detailContent :menuInfo="menuInfo"></detailContent>
    <!-- 评论 -->
    <comment :menuInfo="menuInfo"></comment>
  </div>
</template>

<script>
import {
    menuInfo } from "@/connector/api";
import detailHeader from "./detail-header";
import detailContent from "./detail-content";
import comment from "./comment";
export default {
   
  data() {
   
    return {
   
      menuInfo: [],
    };
  },
  components: {
   
    // 组件
    detailHeader,
    detailContent,
    comment,
  },
  mounted() {
   
    // 将id结构出来
    let {
    menuId } = this.$route.query;
    console.log(menuId);
    // 通过id将数据拿出来,赋值给menuInfo
    menuInfo({
    menuId }).then(({
     data }) => {
   
      console.log(data);
      this.menuInfo = data.info;
    });
  },
};
</script>

• detail-header组件里面的具体功能就是将菜品的详细介绍出来，并将作者的基本信息列举出来，detail-header头部组件代码：

<template>
  <div class="detail-header">
    <div class="header-left">
      <img :src="menuInfo.product_pic_url" alt="" />
    </div>
    <div class="header-right">
      <div class="header-right-title">
        <h1>{
   {
    menuInfo.title }}</h1>
        <div