乐意购项目前端开发 #5

最新推荐文章于 2024-07-19 12:58:53 发布
最新推荐文章于 2024-07-19 12:58:53 发布
阅读量440 收藏 10
点赞数 10
文章标签： javascript 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/guaiwu_/article/details/135707721
版权

一、二级页面基础分类组件

拆分组件结构

创建组件

以 Cheap.vue为例, Hot.vue 和 New.vue的方法一样

配置路由

在router/index.js中添加路由配置

import { createRouter, createWebHashHistory } from 'vue-router'
import Layout from '@/views/Layout/index.vue'
import Login from '@/views/Login/index.vue'
import Home from '@/views/Home/index.vue'
import SubCategory from '@/views/SubCategory/index.vue'

const routes = [
  {
    // Home 页面是首页下的二级页面,所以要配置在首页路径下
    path: '/',
    component: Layout,
    children: [
      {
        // Home 页默认在首页显示，所以 path 为空
        path: '',
        component: Home,
      },
      {
        path: '/category/cheap',
        component: () => import('@/views/Category/Cheap.vue')
      },
      {
        path: '/category/hot',
        component: () => import('@/views/Category/Hot.vue')
      },
      {
        path: '/category/new',
        component: () => import('@/views/Category/New.vue')
      }
    ]
  },
  {
    path: '/login',
    component: Login
  }
]
const router = createRouter({
  history: createWebHashHistory(),
  routes
})

export default router

封装接口

在cheap.js中封装新的接口

import http from '@/utils/http'

export function getCheapAPI (data) {
  return http({
    url: '/goods/cheap/category/list',
    method: 'POST',
    data,
  })
}

export function getHomeCheapAPI () {
  return http({
    url: '/goods/cheap/list',
    method: 'get',
  })
}

编写代码

<script setup>
import { getBannerAPI } from "@/api/home/banner";
import { onMounted, ref } from "vue";
import { getCheapAPI } from "@/api/home/cheap";
// import {Page} from "./component/page.vue"
//
const bannerList = ref([]);
// 发送请求
const getBanner = async () => {
  const res = await getBannerAPI();
  console.log(res);
  bannerList.value = res.data;
};

const cheapList = ref([]);

const goodTotal = ref([]);
// 获取基础列表数据
const reqData = ref({
  page: 1,
  pageSize: 12,
});

const getCheapList = async () => {
  const res = await getCheapAPI(reqData.value);
  console.log(res);
  cheapList.value = res.data.list;
  goodTotal.value = res.data.total;
  reqData.value.pageSize =res.data.pageSize
};
// 实现分页切换页面
const handleCurrentChange = (page) => {
  reqData.value.page = page;
  getCheapList();
}
// 实现选择页面展示商品数量
const handleSizeChange = (pageSize) => {
  reqData.value.pageSize = pageSize;
  getCheapList();
}


onMounted(() => {
  getBanner(), getCheapList();
});
console.log(bannerList);
</script>

<template>
  <div class="wrap">
    <!-- banner部分 -->
    <div class="banner">
      <div class="category-banner">
        <!-- 使用ElmentPlus的轮播图组件 -->
        <el-carousel height="450px">
          <!-- 遍历bannerList获取数据 -->
          <el-carousel-item v-for="item in bannerList" :key="item.id">
            <img
              class="banner-img"
              :src="require(`@/assets/img/${item.img1}.jpg`)"
              alt=""
            />
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>
    <!-- 商品展示部分 -->
    <div class="goods">
      <ul class="goods-list">
        <li class="goods-li" v-for="item in cheapList" :key="item.id">
          <RouterLink to="/">
            <img
              class="goods-img"
              :src="require(`@/assets/img/${item.picture1}.jpg`)"
              :alt="item.alt"
            />
            <!-- 名字 -->
            <p class="name">{{ item.goodsName }}</p>
            <!-- 原价 -->
            <p class="origin-price">&yen;{{ item.originalPrice }}</p>
            <!-- 现价 -->
            <p class="price">&yen;{{ item.price }}</p>
          </RouterLink>
        </li>
      </ul>
    </div>
    <!-- 分页部分 -->
    <div class="page">
      <!-- <el-pagination  class="pagination" background layout="prev, pager, next" :total="1000">
      </el-pagination> -->
      <el-pagination
      class="pagination"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="reqData.page"
      :page-sizes="[6, 12, 18, 24]"
      :page-size="reqData.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="goodTotal"></el-pagination>
    </div>
  </div>
</template>




<style scoped lang='scss'>
.wrap {
  width: 980px;
  margin: 0 auto;
  background-color: #fefce0;
  .category-banner {
    width: 980px;
    height: 450px;
    z-index: 98;

    .banner-img {
      width: 100%;
      height: 450px;
    }
  }
  .goods {

    margin-top: 3px;
    width: 980px;
    .goods-list {
      float: left;
      width: 980px;
      background-color: #fefef5;

      .goods-li {
        float: left;
        width: 150px;
        height: 250px;
        padding-left: 13px;
        .goods-img {
          height: 150px;
          width: 150px;
        }
        &:hover {
          transform: translate3d(0, -3px, 0);
          box-shadow: 0 3px 8px rgb(0 0 0 / 20%);
        }
        p {
          font-size: 16px;
          padding-top: 8px;
          text-align: center;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
          color: #000;
        }

        .price {
          color: $priceColor;
        }
        .origin-price {
          font-size: 13px;
          color: #c8c8c8;
          text-decoration: line-through;
        }
      }
    }
  }
  .page{
    // position: absolute;
    background-color: #ffffff;
    width: 980px;
    top: 1453px;
    .pagination{
      padding: 0 240px;
    }
  }
}
</style>

分页功能的实现

先引入ElementPlus的分页组件
<el-pagination
      class="pagination"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="reqData.page"
      :page-sizes="[6, 12, 18, 24]"
      :page-size="reqData.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="goodTotal">
</el-pagination>
size-changepageSize 改变时会触发每页条数
current-changecurrentPage 改变时会触发当前页

page-sizes    每页显示个数选择器的选项设置

page-size     每页显示条目个数

current-page    当前页面

total    总条目数

获取基础数据, 调用接口
// 获取基础列表数据
const reqData = ref({
  page: 1,
  pageSize: 12,
});
// 调用接口
const getCheapList = async () => {
  const res = await getCheapAPI(reqData.value);
  console.log(res);
  cheapList.value = res.data.list;
  goodTotal.value = res.data.total;
  reqData.value.pageSize =res.data.pageSize
};
 完善方法
// 实现分页切换页面
const handleCurrentChange = (page) => {
  reqData.value.page = page;
  getCheapList();
}
// 实现选择页面展示商品数量
const handleSizeChange = (pageSize) => {
  reqData.value.pageSize = pageSize;
  getCheapList();
}

二、二级页面商品分类组件

拆分组件结构

创建组件

配置路由

import { createRouter, createWebHashHistory } from 'vue-router'
import Layout from '@/views/Layout/index.vue'
import Login from '@/views/Login/index.vue'
import Home from '@/views/Home/index.vue'
import SubCategory from '@/views/SubCategory/index.vue'

const routes = [
  {
    // Home 页面是首页下的二级页面,所以要配置在首页路径下
    path: '/',
    component: Layout,
    children: [
      {
        // Home 页默认在首页显示，所以 path 为空
        path: '',
        component: Home,
      },
      {
        path: '/category/cheap',
        component: () => import('@/views/Category/Cheap.vue')
      },
      {
        path: '/category/hot',
        component: () => import('@/views/Category/Hot.vue')
      },
      {
        path: '/category/new',
        component: () => import('@/views/Category/New.vue')
      },
      {
        path: 'category/sub/:id',
        component: SubCategory
      }
    ]
  },
  {
    path: '/login',
    component: Login
  }
]
const router = createRouter({
  history: createWebHashHistory(),
  routes
})

export default router

修改之前 HomeCategory.vue 文件

<template>
  <div class="home-category">
    <ul class="menu">
      <li v-for="item in categoryStore.categoryList" :key="item.id">
        <i :class=item.icon></i>                              
        <router-link :to="`/category/sub/${item.id}`">{{ item.categoryName }}</router-link>
        <span class="more">
          <a href="/">></a>
        </span>
      </li>
    </ul>
  </div>
</template>

封装接口

创建文件 api/category/index.js

/**
 * @description: 获取二级分类列表数据
 */
import http from '@/utils/http'

export function getCategoryFilterAPI (id) {
  return http({
    url: '/home/category/sub/filter',
      method: 'get',
      params: {
          id
      }
  })
}

创建文件 api/goods/temporary.js

 

import http from '@/utils/http'

export function getSubCategoryAPI (data) {
  return http({
    url: '/goods/temporary',
    method: 'post',
    data
  })
}

编写代码

<script setup>
import { getCategoryFilterAPI } from "@/api/category/index";
import { ref, onMounted } from "vue";
import { useRoute } from "vue-router";
import { getSubCategoryAPI } from "@/api/goods/temporary";

const route = useRoute();

const categoryData = ref({});
const getCategoryData = async () => {
  const res = await getCategoryFilterAPI(route.params.id);
  categoryData.value = res.data;
};

// 获取基础列表数据
const goodList = ref([]);
const goodTotal = ref([]);

const reqData = ref({
  categoryId: route.params.id,
  page: 1,
  pageSize: 12,
  sortField: 1,
});
const getGoodList = async () => {
  const res = await getSubCategoryAPI(reqData.value);
  goodList.value = res.data.list;
  goodTotal.value = res.data.total;
  reqData.value.pageSize =res.data.pageSize
};
const handleCurrentChange = (page) => {
  reqData.value.page = page;
  getGoodList();
}
const handleSizeChange = (pageSize) => {
  reqData.value.pageSize = pageSize;
  getGoodList();
}
// tab切换回调
const tabChange = () => {
  console.log("tab切换了", reqData.value.sortField);
  reqData.value.page = 1;
  getGoodList();
};

onMounted(() => {
  getCategoryData(), getGoodList();
});
console.log(goodList);
</script>

<template>
  <div class="container">
    <!-- 面包屑 -->
    <div class="bread-container">
      <el-breadcrumb separator=">">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: `/category/sub/${categoryData.id}` }">{{
          categoryData.categoryName
        }}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="body">
      <el-tabs v-model="reqData.sortField" @tab-change="tabChange">
        <el-tab-pane label="精选热门" name="1"></el-tab-pane>
        <el-tab-pane label="低价商品" name="2" ></el-tab-pane>
        <el-tab-pane label="最新上架" name="3"></el-tab-pane>
      </el-tabs>
    </div>
    <!-- 商品列表-->
    <div class="goods">
      <ul class="goods-list">
        <li class="goods-li" v-for="item in goodList" :key="item.id">
          <RouterLink to="/">
            <img
              class="goods-img"
              :src="require(`@/assets/img/${item.picture1}.jpg`)"
              :alt="item.alt"
            />
            <p class="name">{{ item.goodsName }}</p>
            <p class="origin-price">&yen;{{ item.originalPrice }}</p>
            <p class="price">&yen;{{ item.price }}</p>
          </RouterLink>
        </li>
      </ul>
    </div>
    <div class="page">
      <!-- <el-pagination  class="pagination" background layout="prev, pager, next"
       :total="100" :page-size="reqData.pageSize" >
      </el-pagination> -->
      <el-pagination
      class="pagination"

      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="reqData.page"
      :page-sizes="[6, 12, 18, 24]"
      :page-size="reqData.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="goodTotal">
    </el-pagination>
    </div>
  </div>
</template>




<style lang="scss" scoped>
.bread-container {
  padding: 15px 0;
  color: #666;
}

.container {
  padding: 20px 10px;
  background-color: #fff;
  width: 980px;
  margin: auto;
  .body {
    display: flex;
    flex-wrap: wrap;
    padding: 0 10px;
  }
  .goods {
    display: flex;
    // position: absolute;
    width: 980px;
    background-color: #fefef5;
    .goods-list {
      float: left;
      width: 980px;
      .goods-li {
        float: left;
        width: 150px;
        height: 250px;
        padding-left: 13px;
        .goods-img {
          height: 150px;
          width: 150px;
        }
        &:hover {
          transform: translate3d(0, -3px, 0);
          box-shadow: 0 3px 8px rgb(0 0 0 / 20%);
        }
        p {
          font-size: 16px;
          padding-top: 8px;
          text-align: center;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
          color: #000;
        }

        .price {
          color: $priceColor;
        }
        .origin-price {
          font-size: 13px;
          color: #c8c8c8;
          text-decoration: line-through;
        }
      }
    }
  }

  .page{
    position: absolute;
    background-color: #fff;
    width: 980px;
    .pagination{
      padding: 0 240px;
    }
  }
}
</style>

面包屑导航功能的实现

引入ElementPlus的面包屑组件
<el-breadcrumb separator=">">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: `/category/sub/${categoryData.id}` }">{{
          categoryData.categoryName
        }}</el-breadcrumb-item>
</el-breadcrumb>
调用接口
const route = useRoute();

const categoryData = ref({});
const getCategoryData = async () => {
  const res = await getCategoryFilterAPI(route.params.id);
  categoryData.value = res.data;
};

基础分类部分

引入组件
<el-tabs v-model="reqData.sortField" @tab-change="tabChange">
        <el-tab-pane label="精选热门" name="1"></el-tab-pane>
        <el-tab-pane label="低价商品" name="2" ></el-tab-pane>
        <el-tab-pane label="最新上架" name="3"></el-tab-pane>
</el-tabs>

el-tab-pane的  name绑定的是reqData.sortField, sortField要在数据库有代表意思相同(名称不需要一样)的属性

获取基础数据, 调用接口
const goodList = ref([]);
const goodTotal = ref([]);

const reqData = ref({
  categoryId: route.params.id,
  page: 1,
  pageSize: 12,
  sortField: 1,
});
const getGoodList = async () => {
  const res = await getSubCategoryAPI(reqData.value);
  goodList.value = res.data.list;
  goodTotal.value = res.data.total;
  reqData.value.pageSize =res.data.pageSize
};
切换基础分类
// tab切换回调
const tabChange = () => {
  console.log("tab切换了", reqData.value.sortField);
  reqData.value.page = 1;
  getGoodList();
};

guaiwu_
关注
  • 10
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
一名普通22届本科毕业生｜前端程序员｜22年年终总结
webchang的博客
01-28 1万+
一名普通22届毕业生的22年回顾总结
乐意购项目前端开发 #7
guaiwu_的博客
02-04 485
购物车,订单页面的开发
乐意购项目前端开发 #4
guaiwu_的博客
01-17 469
基本实现Home页面的内容
乐意购项目前端开发 #6
guaiwu_的博客
02-04 525
商品详情页面,登录页面,用户数据持久化
乐意购项目前端开发 #2
guaiwu_的博客
01-14 405
Axios的安装和简单封装和路由设计
乐意购项目前端开发 #3
guaiwu_的博客
01-15 502
icon的基本使用、搭建首页组件结构
乐意购项目前端开发 #1
guaiwu_的博客
01-14 476
创建项目与导入ElementPlus和修改ElementPlus的默认格式
Yahoo前端开发规范
Frank的专栏
07-13 1268
1、尽量减少HTTP请求次数 终端用户响应的时间中，有80%用于下载各项内容。这部分时间包括下载页面中的图像、样式表、脚本、Flash等。通过减少页面中的元素可以减少HTTP请求的次数。这是提高网页速度的关键步骤。 减少页面组件的方法其实就是简化页面设计。那么有没有一种方法既能保持页面内容的丰富性又能达到加快响应时间的目的呢？这里有几条减少HTTP请求次数同时又可能保持页面内容丰富的技术。
YAHOO 35条前端优化建议
yihanzhi的博客
08-17 380
转载自：http://www.360doc.com/content/14/0325/14/15727046_363598248.shtml Yahoo!的 Exceptional Performance团队为改善 Web性能带来最佳实践。他们为此进行了一系列的实验、开发了各种工具、写了大量的文章和博客并在各种会议上参与探讨。最佳实践的核心就是旨在提高网站性能。原版猛戳：Best Practices for Speeding Up Your Web Site， Excetional Performance.
MLBScoreboard:ESPN Web开发人员代码项目
04-27
ESPN Web开发人员代码项目 欢迎来到我的网站！ 我很高兴与大家分享我的项目。 当然，我从来没有真正感到自己已经完成了一个项目，我总是觉得有一些需要改进和补充的新功能。 但是，我必须学习在一切仍在进行时何时...
乌海宁升电力开发有限公司50兆瓦光伏基地项目水土保持方案报
11-02
很抱歉，但根据您给出的信息，这似乎是一个关于乌海宁升电力开发有限公司50兆瓦光伏基地项目的水土保持方案报告，而并非一个IT相关的主题。提供的标签和压缩包内的文件名称“赚钱项目”也没有明确指向任何具体的IT...
dev-challenge-offer:开发挑战者前端
05-12
:rocket: 开发积分DevChallenge项目。 由和使用:red_heart:︎建造 :inbox_tray: 布局可从以下位置下载： :eyes: 演示网站该演示网站可能缺少某些功能，无法完全克隆并运行该项目，从而获得完整的体验。 :backhand_...
软件开发工具与环境.pptx
11-17
软件工具可以提高工作效率，软件人员乐意使用，功能齐全，开发人员劳动量减少，效率和质量均有提高，方便用户，工作可靠。软件工具可以提高软件的可移植性、标准化程度，方便相互借鉴、推广。软件工具的特点是易于...
frontend-coding-challenge:前端开发人员的编码挑战
03-26
:rocket: 机组人员编码挑战-前端（React） 您好，感谢您参加乘员组编码挑战赛。 此编码练习将帮助我们更好地了解您的编码过程。 如果您有任何疑问，我们很乐意为您提供帮助。 通过与开发人员联系。语境在Crewmeister...
博客前端项目学习day03——框架页
最新发布
qq_53237241的博客
07-19 195
【代码】博客前端项目学习day03——框架页。
自定义 Hooks 在 Vue3 中的应用和重要性
CodeQi技术小栈的博客
07-16 989
自定义Hooks是Vue3提供的一种将可复用逻辑提取到独立函数中的方式。这不仅可以减少代码的重复，还能让你的代码更加清晰易读，维护起来也更加方便。在这篇文章中，我将通过详细的步骤和实例，带你深入了解如何在Vue3中使用自定义Hooks，以及它们在实际项目中的应用和重要性。首先，我们来看一下如何创建一个简单的自定义Hook。在Vue3中，自定义Hook本质上就是一个返回特定功能的函数。让我们从一个简单的计数器例子开始。
vue快速上手——创建vue项目，vue基本使用方式，路由vue-Router，转态管理vuex
weixin_73582152的博客
07-15 783
Node.js 是一个开源、跨平台的 JavaScript 运行时环境，它允许开发者在服务器端运行 JavaScript 代码。Node.js 是基于 Chrome V8 引擎构建的，它的设计目标是提供一种高效、轻量级的方式来构建可扩展的网络应用程序。事件驱动：Node.js 使用非阻塞 I/O 模型，使其非常适合处理大量并发连接，这使得它在构建实时应用程序（如聊天应用）时非常高效。单线程。
HOW - SVG 图标组件封装（Lucide React）
weixin_58540586的博客
07-18 855
在中我们介绍过 “动态 Fetch CDN SVG 图标”，这种在开发者将需要用到 图标 依次上传到 CDN 再在项目通过请求引入使用的场景。但其实，更常见的做法还是统一维护一组 SVG 图标，然后将其封装成组件，直接在项目中通过 Import 的形式使用。
web前端开发 vue
09-04
Vue.js 是一种流行的前端开发框架，用于构建用户界面。它具有简单、灵活和高效的特点。Vue.js 使用组件化开发模式，允许开发者将页面拆分为多个可重用的组件，使得代码更加模块化、可维护性更高。 使用 Vue.js 进行前端开发，你可以使用其核心库来构建交互式的用户界面，也可以结合其他工具和库来实现更复杂的功能。Vue.js 提供了诸如数据绑定、组件化、路由、状态管理等等的功能。 在开始使用 Vue.js 进行前端开发前，你需要安装 Vue.js，并且了解其基本概念和语法。你可以通过 Vue CLI 来快速搭建 Vue 项目，并使用 Vue Router 和 Vuex 等官方插件来增强功能。 总体来说，Vue.js 是一个强大且易于学习的前端开发框架，它在构建现代化的 Web 应用程序方面非常受欢迎。希望这个回答能够帮助到你！如果你有关于 Vue.js 的更具体问题，我会很乐意帮助你解答。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值