【前端Vue】Vue3+Pinia小兔鲜电商项目第3篇：静态结构搭建和分类实现,1. 整体结构创建【附代码文档】

Vue3+ElementPlus+Pinia开发小兔鲜电商项目完整教程（附代码资料）主要内容讲述：认识Vue3，使用create-vue搭建Vue3项目1. Vue3组合式API体验,2. Vue3更多的优势,1. 认识create-vue,2. 使用create-vue创建项目,1. setup选项的写法和执行时机,2. setup中写代码的特点。什么是pinia，创建空Vue项目并安装Pinia1. 安装elementPlus和自动导入插件,2. 配置自动按需导入,3. 测试组件,1. 安装sass,2. 准备定制化的样式文件,3. 自动导入配置。静态结构搭建和分类实现，banner轮播图实现1. 整体结构创建,2. 分类实现,1. 熟悉组件,2. 获取数据渲染组件,1. 纯静态结构,2. 完整代码。静态结构搭建和路由配置，面包屑导航渲染1. 准备分类组件,2. 配置路由,3. 配置导航区域链接,1. 认识组件准备模版,2. 封装接口,3. 渲染面包屑导航。整体认识和路由配置，渲染基础数据1. 准备组件模版,2. 配置路由,3. 绑定模版测试跳转,1. 封装接口,2. 获取数据渲染模版,1. 渲染基础热榜数据。整体认识和路由配置，表单校验实现1. 准备模版,2. 配置路由跳转,1. 校验要求,2. 代码实现。本地购物车，接口购物车1. 添加购物车,2. 头部购物车,3. 列表购物车-基础内容渲染,4. 列表购物车-单选功能实现,5. 列表购物车-全选功能实现,6. 列表购物车-统计数据功能实现。路由配置和基础数据渲染，切换地址-打开弹框交互1. 准备组件模版,2. 配置路由,3. 封装接口,4. 渲染数据,1. 准备弹框模版,2. 控制弹框打开。![image.png](，基础数据渲染1. 准备接口,2. 获取数据渲染内容,1. 支付携带参数,2. 沙箱账号信息,1. 准备模版,2. 绑定路由。Sku组件封装1. 准备模版渲染规格数据,2. 选中和取消选中实现,3. 规格禁用功能实现,4. 产出Prop数据。

全套笔记资料代码移步： 前往gitee仓库查看

感兴趣的小伙伴可以自取哦，欢迎大家点赞转发~

全套教程部分目录：

部分文件图片：

静态结构搭建和分类实现

1. 整体结构创建

![image.png](

1- 按照结构新增五个组件，准备最简单的模版，分别在Home模块的入口组件中引入

  • HomeCategory
  • HomeBanner
  • HomeNew
  • HomeHot
  • HomeProduct
<script setup>
</script><template><div> HomeCategory </div>
</template>

2- Home模块入口组件中引入并渲染

<script setup>
import HomeCategory from './components/HomeCategory.vue'
import HomeBanner from './components/HomeBanner.vue'
import HomeNew from './components/HomeNew.vue'
import HomeHot from './components/HomeHot.vue'
import homeProduct from './components/HomeProduct.vue'
</script><template><div class="container"><HomeCategory /><HomeBanner /></div><HomeNew /><HomeHot /><homeProduct />
</template>

2. 分类实现

1- 准备详细模版

<script setup></script><template><div class="home-category"><ul class="menu"><li v-for="item in 9" :key="item"><RouterLink to="/">居家</RouterLink><RouterLink v-for="i in 2" :key="i" to="/">南北干货</RouterLink><!-- 弹层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: rgba(0, 0, 0, 0.8);position: relative;z-index: 99;.menu {li {padding-left: 40px;height: 55px;line-height: 55px;&:hover {background: $xtxColor;}a {margin-right: 4px;color: #fff;&:first-child {font-size: 16px;}}.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>

2- 完成代码

<script setup>
import { useCategoryStore } from '@/stores/category'const categoryStore = useCategoryStore()</script><template><div class="home-category"><ul class="menu"><li v-for="item in categoryStore.categoryList" :key="item.id"><RouterLink to="/">{{ item.name }}</RouterLink><RouterLink v-for="i in item.children.slice(0, 2)" :key="i" to="/">{{ i.name }}</RouterLink><!-- 弹层layer位置 --><div class="layer"><h4>分类推荐 <small>根据您的购买或浏览记录推荐</small></h4><ul><li v-for="i in item.goods" :key="i.id"><RouterLink to="/"><img :src="i.picture" alt="" /><div class="info"><p class="name ellipsis-2">{{ i.name }}</p><p class="desc ellipsis">{{ i.desc }}</p><p class="price"><i>¥</i>{{ i.price }}</p></div></RouterLink></li></ul></div></li></ul></div>
</template>

banner轮播图实现

1. 熟悉组件

<script setup></script><template><div class="home-banner"><el-carousel height="500px"><el-carousel-item v-for="item in 4" :key="item"><img src=" alt=""></el-carousel-item></el-carousel></div>
</template><style scoped lang='scss'>
.home-banner {width: 1240px;height: 500px;position: absolute;left: 0;top: 0;z-index: 98;img {width: 100%;height: 500px;}
}
</style>

2. 获取数据渲染组件

1- 封装接口

/*** @description: 获取banner图* @param {*}* @return {*}*/
import  httpInstance  from '@/utils/http'
function getBannerAPI (){return request({url:'home/banner'})
}

2- 获取数据渲染模版

<script setup>
import { getBannerAPI } from '@/apis/home'
import { onMounted, ref } from 'vue'const bannerList = ref([])const getBanner = async () => {const res = await getBannerAPI()console.log(res)bannerList.value = res.result
}onMounted(() => getBanner())</script><template><div class="home-banner"><el-carousel height="500px"><el-carousel-item v-for="item in bannerList" :key="item.id"><img :src="item.imgUrl" alt=""></el-carousel-item></el-carousel></div>
</template>

面板组件封装

1. 纯静态结构

<script setup></script><template><div class="home-panel"><div class="container"><div class="head"><!-- 主标题和副标题 --><h3>新鲜好物<small>新鲜出炉 品质靠谱</small></h3></div><!-- 主体内容区域 --><div> 主体内容 </div></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>

2. 完整代码

<script setup>defineProps({title: {type: String,default: ''},subTitle: {type: String,default: ''}
})</script><template><div class="home-panel"><div class="container"><div class="head"><!-- 主标题和副标题 --><h3>{{ title }}<small>{{ subTitle }}</small></h3></div><!-- 主体内容区域 --><slot name="main" /></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>

新鲜好物实现

1. 准备模版

<script setup></script><template><div></div><!-- 下面是插槽主体内容模版<ul class="goods-list"><li v-for="item in newList" :key="item.id"><RouterLink to="/"><img :src="item.picture" alt="" /><p class="name">{{ item.name }}</p><p class="price">&yen;{{ item.price }}</p></RouterLink></li></ul>-->
</template><style scoped lang='scss'>
.goods-list {display: flex;justify-content: space-between;height: 406px;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;}.price {color: $priceColor;}}
}
</style>

2. 封装接口

/*** @description: 获取新鲜好物* @param {*}* @return {*}*/
export const findNewAPI = () => {return httpInstance({url:'/home/new'})
}

3. 获取数据渲染模版

<script setup>
import HomePanel from './HomePanel.vue'
import { getNewAPI } from '@/apis/home'
import { ref } from 'vue'
const newList = ref([])
const getNewList = async () => {const res = await getNewAPI()newList.value = res.result
}getNewList()
</script><template><HomePanel title="新鲜好物" sub-title="新鲜出炉 品质靠谱"><template #main><ul class="goods-list"><li v-for="item in newList" :key="item.id"><RouterLink :to="`/detail/${item.id}`"><img :src="item.picture" alt="" /><p class="name">{{ item.name }}</p><p class="price">&yen;{{ item.price }}</p></RouterLink></li></ul></template></HomePanel>
</template>

人气推荐实现

1. 封装接口

/*** @description: 获取人气推荐* @param {*}* @return {*}*/
export const getHotAPI = () => {return  httpInstance('home/hot', 'get', {})
}

2. 获取数据渲染模版

<script setup>
import HomePanel from './HomePanel.vue'
import { getHotAPI } from '@/apis/home'
import { ref } from 'vue'
const hotList = ref([])
const getHotList = async () => {const res = await getHotAPI()hotList.value = res.result
}
getHotList()</script><template><HomePanel title="人气推荐" sub-title="人气爆款 不容错过"><ul class="goods-list"><li v-for="item in hotList" :key="item.id"><RouterLink to="/"><img v-img-lazy="item.picture" alt=""><p class="name">{{ item.title }}</p><p class="desc">{{ item.alt }}</p></RouterLink></li></ul></HomePanel>
</template><style scoped lang='scss'>
.goods-list {display: flex;justify-content: space-between;height: 426px;li {width: 306px;height: 406px;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;}.desc {color: #999;font-size: 18px;}}
}
</style>

懒加载指令实现

1. 封装全局指令

// 定义懒加载插件
import { useIntersectionObserver } from '@vueuse/core'export const lazyPlugin = {install (app) {// 懒加载指令逻辑app.directive('img-lazy', {mounted (el, binding) {// el: 指令绑定的那个元素 img// binding: binding.value  指令等于号后面绑定的表达式的值  图片urlconsole.log(el, binding.value)const { stop } = useIntersectionObserver(el,([{ isIntersecting }]) => {console.log(isIntersecting)if (isIntersecting) {// 进入视口区域el.src = binding.valuestop()}},)}})}
}

2. 注册全局指令

// 全局指令注册
import { directivePlugin } from '@/directives'
app.use(directivePlugin)

Product产品列表实现

1. 基础数据渲染

1- 准备静态模版

<script setup>
import HomePanel from './HomePanel.vue'</script><template><div class="home-product"><!-- <HomePanel :title="cate.name" v-for="cate in goodsProduct" :key="cate.id"><div class="box"><RouterLink class="cover" to="/"><img :src="cate.picture" /><strong class="label"><span>{{ cate.name }}馆</span><span>{{ cate.saleInfo }}</span></strong></RouterLink><ul class="goods-list"><li v-for="good in cate.goods" :key="good.id"><RouterLink to="/" class="goods-item"><img :src="good.picture" alt="" /><p class="name ellipsis">{{ good.name }}</p><p class="desc ellipsis">{{ good.desc }}</p><p class="price">&yen;{{ good.price }}</p></RouterLink></li></ul></div></HomePanel> --></div>
</template><style scoped lang='scss'>
.home-product {background: #fff;margin-top: 20px;.sub {margin-bottom: 2px;a {padding: 2px 12px;font-size: 16px;border-radius: 4px;&:hover {background: $xtxColor;color: #fff;}&:last-child {margin-right: 80px;}}}.box {display: flex;.cover {width: 240px;height: 610px;margin-right: 10px;position: relative;img {width: 100%;height: 100%;}.label {width: 188px;height: 66px;display: flex;font-size: 18px;color: #fff;line-height: 66px;font-weight: normal;position: absolute;left: 0;top: 50%;transform: translate3d(0, -50%, 0);span {text-align: center;&:first-child {width: 76px;background: rgba(0, 0, 0, 0.9);}&:last-child {flex: 1;background: rgba(0, 0, 0, 0.7);}}}}.goods-list {width: 990px;display: flex;flex-wrap: wrap;li {width: 240px;height: 300px;margin-right: 10px;margin-bottom: 10px;&:nth-last-child(-n + 4) {margin-bottom: 0;}&:nth-child(4n) {margin-right: 0;}}}.goods-item {display: block;width: 220px;padding: 20px 30px;text-align: center;transition: all .5s;&:hover {transform: translate3d(0, -3px, 0);box-shadow: 0 3px 8px rgb(0 0 0 / 20%);}img {width: 160px;height: 160px;}p {padding-top: 10px;}.name {font-size: 16px;}.desc {color: #999;height: 29px;}.price {color: $priceColor;font-size: 20px;}}}
}
</style>

2- 封装接口

/*** @description: 获取所有商品模块* @param {*}* @return {*}*/
export const getGoodsAPI = () => {return httpInstance({url: '/home/goods'})
}

3- 获取并渲染数据

<script setup>
import HomePanel from './HomePanel.vue'
import { getGoodsAPI } from '@/apis/home'
import { ref } from 'vue'
const goodsProduct = ref([])
const getGoods = async () => {const { result } = await getGoodsAPI()goodsProduct.value = result
}
onMounted( ()=> getGoods() )
</script><template><div class="home-product"><HomePanel :title="cate.name" v-for="cate in goodsProduct" :key="cate.id"><div class="box"><RouterLink class="cover" to="/"><img :src="cate.picture" /><strong class="label"><span>{{ cate.name }}馆</span><span>{{ cate.saleInfo }}</span></strong></RouterLink><ul class="goods-list"><li v-for="goods in cate.goods" :key="good.id"><RouterLink to="/" class="goods-item"><img :src="goods.picture" alt="" /><p class="name ellipsis">{{ goods.name }}</p><p class="desc ellipsis">{{ goods.desc }}</p><p class="price">&yen;{{ goods.price }}</p></RouterLink></li></ul></div></HomePanel></div>
</template>

2. 图片懒加载

<div class="home-product"><HomePanel :title="cate.name" v-for="cate in goodsProduct" :key="cate.id"><div class="box"><RouterLink class="cover" to="/"><!-- 指令替换 --><img v-img-lazy="cate.picture" /></RouterLink><ul class="goods-list"><li v-for="goods in cate.goods" :key="goods.id"><RouterLink to="/" class="goods-item"><!-- 指令替换 --><img v-img-lazy="goods.picture" alt="" /></RouterLink></li></ul></div></HomePanel>
</div>

GoodsItem组件封装

1. 封装组件


<script setup>
defineProps({goods: {type: Object,default: () => { }}
})
</script><template><RouterLink to="/" class="goods-item"><img :src="goods.picture" alt="" /><p class="name ellipsis">{{ goods.name }}</p><p class="desc ellipsis">{{ goods.desc }}</p><p class="price">&yen;{{ goods.price }}</p></RouterLink>
</template><style scoped lang="scss">
.goods-item {display: block;width: 220px;padding: 20px 30px;text-align: center;transition: all .5s;&:hover {transform: translate3d(0, -3px, 0);box-shadow: 0 3px 8px rgb(0 0 0 / 20%);}img {width: 160px;height: 160px;}p {padding-top: 10px;}.name {font-size: 16px;}.desc {color: #999;height: 29px;}.price {color: $priceColor;font-size: 20px;}
}
</style>

2. 使用组件

<ul class="goods-list"><li v-for="goods in cate.goods" :key="item.id"><GoodsItem :goods="goods" /></li>
</ul>

未完待续， 同学们请等待下一期

全套笔记资料代码移步： 前往gitee仓库查看

感兴趣的小伙伴可以自取哦，欢迎大家点赞转发~

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

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

相关文章

【OpenStack】OpenStack实战之开篇

【OpenStack】OpenStack实战之开篇

目录 那么，OpenStack是什么？云又是什么？关于容器应用程序OpenStack如何适配其中？如何设置它？如何学会使用它？推荐超级课程： Docker快速入门到精通Kubernetes入门到大师通关课AWS云服务快速入门实战我的整个职业生涯到目前为止一直围绕着为离线或隔离网络设计和开发应用程…
阅读更多...
【数据结构与算法】java有向带权图最短路径算法-Dijkstra算法（通俗易懂）

【数据结构与算法】java有向带权图最短路径算法-Dijkstra算法（通俗易懂）

目录 一、什么是Dijkstra算法二、算法基本步骤三、java代码四、拓展&#xff08;无向图的Dijkstra算法&#xff09; 一、什么是Dijkstra算法 Dijkstra算法的核心思想是通过逐步逼近的方式&#xff0c;找出从起点到图中其他所有节点的最短路径。算法的基本步骤如下&#xff1a;…
阅读更多...
应用层协议 - HTTP

应用层协议 - HTTP

文章目录 目录 文章目录 前言 1 . 应用层概要 2. WWW 2.1 互联网的蓬勃发展 2.2 WWW基本概念 2.3 URI 3 . HTTP 3.1 工作过程 3.2 HTTP协议格式 3.3 HTTP请求 3.3.1 URL基本格式 3.3.2 认识方法 get方法 post方法 其他方法 3.3.2 认识请求报头 3.3.3 认识请…
阅读更多...
MyBatis是纸老虎吗？（七）

MyBatis是纸老虎吗？（七）

在上篇文章中&#xff0c;我们对照手动编写jdbc的开发流程&#xff0c;对MyBatis进行了梳理。通过这次梳理我们发现了一些之前文章中从未见过的新知识&#xff0c;譬如BoundSql等。本节我想继续MyBatis这个主题&#xff0c;并探索一下MyBatis中的缓存机制。在正式开始梳理前&am…
阅读更多...
linux内核网络分析 用户空间工具 “每日读书”

linux内核网络分析 用户空间工具 “每日读书”

有多种不同的工具可以用于配置linux众多可用的网络功能&#xff0c;如本章开头所述&#xff0c;你可以通过使用这些工具对内核巧妙的处理&#xff0c;以便于学习以及发现做这样的修改后的影响。 下面是在本书中将会经常涉及的工具&#xff1a; iputils 除了经常使用的ping命令外…
阅读更多...
如何解决kafka rebalance导致的暂时性不能消费数据问题

如何解决kafka rebalance导致的暂时性不能消费数据问题

文章目录 背景思考答案排它故障转移共享 背景 之前在review同组其它业务的时候&#xff0c;发现竟然把kafka去掉了&#xff0c;问了下原因&#xff0c;有一个单独的服务&#xff0c;我们可以把它称为agent&#xff0c;就是这个服务是动态扩缩容的&#xff0c;会采集一些指标&a…
阅读更多...
Windows CMD命令大全（快速上手）

Windows CMD命令大全（快速上手）

基础概念 在windows操作系统里进的DOS(即输入 winr CMD 进命令提示符)不是纯DOS,只是为方便某些需求而建立的, 而纯DOS本身就是一种操作系统.(两者的区别:比如你可以在纯DOS下删除你的 windows系统, 但在你所说的"命令提示符"里却不能,因为你不可能"在房子里面…
阅读更多...
探索 Linux 系统信息工具：uname

探索 Linux 系统信息工具：uname

在 Linux 系统中&#xff0c;uname 是一个非常实用的命令行工具&#xff0c;用于获取和打印系统特定的基本信息。本文将通过展示 uname 的用法及输出示例&#xff0c;帮助你更好地理解和掌握这一工具。 uname 命令简介 uname 工具提供了多种选项来显示不同的系统信息。当你在…
阅读更多...
使用C++实现一个简单的日志功能

使用C++实现一个简单的日志功能

日志对于一些大一些的项目来说&#xff0c;可以在项目运行出现问题时更好的帮助 项目的维护人员快速的定位到问题出现的地方并且知道出现问题的原因&#xff0c; 并且日志也可以帮助程序员很好的进行项目的Debug&#xff0c;那么今天我就来实 现一个C编写的一个简单的日志功能。…
阅读更多...
深度学习中常用计算距离的几种算法对比与python实现

深度学习中常用计算距离的几种算法对比与python实现

前言 距离度量在许多机器学习算法中扮演着至关重要的角色&#xff0c;无论是监督学习还是无监督学习。选择适当的距离度量可以显著影响模型的性能。 在高维数据集中&#xff0c;欧几里得距离可能会受到所谓的“维度诅咒”的影响&#xff0c;因为随着维度的增加&#xff0c;数…
阅读更多...
海外媒体软文发稿：谷歌关键词优化细分人群成功案例，突破海外市场！

海外媒体软文发稿：谷歌关键词优化细分人群成功案例，突破海外市场！

海外媒体软文发稿&#xff1a;谷歌关键词优化细分人群成功案例&#xff0c;突破海外市场&#xff01; 引言 在全球化的时代&#xff0c;海外市场对于企业的发展至关重要。而在海外市场中&#xff0c;互联网媒体的作用不可忽视。本篇教程将介绍如何通过谷歌关键词优化细分人群…
阅读更多...
Java内存模型简述

Java内存模型简述

Java内存模型&#xff0c;也称JMM&#xff0c;定义了共享内存中多线程程序之间读写数据操作的规范。用于规范内存读写操作。 JMM把内存分为两块&#xff1a; 私有线程的工作区域&#xff08;工作内存&#xff09;所有线程的共享区域&#xff08;主内存&#xff09; 线程和线程…
阅读更多...
Spring设计模式-实战篇之单例模式

Spring设计模式-实战篇之单例模式

实现案例&#xff0c;饿汉式 Double-Check机制 synchronized锁 /*** 以饿汉式为例* 使用Double-Check保证线程安全*/ public class Singleton {// 使用volatile保证多线程同一属性的可见性和指令重排序private static volatile Singleton instance;public static Singleton …
阅读更多...
js的变量

js的变量

一、JavaScript的变量分类。js内存为堆或栈 1、基本数据类型变量 a.number 整型 b.string 字符串类型 c.Boolean 布尔值类型 d.null 空 e.undefined 未定义类型 PS&#xff1a;基本数据类型存放在栈中 2、引用数据类型变量 object 对象 array 数组 function 函数 PS&#xf…
阅读更多...
【揭秘C语言】零基础也能懂！一篇文章带你掌握C语言指针核心知识点

【揭秘C语言】零基础也能懂！一篇文章带你掌握C语言指针核心知识点

C语言文章更新目录 C语言学习资源汇总&#xff0c;史上最全面总结&#xff0c;没有之一 C/C学习资源&#xff08;百度云盘链接&#xff09; 计算机二级资料&#xff08;过级专用&#xff09; C语言学习路线&#xff08;从入门到实战&#xff09; 编写C语言程序的7个步骤和编程…
阅读更多...
使用 python 拆分 excel 文件

使用 python 拆分 excel 文件

文章目录 1、安装环境2、脚本 split.sh3、运行脚本 1、安装环境 brew install python3 python3 -m venv my_pandas_venv source my_pandas_venv/bin/activate pip install pandas2、脚本 split.sh #!/bin/bash# 检查 Python3 和 pandas 库是否已安装 if ! command -v python3…
阅读更多...
Learn OpenGL 30 SSAO

Learn OpenGL 30 SSAO

SSAO 我们已经在前面的基础教程中简单介绍到了这部分内容&#xff1a;环境光照(Ambient Lighting)。环境光照是我们加入场景总体光照中的一个固定光照常量&#xff0c;它被用来模拟光的散射(Scattering)。在现实中&#xff0c;光线会以任意方向散射&#xff0c;它的强度是会一…
阅读更多...
OpenCV基础demo

OpenCV基础demo

一、读取图像 //图片路径QString appPath = QCoreApplication::applicationDirPath();QString imagePath = appPath + "/sun.png";//读取图像cv::Mat img = cv::imread(imagePath.toStdString()); //IMREAD_GRAYSCALE 灰度图 IMREAD_UNCHANGED 具有透明通道if (img.e…
阅读更多...
C++ STL - 优先级队列及其模拟实现

C++ STL - 优先级队列及其模拟实现

目录 0. 引言 1. priority_queue 介绍 1.1 构造函数 1.2 priority_queue 接口函数使用 1.3 仿函数 1.4 题目练习 2. priority_queue 模拟实现 2.1基本框架&#xff1a; 2.2 默认构造函数 2.3 基本函数 2.4 堆的向上以及向下调整 0. 引言 优先队列 (priority_queu…
阅读更多...
【剑指offr--C/C++】JZ22 链表中倒数最后k个结点

【剑指offr--C/C++】JZ22 链表中倒数最后k个结点

一、题目 二、思路及代码 遍历链表并存入vector容器&#xff0c;通过下标取出对应位置元素或者返回空 /*** struct ListNode {* int val;* struct ListNode *next;* ListNode(int x) : val(x), next(nullptr) {}* };*/ #include <cstddef> #include <iterator> #…
阅读更多...
最新文章

Copyright @ 2022~2023