vue学习日记10:综合案例-购物车

一、需求说明

1.渲染功能

(1)代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><link rel="stylesheet" href="./css/inputnumber.css" /><link rel="stylesheet" href="./css/index.css" /><title>购物车</title>
</head>
<body>
<div class="app-container" id="app"><!-- 顶部banner --><div class="banner-box"><img src="img/fruit.jpg" alt="" /></div><!-- 面包屑 --><div class="breadcrumb"><span>🏠</span>/<span>购物车</span></div><!-- 购物车主体 --><div class="main" v-if="fruitList.length > 0"><div class="table"><!-- 头部 --><div class="thead"><div class="tr"><div class="th">选中</div><div class="th th-pic">图片</div><div class="th">单价</div><div class="th num-th">个数</div><div class="th">小计</div><div class="th">操作</div></div></div><!-- 身体 --><div class="tbody"><div v-for="(item, index) in fruitList" :key="item.id" class="tr" :class="{ active: item.isChecked }"><div class="td"><input type="checkbox" v-model="item.isChecked" /></div><div class="td"><img :src="item.icon" alt="" /></div><div class="td">{{ item.price }}</div><div class="td"><div class="my-input-number"><button class="decrease"> - </button><span class="my-input__inner">{{ item.num }}</span><button class="increase"> + </button></div></div><div class="td">{{ item.num * item.price }}</div><div class="td"><button>删除</button></div></div></div></div><!-- 底部 --><div class="bottom"><!-- 全选 --><label class="check-all"><input type="checkbox" />全选</label><div class="right-box"><!-- 所有商品总价 --><span class="price-box">总价&nbsp;&nbsp;:&nbsp;&nbsp;¥&nbsp;<span class="price">24</span></span><!-- 结算按钮 --><button class="pay">结算( 6 )</button></div></div></div><!-- 空车 --><div class="empty" v-else>🛒空空如也</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>const app = new Vue({el: '#app',data: {// 水果列表fruitList: [{id: 1,icon: 'img/火龙果.png',isChecked: true,num: 2,price: 6,},{id: 2,icon: 'img/荔枝.png',isChecked: false,num: 7,price: 20,},{id: 3,icon: 'img/榴莲.png',isChecked: false,num: 3,price: 40,},{id: 4,icon: 'img/鸭梨.png',isChecked: true,num: 10,price: 3,},{id: 5,icon: 'img/樱桃.png',isChecked: false,num: 20,price: 34,},],},})
</script>
</body>
</html>

(2)展示 

2.删除和修改数量

(1)代码 

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><link rel="stylesheet" href="./css/inputnumber.css" /><link rel="stylesheet" href="./css/index.css" /><title>购物车</title>
</head>
<body>
<div class="app-container" id="app"><!-- 顶部banner --><div class="banner-box"><img src="img/fruit.jpg" alt="" /></div><!-- 面包屑 --><div class="breadcrumb"><span>🏠</span>/<span>购物车</span></div><!-- 购物车主体 --><div class="main" v-if="fruitList.length > 0"><div class="table"><!-- 头部 --><div class="thead"><div class="tr"><div class="th">选中</div><div class="th th-pic">图片</div><div class="th">单价</div><div class="th num-th">个数</div><div class="th">小计</div><div class="th">操作</div></div></div><!-- 身体 --><div class="tbody"><div v-for="(item, index) in fruitList" :key="item.id" class="tr" :class="{ active: item.isChecked }"><div class="td"><input type="checkbox" v-model="item.isChecked" /></div><div class="td"><img :src="item.icon" alt="" /></div><div class="td">{{ item.price }}</div><div class="td"><div class="my-input-number"><button :disabled="item.num <=1" class="decrease" @click="sub(item.id)"> - </button><span class="my-input__inner">{{ item.num }}</span><button class="increase" @click="add(item.id)"> + </button></div></div><div class="td">{{ item.num * item.price }}</div><div class="td"><button @click="del(item.id)">删除</button></div></div></div></div><!-- 底部 --><div class="bottom"><!-- 全选 --><label class="check-all"><input type="checkbox" />全选</label><div class="right-box"><!-- 所有商品总价 --><span class="price-box">总价&nbsp;&nbsp;:&nbsp;&nbsp;¥&nbsp;<span class="price">24</span></span><!-- 结算按钮 --><button class="pay">结算( 6 )</button></div></div></div><!-- 空车 --><div class="empty" v-else>🛒空空如也</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>const app = new Vue({el: '#app',data: {// 水果列表fruitList: [{id: 1,icon: 'img/火龙果.png',isChecked: true,num: 2,price: 6,},{id: 2,icon: 'img/荔枝.png',isChecked: false,num: 7,price: 20,},{id: 3,icon: 'img/榴莲.png',isChecked: false,num: 3,price: 40,},{id: 4,icon: 'img/鸭梨.png',isChecked: true,num: 10,price: 3,},{id: 5,icon: 'img/樱桃.png',isChecked: false,num: 20,price: 34,},],},methods:{del(id){this.fruitList = this.fruitList.filter(item => item.id !== id)},add(id){//1.根据id 找到数组中的对应项 -> findconst fruit = this.fruitList.find(item => item.id === id)//2.操作num数量fruit.num++// console.log(id)},sub(id){//1.根据id 找到数组中的对应项 -> findconst fruit = this.fruitList.find(item => item.id === id)//2.操作num数量fruit.num--// console.log(id)}},})
</script>
</body>
</html>

(2)展示

 减到1就不能再减,点击删除直接删除

 

3.全选与反选

(1)代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><link rel="stylesheet" href="./css/inputnumber.css" /><link rel="stylesheet" href="./css/index.css" /><title>购物车</title>
</head>
<body>
<div class="app-container" id="app"><!-- 顶部banner --><div class="banner-box"><img src="img/fruit.jpg" alt="" /></div><!-- 面包屑 --><div class="breadcrumb"><span>🏠</span>/<span>购物车</span></div><!-- 购物车主体 --><div class="main" v-if="fruitList.length > 0"><div class="table"><!-- 头部 --><div class="thead"><div class="tr"><div class="th">选中</div><div class="th th-pic">图片</div><div class="th">单价</div><div class="th num-th">个数</div><div class="th">小计</div><div class="th">操作</div></div></div><!-- 身体 --><div class="tbody"><div v-for="(item, index) in fruitList" :key="item.id" class="tr" :class="{ active: item.isChecked }"><div class="td"><input type="checkbox" v-model="item.isChecked" /></div><div class="td"><img :src="item.icon" alt="" /></div><div class="td">{{ item.price }}</div><div class="td"><div class="my-input-number"><button :disabled="item.num <=1" class="decrease" @click="sub(item.id)"> - </button><span class="my-input__inner">{{ item.num }}</span><button class="increase" @click="add(item.id)"> + </button></div></div><div class="td">{{ item.num * item.price }}</div><div class="td"><button @click="del(item.id)">删除</button></div></div></div></div><!-- 底部 --><div class="bottom"><!-- 全选 --><label class="check-all"><input type="checkbox" v-model="isAll"/>全选</label><div class="right-box"><!-- 所有商品总价 --><span class="price-box">总价&nbsp;&nbsp;:&nbsp;&nbsp;¥&nbsp;<span class="price">24</span></span><!-- 结算按钮 --><button class="pay">结算( 6 )</button></div></div></div><!-- 空车 --><div class="empty" v-else>🛒空空如也</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>const app = new Vue({el: '#app',data: {// 水果列表fruitList: [{id: 1,icon: 'img/火龙果.png',isChecked: true,num: 2,price: 6,},{id: 2,icon: 'img/荔枝.png',isChecked: false,num: 7,price: 20,},{id: 3,icon: 'img/榴莲.png',isChecked: false,num: 3,price: 40,},{id: 4,icon: 'img/鸭梨.png',isChecked: true,num: 10,price: 3,},{id: 5,icon: 'img/樱桃.png',isChecked: false,num: 20,price: 34,},],},computed:{//默认计算属性,只能能获取不能设置,要设置需要写完整写法// isAll(){//   //必须所有的小选框都选中,全选按钮才选中 ——>every//   return this.fruitList.every(item => item.isChecked)// },// 完整写法 => get+setisAll:{get(){return this.fruitList.every(item => item.isChecked)},set(value){//基于拿到的布尔值,要让所有的小选框 同步状态this.fruitList.forEach(item => item.isChecked = value)// console.log(value)},}},methods:{del(id){this.fruitList = this.fruitList.filter(item => item.id !== id)},add(id){//1.根据id 找到数组中的对应项 -> findconst fruit = this.fruitList.find(item => item.id === id)//2.操作num数量fruit.num++// console.log(id)},sub(id){//1.根据id 找到数组中的对应项 -> findconst fruit = this.fruitList.find(item => item.id === id)//2.操作num数量fruit.num--// console.log(id)}},})
</script>
</body>
</html>

(2)展示 

4.统计选中的总价和总数量

(1)代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><link rel="stylesheet" href="./css/inputnumber.css" /><link rel="stylesheet" href="./css/index.css" /><title>购物车</title>
</head>
<body>
<div class="app-container" id="app"><!-- 顶部banner --><div class="banner-box"><img src="img/fruit.jpg" alt="" /></div><!-- 面包屑 --><div class="breadcrumb"><span>🏠</span>/<span>购物车</span></div><!-- 购物车主体 --><div class="main" v-if="fruitList.length > 0"><div class="table"><!-- 头部 --><div class="thead"><div class="tr"><div class="th">选中</div><div class="th th-pic">图片</div><div class="th">单价</div><div class="th num-th">个数</div><div class="th">小计</div><div class="th">操作</div></div></div><!-- 身体 --><div class="tbody"><div v-for="(item, index) in fruitList" :key="item.id" class="tr" :class="{ active: item.isChecked }"><div class="td"><input type="checkbox" v-model="item.isChecked" /></div><div class="td"><img :src="item.icon" alt="" /></div><div class="td">{{ item.price }}</div><div class="td"><div class="my-input-number"><button :disabled="item.num <=1" class="decrease" @click="sub(item.id)"> - </button><span class="my-input__inner">{{ item.num }}</span><button class="increase" @click="add(item.id)"> + </button></div></div><div class="td">{{ item.num * item.price }}</div><div class="td"><button @click="del(item.id)">删除</button></div></div></div></div><!-- 底部 --><div class="bottom"><!-- 全选 --><label class="check-all"><input type="checkbox" v-model="isAll"/>全选</label><div class="right-box"><!-- 所有商品总价 --><span class="price-box">总价&nbsp;&nbsp;:&nbsp;&nbsp;¥&nbsp;<span class="price">{{ totalPrice }}</span></span><!-- 结算按钮 --><button class="pay">结算{{ totalCount }}</button></div></div></div><!-- 空车 --><div class="empty" v-else>🛒空空如也</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>const app = new Vue({el: '#app',data: {// 响应式数据// 水果列表fruitList: [{id: 1,icon: 'img/火龙果.png',isChecked: true,num: 2,price: 6,},{id: 2,icon: 'img/荔枝.png',isChecked: false,num: 7,price: 20,},{id: 3,icon: 'img/榴莲.png',isChecked: false,num: 3,price: 40,},{id: 4,icon: 'img/鸭梨.png',isChecked: true,num: 10,price: 3,},{id: 5,icon: 'img/樱桃.png',isChecked: false,num: 20,price: 34,},],},computed:{// 计算属性//默认计算属性,只能能获取不能设置,要设置需要写完整写法// isAll(){//   //必须所有的小选框都选中,全选按钮才选中 ——>every//   return this.fruitList.every(item => item.isChecked)// },// 完整写法 => get+setisAll:{get(){return this.fruitList.every(item => item.isChecked)},set(value){//基于拿到的布尔值,要让所有的小选框 同步状态this.fruitList.forEach(item => item.isChecked = value)// console.log(value)},},// 统计选中的总数totalCount(){return this.fruitList.reduce((sum,item) => {if (item.isChecked){// 选中 -> 需要累加return sum +item.num} else {// 没选中 -> 不需要累加return  sum}},0)},// 统计选中的总价totalPrice(){return this.fruitList.reduce((sum,item) => {if(item.isChecked){return sum + item.num * item.price}else{return sum}},0)},},methods:{del(id){this.fruitList = this.fruitList.filter(item => item.id !== id)},add(id){//1.根据id 找到数组中的对应项 -> findconst fruit = this.fruitList.find(item => item.id === id)//2.操作num数量fruit.num++// console.log(id)},sub(id){//1.根据id 找到数组中的对应项 -> findconst fruit = this.fruitList.find(item => item.id === id)//2.操作num数量fruit.num--// console.log(id)},},})
</script>
</body>
</html>

 

这里写三元表达式也可以 

三元表达式是一种在许多编程语言中常见的条件表达式,它由三个操作数组成:一个条件表达式、一个真值表达式和一个假值表达式。其一般形式为:

condition ? expr1 : expr2

如果写成if...else

if (condition) {result = expr1;
} else {result = expr2;
}

三元写法 

result = condition ? expr1 : expr2;

(2)展示

被勾选的被计算

 5.持久化本地

如果用户对其操作之后 没有持久化刷新后就会成问题

(1)代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><link rel="stylesheet" href="./css/inputnumber.css" /><link rel="stylesheet" href="./css/index.css" /><title>购物车</title>
</head>
<body>
<div class="app-container" id="app"><!-- 顶部banner --><div class="banner-box"><img src="img/fruit.jpg" alt="" /></div><!-- 面包屑 --><div class="breadcrumb"><span>🏠</span>/<span>购物车</span></div><!-- 购物车主体 --><div class="main" v-if="fruitList.length > 0"><div class="table"><!-- 头部 --><div class="thead"><div class="tr"><div class="th">选中</div><div class="th th-pic">图片</div><div class="th">单价</div><div class="th num-th">个数</div><div class="th">小计</div><div class="th">操作</div></div></div><!-- 身体 --><div class="tbody"><div v-for="(item, index) in fruitList" :key="item.id" class="tr" :class="{ active: item.isChecked }"><div class="td"><input type="checkbox" v-model="item.isChecked" /></div><div class="td"><img :src="item.icon" alt="" /></div><div class="td">{{ item.price }}</div><div class="td"><div class="my-input-number"><button :disabled="item.num <=1" class="decrease" @click="sub(item.id)"> - </button><span class="my-input__inner">{{ item.num }}</span><button class="increase" @click="add(item.id)"> + </button></div></div><div class="td">{{ item.num * item.price }}</div><div class="td"><button @click="del(item.id)">删除</button></div></div></div></div><!-- 底部 --><div class="bottom"><!-- 全选 --><label class="check-all"><input type="checkbox" v-model="isAll"/>全选</label><div class="right-box"><!-- 所有商品总价 --><span class="price-box">总价&nbsp;&nbsp;:&nbsp;&nbsp;¥&nbsp;<span class="price">{{ totalPrice }}</span></span><!-- 结算按钮 --><button class="pay">结算{{ totalCount }}</button></div></div></div><!-- 空车 --><div class="empty" v-else>🛒空空如也</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>const defaultArr = [{id: 1,icon: 'img/火龙果.png',isChecked: false,num: 1,price: 6,},{id: 2,icon: 'img/荔枝.png',isChecked: false,num: 1,price: 20,},{id: 3,icon: 'img/榴莲.png',isChecked: false,num: 1,price: 40,},{id: 4,icon: 'img/鸭梨.png',isChecked: false,num: 1,price: 3,},{id: 5,icon: 'img/樱桃.png',isChecked: false,num: 1,price: 34,},]const app = new Vue({el: '#app',data: {// 响应式数据// 水果列表fruitList: JSON.parse(localStorage.getItem('list')) || (defaultArr),},computed:{// 计算属性//默认计算属性,只能能获取不能设置,要设置需要写完整写法// isAll(){//   //必须所有的小选框都选中,全选按钮才选中 ——>every//   return this.fruitList.every(item => item.isChecked)// },// 完整写法 => get+setisAll:{get(){return this.fruitList.every(item => item.isChecked)},set(value){//基于拿到的布尔值,要让所有的小选框 同步状态this.fruitList.forEach(item => item.isChecked = value)// console.log(value)},},// // 统计选中的总数// totalCount(){//   return this.fruitList.reduce((sum,item) => {//     if (item.isChecked){//       // 选中 -> 需要累加//       return sum +item.num//     } else {//       // 没选中 -> 不需要累加//       return  sum//     }//   },0)// },// // 统计选中的总价// totalPrice(){//   return this.fruitList.reduce((sum,item) => {//     if(item.isChecked){//       return sum + item.num * item.price//     }else{//       return sum//     }//   },0)// },//三元表达式// 统计选中的总数totalCount() {return this.fruitList.reduce((sum, item) => {return item.isChecked ? sum + item.num : sum;}, 0);},// 统计选中的总价totalPrice() {return this.fruitList.reduce((sum, item) => {return item.isChecked ? sum + item.num * item.price : sum;}, 0);},},methods:{del(id){this.fruitList = this.fruitList.filter(item => item.id !== id)},add(id){//1.根据id 找到数组中的对应项 -> findconst fruit = this.fruitList.find(item => item.id === id)//2.操作num数量fruit.num++// console.log(id)},sub(id){//1.根据id 找到数组中的对应项 -> findconst fruit = this.fruitList.find(item => item.id === id)//2.操作num数量fruit.num--// console.log(id)},},watch:{fruitList:{deep:true,handler(newValue){// 需要将变化后的newValue 存入本地 (转json)localStorage.setItem('list',JSON.stringify(newValue))}}}})
</script>
</body>
</html>

如果没有 || (defaultArr)清除缓存后就会null崩溃 ,加上之后就会默认回到初试页面了

(2)展示

 6.总结

-----------------------------------------------------------------------------------------------------------------------------

注:本人是根据黑马程序员的B站教程来学习的,
链接:https://www.bilibili.com/video/BV1HV4y1a7n4/?spm_id_from=333.999.0.0

本文章仅仅是个人学习笔记 无任何其他用途 特此说明 

 

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

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

相关文章

2024年软件测试面试题大全【含答案】

一、面试基础题 简述测试流程: 1、阅读相关技术文档&#xff08;如产品PRD、UI设计、产品流程图等&#xff09;。 2、参加需求评审会议。 3、根据最终确定的需求文档编写测试计划。 4、编写测试用例&#xff08;等价类划分法、边界值分析法等&#xff09;。 5、用例评审(…

PLC_博图系列☞P:扫描操作数的信号上升沿

PLC_博图系列☞P&#xff1a;扫描操作数的信号上升沿 文章目录 PLC_博图系列☞P&#xff1a;扫描操作数的信号上升沿背景介绍P&#xff1a;扫描操作数的信号上升沿说明参数示例 关键字&#xff1a; PLC、 西门子、 博图、 Siemens 、 p 背景介绍 这是一篇关于PLC编程的文章…

程序员实用学习平台,必看榜!

只要卷不死&#xff0c;就往死里卷&#xff01; 高中老师宣扬的励志鸡汤&#xff0c;仿佛走出了校园踏入社会仍然适用。 “出走半生&#xff0c;归来仍是少年。”emm....... 如今比麻花还卷的社会&#xff0c;学到老才能活到老啊~尤其咱们IT这么优胜劣汰的行业&#xff0c;自是…

Bug定位与分析,软件测试员你中招了吗?

之所以写这一篇文章&#xff0c;是突然想起来曾经在测试过程中被开发嘲讽过&#xff0c;事情是这样的&#xff0c;当时发现了一个疑似前端的Bug就草草提交到了禅道&#xff0c;结果刚来的女前端看到了就有点生气地问我为啥不查清到底是前后端问题就直接派给她前端了&#xff0c…

113 链接集11--ctrl+左键单击多选

1.ctrl左键单击多选&#xff0c;单击单选 精简代码 <div class"model-list"><divmousedown.prevent"handleClick(item, $event)"class"model-list-item"v-for"item in modelList":key"item.id":class"{ model…

蓝桥杯物联网遇见的重大BUG及其产生原因和解决方法

BUG列表 1、ADC的RP2显示一直为0&#xff1a;2、LORX_Tx发送数据乱码&#xff1a;3、strcmp比较char a[2] {1, 2}与“12”字符串是否相等板子会死机&#xff1a;4、LORA_Tx和LORA_Rx放一起会接收不到数据&#xff1a;5、RTC获取到静止时间&#xff1a;6、ADC获取RP1和RP2模拟量…

IO复用并发模型

在讲解复用并发模型之前&#xff0c;先补齐一些知识&#xff1a; 设想一个场景&#xff0c;你今天想洗衣服&#xff0c;但是没有洗衣粉&#xff0c;于是你让快递小哥送来&#xff0c;那在送的这段时间&#xff0c;如果你干了别的活&#xff0c;洗衣服这件事情就被阻塞了&#…

Prometheus(五):监控物理机并进行数据展示

目录 1 ipmi export安装配置1.1 ipmi exporter简介1.2 安装1.2 创建yaml文件1.3 systemd启动配置 ipmi_exporter.service1.4 启动 ipmi_exporter 服务1.5 Prometheus配置创建target&#xff1a;修改Prometheus配置文件 1.6 Grafana配置1.7 IPMI说明1、IPMI2、ipmitool远程电源管…

C++项目——集群聊天服务器项目(五)网络模块与业务模块

今天来正式书写集群聊天服务器网络模块与部分业务模块的代码 环境搭建C项目——集群聊天服务器项目(一)项目介绍、环境搭建、Boost库安装、Muduo库安装、Linux与vscode配置-CSDN博客 Json第三方库 muduo网络库 MySQL数据库 一、工程目录创建 项目通过CMake编译&#xff0c…

C语言:自定义类型:联合体和枚举

目录 联合体 联合体是什么&#xff1f; 联合体的大小计算 枚举 枚举是什么&#xff1f; 为什么要使用枚举&#xff1f; 联合体 联合体是什么&#xff1f; 联合体也是个自定义类型&#xff0c;它和结构体类似&#xff0c;都是由多个成员构成&#xff0c;可以有不同的内置…

【OJ】动归练习二

个人主页 &#xff1a; zxctscl 如有转载请先通知 题目 1. 91.解码方法1.1 分析1.2 代码 2. 62.不同路径2.1 分析2.2 代码 3. 63.不同路径 II3.1 分析3.2 代码 1. 91.解码方法 1.1 分析 题目所述就是把一串数字反向解码为字母映射出来&#xff0c;有多少种方法。 题目也说&…

nav仿真(2)

开启仿真和建图 打开第一个窗口启动仿真&#xff1a; source devel/setup.bash export TURTLEBOT3_MODELburger roslaunch turtlebot3_gazebo turtlebot3_world.launch # 启动仿真打开第二个窗口&#xff0c;开始建图&#xff1a; source devel/setup.bash export TURTLEBOT3_…

mysql存储引擎、行锁与索引的关系

一、存储引擎概念介绍 MySQL中的数据用各种不同的技术存储在文件中&#xff0c;每一种技术都使用不同的存储机制、索引技巧、锁定水平并最终提供不同的功能和能力&#xff0c;这些不同的技术以及配套的功能在MySQL中称为存储引擎 存储引擎是MySQL将数据存储在文件系统中的存储…

隐语技术架构

隐语架构 产品定位 算法层 计算层 密码原语 互联互通–资源层 总结

数据结构(五)——树与二叉树的应用

5.5 树与二叉树的应用 5.5.1 哈夫曼树 结点的权&#xff1a;有某种现实含义的数值。 结点的带权路径长度&#xff1a;从树的根到该结点的路径长度&#xff08;经过的边数&#xff09;与该结点上权值的乘积。 树的带权路径长度&#xff1a;树中所有叶结点的带权路径长度之和…

linux系统------------Mysql数据库介绍、编译安装

目录 一、数据库基本概念 1.1数据(Data) 1.2表 1.3数据库 1.4数据库管理系统(DBMS) 数据库管理系统DBMS原理 1.5数据库系统&#xff08;DBS) 二、数据库发展史 1、第一代数据库 2、第二代数据库 3、第三代数据库 三、关系型数据库 3.1关系型数据库应用 3.2主流的…

Saltstack 最大打开文件数问题之奇怪的 8192

哈喽大家好&#xff0c;我是咸鱼。 今天分享一个在压测过程中遇到的问题&#xff0c;当时排查这个问题费了我们好大的劲&#xff0c;所以我觉得有必要写一篇文章来记录一下。 问题出现 周末在进行压测的时候&#xff0c;测试和开发的同事反映压测有问题&#xff0c;请求打到…

一键实现数据采集和存储:Python爬虫、Pandas和Excel的应用技巧

作为一名互联网技术爱好者&#xff0c;我对数据的探索充满热情。在本文中&#xff0c;我将以豆瓣读书为案例&#xff0c;详细介绍如何利用Python爬虫、Pandas和Excel这三大工具&#xff0c;一键化地实现数据采集和存储。豆瓣读书作为一个备受推崇的图书评价平台&#xff0c;拥有…

亮剑AIGC,紫光云能否胜人一筹?

【全球云观察 &#xff5c; 科技热点关注】 扎实创新每一步&#xff0c; 先人一步快人一步。 2023年全球科技行业最火的莫过于生成式AI&#xff0c;即Artificial Intelligence Generated Content。在迈向生成式AI的道路上&#xff0c;虽然说不上千军万马&#xff0c;但是国内…

Python学习笔记------文件操作

编码 编码就是一种规则集合&#xff0c;记录了内容和二进制间进行相互转换的逻辑。 编码有许多中&#xff0c;我们最常用的是UTF-8编码 计算机只认识0和1&#xff0c;所以需要将内容翻译成0和1才能保存在计算机中。同时也需要编码&#xff0c;将计算机保存的0和1&#xff0c…