乐意购项目前端开发 #4

一、Home页面组件结构

结构拆分

 创建组件

在 views/Home 目录下创建component 目录, 然后在该目录下创建5个组件: 左侧分类(HomeCategory.vue)、Banner(HomeBanner.vue)、精选商品(HomeHot.vue)、低价商品(Homecheap.vue)、最新上架(HomeNew.vue)

引用组件

修改 views/Home/index.vue 的代码

<template><div class="container"><HomeCategory></HomeCategory><HomeBanner></HomeBanner></div><HomeHot></HomeHot><HomeCheap></HomeCheap><HomeNew></HomeNew>
</template><script>
import HomeBanner from './component/HomeBanner.vue'
import HomeCategory from './component/HomeCategory.vue'
import HomeHot from './component/HomeHot.vue'
import HomeNew from './component/HomeNew.vue'
import HomeCheap from './component/HomeCheap'
export default {components:{HomeBanner,HomeCategory,HomeHot,HomeNew,HomeCheap}}
</script><style></style>

二、安装Pinia

添加依赖

pinia依赖和持久化插件

npm install pinia
npm install pinia-plugin-persist

创建文件

在 stores 目录下创建 category.js 文件

import { ref } from 'vue'
import { defineStore } from 'pinia'

引入

修改 main.js 文件

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import { createPinia } from 'pinia' 
import piniaPersist from 'pinia-plugin-persist'
import ElementPlus from 'element-plus'
import "@/assets/iconfont/iconfont.js"
import "@/assets/iconfont/iconfont.css"// import './styles/element/index.scss'const pinia = createPinia()
pinia.use(piniaPersist)
const app = createApp(App)app.use(store).use(router).use(pinia).use(ElementPlus).mount('#app')

三、分类功能实现

封装接口

在 api 目录下创建 home 目录然后创建 category.js 文件

import http from '@/utils/http'export function getCategoryAPI () {return http({url: '/home/category/list',method: 'get',})
}

前提: 后端要返回相应的数据

修改 /store/category.js

import { ref } from 'vue'
import { defineStore } from 'pinia'
import { getCategoryAPI } from '@/api/home/category'export const useCategoryStore = defineStore('category', () => {// 导航列表数据管理//state 导航列表数据const categoryList = ref([])// action 获取导航数据的方法const getCategory = async () => {const res = await getCategoryAPI();console.log(res);categoryList.value = res.data;}return {categoryList, getCategory}
})

代码示范

HomeCategory.vue

<script setup>
import { useCategoryStore } from '@/store/category'
const categoryStore = useCategoryStore()
console.log(categoryStore);
</script><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="/">{{ item.categoryName }}</router-link><span class="more"><a href="/">></a></span><!-- 弹层layer位置 --><!-- <div class="layer"><h4>分类推荐 <small>根据您的购买或浏览记录推荐</small></h4><ul><li v-for="i in 5" :key="i"><RouterLink to="/"><img alt="" /><div class="info"><p class="name ellipsis-2">男士外套</p><p class="desc ellipsis">男士外套,冬季必选</p><p class="price"><i>¥</i>200.00</p></div></RouterLink></li></ul></div> --></li></ul></div>
</template><style scoped lang='scss'>
.home-category {width: 250px;height: 500px;background: #f2f2f2;position: relative;z-index: 99;.menu {li {padding-left: 40px;height: 55px;line-height: 55px;text-align: left;padding-right: 15px;border-bottom: solid .1px #000;.iconfont{font-size: 22px;line-height: 55px;margin-right: 10px;top: 5px;color: rgb(0, 110, 255);}&:hover {background: $lygColor;}a {position: absolute;margin-right: 4px;color: #000;&:first-child {font-size: 16px;}}.more{float: right;font-size: 18px;}.layer {width: 990px;height: 500px;background: rgba(255, 255, 255, 0.8);position: absolute;left: 250px;top: 0;display: none;padding: 0 15px;h4 {font-size: 20px;font-weight: normal;line-height: 80px;small {font-size: 16px;color: #666;}}ul {display: flex;flex-wrap: wrap;li {width: 310px;height: 120px;margin-right: 15px;margin-bottom: 15px;border: 1px solid #eee;border-radius: 4px;background: #fff;&:nth-child(3n) {margin-right: 0;}a {display: flex;width: 100%;height: 100%;align-items: center;padding: 10px;&:hover {background: #e3f9f4;}img {width: 95px;height: 95px;}.info {padding-left: 10px;line-height: 24px;overflow: hidden;.name {font-size: 16px;color: #666;}.desc {color: #999;}.price {font-size: 22px;color: $priceColor;i {font-size: 16px;}}}}}}}// 关键样式  hover状态下的layer盒子变成block&:hover {.layer {display: block;}}}}
}
</style>

四、banner功能实现

接口封装

 在 api 目录下创建 home 目录然后创建 banner.js 文件

import http from '@/utils/http'export function getBannerAPI () {return http({url: '/home/banner/list',method: 'get',})
}

代码示范

HomeBanner.vue

<script setup>
import { getBannerAPI } from '@/api/home/banner'
import { onMounted, ref } from 'vue'const bannerList = ref([])const getBanner = async () => {const res = await getBannerAPI()console.log(res)bannerList.value = res.data
}onMounted(() => getBanner());
console.log(bannerList)
</script><template><div class="home-banner"><el-carousel height="500px"><el-carousel-item v-for="item in bannerList" :key="item.id"><img :src="require(`@/assets/img/${item.img1}.jpg`)" alt=""></el-carousel-item></el-carousel></div>
</template><style scoped lang='scss'>
.home-banner {width: 1127px;height: 500px;position: absolute;left: 250px;top: 185px;z-index: 98;img {width: 100%;height: 500px;}
}
</style>

五、创建公共组件

创建文件

在 views/Home/components 路径下创建 HomePanel.vue 文件

<script setup>
//定义 Props,主标题和副标题
defineProps({title: {type: String},subTitle: {type: String}
})
</script><template><div class="home-panel"><div class="container"><div class="head"><!-- 主标题和副标题 --><h3>{{title}}<small>{{ subTitle }}</small></h3></div><!-- 主体内容区域 插槽--><slot/>
</div></div>
</template><style scoped lang='scss'>
.home-panel {background-color: #fff;.head {padding: 40px 0;display: flex;align-items: flex-end;h3 {flex: 1;font-size: 32px;font-weight: normal;margin-left: 6px;height: 35px;line-height: 35px;small {font-size: 16px;color: #999;margin-left: 20px;}}}
}
</style>

六、精选商品实现

 接口封装

 在 api 目录下创建 home 目录然后创建 hot.js 文件

代码示范

HomeHot.vue

<script setup>
import HomePanel from './HomePanel.vue';
import { ref, onMounted } from 'vue'
import { getHotAPI } from '@/api/home/hot'const hotList = ref([])
const getHotList = async() => {const res = await getHotAPI()console.log(res)hotList.value = res.data
}onMounted(() => {getHotList()
})
</script><template><HomePanel title="精选商品" sub-title="人气精选 不容错过"><!-- 下面是插槽主体内容模版 --><ul class="goods-list"><li v-for="item in hotList" :key="item.id"><RouterLink to="/"><img :src="require(`@/assets/img/${item.picture1}.jpg`)" :alt="item.alt" /><p class="name">{{ item.goodsName }}</p><p class="price">&yen;{{ item.price }}</p></RouterLink></li></ul></HomePanel>
</template><style scoped lang='scss'>
.goods-list {display: flex;justify-content: space-between;height: 406px;width: 100%;li {width: 306px;height: 406px;background: #f0f9f4;transition: all .5s;&:hover {transform: translate3d(0, -3px, 0);box-shadow: 0 3px 8px rgb(0 0 0 / 20%);}img {width: 306px;height: 306px;}p {font-size: 22px;padding-top: 12px;text-align: center;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;color: #000;}.price {color: $priceColor;}}
}
</style>

七、低价好物

 接口封装

 在 api 目录下创建 home 目录然后创建 cheap.js 文件

代码示范

HomeCheap.vue

<script setup>
import HomePanel from './HomePanel.vue';
import { ref, onMounted } from 'vue'
import { getCheapAPI } from '@/api/home/cheap'const cheapList = ref([])
const getCheapList = async() => {const res = await getCheapAPI()console.log(res)cheapList.value = res.data
}onMounted(() => {getCheapList()
})
</script><template><HomePanel title="低价好物" sub-title="价低质不低 不容错过"><!-- 下面是插槽主体内容模版 --><ul class="goods-list"><li v-for="item in cheapList" :key="item.id"><RouterLink to="/"><img :src="require(`@/assets/img/${item.picture1}.jpg`)" :alt="item.alt" /><p class="name">{{ item.goodsName }}</p><p class="price">&yen;{{ item.price }}</p></RouterLink></li></ul></HomePanel>
</template><style scoped lang='scss'>
.goods-list {display: flex;justify-content: space-between;height: 406px;width: 100%;li {width: 306px;height: 406px;background: #f0f9f4;transition: all .5s;&:hover {transform: translate3d(0, -3px, 0);box-shadow: 0 3px 8px rgb(0 0 0 / 20%);}img {width: 306px;height: 306px;}p {font-size: 22px;padding-top: 12px;text-align: center;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;color: #000;}.price {color: $priceColor;}}
}
</style>

八、最新上架

 接口封装

 在 api 目录下创建 home 目录然后创建 new.js 文件

代码示范

HomeNew.vue

<script setup>
import HomePanel from './HomePanel.vue';
import { ref, onMounted } from 'vue'
import { getNewAPI } from '@/api/home/new'const newList = ref([])
const getNewList = async() => {const res = await getNewAPI()console.log(res)newList.value = res.data
}onMounted(() => {getNewList()
})
</script><template><HomePanel title="最新上架" sub-title="新鲜出炉 品质保障"><!-- 下面是插槽主体内容模版 --><ul class="goods-list"><li v-for="item in newList" :key="item.id"><RouterLink to="/"><img :src="require(`@/assets/img/${item.picture1}.jpg`)" :alt="item.alt" /><p class="name">{{ item.goodsName }}</p><p class="price">&yen;{{ item.price }}</p></RouterLink></li></ul></HomePanel>
</template><style scoped lang='scss'>
.goods-list {display: flex;justify-content: space-between;height: 406px;width: 100%;li {width: 306px;height: 406px;background: #f0f9f4;transition: all .5s;&:hover {transform: translate3d(0, -3px, 0);box-shadow: 0 3px 8px rgb(0 0 0 / 20%);}img {width: 306px;height: 306px;}p {font-size: 22px;padding-top: 12px;text-align: center;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;color: #000;}.price {color: $priceColor;}}
}
</style>

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

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

相关文章

2. 示例:Spring Boot 入门

1.1 概述 Spring Boot是由Pivotal团队提供的全新框架&#xff0c;其设计目的是用来简化新Spring应用的初始搭建以及开发过程。习惯优于配置 1.2 为什么使用Spring Boot J2EE笨重的开发、繁多的配置、低下的开发效率、复杂的部署流程、第三方技术集成难度大。 1.3 Spring Bo…

设计模式——组合模式

生活中存在很多 “部分-整体” 的关系&#xff0c;例如&#xff1a;大学中的学校与学院、学院与专业的关系。高楼与楼层和房间之间的关系等等。在软件开发中也有类似的情况。这些简单对象与复合对象之间的关系&#xff0c;如果用组合模式&#xff08;把学校、院、系都看作是组织…

链表练习 Leetcode82.删除排序链表中的重复元素 II

题目传送门&#xff1a;Leetcode82 给定一个已排序的链表的头 head &#xff0c; 删除原始链表中所有重复数字的节点&#xff0c;只留下不同的数字 。返回 已排序的链表 。 示例 1&#xff1a; 输入&#xff1a;head [1,2,3,3,4,4,5] 输出&#xff1a;[1,2,5]示例 2&#xff1…

【Linux】Linux 系统编程——cd 命令

文章目录 1.命令概述2.命令格式3.常用选项4.相关描述5.参考示例 1.命令概述 “cd 命令&#xff0c;即 ‘change directory’ 的缩写&#xff0c;主要用于 Unix、Linux 和 macOS 等操作系统中&#xff0c;用于改变当前工作目录。该命令支持绝对路径和相对路径两种形式。若未指定…

SpringBoot多环境配置与添加logback日志

1、多环境配置 一个项目会有多个运行环境 所以SpringBoot提供了可以适应多个环境的配置文件 每个文件对应一个端口号 application-dev.yml 开发环境 端口8090 application-test.yml 测试环境 端口8091 application-prod.yml 生产环境 端口8092 在application中选择使用哪个…

线性回归实例

1、线性回归&#xff08;linear Regression&#xff09;和逻辑回归&#xff08;logistic Regression&#xff09;的区别 线性回归主要是用来拟合数据&#xff0c;逻辑回归主要是用来区分数据&#xff0c;找到决策边界。 线性回归的代价函数常用平方误差函数&#xff0c;逻辑回…

AI在保护环境、应对气候变化中的作用

对于AI生命周期数据领域的全球领导者而言&#xff0c;暂时搁置我们惯常的AI见解和AI生命周期数据内容产出&#xff0c;来认识诸如世界地球日这样的自然环境类活动日&#xff0c;似乎是个奇怪的事情。我们想要知道&#xff0c;数据是否真的会影响我们的地球环境&#xff1f; 简而…

5.5G来了!全球首次采用,就在福建

近日&#xff0c;在以滨海风景优美而闻名的福建厦门马拉松赛道沿线区域&#xff0c;福建移动携手华为采用5G-A通感一体技术率先完成了低空多站连续组网的通感能力验证&#xff0c;基于4.9GHz频段实现了对城市低空120米下多无人驾驶飞行器的探测与及时预警。这一成果为城市低空资…

【windows】右键添加git bash here菜单

在vs 里安装了git for windows 后&#xff0c;之前git-bash 右键菜单消失了。难道是git for windows 覆盖了原来自己安装的git &#xff1f;大神给出解决方案 手动添加Git Bash Here到右键菜单&#xff08;超详细&#xff09; 安装路径&#xff1a;我老的 &#xff1f; vs的gi…

Kafka系列(四)

本文接kafka三&#xff0c;代码实践kafkaStream的应用&#xff0c;用来完成流式计算。 kafkastream 关于流式计算也就是实时处理&#xff0c;无时间概念边界的处理一些数据。想要更有性价比地和java程序进行结合&#xff0c;因此了解了kafka。但是本人阅读了kafka地官网&#…

论文笔记:信息融合的门控多模态单元(GMU)

整理了GMU&#xff08;ICLR2017 GATED MULTIMODAL UNITS FOR INFORMATION FUSION&#xff09;论文的阅读笔记 背景模型实验 论文地址&#xff1a; GMU 背景 多模态指的是同一个现实世界的概念可以用不同的视图或数据类型来描述。比如维基百科有时会用音频的混合来描述一个名人…

vue+echarts 几个案例

普通柱状图 <template><!-- 容器默认宽高是0 如果不设置 页面不显示--><div ref"mychart" id"mychart"></div> </template><script> import * as echarts from "echarts" import axios from axiosexport …

(Matlab)基于CNN-Bi_LSTM的多维回归预测(卷积神经网络-双向长短期记忆网络)

目录 一、程序及算法内容介绍&#xff1a; 基本内容&#xff1a; 亮点与优势&#xff1a; 二、实际运行效果&#xff1a; 三、部分代码展示&#xff1a; 四、完整程序数据分享&#xff1a; 一、程序及算法内容介绍&#xff1a; 基本内容&#xff1a; 本代码基于Matlab平…

数字电源简介

数字电源简介 定义主要应用场景数字电源的基本组成常见算法常见电源拓扑PFCLLC 数字电源与模拟电源对比参考链接 定义 常见定义有以下四种&#xff1a; 通过数字接口控制的开关电源&#xff0c;强调的是数字电源的“通信”功能。可通过I2C或类似的数字总线来对数字信号进行控…

springboot整合websocket后启动报错:javax.websocket.server.ServerContainer not available

一、场景 Springboot使用ServerEndpoint来建立websocket链接。引入依赖。 <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-websocket</artifactId> </dependency>配置Websocket Confi…

九:day01_ 消息队列01

第一章 RabbitMQ 概念 1.1.1 消息队列 MQ全称Message Queue&#xff08;消息队列&#xff09;&#xff0c;是在消息的传输过程中保存消息的容器。多用于系统之间的异步通信。 1.1.2 消息 两台计算机间传送的数据单位。消息可以非常简单&#xff0c;例如只包含文本字符串&#x…

【目标检测】YOLOv5算法实现(九):模型预测

本系列文章记录本人硕士阶段YOLO系列目标检测算法自学及其代码实现的过程。其中算法具体实现借鉴于ultralytics YOLO源码Github&#xff0c;删减了源码中部分内容&#xff0c;满足个人科研需求。   本系列文章主要以YOLOv5为例完成算法的实现&#xff0c;后续修改、增加相关模…

深入解析JavaScript属性的getter和setter

&#x1f9d1;‍&#x1f393; 个人主页&#xff1a;《爱蹦跶的大A阿》 &#x1f525;当前正在更新专栏&#xff1a;《VUE》 、《JavaScript保姆级教程》、《krpano》、《krpano中文文档》 ​ ​ ✨ 前言 在JavaScript中,对象属性除了直接设置值之外,还可以通过getter和sett…

鸿蒙OS4.0兼容性测试

背景 OpenHarmony兼容性测评主要是验证合作伙伴的设备和业务应用满足OpenHarmony开源兼容性定义的技术要求&#xff0c;确保运行在OpenHarmony上的设备和业务应用能稳定、正常运行&#xff0c;同时使用OpenHarmony的设备和业务应用有一致性的接口和业务体验。 OpenHarmony兼容…

MongoDB调优

三大导致 MongoDB 性能不佳的原因 1&#xff09;慢查询2&#xff09;阻塞等待3&#xff09;硬件资源不足1,2通常是因为模型/索引设计不佳导致的。排查思路&#xff1a;按1-2-3依次排查。 影响 MongoDB 性能的因素 MongoDB 性能监控工具 Free Monitoring 从版本 4.0 开始&am…