美食杰项目(四)美食详情页
目录
- 前言:
- 具体样式
- 实现效果
- 代码思路
- 相应的组件
- 相关代码
- 总结:
前言:
- 本节给大家讲的是美食杰项目的美食详情页的主要功能和具体样式,希望我的代码能够帮助到你,也希望你能够看懂有所收获
具体样式
头部样式
内容样式
评论样式
实现效果
完成具体样式的渲染
完成评论的渲染并且可以实现发布评论的功能
代码思路
通过点击美食图片实现跳转,跳转到食品详情页,并将用户的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将数据拿出来,赋值给menuInfomenuInfo({ 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 class="collection" @click="collection">{{ menuInfo.isCollection ? "已收藏" : "收藏" }}</div></div><ul class="detail-property"><li v-for="item in menuInfo.properties_show" :key="item.type"><strong>{{ item.parent_name }}</strong><span>{{ item.name }}</span></li></ul><div class="user"><router-link class="img"><img :src="menuInfo.userInfo.avatar" /></router-link><div class="info"><h4><router-link to="">{{ menuInfo.userInfo.name }}</router-link></h4><span>菜谱:{{ menuInfo.userInfo.work_menus_len }}/ 关注:{{menuInfo.userInfo.following_len}} / 粉丝:{{ menuInfo.userInfo.follows_len }}</span><strong>{{ menuInfo.userInfo.createdAt }}</strong></div></div></div></div>
</template><script>
import { toggleCollection } from "@/connector/api";
export default {props: {menuInfo: {type: Object,default: () => {},},},methods: {// 收藏async collection() {// 将用户id结构出来const { userId } = this.$route.query;// 将data数据拿出来const { data } = await toggleCollection({ menuId: userId });// 将值赋值给menuInfo里面的isCollection// console.log(res);this.menuInfo.isCollection = data.isCollection;},},
};
</script>
- detail-conten组件的主要功能是对菜品的主要介绍,将菜品的主料,辅料,具体步骤进行渲染。detail-content内容组件相关代码:
<template><div class="detail-content"><div class="content-header"><p class=""><strong>“</strong>{{ menuInfo.product_story }}<strong>”</strong></p><h2>用料</h2><div class="materials"><h3>主料</h3><ul><liclass=""v-for="item in menuInfo.raw_material.main_material":key="item._id">{{ item.name }}<span>{{ item.space }}</span></li></ul></div><div class="materials"><h3>辅料</h3><ul><liclass=""v-for="item in menuInfo.raw_material.accessories_material":key="item._id">{{ item.name }}<span>{{ item.space }}</span></li></ul></div></div><div class="content"><h2>{{ menuInfo.title }}</h2><divclass="detail-steps"v-for="(item, index) in menuInfo.steps":key="item._id"><em class="detail-number">{{ index + 1 }}.</em><div class="detail-explain-desc"><p>{{ item.describe }}</p><img class="conimg" :src="item.img_url" v-if="item.img_url" alt="" /></div></div><h2>烹饪技巧</h2><div class="skill">{{ menuInfo.skill }}</div></div></div>
</template><script>
export default {// 用props来接收父元素传过来的值props: {menuInfo: {type: Object,default: () => {},},},
};
</script>
- comment组件为评论组件,主要功能就是渲染对菜品的评论,并且可以添加评论内容。comment评论组件相关代码
<template><div class="discuss"><h2>“{{ menuInfo.title }}”的讨论</h2><div class="comment"><router-link to=""><img :src="menuInfo.userInfo.avatar" alt=""/></router-link><!-- 判断是否登录 --><div v-if="!isLogin">请先登录后,再评论<router-link to="">登录</router-link></div><div class="comment-right"><el-inputtype="textarea":rows="5":cols="300"placeholder="请输入内容"v-model="commentText"></el-input><!-- 给提交写一个点击事件 --><div class="comment-button"><el-buttonclass="send-comment"type="primary"size="medium"style="float: left"@click="sendComment">提交</el-button></div></div></div><div class="comment-list"><div class="comment-item" v-for="item in comments" :key="item.commentId"><div class="avatar"><img :src="item.userInfo.avatar" alt="" /><span>{{ item.userInfo.name }}</span></div><div class="discuss-content"><p>{{ item.commentText }}</p><p>{{ item.createdAt }}</p></div></div></div></div>
</template><script>
import { getComments, postComment } from "@/connector/api";
export default {// props接受父组件传过来的数据props: {menuInfo: {type: Object,default: () => {},},},data() {return {// 变量接收输入进去的值commentText: "",comments: [],};},computed: {// 看是否登录isLogin() {return this.$store.getters.isLogin;},},async mounted() {//向后端请求数据(评论的内容)//有两种情况console.log(this.$route.query);let { userId } = this.$route.query;// 判断是否有用户idif (userId) {// 将评论数据赋值给datalet data = await getComments({ menuId: userId });console.log(data);// 将data的评论数据赋值给comments里面this.comments = data.data.comments;}},methods: {// 发送评论async sendComment() {// 将值传进接口let data = await postComment({menuId: this.menuInfo.menuId,commentText: this.commentText,});// 将输入进的评论添加到comments里面this.comments.unshift(data.data.comments);// console.log(data.data.comments);},},
};
</script>
总结:
以上就是 美食杰项目中美食详情页的具体样式和实现方法,不懂得也可以在评论区里问我,以后会持续发布一些新的功能,敬请关注。我的其他作品
美食杰项目(四)美食详情页相关推荐
- 美食杰项目(七)菜谱大全
本文目录 前言: 1.具体样式 2.实现的具体功能和代码思路 3.element ui具体样式的网址 4.相关代码 5.总结: 前言: 本文给大家讲的是美食杰项目中菜谱大全项目的具体样式,代码思路和具 ...
- 美食杰项目(六)发布菜谱
目录 前言 具体效果 实现的具体功能 代码思路 主要引入的element ui的具体样式 相关代码 总结: 前言 本节给大家讲的是美食杰项目的发布菜谱的主要功能和具体样式,希望我的代码能够帮助到你,也 ...
- 美食杰项目 -- 发布菜谱(七)
目录 前言: 具体实现思路: 步骤: 1. 展示美食杰发布菜谱页效果 2. 引入element-ui 3. 代码 总结: 前言: 本文给大家讲解,美食杰项目中 实现发布菜谱页的效果,和具体代码. 具体 ...
- 美食杰项目 -- 个人主页(四)
目录 前言: 具体实现思路: 步骤: 1. 展示美食杰菜谱大全效果 2. 引入element-ui 3. 代码 总结: 前言: 本文给大家讲解,美食杰项目中 实现个人主页的效果,和具体代码. 具体实现 ...
- VUE——超详细的美食杰项目—菜谱详情
VUE--超详细的美食杰项目-菜谱详情 效果介绍 detail.vue detail-header.vue detail-content.vue comment.vue 效果介绍 实现页面数据渲染,还 ...
- 美食杰项目---个人页和他人主页
美食杰项目-个人页和他人主页 跳转个人主页. 跳转他人主页. 点击他人关注或取消关注. 点击他人菜谱,粉丝及关注. 效果图展示 点击跳转到个人空间,个人空间没有关注和取消关注. 点击个人跳转如下图: ...
- 美食杰项目 -- 菜品信息(五)
目录 前言: 具体实现思路: 步骤: 1. 展示美食杰菜谱大全效果 2. 引入element-ui 3. 代码 总结: 前言: 本文给大家讲解,美食杰项目中 实现菜品信息页的效果,和具体代码. 具体实 ...
- 美食杰项目 -- 菜谱大全(二)
目录 前言: 具体实现思路: 步骤: 1. 展示美食杰菜谱大全效果 2. 引入element-ui 3. 代码 总结: 前言: 本文给大家讲解,美食杰项目中菜谱大全实现的效果,和具体代码. 具体实现思 ...
- 美食杰项目 -- 首页(一)
目录 前言: 具体实现思路: 步骤: 1. 展示美食杰项目首页效果 2. 引入 element-ui 3. 头部代码 4. 首页内容总代码 5. 轮播图代码 6. 已发布菜品内容代码 7. 加载图片页 ...
最新文章
- android怎么模拟返回,Android中障蔽返回键,HOME键以及模拟HOME键返回效果的方法...
- Android解决程序切换后台被干掉,恢复状态问题
- java自定义注解解析及自定义注解
- JZOJ 3129. 【WinterCamp 2013】数三角形
- JSP中文乱码分析和解决
- 十、input与跳转
- 遇到异常:这可能是由某个扩展导致的
- Linux内核网络协议栈7-socket端口管理
- 19-[模块]-xml
- vb.ne textbox数字保存excel_Excel 另类保护:锁死页面布局、保存、审阅标签右键等菜单禁编辑...
- 红帽子 linux 声卡驱动,RedHat Linux系统下安装ALSA驱动的方法
- git ssh密钥生成与配置
- 昵图网源码php,【PHP】仿我图,千图,昵图网素材下载,素材销售平台最新宽屏商业版:含新版vip会员中心,全开源...
- 我的听歌神器--网易云
- 量化交易10-backtrader回测乌云盖顶K线形态图
- centos离线安装(升级)nvidia显卡驱动及cuda10.2
- 手摸手带你写项目----秒杀系统(一)
- Jquery获取单选框与复选框选中的值
- emui系统就是鸿蒙吗,华为EMUI是不是鸿蒙系统
- java计算机毕业设计线上文具销售系统源程序+mysql+系统+lw文档+远程调试
热门文章
- echarts 报错Cannot read properties of undefined (reading ‘coord‘)
- Vue中使用Echarts中的地图组件报错:TypeError: api.coord is not a function
- 开源分布式量化交易系统——回测系统(一)
- 1. Windows 10 - Node与Vue - 安装 Vue 2.x 及 3.x 框架 - 项目创建要点
- 项目部署到服务器后为什么跑着跑着就访问不了了?
- Linux系统认知——常用命令(全)
- uni-app / vue 使用微信开发标签标签wx-open-subscribe
- pyhton如何导入包的每一个文件_如何开始第一个 Python 编程实践项目?
- STM32MP157系列教程连载-硬件设计篇3:STM32MP1微处理器之时钟篇
- java saop 中文乱码_java - 使用Java进行SOAP服务调用时出错 - SO中文参考 - www.soinside.com...