美食节实现菜谱详情页

最新推荐文章于 2022-12-06 14:14:25 发布

GUfeifei___

最新推荐文章于 2022-12-06 14:14:25 发布

阅读量402

点赞数

文章标签： vue.js javascript html5

本文链接：https://blog.csdn.net/GUfeifei___/article/details/120730300

版权

本文介绍了如何使用Vue.js和JavaScript来创建一个美食节的菜谱详情页面。首先，从思路出发，讲解了如何获取数据并渲染页面。接着，详细展示了代码实现，包括点击头像跳转到个人编辑页以及根据后端返回的字段判断收藏状态。最后，提到了评论功能的实现，包括未登录状态下收藏按钮的禁用逻辑。

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

1.思路：

1.1：先获取数据进行页面渲染
先写一个menuInfo接收菜谱的详细信息

export default {
   
  components: {
   DetailHeader, DetailContent, Comment},
  data(){
   
    return {
   
    menuInfo:{
   
      } 
    }
  },

1.2：拿到menuId后有两种情况if判断一下有就是正常的发送请求，如果不存在发送重进进入

watch:{
    
  $route:{
   
   handler(){
   
     
      let {
   menuId} = this.$route.query;
      
      if(menuId){
   //3.1
      menuInfo({
   menuId}).then(({
   data}) =>{
   
       console.log(data)
       this.menuInfo = data.info;
     })
      }else{
   
        this.$message({
   
          message:"重进进入",
          type:"warrning"
        })
      }
   },
   immediate:true
  }
  }
}

效果展示：

在这里插入图片描述

1.3:详细代码

<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:[]
    } //1.接收菜谱的详细信息
    }
  },
  watch:{
    
  $route:{
   
   handler(){
   
     //2.menuId从query里面去拿
      let {
   menuId} = this.$route.query;
      //3.拿到menuId后有两种情况if判断一下//有就是正常的
      if(menuId){
   //3.1发送请求
      menuInfo({
   menuId}).then(({
   data})</