美食杰项目 -- 首页（一）

已于 2022-11-18 15:55:02 修改
阅读量709 收藏 3
点赞数 3
分类专栏： 美食杰项目 文章标签： 美食 javascript vue.js
于 2022-11-17 11:09:45 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_62897746/article/details/127899378
版权

目录

前言：

本文给大家讲解，美食杰项目中首页实现的效果，和具体代码。

具体实现思路：

  1. 向后端请求数据，获取数据，渲染数据
  2. 引入 element-ui
  3. 刷新后加载新图片

步骤：

头部代码中包含了一部分登录功能，这个功能在本文没有实现，想要知道的，可以看我发布的实现登录注册功能的文章。

在 加载图片页面代码中，使用了节流 throttle-debounce，节流的具体使用可以看官方文档。

点击跳转至节流的官方文档：https://www.npmjs.com/package/throttle-debounce

点击跳转至 element-ui 官方文档：https://element.eleme.cn/#/zh-CN/component/installation

1. 展示美食杰项目首页效果

实现后效果展示

美食杰首页

2. 引入 element-ui

  • 下载 element-ui
npm i element-ui -S
  • 在 main.js 中引入 element-ui
import Vue from 'vue'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

3. 头部代码

<template>
  <div class="box">
    <div class="top">
      <div class="center">
        <a href="" class="left">
          <img src="@/assets/logos.png" alt="" />
        </a>
        <!-- 判断是否登录，不登录则显示 -->
        <div class="right" v-if="!islogin">
          <router-link :to="{ name: 'login' }">登录</router-link>
          <router-link :to="{ name: 'login' }">注册</router-link>
        </div>
        <!-- 判断是否登录，登录则显示 -->
        <div class="right rights" v-if="islogin">
          <router-link :to="{ name: 'MyHomepage' }">
            <img :src="userInfo.avatar" alt="" />
          </router-link>
          <router-link :to="{ name: 'MyHomepage' }">{{
            userInfo.name
          }}</router-link>
          <router-link to="PublishRecipes">发布菜谱</router-link>
          <button @click="quit">退出</button>
        </div>
      </div>
    </div>
    <div class="bottom">
      <el-menu
        :default-active="activeIndex"
        class="el-menu-demo center"
        mode="horizontal"
      >
        <el-menu-item index="1" class="el-menu-item">
          <router-link :to="{ name: 'page' }">首页</router-link>
        </el-menu-item>
        <el-menu-item index="2">
          <router-link :to="{ name: 'recipes' }">菜谱大全</router-link>
        </el-menu-item>
      </el-menu>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapState } from "vuex";
import { login_out } from "@/connector/api";
export default {
  data() {
    return {
      activeIndex: "1",
      activeIndex2: "1",
    };
  },
  computed: {
    // 获取 vuex 里的内容
    ...mapGetters(["islogin"]),
    ...mapState(["userInfo"]),
  },
  methods: {
    // 点击退出登录
    quit() {
      login_out().then((data) => {
        if (data.code === 0) {
          // 删除本地存储的 token
          localStorage.removeItem("token");
          // 跳转至首页
          window.location.href = "/";
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.box {
  width: 100%;
  .top {
    width: 100%;
    height: 129px;
    background-color: #c90000;
    .center {
      width: 990px;
      height: 100%;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .left {
        width: 213.75px;
      }
      .right {
        width: 213.75px;
        a {
          font-size: 12px;
          text-decoration: none;
          color: #fff;
          margin-left: 5px;
        }
      }
      .rights {
        display: flex;
        align-items: center;
        a {
          img {
            width: 36px;
            height: 36px;
          }
        }
        button {
          font-size: 12px;
          color: #fff;
          margin-left: 5px;
          border: none;
          background-color: #c90000;
        }
      }
    }
  }
  .bottom {
    width: 100%;
    height: 60px;
    background-color: #ffffff;
    .center {
      width: 990px;
      height: 100%;
      margin: 0 auto;
      line-height: 60px;
      .el-menu-item {
        a {
          display: inline-block;
          width: 100%;
          height: 100%;
          text-decoration: none;
        }
      }
    }
  }
}
</style>

4. 首页内容总代码

<template>
  <div class="box">
    <!-- :banner="banner" 是父传子事件，和它类似的也是 -->
    <!-- @Scroll="Scroll" 是子传父事件 -->
    <!-- ref="Loading" 可以获取子组件的内容 -->
    <!-- Banner：轮播图，Roll：内容，Loading：加载图片 -->
    <Banner :banner="banner"></Banner>
    <Roll :menus="menus"></Roll>
    <Loading @Scroll="Scroll" ref="Loading"></Loading>
    <div class="bottom">Copyright © 2019 - 2019</div>
  </div>
</template>

<script>
import Banner from "./banner.vue";
import Roll from "./roll.vue";
import Loading from "./loading.vue";
import { getMenus, getBanner } from "@/connector/api";
export default {
  components: {
    Banner,
    Roll,
    Loading,
  },
  data() {
    return {
      // 轮播图
      banner: [],
      // 已发布菜品
      menus: [],
      // 页数
      pages: 1,
      // 总数
      total: "",
      // 一页显示多少个
      page_size: "",
    };
  },
  // 进入时触发
  mounted() {
    // 获取轮播图的内容
    getBanner().then(({ data }) => {
      //   console.log(data);
      // 赋值给 banner
      this.banner = data.list;
    });
    // 根据页数获取已发布菜品的内容
    getMenus({ page: this.pages }).then(({ data }) => {
      // console.log(data);
      // 内容
      this.menus = data.list;
      // 总数
      this.total = data.total;
      // 一页几条
      this.page_size = data.page_size;
    });
  },
  // 点击时触发
  methods: {
    Scroll() {
      // 页数 + 1
      this.pages++;
      // 判断当前页数是否等于最后的页数
      if (this.pages == Math.ceil(this.total / this.page_size)) {
        // 等于则关闭 加载图片
        this.$refs.Loading.loading = false;
        // 下面的代码不在执行
        return;
      }
      // 显示 加载图片
      this.$refs.Loading.loading = true;
      // 根据页数获取已发布菜品的内容
      getMenus({ page: this.pages }).then(({ data }) => {
        // console.log(loading);
        // 追加到 menus 里面
        this.menus.push(...data.list);
        // 关闭 加载图片
        this.$refs.Loading.loading = false;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.box {
  width: 990px;
  margin: 20px auto 0;
  .bottom {
    text-align: center;
    margin-top: 20px;
  }
}
</style>

5. 轮播图代码

点击跳转至 element-ui 中轮播图使用方法：https://element.eleme.cn/#/zh-CN/component/carousel

<template>
  <div class="box">
    <!-- element-ui 里的轮播图 -->
    <el-carousel :interval="4000" type="card" height="300px">
      <el-carousel-item v-for="item in banner" :key="item._id">
        <router-link
          :to="{ name: 'DishesInformation', query: { menuId: item.menuId } }"
        >
          <img :src="item.product_pic_url" alt="" />
        </router-link>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
export default {
  // props 接收父组件传递过来的值
  props: {
    banner: {
      // type 元素类型
      type: Array,
      // default 默认值
      default: () => [],
    },
  },
};
</script>

<style>
.el-carousel__item a img {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
  width: 100%;
  height: 300px;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>

6. 已发布菜品内容代码

<template>
  <div class="box">
    <!-- :class="{ h2: id === 234 }" 判断 id 是否为 234 不是的话使用前面的 class 标签 -->
    <h2 :class="{ h2: id !== 234 }">内容精选</h2>
    <ul class="banner">
      <li
        v-for="item in menus"
        :key="item._id"
        ref="list"
        :class="{ 'banner-li': id === 170 }"
      >
        <!-- 和上文大致意思相同 -->
        <router-link
          :to="{ name: 'DishesInformation', query: { menuId: item.menuId } }"
        >
          <img :src="item.product_pic_url" alt="" />
        </router-link>
        <div>
          <router-link
            :to="{ name: 'DishesInformation', query: { menuId: item.menuId } }"
          >
            <b>{{ item.title }}</b>
          </router-link>
          <p>{{ item.comments_len }} 评论</p>
          <router-link
            :to="{ name: 'MyHomepage', query: { userId: item.userId } }"
          >
            <p>{{ item.name }}</p>
          </router-link>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  // props 接收父组件传递过来的值
  // type 元素类型
  // default 默认值
  props: {
    menus: {
      type: Array,
      default: () => [],
    },
    // 因为要在好几个地方使用所以传递过来一个值，用来判断在哪里使用
    id: {
      type: Number,
      default: 234,
    },
  },
};
</script>

<style lang="scss" scoped>
.box {
  width: 990px;
  padding: 0;
  h2 {
    text-align: center;
    font-weight: 400;
    padding: 20px 0;
  }
  .banner {
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    width: 100%;
    li {
      display: inline-block;
      width: 234px;
      // width: 23.4%;
      height: 338px;
      list-style: none;
      background-color: #fff;
      margin: 0 0 20px 13px;
      border: 1px solid #ebeef5;
      a {
        text-decoration: none;
        img {
          width: 99.8%;
          height: 63%;
        }
        b {
          height: 24px;
          line-height: 24px;
          font-size: 12px;
          color: #333;
        }
        p {
          width: 95%;
          margin: 0 auto;
          font-size: 12px;
          height: 23px;
          line-height: 23px;
          color: #ff3232 !important;
        }
      }
      div {
        padding: 20px;
      }

      p {
        width: 204px;
        margin: 0 auto;
        font-size: 12px;
        height: 26px;
        line-height: 26px;
        color: #999;
      }
    }
    .banner-li {
      width: 160px !important;
      height: 264px;
    }
  }
  .h2 {
    display: none;
    padding: none;
  }
}
</style>

7. 加载图片页面代码

点击跳转至 element-ui 中加载使用方法：https://element.eleme.cn/#/zh-CN/component/loading

<template>
  <div class="box">
    <!-- element-ui 中加载的图片 -->
    <i
      v-loading="loading"
      element-loading-spinner="el-icon-loading"
      ref="loadings"
    >
    </i>
  </div>
</template>

<script>
// 引入节流
import { throttle } from "throttle-debounce";
export default {
  data() {
    return {
      // 是否显示
      loading: false,
    };
  },
  // 进入当前页面时触发
  mounted() {
    // 使用节流
    this.handleScroll = throttle(300, this.handleScroll.bind(this));
    // 给当前页面全局绑定 滚动条 事件
    window.addEventListener("scroll", this.handleScroll);
  },
  // 离开当前页面时触发
  destroyed() {
    // 删除 滚动条 事件
    window.removeEventListener("scroll", this.handleScroll);
  },
  methods: {
    handleScroll() {
      // 为 true 则停止向下执行
      if (this.loading) return;
      // 判断 加载图片距离顶部的高 是否小于 可视窗口
      if (
        this.$refs.loadings.getBoundingClientRect().bottom <
        document.documentElement.clientHeight
      ) {
        // console.log("滚动到指定位置");
        // 小于则显示 加载图片
        this.loading = true;
        // 子传父事件
        this.$emit("Scroll");
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.box {
  text-align: center;
  height: 20px;
}
</style>

总结：

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

清风 与我
关注
  • 3
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
美食杰项目---首页
m0_62201566的博客
09-23 678
1.
美食杰项目--首页
wzstd的博客
09-27 217
美食杰效果图展示 需要实现的一些效果 头部 轮播图 内容：需要没5个加载一次 头部的效果代码\color{YellowGreen}{头部的效果代码}头部的效果代码 <template> <el-header style="height: auto;"> <div class="header"> <div class="header_c"> <el-row type="flex" justify="start" a
美食杰项目(首页)
m0_66482551的博客
03-10 441
轮播图 如果可以的话 尽量不要自己写 最好用组件 element-ui组件 非常便捷 设置api的组件 在别的组件用mountd或created 来请求数据 拿到数据在data设置一个空数组 列如:barrens:[ ] 空数组 把数据赋值给空数组 在标签里用v-for用指令渲染 之后就可以就可以看到轮播图的效果了 数据也是在mounted或created里请求api里的数据请求到home页,也是在data里设置空数组列如:menulist:[ ] 通过props 父传子 把数组的数据..
美食杰项目(2)
weixin_44602430的博客
10-12 157
今天更菜谱大全页面 还有二级菜单 这是template部分 <template> <div class="recipe"> <!-- v-model="activeName" --> <!-- 菜谱分类 start --> <el-tabs v-model="activeClassfy" type="border-card" @tab-click="handleClick">
美食杰项目 -- 菜谱大全（二）
weixin_62897746的博客
11-18 753
本文给大家讲解，美食杰项目中菜谱大全实现的效果，和具体代码。 具体实现思路： 1. 点击头部分类（一级路由），点击哪一个选中哪一个（二级路由）的第一个 2. 点击左侧属性，如果（二级路由），选中则刷新时（一级路由）默认打开 3. 根据前2两步的条件进行过滤，在右侧显示过滤后的内容 4. 添加分页器效果 5. 以上效果都可以使用 element-ui 实现
美食杰项目（二）首页
m0_60970928的博客
11-25 324
美食杰项目首页的具体样式和实现方法
美食杰项目-登录注册
yxy831524yxy的博客
09-24 174
内容精选
vue项目美食杰 -- 注册登录
Im_xiaopei的博客
09-23 370
美食杰项目是本人所做过项目之一，对技术提升有极大帮助，因此分享出来和广大网友一起来学习进步。话不多说，先上个首页图 因为此项目不算很小，加上时间和精力的问题，本人将整个项目分为多个板块来进行分享，毕竟贪多嚼不烂嘛，而且更容易帮助读者整理哦。 今日份分享的是登录和注册板块。 登录大家应该在熟悉不过了，账号密码输入，就完事了，但是，朋友们啊，咱们今天不是用户，是一个开发者呀，所以我们得拿出自己的技术出来，来实现底层逻辑哟。 所用技...
美食杰项目----登录页面，看了不会来找我！！！
m0_62201566的博客
09-25 476
一.项目介绍： 通过使用element ui组件库对页面进行布局，然后再通过路由守卫验证登录状态 验证登录：有些路由是需要登录的，判断状态 1.没有登录：跳转到登录页 2.登录：直接进入 3.有些路由不需要登录，那就直接进入； ps：是否需要登录--meta 二.效果展示： 三.代码展示： login.vue:登录页面 <template> <div class="login-section"> <!-- :rules=...
美食杰项目首页--部分功能代码以及简介
model__的博客
09-23 1685
介绍：美食杰首页 这个是轮播图效果：都是利用了element ui框架搭建的css样式，然后再通过vue指令和data存储数据和methods方法在操作data里面的数据来完成数据交互。 这个是内容精选页效果：都是利用了element ui框架搭建的css样式 过程： 引用了element ui框架搭建的轮播图框架，利用数据交互完成效果。先在state里面创建出空的数据类型，比如空数组。是为了在以下操作中能够在空数组或空字符串中添加数据 ...
精品美食杰网站源码
01-29
美食杰 绿色风格模版 科讯CMS，非常漂亮！
美食杰项目(4)-(持续更新)
weixin_44602430的博客
10-13 191
今天介绍美食杰项目发布菜谱一栏. 首先是template块: <template> <div class="create"> <h2>欢迎发布新菜谱，先介绍一下你的大作！</h2> <section class="create-introduce"> <h5>标题</h5> <el-input class="create-input" placeholder="请
美食杰项目 -- 发布菜谱（七）
weixin_62897746的博客
12-01 889
本文给大家讲解，美食杰项目中 实现发布菜谱页的效果，和具体代码。 具体实现思路： 1. 按照效果图实现静态页面布局 2. 可以使用element-ui框架 3. 实现上传图片功能 4. 默认为3个可以增加，删除，最少为1个 5. 点击提交，成功发布菜谱
美食杰项目（菜谱大全）效果介绍
Coding_Peasant_Y的博客
10-11 525
1.看一下要实现的效果 1.1. 点击实现家常菜谱中华菜系 各地小吃的tab切换 1.2. 点击各个菜系实现高亮变红选中 1.3 点击工艺 口味 难度口味下的按钮 右侧的菜品会进行筛选菜品会发生变化 1.4 菜品会进行分页可以点击进行上一页下一页的切换 1.5 菜品未显示时会有一个正在加载中的蒙板 1.6 当筛选菜品不足一页将不会进行分页 2.效果显现方式 使用vue脚手架搭建项目完成...
美食杰项目个人空间后半段
IMURLORD的博客
03-15 372
上一篇介绍了美食杰项目的个人空间的上半段，这篇我们来介绍一下个人空间的后半段页，感兴趣的一起来看看吧！！！ 个人空间还包括下面的作品,粉丝,关注,收藏 点击跳转到各个组件,如上图 点击粉丝跳转到别人的粉丝，粉丝页和关注页大致相似。 代码如上 然后点击作品返回到作品页, 样式如下 代码展示 以上就是这个单击切换的样式及代码展示, 有何不懂的小伙伴,尽可咨询作者 ...
vue项目实战--美食杰之首页
Im_xiaopei的博客
09-26 581
读者，大家好，此篇分享一个笔者写过的vue项目，名叫美食杰，是一个PC端项目，分享出来的目的是为了可以让大家共同学习进步，也期望各位读者能指出笔者的不足之处，感谢！！ 正片开始。。。 1.首页的展示和介绍 头部板块，因为此头部板块在整个项目中多地使用，所以我将其放在公共组件部分，名为header.vue 分页板块，就是黄线框框部分，在此板块中拥有两个切换的模板，今天只说首页板块 ...
基于SpringBoot+Vue+MySQL的校园周边美食探索及分享平台
最新发布
程序员大金的博客
09-06 935
基于SpringBoot+Vue+MySQL的校园周边美食探索及分享平台，附源码。
美食|基于SpringBoot+vue的美食网站(源码+数据库+文档)
伟庭的博客
09-06 1164
美食网站是在的数据存储主要通过MySQL。美食网站用户在使用应用时产生的数据通过Java语言传递给数据库。美食网站通过此方式促进美食信息流动和数据传输效率，提供一个内容丰富、功能多样、易于操作的平台。述了数据库的设计，美食网站系统的详细设计部分主要论述了几个主要模块的详细设计过程。【关键词】美食；Java；MySQL数据库；
"美食推广策划模板-最新商务文档
美食在中国文化中占据着重要的地位，不仅是一种满足生理需求的食物，更是一种表达情感、沟通友谊的方式。在中国，美食不仅仅是食物，更是一种生活态度和文化传承。为了推广和传播中国传统美食文化，各地经常举办美食...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

清风 与我

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值