美食杰---食物详情页

最新推荐文章于 2025-12-06 21:29:45 发布
原创 最新推荐文章于 2025-12-06 21:29:45 发布 · 265 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#html #vue

该博客详细介绍了如何开发一个菜品详情页面，包括菜名、图片和用户信息的展示，以及用料、步骤和做法的渲染。文章强调了在列表图中设置空数组来处理初次加载时可能的数据为空情况，并通过监听路由变化来更新数据。收藏功能需要检查用户是否已登录，评论模块则区分了评论者和评论内容，未登录用户无法发表评论。同时，实现了评论实时更新的效果。

内容详情大块分为三部分
第一部分主要，显示菜名，图片，包括用户的信息
第二部分分为用料，步骤，做法
第三部分：讨论，用户发的评论
在这里插入图片描述
设一个空数组
在这里插入图片描述
因为拿到数据的时候，在组件中以加载，请求速度较快，第一次找的时候为空但是空值也是值
在这里插入图片描述
在这里插入图片描述
列表图
在这里插入图片描述

写在路由里监听一下，当这个路由参数发生改变的时侯，看if(menuId)还在不，如果不在告诉数据重新进入
收藏
注意：
第一点先看他是否登录
第二点当前的作者是否是自己
在这里插入图片描述

先查看是否登录
首先已经在vuex里面登录了
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
收藏按钮判断是否本人登录再显示：收藏功能：判断是否登录，在请求，负责提示框显示“请先登录”
第二部分主要展示用料，步骤，做法
数据渲染
在这里插入图片描述
实现效果
在这里插入图片描述
逐个渲染数据中，菜品的步骤：编号使用数组+1即可（index）
评论
模块分为评论者，评论内容
评论者细分了两个功能，提交内容，如果未登录得情况下，提交框不显示
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

效果显示
在这里插入图片描述
评论内容:当我们再input框发布内容得时候评论区域要实时更新

以上就是详情页得大体内容

美食杰-菜谱详情页
weixin_45571769的博客
10-12 374
一、 菜谱介绍 美食杰详情页页面，通过使用elementUI组件配合进行渲染页面，这里我们分为3个组件分别进行渲染，组件分为 头部组件(detail-header)、主体组件(detail-content)、评论组件(detail-comment) 配合 主组件(detail) 进行渲染； 这里我们看一下整体效果图 二、Detail组件传递数据 这里我们就开始进行渲染组件，我们先从detail组件开始进行编写，先在detail组件进行网络请求，这里我们在...
vue项目美食杰 -- 菜品详情
Im_xiaopei的博客
10-12 725
时间过的挺快的，眨眼间，美食杰项目迎来了最后一个大的板块了，此块功能完成之后，整个项目可以算是完结了，当然除了一些边边角角的细节和一些未发现的小问题，正题步入：今天呢，整个板块整体称之为‘菜品详情页’，具体如下： 大致功能还是比较简单的，所以写起来也是行云流水， 首先菜品详情页自然是菜品的详细信息，所以从菜品在的模块跳转，我这里举例的是轮播图中的跳转，当然了跳转的时候菜品的id必不可少： <router-link :to="{name:'detai...
【项目实战】---商品详情页的制作
从手指到键盘，谱出生命的轨迹~~~
01-18 6510
在前面的博文中，小编分别简单的介绍了邮件的发送以及邮件的激活，逛淘宝的小伙伴都有这样的体会，比如在搜索框中输入连衣裙这个商品的时候，会出现多种多样各种款式的连衣裙，连衣裙的信息包括价格，多少人购买，商品的名称等等，但是这些信息不够详情，我们需要了解更多的关于连衣裙的详情，点击某个商品，跳转页面，查看连衣裙的详情，以前小编逛淘宝的时候，从来都没有想过这个功能是如何实现，只知道一个劲儿的在那儿逛，小编
商品详情页实现
Java追求者的博客
05-19 3713
1.直接上效果图 2.数据库设计 3.封装VO(因为JSONResult.ok()只能传一个参数，而需求查询是有四个对象参数) 注意VO的封装属性要与前端的赋值属性要相同 /** * 商品详情VO */ public class ItemInfoVO { private Items item; private List<ItemsImg> itemImgList; private List<ItemsSpec> itemSpecList;
构建需求响应式亿级商品详情页
xcwll314的专栏
09-04 1237
商品详情页是什么 商品详情页是展示商品详细信息的一个页面，承载在网站的大部分流量和订单的入口。京东商城目前有通用版、全球购、闪购、易车、惠买车、服装、拼购、今日抄底等许多套模板。各套模板的元数据是一样的，只是展示方式不一样。目前商品详情页个性化需求非常多，数据来源也是非常多的，而且许多基础服务做不了的都放我们这，因此我们需要一种架构能快速响应和优雅的解决这些需求问题。因此我们重新设计了商品详情页
python笔记之 selenium爬取美食杰信息
weixin_40214188的博客
08-01 1316
 学习目的：练习selenium的用法，获取美食杰---&gt;菜谱大全---&gt;早餐 页面中的菜名以及作者名，保存到TXT文件中  1、首先引入所需要的包 from selenium.webdriver.common.action_chains import ActionChains #模拟鼠标 from selenium import webdriver import time ...
美食杰----详情页（续写）
m0_62201566的博客
10-12 220
今天要讲的是美食杰详情页面，这个页面主要讲述的是菜品制作的详细步骤，其中分为三部分： 头部，内容和评价。 思路： 根据menuId 请求数据(查看数据结构),渲染页面(如果没有menuld，提示框请登录) 注意:数据结构过多，在保存到组件中时，提前写好默认值。避免在异步请求返回数据之前找不到属性。 头部: 1.根据数据，逐个渲染头部页面。用户信息中，query传入用户id，跳转个人空间。 2收藏按钮:判断是否本人登录再显示。 ...
美食杰项目---首页
m0_62201566的博客
09-23 767
1.
美食-美食网站-美食网站源码-美食网站java代码-基于springboot的美食网站-美食项目-美食项目代码-美食代码-代码
04-15
美食-美食网站-美食网站源码-美食网站java代码-美食网站设计与实现-基于springboot的美食网站-基于Web的美食网站设计与实现-美食项目-美食项目代码美食系统-美食系统源码-美食管理系统-美食管理系统java代码-美食...
美食杰----菜谱大全
m0_62201566的博客
10-09 574
今天我们来写美食杰的菜谱大全页面，首先要讲的是实现这个页面的流程： 拿到数据----渲染数据----监听路由传参----判断----写点击事件 1.在api里面拿到数据getClassify, getProperty, getMenus。 2.再创建个空数组classify存放数据，把数据赋值给data。 3.渲染数据，用v-for渲染数据。 4.在watch里深度监听路由传参。 5.再用if判断，判断是否点击，如果点击过就取消；否则，选中。 6.用@click写点击事件，点击的时候地址栏中的
HTML应用指南：利用POST请求获取全国极氪门店位置信息
weixin_45812624的博客
12-03 1552
本篇文章介绍了通过程序化方式采集并分析极氪全国门店数据的完整流程。基于对官网接口的解析，利用 Python 自动请求市级行政区编码，并批量调用门店查询接口，高效获取包含门店名称、地址、高德经纬度、营业时间及开业日期等字段的结构化数据。针对地理坐标，文章对高德（GCJ-02）坐标系进行了标准化转换，确保后续在地图平台上的精准可视化；同时将原始时间戳统一处理为标准日期格式，支撑时间维度分析。在此基础上，揭示出极氪门店“核心城市群密集布局、区域中心精准覆盖”的空间策略。
使用 HTML + JavaScript 实现手写签名功能
QQ26843500的博客
12-04 892
本文介绍了一个基于HTML5 Canvas实现的手写签名网页应用。该应用主要功能包括： 提供米字格背景和范字（"海纳百川"）作为书写参考 支持鼠标和触摸屏两种书写方式 包含清空画布和下载签名图片两个功能按钮 技术实现上使用双Canvas叠加方案，底层Canvas绘制米字格和范字作为引导层，上层Canvas实现手写功能。通过JavaScript事件监听实现笔迹追踪，采用贝塞尔曲线平滑处理书写轨迹。响应式设计适配不同设备，并提供PNG格式的签名下载功能。整体界面简洁，采用蓝色标题栏和白色书写
HTML DOM 对象
wjs2024的博客
12-02 482
DOM（Document Object Model）是一种抽象的模型，用于表示 HTML 和 XML 文档。通过 DOM，开发者可以访问和操作文档中的任何元素，如文本、图像、链接等。DOM 对象化地表示了网页的结构，使得开发者可以像操作对象一样操作网页内容。HTML DOM 对象是网页设计和开发的基础，掌握 DOM 对象的基本概念、常用方法和实际应用，将有助于提高开发效率和代码质量。本文对 HTML DOM 对象进行了简要介绍，希望对您有所帮助。
HTML 基础
wjs2024的博客
12-02 363
HTML是构建网页和网站的基础，掌握HTML基础知识对于成为一名优秀的网页开发者至关重要。本篇文章为您介绍了HTML的发展历程、基本结构、常用标签以及一些高级特性。希望您能够通过学习，更好地掌握HTML，为您的网页开发之路打下坚实的基础。
前端html(3)
踢球的IT男，就是分享一些小东西！互相学习，共同进步！
12-06 468
注：表格相关的元素很多，我们这里整理一下：caption:用来设置表格标题；thead:表示表格的头部区域；th:表示表格的头部中的一个列；tbody:表示表格的中间主要显示区域；tr:表示表格的一个行；td:表示表格的和个列；tfoot:设置表格的脚部；colspan:表示横跨几列；
【JavaWeb】HTML_常见标签_表单项标签
qq_43494013的博客
12-04 162
【JavaWeb】HTML_常见标签_表单项标签
抖音直播时，飘窗提示的html窗口，主播不在，正在喝9
最新发布
恶猫的日记
12-06 139
无人或有人直播时，临 时离开，就弄个小窗口，提示下。
阿里云oss，通过html直接上传
quweiie的专栏
12-03 621
本文介绍了基于ThinkPHP8.1框架实现阿里云OSS V4签名直传文件的方法。前端通过表单提交文件，使用fetch API获取后端生成的签名信息后直接上传至OSS。后端主要实现两个功能：1) 通过阿里云STS服务获取临时凭证，并使用HMAC-SHA256算法生成OSS V4签名；2) 处理OSS回调验证。系统采用前后端分离架构，前端负责文件选择和直传，后端负责签名生成和安全验证，实现了安全高效的文件上传方案，适用于CentOS Stream9/PHP8.3环境。
2419.从HTML到纯文本：一款HTML转TXT轻量转换工具的开发与实践
12-05 876
HTML转TXT工具,HTML提取文本,批量HTML转TXT,HTML标签去除,Python处理HTML,网页内容转TXT,HTML转纯文本,HTML批量处理,BeautifulSoup提取文本,HTML格式清理
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值