美食杰(菜谱详情)

跳到详情,并传入menuId值
<router-link :to="{name:'detail',query:{menuId:item.menuId}}">

之后去我们的封装好的接口拿到 详情的请求接口

/**
 * 根据菜单id，拿到菜谱的详细信息
 * @export
 * @param {Object} [params] - 
 * @param {string} [params.menuId] - 指定菜单的id
 * @returns
 */
export async function menuInfo(params){
  return await http.get('/menu/menuInfo', {params});
}

把接口引入到总详情页 进行请求数据

import { menuInfo} from "@/service/api";  //引入详情请求接口

 data() {
    return {
      listq: {},
    };
  },
  watch: {     
    $route: { //监听路由,调用接口
      async handler() {
        let { menuId } = this.$route.query; //拿到传过来的menuId参数
        // console.log(this.$route.query)
        if ({ menuId }) {  //判断是否有menuId值
          let data = await menuInfo({ menuId });
          console.log(data);
          this.listq = data.data; //拿到数据赋值给一个空对象
          console.log(this.listq);
        } else {       //没有的话进行警告
          this.$message({
            showClose: true,
            message: "请重新进入",
            type: "waring",
          });
        }
      },
      immediate: true //立即执行
    },
  },

这里因为我们这个详情是一个总详情,里面引入了三个组件,所以我们拿到数据要把数据通过父传子,传给子组件
 

import DetailHeader from "./detail-header";    //子组件头
import DetailContent from "./detail-content";  //子组件内容
import Comment from "./comment";               //评论

 <detail-header :info="listq"></detail-header>
 <detail-content :info="listq"></detail-content>
 <Comment :info="listq"></Comment>

在各自组件中在props中接收info

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

在detail-header组件和detail-content组件中渲染即可,在comment组件中只需要拿menuId用来之后请求发表评论与获取评论

之后在detail-header这个自组价中还有一个 "收藏"

//引入api的收藏接口  
/**
 * toggle 收藏。收藏的取消收藏；没收藏的，要收藏。
 * @export
 * @param {Object} [params] - 
 * @param {string} [params.menuId] - 指定要收藏的菜单的id
 * @returns
 */
export async function toggleCollection(params){
  return await http.post('/user/collection', params);
}


引入到detail-header组件中
import { toggleCollection } from "@/service/api";

<div class="detail-collection" v-if="!isOnwer">
        <!-- collection-at  no-collection-at-->
        <a
          href="javascript:;"
          class="collection-at"
          :class="{ 'no-collection-at': show.isCollection }"
          @click="myck()" 
        >
        {{ show.isCollection ? "已收藏" : "收藏" }} //三元表达式
        </a>
   </div>


data() {
    return {
      show: {},
    };
  },
 methods: {
    async myck() {
      // 判断是否已经登录,如果没登录就给出提示
      if(!this.$store.getters.isLogin){
        this.$message({
          showClose:true,
          message:'请先登录,再收藏',
          type:'warning'
        })
        return;
      }
      let data = await toggleCollection({ menuId: this.info.info.menuId });
      console.log(data);
      this.show = data.data;
      console.log(this.show);
      //  console.log(this.info.info.menuId)
    }
  },
 computed: {
    isOnwer(){  //判断进入的是不是自己的作品,如果用户进的是自己发布的作品，就隐藏收藏按钮
     return this.info.info.userInfo.userId === this.$store.state.userInfo.userId
    }
  },

最后说一下发布评论与获取评论

 先移入api的接口到评论的组件中,一个获取一个提交,请求的参数下面都有写

/**
 * 获取菜谱评论信息
 * @export
 * @param {Object} [params] - 
 * @param {string} [params.menuId] - 指定菜谱的id
 * @returns
 */
export async function getComments(params){
  return await http.get('/menu/comment', {params});
}

/**
 * 提交菜谱评论信息
 * @export
 * @param {Object} [params] - 
 * @param {string} [params.menuId] - 指定评论的菜谱id
 * @param {string} [params.commentText] - 评论内容
 * @returns
 */
export async function postComment(params){
  return await http.post('/menu/comment', params);
}

先判断登录状态如果没登录就让他跳转到登录页面,之后在input绑定v-model 来获取输入的评论内容,拿到发布评论的参数之一,之前通过父传子传过来的info,里有menuId,绑定单击事件,请求数据,设一个空数组,把请求的数据,unshift前压入到数组中,之后在页面渲染即可 代码如下

 //引入获取评论与发布评论的接口
<div  v-if="!isLogin">请先登录后，再评论<router-link :to="{path:'/login'}">登录</router-link></div>
 <div class="comment-right">
        <el-input
          type="textarea"
          :rows="5"
          :cols="50"
          placeholder="请输入内容"
          v-model="kk"  //获取输入的评论内容
        >
        </el-input>
        <div class="comment-button" >
          <el-button 
            class="send-comment" 
            type="primary" 
            size="medium"
            @click="tj"  //添加单击事件
          >提交</el-button>
        </div>
    </div>

 import {getComments,postComment} from '@/service/api';
  data(){
    return {
       kk:'',  
       list:[]
    }
  },
  computed: {
     isLogin(){
       return this.$store.getters.isLogin //拿到已经登录的状态
     }
  }, 
  methods:{   //请求接口发布评论
    async tj(){
      let data=await postComment({
       menuId:this.info.info.menuId,
       commentText:this.kk
     })
     console.log(data)
    //  this.list=data.data
     this.list.unshift(data.data.comments)  //压入到空数组前面,之后在页面渲染即可
    //  console.log(this.list)
    this.kk=""
    }
  }, 
  async mounted(){   //初始化页面时让他显示已有的评论
    let {menuId} =this.$route.query
    if({menuId}){
      let data=await getComments({menuId:menuId})
      console.log(data)
      this.list=data.data.comments   //把发布过的评论赋值给我们设置的空数组
    }
  },

​

 这就是我的美食杰详情页啦谢谢!! 继续努力!!!