美食杰项目 -- 菜品信息(五)

news2024/12/23 19:59:40

目录

  • 前言:
  • 具体实现思路:
  • 步骤:
    • 1. 展示美食杰菜谱大全效果
    • 2. 引入element-ui
    • 3. 代码
  • 总结:

前言:

本文给大家讲解,美食杰项目中 实现菜品信息页的效果,和具体代码。


具体实现思路:

  1. 跳转时传递菜品 id
  2. 根据菜品 id 进行(获取菜品详细信息,获取评论信息,发布评论,收藏/取消收藏)
  3. 点击收藏,判断是否收藏如果收藏则取消收藏,未收藏则收藏
  4. 给 input 框输入信息,点击提交发布评论信息
  5. 提交后的评论信息添加到开头
  6. 根据效果图进行渲染

步骤:

1. 展示美食杰菜谱大全效果

菜品信息页效果图

美食杰菜品信息页


2. 引入element-ui

点击跳转至 element-ui 中 input 输入框使用方法:https://element.eleme.cn/#/zh-CN/component/input
点击跳转至 element-ui 中 button 按钮使用方法:https://element.eleme.cn/#/zh-CN/component/button


3. 代码

菜品信息页中可以引入 element-ui 框架使用,本文引入了 input 输入框方法,button 则使用了原生 js。
当然静态页面其他地方你也可以使用 element-ui 框架或其他框架进行布局。

<template>
  <div class="box">
    <!-- 个人信息 -->
    <div class="header">
      <img :src="menuInfo.product_pic_url" class="head" />
      <div class="right">
        <div class="title">
          {{ menuInfo.title }}
          <a
            href="#"
            @click="collect"
            :class="{ action: menuInfo.isCollection }"
          >
            <!-- 判断是否收藏,样式不同 -->
            {{ menuInfo.isCollection ? "已收藏" : "未收藏" }}
          </a>
        </div>
        <div class="introduce">
          <span
            v-for="item in menuInfo.properties_show"
            :key="item.parent_type"
          >
            {{ item.parent_name }}
            <br />
            <b>{{ item.name }}</b>
          </span>
        </div>
        <div class="message">
          <img :src="menuInfo.userInfo.avatar" />
          <div class="bottom">
            <p class="name">{{ menuInfo.userInfo.name }}</p>
            <p>
              菜谱:{{ menuInfo.userInfo.work_menus_len }} / 关注:{{
                menuInfo.userInfo.following_len
              }}
              / 粉丝:{{ menuInfo.userInfo.follows_len }}
            </p>
            <p class="time">{{ menuInfo.createdAt }}</p>
          </div>
        </div>
      </div>
    </div>
    <!-- 用料 -->
    <div class="seasoning">
      <p class="product_story">{{ menuInfo.product_story }}</p>
      <p class="title">用料</p>
      <div class="flavour">
        <p>主料</p>
        <span
          v-for="item in menuInfo.raw_material.main_material"
          :key="item._id"
        >
          {{ item.name }} {{ item.specs }}
        </span>
      </div>
      <div class="flavour">
        <p>辅料</p>
        <span
          v-for="item in menuInfo.raw_material.accessories_material"
          :key="item._id"
        >
          {{ item.name }} {{ item.specs }}
        </span>
      </div>
    </div>
    <!-- 步骤 -->
    <div class="practice">
      <p class="title">{{ menuInfo.title }}的做法</p>
      <li v-for="(item, index) in menuInfo.steps" :key="index">
        <i>{{ index + 1 }}.</i>
        <img :src="item.img_url" alt="" />
        <span>{{ item.describe }}</span>
      </li>
      <p class="skill">烹饪技巧</p>
      <p class="skills">{{ menuInfo.skill }}</p>
    </div>
    <!-- 评论 -->
    <div class="comments">
      <p class="title">{{ menuInfo.title }}的讨论</p>
      <div class="message">
        <img
          :src="$store.state.userInfo.avatar"
          alt=""
          v-if="$store.getters.islogin"
        />
        <!-- 判断是否登录,登录显示发布评论,未登录不显示 -->
        <p v-if="!$store.getters.islogin">请先登录后,在进行评论</p>
        <br />
        <el-input
          type="textarea"
          :rows="5"
          :cols="500"
          placeholder="请输入内容"
          v-model="commentText"
          class="textarea"
          v-if="$store.getters.islogin"
        >
        </el-input>
        <br />
        <button class="btn" v-if="$store.getters.islogin" @click="release">
          提交
        </button>
      </div>
      <p class="xian"></p>
      <!-- 已发布评论 -->
      <ul class="information">
        <li v-for="item in comments" :key="item.commentId">
          <span class="name">{{ item.userInfo.name }}</span>
          <img :src="item.userInfo.avatar" alt="" />
          <span class="mes">
            <p class="text">{{ item.commentText }}</p>
            <p class="time">{{ item.updateAt }}</p>
          </span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
// 收藏,菜谱信息,获取评论信息,提交评论信息
import {
  toggleCollection,
  menuInfo,
  getComments,
  postComment,
} from "@/connector/api";
export default {
  data() {
    return {
      // 菜谱信息
      menuInfo: [],
      // 评论信息
      comments: [],
      // 发布的内容
      commentText: "",
    };
  },
  mounted() {
    // 获取进入菜品的 id
    const { menuId } = this.$route.query;
    // 根据菜品 id 获取菜品信息
    menuInfo({ menuId: menuId }).then(({ data }) => {
      // console.log(data);
      this.menuInfo = data.info;
    });
    // 根据菜品 id 获取评论信息
    getComments({ menuId: menuId }).then(({ data }) => {
      // console.log(data.comments);
      this.comments = data.comments;
    });
  },
  methods: {
    // 收藏
    async collect() {
      // 获取进入菜品的 id
      const { menuId } = this.$route.query;
      // 已收藏则取消收藏,未收藏则收藏
      const { data } = await toggleCollection({ menuId: menuId });
      // 给菜品信息进行更新
      this.menuInfo.isCollection = data.isCollection;
    },
    // 发布
    async release() {
      // 获取进入菜品的 id
      const { menuId } = this.$route.query;
      // 根据菜品 id 发布评论
      const data = await postComment({
        menuId: menuId,
        // 发布的内容
        commentText: this.commentText,
      });
      // 添加到开头
      this.comments.unshift(data.data.comments);
      // 发布成功后发布信息框为空
      this.commentText = "";
    },
  },
};
</script>

<style lang="scss" scoped>
.box {
  width: 990px;
  margin: 20px auto 0;
  .header {
    background-color: #fff;
    display: flex;
    .head {
      width: 25%;
      height: 350px;
    }
    .right {
      width: 75%;
      .title {
        display: flex;
        justify-content: space-between;
        padding: 20px 30px;
        border-bottom: 1px solid gainsboro;
        font-size: 25px;
        a {
          font-size: 16px;
          padding: 10px 15px;
          background-color: red;
          border-radius: 10px;
          text-decoration: none;
          color: #fff;
        }
        .action {
          background-color: gainsboro;
        }
      }
      .introduce {
        width: 65%;
        display: flex;
        flex-wrap: wrap;
        span {
          width: 50%;
          padding: 15px 10px;
          display: inline-block;
          border-bottom: 1px solid gainsboro;
          border-right: 1px solid gainsboro;
          font-size: 15px;
          b {
            color: red;
            font-weight: 400;
            font-size: 25px;
          }
        }
      }
      .message {
        display: flex;
        img {
          width: 50px;
          height: 50px;
          margin: 25px 0 0 25px;
          border-radius: 50%;
        }
        .bottom {
          margin: 25px 0 0 20px;
          font-size: 12px;
          color: gainsboro;
          p {
            margin: 0;
            padding: 1px 0;
          }
          .name {
            color: red;
          }
        }
      }
    }
  }
  .seasoning {
    background-color: #fff;
    .product_story {
      padding: 10px 20px;
    }
    .title {
      font-size: 20px;
      padding: 0 20px 10px;
      border-bottom: 1px solid gainsboro;
    }
    .flavour {
      p {
        width: 40px;
        text-align: center;
        padding: 2px 0;
        margin-left: 20px;
        font-size: 12px;
        background-color: rgb(241, 241, 241);
        border: 1px solid gray;
      }
      span {
        display: inline-block;
        padding: 5px;
        font-size: 14px;
        margin: 0 0 20px 5px;
        border: 1px solid gray;
      }
    }
  }
  .practice {
    background-color: #fff;
    .title {
      font-size: 20px;
      padding: 20px;
      border-bottom: 1px solid gainsboro;
    }
    li {
      list-style: none;
      padding: 10px 20px;
      i {
        color: red;
        font-size: 40px;
      }
      img {
        padding: 0 10px;
      }
    }
    .skill {
      padding: 10px 20px 20px;
      border-bottom: 1px solid gainsboro;
      font-size: 20px;
    }
    .skills {
      padding: 10px 0 20px 50px;
    }
  }
  .comments {
    background-color: #fff;
    padding: 0 20px;
    .title {
      padding: 20px 0;
      font-size: 20px;
      border-bottom: 1px solid gainsboro;
    }
    .message {
      width: 70%;
      img {
        width: 50px;
        height: 50px;
      }
      p {
        text-align: center;
        margin: 0;
      }
      .btn {
        padding: 10px 20px;
        border: none;
        background-color: red;
        color: #fff;
        margin-left: 89.9%;
      }
    }
    .xian {
      height: 1px;
      background-color: gainsboro;
    }
    .information {
      padding: 0;
      li {
        margin: 10px 0;
        display: flex;
        list-style: none;
        align-items: center;
        color: #333;
        img {
          width: 70px;
          height: 70px;
          margin: 0 20px;
        }
        .mes {
          .text {
            font-size: 18px;
          }
          .time {
            color: gainsboro;
          }
        }
      }
    }
  }
}
</style>

总结:

总结:
以上就是 美食杰项目 中 菜品信息的具体实现方法,不懂得也可以在评论区里问我,以后会持续发布一些新的功能,敬请关注。
我的其他文章:https://blog.csdn.net/weixin_62897746?type=blog

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/32290.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

[附源码]java毕业设计疫情防控期间人员档案追寻系统设计与实现论文

项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; SSM mybatis Maven Vue 等等组成&#xff0c;B/S模式 M…

bash shell 初体验-尚文网络xUP楠哥

~~全文共1139字&#xff0c;阅读需约5分钟。 进Q群11372462&#xff0c;领取专属报名福利&#xff0c;包含云计算学习路线图代表性实战训练大厂云计算面试题资料! # bash shell 简介 我们在操作Linux系统时&#xff0c;绝大部分情况是通过命令行的方式输入指令&#xff0c;Li…

小型企业建立人力资源团队的 5 个步骤

作为小企业主&#xff0c;设置人力资源运营可能不是您的首要任务。但是&#xff0c;随着您扩大运营规模和员工人数&#xff0c;您可能会遇到合规性和员工敬业度问题&#xff0c;从而阻碍您的业务增长。组建一个团队来照顾您的人力资源运营和员工可以让您专注于改进您的产品和满…

【JVM】字节码技术:手撕 多态执行原理

一、源文件 package org.example.classLoading;import java.io.IOException; /*** 演示多态原理&#xff0c;注意加上下面的 JVM 参数&#xff0c;禁用指针压缩* -XX:-UseCompressedOops -XX:-UseCompressedClassPointers*/ public class PolymorphicTest {public static void…

【序列召回推荐】(task2)序列召回GRU4Rec和faiss使用

学习总结&#xff1a; 一般的RNN模型我们的输入和输出是什么&#xff0c;我们对RNN输入一个序列 X[x1,x2,...,xn]X [x^1,x^2,...,x^n]X[x1,x2,...,xn] &#xff0c;注意我们序列中的每一个节点都是一个向量&#xff0c;那么我们的RNN会给我们的输出也是一个序列 Y[y1,y2,...,…

[附源码]SSM计算机毕业设计江苏策腾智能科技公司人事管理系统JAVA

项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; SSM mybatis Maven Vue 等等组成&#xff0c;B/S模式 M…

.net----特性

特性特性的概念和使用特性&#xff08;Attribute&#xff09;特性形式特性类参数预定义通用特性类ConditionalAttribute类ObsoleteAttribute类AttributeUsageAttribute类全局特性自定义特性类使用反射访问特性特性的概念和使用 特性&#xff08;Attribute&#xff09; 特性类&…

http请求报头header

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 目录 前言 一.认识请求报头&#xff08;header&#xff09; 1.Host 2.content-length 3.content-type 常见的三种格式 小结 二.User-Agent(简称UA) 三.Referer 四.C…

进程创建进程终止进程等待

目录前言一、进程创建1.fork()函数&#xff08;1&#xff09;fork()函数的基本认识进程调用fork()函数之后&#xff0c;控制权转移到内核中的fork()代码之后&#xff0c;内核做了啥&#xff1f;&#xff08;2&#xff09;实验&#xff1a;使用fork()函数创建进程&#xff08;3&…

跨境电商卖家必知的【圣诞节营销】终极指南(一)

关键词&#xff1a;圣诞节营销、跨境电商卖家 不知不觉又到了年底&#xff0c;而对于跨境电商来说也是非常重要的一段促销时期&#xff0c;也许您已经制定了相关的圣诞节营销大促&#xff0c;但今天我们还是想告诉您一些2022年非常棒的销的创意想法&#xff0c;希望能帮助您提升…

Spring Cloud Alibaba(四)

openFeign配置日志 一、openFeign的日志级别&#xff1a; NONE&#xff1a;不记录日志 (默认). BASIC&#xff1a;只记录请求方法、url、响应状态码和执行时间。 HEADERS&#xff1a;在basic的基础上&#xff0c;增加请求和响应头 FULL&#xff1a;记录请求和响应的头、body…

PyTorch搭建RNN联合嵌入模型(LSTM GRU)实现视觉问答(VQA)实战(超详细 附数据集和源码)

需要源码和数据集请点赞关注收藏后评论区留言私信~~~ 一、视觉问题简介 视觉问答&#xff08;VQA&#xff09;是一种同时设计计算机视觉和自然语言处理的学习任务。简单来说&#xff0c;VQA就是对给定的图片进行问答&#xff0c;一个VQA系统以一张图片和一个关于这张图片形式自…

用HTML+CSS+JS写的切水果小游戏它来了

前言 切水果游戏曾经是一款风靡手机的休闲游戏&#xff0c;今天要分享的就是一款网页版的切水果游戏&#xff0c; 由HTMLCSSJS实现&#xff0c;虽然功能和原版的相差太大&#xff0c;但基本的功能具备&#xff0c;效果逼真。感兴趣的小伙伴可收藏学习&#xff08;完整源码在文…

Heterogeneous Parallel Programming 异构并行编程 - UIUC伊利诺伊大学(持续更新)

Lecture 11.2 Introduction to Heterogeneous异构1.3 Portability and Scalability1.4 Introduction to CUDA 数据并行化 and 执行模型1.5 Introduction to CUDA 内存模型 and 基本函数API1.6 Introduction to CUDA Kernel-based SPMD1.7 更高维的Grid的Kernel-based SPMD例子1…

Linux的基本协议与他的堂兄堂弟

14天学习训练营导师课程&#xff1a; 互联网老辛《 符合学习规律的超详细linux实战快速入门》 努力是为了不平庸~ 学习有些时候是枯燥的&#xff0c;但收获的快乐是加倍的&#xff0c;欢迎记录下你的那些努力时刻&#xff08;学习知识点/题解/项目实操/遇到的bug/等等&#xf…

教程一 在Go使用JavaScript、HTML和CSS构建Windows、Linux、MacOSX跨平台的桌面应用

Energy是Go语言使用JavaScript、HTML和CSS构建跨平台的桌面应用程序可用于构建跨平台的桌面应用内嵌 Chromium CEF 二进制 环境安装 Energy 命令行工具 使用命令行工具自动安装Energy框架的所有依赖(CEF)&#xff0c;支持Window、Linux、MacOSX 安装过程从网络下载CEF和Energy…

二、vue基础入门

一、vue简介 1.1、什么是vue 官方给出的概念&#xff1a;Vue (读音 /vjuː/&#xff0c;类似于 view) 是一套用于构建用户界面的前端框架。 1.2、vue的特性 vue框架的特性&#xff0c;主要体现在如下两方面&#xff1a; 数据驱动视图双向数据绑定 1.2.1、数据驱动视图 在…

高灵敏度艾美捷小鼠肿瘤坏死因子α-ELISpot试剂盒

肿瘤坏死因子-a&#xff08;TNF-a&#xff09;由许多不同的细胞类型产生&#xff0c;例如单核细胞&#xff0c;巨噬细胞&#xff0c;T细胞和B细胞。在TNF-a的许多作用中&#xff0c;有针对细菌感染&#xff0c;细胞生长调节&#xff0c;免疫系统调节和参与败血症性休克的保护。…

现代气象仪器 | 太阳辐射测量

南京信息工程大学 实验&#xff08;实习&#xff09;报告 实验&#xff08;实习&#xff09;名称 现代气象仪器 实验&#xff08;实习&#xff09;日期 10.28 得分 指导老师 学院 电信院 专业 电子信息工程 年级 2020 班次 4 姓名 学号 20208327 实验…

万字博客带你全面剖析Spring的依赖注入

1.写在前面 前面的博客我们已经写了Spring的依赖查找&#xff0c;这篇博客我们来了解写Spring的依赖注入。 2.依赖注入的模式和类型 手动模式 - 配置或者编程的方式&#xff0c; 提前安排注入规则 XML 资源配置元信息Java 注解配置元信息API 配置元信息 自动模式 - 实现方…