前言:
- 本节给大家讲的是美食杰项目的美食详情页的主要功能和具体样式,希望我的代码能够帮助到你,也希望你能够看懂有所收获
具体样式
-
头部样式
-
内容样式
-
评论样式
实现效果
完成具体样式的渲染
完成评论的渲染并且可以实现发布评论的功能
代码思路
通过点击美食图片实现跳转,跳转到食品详情页,并将用户的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