Vue（3）
一.生命周期及其四个阶段
Vue生命周期：一个Vue实例从创建到销毁的整个过程
生命周期四个阶段：①创建②挂载③更新④销毁
<body><div id="app"><h3>{{ title }}</h3><div><button @click="count--">-</button><span>{{ count }}</span><button @click="count++">+</button></div></div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>const app = new Vue({el: '#app',data: {count: 100,title: '计数器'},// 1. 创建阶段（准备数据）beforeCreate () {console.log('beforeCreate 响应式数据准备好之前', this.count)},created () {console.log('created 响应式数据准备好之后', this.count)// this.数据名 = 请求回来的数据// 可以开始发送初始化渲染的请求了},// 2. 挂载阶段（渲染模板）beforeMount () {console.log('beforeMount 模板渲染之前', document.querySelector('h3').innerHTML)},mounted () {console.log('mounted 模板渲染之后', document.querySelector('h3').innerHTML)// 可以开始操作dom了},// 3. 更新阶段(修改数据 → 更新视图)beforeUpdate () {console.log('beforeUpdate 数据修改了，视图还没更新', document.querySelector('span').innerHTML)},updated () {console.log('updated 数据修改了，视图已经更新', document.querySelector('span').innerHTML)},// 4. 卸载阶段beforeDestroy () {console.log('beforeDestroy, 卸载前')console.log('清除掉一些Vue以外的资源占用，定时器，延时器...')},destroyed () {console.log('destroyed，卸载后')}})</script>
</body>
二.created应用
created：响应式数据准备好了，可以开始发送初始化渲染请求
<head><style>* {margin: 0;padding: 0;list-style: none;}.news {display: flex;height: 120px;width: 600px;margin: 0 auto;padding: 20px 0;cursor: pointer;}.news .left {flex: 1;display: flex;flex-direction: column;justify-content: space-between;padding-right: 10px;}.news .left .title {font-size: 20px;}.news .left .info {color: #999999;}.news .left .info span {margin-right: 20px;}.news .right {width: 160px;height: 120px;}.news .right img {width: 100%;height: 100%;object-fit: cover;}</style>
</head>
<body><div id="app"><ul><li v-for="(item, index) in list" :key="item.id" class="news"><div class="left"><div class="title">{{ item.title }}</div><div class="info"><span>{{ item.source }}</span><span>{{ item.time }}</span></div></div><div class="right"><img :src="item.img" alt=""></div></li></ul></div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script><script>// 接口地址：http://hmajax.itheima.net/api/news// 请求方式：getconst app = new Vue({el: '#app',data: {list: []},async created () {// 1. 发送请求获取数据const res = await axios.get('http://hmajax.itheima.net/api/news')// 2. 更新到 list 中，用于页面渲染 v-forthis.list = res.data.data}})</script>
</body>
三.小黑的记账清单
<head><!-- CSS only --><linkrel="stylesheet"href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"/><style>.red {color: red!important;}.search {width: 300px;margin: 20px 0;}.my-form {display: flex;margin: 20px 0;}.my-form input {flex: 1;margin-right: 20px;}.table > :not(:first-child) {border-top: none;}.contain {display: flex;padding: 10px;}.list-box {flex: 1;padding: 0 30px;}.list-box a {text-decoration: none;}.echarts-box {width: 600px;height: 400px;padding: 30px;margin: 0 auto;border: 1px solid #ccc;}tfoot {font-weight: bold;}@media screen and (max-width: 1000px) {.contain {flex-wrap: wrap;}.list-box {width: 100%;}.echarts-box {margin-top: 30px;}}</style></head><body><div id="app"><div class="contain"><!-- 左侧列表 --><div class="list-box"><!-- 添加资产 --><form class="my-form"><input v-model.trim="name" type="text" class="form-control" placeholder="消费名称" /><input v-model.number="price" type="text" class="form-control" placeholder="消费价格" /><button @click="add" type="button" class="btn btn-primary">添加账单</button></form><table class="table table-hover"><thead><tr><th>编号</th><th>消费名称</th><th>消费价格</th><th>操作</th></tr></thead><tbody><tr v-for="(item, index) in list" :key="item.id"><td>{{ index + 1 }}</td><td>{{ item.name }}</td><td :class="{ red: item.price > 500 }">{{ item.price.toFixed(2) }}</td><td><a @click="del(item.id)" href="javascript:;">删除</a></td></tr></tbody><tfoot><tr><td colspan="4">消费总计： {{ totalPrice.toFixed(2) }}</td></tr></tfoot></table></div><!-- 右侧图表 --><div class="echarts-box" id="main"></div></div></div><script src="https://cdn.jsdelivr.net/npm/echarts@5.4.0/dist/echarts.min.js"></script><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script><script>/*** 接口文档地址：* https://www.apifox.cn/apidoc/shared-24459455-ebb1-4fdc-8df8-0aff8dc317a8/api-53371058* * 功能需求：* 1. 基本渲染* (1) 立刻发送请求获取数据 created* (2) 拿到数据，存到data的响应式数据中* (3) 结合数据，进行渲染 v-for* (4) 消费统计 => 计算属性* 2. 添加功能* (1) 收集表单数据 v-model* (2) 给添加按钮注册点击事件，发送添加请求* (3) 需要重新渲染* 3. 删除功能* (1) 注册点击事件，传参传 id* (2) 根据 id 发送删除请求* (3) 需要重新渲染* 4. 饼图渲染* (1) 初始化一个饼图 echarts.init(dom) mounted钩子实现* (2) 根据数据实时更新饼图 echarts.setOption({ ... })*/const app = new Vue({el: '#app',data: {list: [],name: '',price: ''},computed: {totalPrice () {return this.list.reduce((sum, item) => sum + item.price, 0)}},created () {// const res = await axios.get('https://applet-base-api-t.itheima.net/bill', {// params: {// creator: '小黑'// }// })// this.list = res.data.datathis.getList()},mounted () {this.myChart = echarts.init(document.querySelector('#main'))this.myChart.setOption({// 大标题title: {text: '消费账单列表',left: 'center'},// 提示框tooltip: {trigger: 'item'},// 图例legend: {orient: 'vertical',left: 'left'},// 数据项series: [{name: '消费账单',type: 'pie',radius: '50%', // 半径data: [// { value: 1048, name: '球鞋' },// { value: 735, name: '防晒霜' }],emphasis: {itemStyle: {shadowBlur: 10,shadowOffsetX: 0,shadowColor: 'rgba(0, 0, 0, 0.5)'}}}]})},methods: {async getList () {const res = await axios.get('https://applet-base-api-t.itheima.net/bill', {params: {creator: '小黑'}})this.list = res.data.data// 更新图表this.myChart.setOption({// 数据项series: [{// data: [// { value: 1048, name: '球鞋' },// { value: 735, name: '防晒霜' }// ]data: this.list.map(item => ({ value: item.price, name: item.name}))}]})},async add () {if (!this.name) {alert('请输入消费名称')return}if (typeof this.price !== 'number') {alert('请输入正确的消费价格')return}// 发送添加请求const res = await axios.post('https://applet-base-api-t.itheima.net/bill', {creator: '小黑',name: this.name,price: this.price})// 重新渲染一次this.getList()this.name = ''this.price = ''},async del (id) {// 根据 id 发送删除请求const res = await axios.delete(`https://applet-base-api-t.itheima.net/bill/${id}`)// 重新渲染this.getList()}}})</script></body>
四.工程化开发和脚手架Vue CLI
开发Vue的两种方式：
1.核心包传统开发模式：基于html / css / js文件，直接引入核心包，开发Vue
2.工程化开发模式：基于构建工具（例如：webpack）的环境中开发Vue
五.项目目录介绍和运行流程
六.组件化开发和根组件
组件化：一个页面可以拆分为一个个组件，每个组件有着自己独立的结构、样式、行为。
好处：便于维护，利于复用 → 提升开发效率
组件分类：普通组件、根组件。
根组件：整个应用最上层的组件，包裹所有普通小组件
APP.vue文件组成
①template：结构（有且只有一个根目录）
②script：js逻辑
③style：样式（可支持less，需要装包）
七.普通组件的注册使用
局部注册：只能在注册的组件内使用
①创建 . vue文件（三个部分组成）
②在使用的组件内导入并注册
<template><div class="App"><!-- 头部组件 --><HmHeader></HmHeader><!-- 主体组件 --><HmMain></HmMain><!-- 底部组件 --><HmFooter></HmFooter><!-- 如果 HmFooter + tab 出不来 → 需要配置 vscode设置中搜索 trigger on tab → 勾上--></div>
</template><script>
import HmHeader from './components/HmHeader.vue'
import HmMain from './components/HmMain.vue'
import HmFooter from './components/HmFooter.vue'
export default {components: {// '组件名': 组件对象HmHeader: HmHeader,HmMain,HmFooter}
}
</script><style>
.App {width: 600px;height: 700px;background-color: #87ceeb;margin: 0 auto;padding: 20px;
}
</style>
全局注册：所有组件内都能使用
使用：当成html标签使用
注意：组件名规范 → 大驼峰命名法，如HmHeader
①创建 . vue文件（三个部分组成）
②main . js中进行全局注册
<template><div class="App"><!-- 头部组件 --><HmHeader></HmHeader><!-- 主体组件 --><HmMain></HmMain><!-- 底部组件 --><HmFooter></HmFooter><!-- 如果 HmFooter + tab 出不来 → 需要配置 vscode设置中搜索 trigger on tab → 勾上--></div>
</template><script>
import HmHeader from './components/HmHeader.vue'
import HmMain from './components/HmMain.vue'
import HmFooter from './components/HmFooter.vue'
export default {components: {// '组件名': 组件对象HmHeader: HmHeader,HmMain,HmFooter}
}
</script><style>
.App {width: 600px;height: 700px;background-color: #87ceeb;margin: 0 auto;padding: 20px;
}
</style>
八.小兔鲜首页
<template><div class="App"><!-- 快捷链接 --><div class="shortcut"><div class="wrapper"><ul><li><a href="#" class="login">请先登录</a></li><li><a href="#">免费注册</a></li><li><a href="#">我的订单</a></li><li><a href="#">会员中心</a></li><li><a href="#">帮助中心</a></li><li><a href="#">在线客服</a></li><li><a href="#"><span class="iconfont icon-mobile-phone"></span>手机版</a></li></ul></div></div><!-- 头部导航 --><div class="header wrapper"><!-- logo --><div class="logo"><h1><a href="#">小兔鲜儿</a></h1></div><!-- 导航 --><div class="nav"><ul><li><a href="#">首页</a></li><li><a href="#">生鲜</a></li><li><a href="#">美食</a></li><li><a href="#">餐厨</a></li><li><a href="#">电器</a></li><li><a href="#">居家</a></li><li><a href="#">洗护</a></li><li><a href="#">孕婴</a></li><li><a href="#">服装</a></li></ul></div><!-- 搜索 --><div class="search"><span class="iconfont icon-search"></span><input type="text" placeholder="搜一搜" /></div><!-- 购物车 --><div class="cart"><span class="iconfont icon-cart-full"></span><i>2</i></div></div><!-- 轮播区域 --><div class="banner"><div class="wrapper"><!-- 图 --><ul class="pic"><li><a href="#"><img src="@/assets/images/banner1.png" alt="" /></a></li><li><a href="#"><img src="@/assets/images/banner1.png" alt="" /></a></li></ul><!-- 侧导航 --><div class="subnav"><ul><li><div><span><a href="#">生鲜</a></span><span><a href="#">水果</a><a href="#">蔬菜</a></span></div><i class="iconfont icon-arrow-right-bold"></i></li><li><div><span><a href="#">美食</a></span><span><a href="#">面点</a><a href="#">干果</a></span></div><i class="iconfont icon-arrow-right-bold"></i></li><li><div><span><a href="#">餐厨</a></span><span><a href="#">数码产品</a></span></div><i class="iconfont icon-arrow-right-bold"></i></li><li><div><span><a href="#">电器</a></span><span><a href="#">床品</a><a href="#">四件套</a><a href="#">被枕</a></span></div><i class="iconfont icon-arrow-right-bold"></i></li><li><div><span><a href="#">居家</a></span><span><a href="#">奶粉</a><a href="#">玩具</a><a href="#">辅食</a></span></div><i class="iconfont icon-arrow-right-bold"></i></li><li><div><span><a href="#">洗护</a></span><span><a href="#">洗发</a><a href="#">洗护</a><a href="#">美妆</a></span></div><i class="iconfont icon-arrow-right-bold"></i></li><li><div><span><a href="#">孕婴</a></span><span><a href="#">奶粉</a><a href="#">玩具</a></span></div><i class="iconfont icon-arrow-right-bold"></i></li><li><div><span><a href="#">服饰</a></span><span><a href="#">女装</a><a href="#">男装</a></span></div><i class="iconfont icon-arrow-right-bold"></i></li><li><div><span><a href="#">杂货</a></span><span><a href="#">户外</a><a href="#">图书</a></span></div><i class="iconfont icon-arrow-right-bold"></i></li><li><div><span><a href="#">品牌</a></span><span><a href="#">品牌制造</a></span></div><i class="iconfont icon-arrow-right-bold"></i></li></ul></div><!-- 指示器 --><ol><li class="current"><i></i></li><li><i></i></li><li><i></i></li></ol></div></div><!-- 新鲜好物 --><div class="goods wrapper"><div class="title"><div class="left"><h3>新鲜好物</h3><p>新鲜出炉 品质靠谱</p></div><div class="right"><a href="#" class="more">查看全部<span class="iconfont icon-arrow-right-bold"></span></a></div></div><div class="bd"><ul><li><a href="#"><div class="pic"><img src="@/assets/images/goods1.png" alt="" /></div><div class="txt"><h4>KN95级莫兰迪色防护口罩</h4><p>¥ <span>79</span></p></div></a></li><li><a href="#"><div class="pic"><img src="@/assets/images/goods2.png" alt="" /></div><div class="txt"><h4>KN95级莫兰迪色防护口罩</h4><p>¥ <span>566</span></p></div></a></li><li><a href="#"><div class="pic"><img src="@/assets/images/goods3.png" alt="" /></div><div class="txt"><h4>法拉蒙高颜值记事本可定制</h4><p>¥ <span>58</span></p></div></a></li><li><a href="#"><div class="pic"><img src="@/assets/images/goods4.png" alt="" /></div><div class="txt"><h4>科技布布艺沙发</h4><p>¥ <span>3759</span></p></div></a></li></ul></div></div><!-- 热门品牌 --><div class="hot"><div class="wrapper"><div class="title"><div class="left"><h3>热门品牌</h3><p>国际经典 品质认证</p></div><div class="button"><a href="#"><i class="iconfont icon-arrow-left-bold"></i></a><a href="#"><i class="iconfont icon-arrow-right-bold"></i></a></div></div><div class="bd"><ul><li><a href="#"><img src="@/assets/images/hot1.png" alt="" /></a></li><li><a href="#"><img src="@/assets/images/hot2.png" alt="" /></a></li><li><a href="#"><img src="@/assets/images/hot3.png" alt="" /></a></li><li><a href="#"><img src="@/assets/images/hot4.png" alt="" /></a></li><li><a href="#"><img src="@/assets/images/hot5.png" alt="" /></a></li></ul></div></div></div><!-- 最新专题 --><div class="topic wrapper"><div class="title"><div class="left"><h3>最新专题</h3></div><div class="right"><a href="#" class="more">查看全部<span class="iconfont icon-arrow-right-bold"></span></a></div></div><div class="topic_bd"><ul><li><a href="#"><div class="pic"><img src="@/assets/images/topic1.png" alt="" /><div class="info"><div class="left"><h5>吃这些美食才不算辜负自己</h5><p>餐厨起居洗护好物</p></div><div class="right">¥<span>29.9</span>起</div></div></div><div class="txt"><div class="left"><p><span class="iconfont icon-favorites-fill red"></span><i>1200</i></p><p><span class="iconfont icon-browse"></span><i>1800</i></p></div><div class="right"><span class="iconfont icon-comment"></span><i>246</i></div></div></a></li><li><a href="#"><div class="pic"><img src="@/assets/images/topic2.png" alt="" /><div class="info"><div class="left"><h5>吃这些美食才不算辜负自己</h5><p>餐厨起居洗护好物</p></div><div class="right">¥<span>29.9</span>起</div></div></div><div class="txt"><div class="left"><p><span class="iconfont icon-fabulous"></span><i>1200</i></p><p><span class="iconfont icon-browse"></span><i>1800</i></p></div><div class="right"><span class="iconfont icon-comment"></span><i>246</i></div></div></a></li><li><a href="#"><div class="pic"><img src="@/assets/images/topic3.png" alt="" /><div class="info"><div class="left"><h5>吃这些美食才不算辜负自己</h5><p>餐厨起居洗护好物</p></div><div class="right">¥<span>29.9</span>起</div></div></div><div class="txt"><div class="left"><p><span class="iconfont icon-fabulous"></span><i>1200</i></p><p><span class="iconfont icon-browse"></span><i>1800</i></p></div><div class="right"><span class="iconfont icon-comment"></span><i>246</i></div></div></a></li></ul></div></div><!-- 版权底部 --><div class="footer"><div class="wrapper"><div class="service"><ul><li><span></span><p>价格亲民</p></li><li><span></span><p>物流快捷</p></li><li><span></span><p>品质新鲜</p></li><li><span></span><p>售后无忧</p></li></ul></div><div class="help"><div class="left"><dl><dt>购物指南</dt><dd><a href="#">购物流程</a></dd><dd><a href="#">支付方式</a></dd><dd><a href="#">售后规则</a></dd></dl><dl><dt>配送方式</dt><dd><a href="#">配送运费</a></dd><dd><a href="#">配送范围</a></dd><dd><a href="#">配送时间</a></dd></dl><dl><dt>关于我们</dt><dd><a href="#">平台规则</a></dd><dd><a href="#">联系我们</a></dd><dd><a href="#">问题反馈</a></dd></dl><dl><dt>售后服务</dt><dd><a href="#">售后政策</a></dd><dd><a href="#">退款说明</a></dd><dd><a href="#">取消订单</a></dd></dl><dl><dt>服务热线</dt><dd><a href="#">在线客服<span class="iconfont icon-customer-service"></span></a></dd><dd><a href="#">客服电话 400-0000-000</a></dd><dd><a href="#">工作时间 周一至周日 8:00-18:00</a></dd></dl></div><div class="right"><ul><li><div><img src="@/assets/images/wechat.png" alt="" /></div><p>微信公众号</p></li><li><div><img src="@/assets/images/app.png" alt="" /></div><p>APP下载二维码</p></li></ul></div></div><div class="copyright"><p><a href="#">关于我们</a>|<a href="#">帮助中心</a>|<a href="#">售后服务</a>|<a href="#">配送与验收</a>|<a href="#">商务合作</a>|<a href="#">搜索推荐</a>|<a href="#">友情链接</a></p><p>CopyRight © 小兔鲜</p></div></div></div></div>
</template><script>
export default {}
</script><style></style>
相关文章：
Vue（3）
一.生命周期及其四个阶段 Vue生命周期：一个Vue实例从创建到销毁的整个过程 生命周期四个阶段：①创建②挂载③更新④销毁 <body><div id"app"><h3>{{ title }}</h3><div><button click"count--"&…...
11vue3实战-----封装缓存工具
11vue3实战-----封装缓存工具 1.背景2.pinia的持久化思路3.以localStorage为例解决问题4.封装缓存工具 1.背景 在上一章节，实现登录功能时候，当账号密码正确，身份验证成功之后，把用户信息保存起来，是用的pinia。然而p…...
第16章 Single Thread Execution设计模式（Java高并发编程详解：多线程与系统设计）
简单来说， Single Thread Execution就是采用排他式的操作保证在同一时刻只能有一个线程访问共享资源。 1.机场过安检 1.1非线程安全 先模拟一个非线程安全的安检口类，旅客(线程)分别手持登机牌和身份证接受工作人员的检查，示例代码如所示。…...
MySQL 8.0.41 终端修改root密码
1.在 MySQL 命令行中，运行以下命令修改密码 ALTER USER rootlocalhost IDENTIFIED BY new_password; 其中，new_password替换为你想要设置的新密码 2.退出 MySQL终端，重新打开，使用新密码进入，修改成功...
微信小程序案例2——天气微信小程序（学会绑定数据）
文章目录 一、项目步骤1 创建一个weather项目2 进入index.wxml、index.js、index.wxss文件，清空所有内容，进入App.json，修改导航栏标题为“中国天气网”。3进入index.wxml，进行当天天气情况的界面布局，包括温度、最低温、最高温、天气情况、城市、星期、风行情况，代码如下…...
android的Compose 简介
Jetpack Compose 简介 Jetpack Compose 是 Android 官方推出的声明式 UI 工具包，用于替代传统 XML 布局，简化界面开发流程。它基于 Kotlin 语言，通过函数式编程实现高效、灵活的 UI 构建，支持实时预览和更直观的状态管理。 优势…...
缓存实战：Redis 与本地缓存
引言 在现代互联网应用中，缓存是提升系统性能和用户体验的关键技术之一。通过将频繁访问的数据存储在快速访问的存储介质中，可以显著减少对数据库的直接访问压力，从而提高系统的响应速度和吞吐量。 本文将从实战的角度出发，详细…...
apisix的real-ip插件使用说明
k8s集群入口一般都需要过负载均衡，然后再到apisix。 这时候如果后台业务需要获取客户端ip，可能拿到的是lb或者网关的内网ip。 这里一般要获取真实ip需要做几个处理。 1. 负载均衡上，一般支持配置获取真实ip参数，需要配置上。然…...
音视频协议
1. 多媒体信息 1.1 多媒体信息的两个主要特点： 信息量很大 标准语音：64Kbits(8KHz采样，8位编码)高质量音频：3Mbps(100KHz采样，12位编码) 在传输多媒体数据时，对时延和时延抖动均有较高要求 1.2 处理时延…...
第一财经对话东土科技 | 探索工业科技新边界
当前以ChatGPT、Sora等为代表的生成式人工智能快速发展，越来越多面向垂直场景的行业大模型涌现出来，并成为推动制造业智能化改造与数字化转型、加快推进新型工业化，进而培育发展新质生产力的新引擎。 在垂类场景的应用落地，是AI发…...
Maven 与企业项目的集成
1. Maven 在企业级项目中的作用 Maven 是 Java 生态中最流行的构建和依赖管理工具，广泛用于企业级项目的构建、依赖管理、测试、打包、部署和 CI/CD 集成。对于大型企业项目，Maven 提供了一整套标准化的构建流程，并支持 多模块（M…...
激活函数篇 01 —— 激活函数在神经网络的作用
欢迎来到我的主页：【Echo-Nie】 本篇文章收录于专栏【机器学习】 以下是激活函数系列的相关的所有内容: 激活函数篇 01 —— 一文搞懂激活函数在神经网络中的作用 逻辑回归：Sigmoid函数在分类问题中的应用 1 激活函数的作用 1.1 引入非线性 激活函数…...
22.2、Apache安全分析与增强
目录 Apache Web安全分析与增强 - Apache Web概述Apache Web安全分析与增强 - Apache Web安全威胁Apache Web安全机制Apache Web安全增强 Apache Web安全分析与增强 - Apache Web概述 阿帕奇是一个用于搭建WEB服务器的应用程序，它是开源的，它的配置文件…...
Day.23
leetcode 413.等差数列划分 问题：如果一个数列 至少有三个元素 ，并且任意两个相邻元素之差相同，则称该数列为等差数列。给你一个整数数组 nums ，返回数组 nums 中所有为等差数组的 子数组 个数。 子数组 是数组中的一个连续序列…...
CentOS虚机在线扩容系统盘数据盘
最近在制作Openstack下的镜像，用户需要CentOS6以及CentOS7的虚机镜像，遇到了些关于系统盘以及数据盘在线扩容的问题，故此整理一下。 传统我们想对磁盘在线热扩容，必然会想到LVM逻辑卷。如果没有LVM逻辑卷的情况下，…...
动手写ORM框架 - GeeORM第一天 database/sql 基础
文章目录 1 初识 SQLite2 database/sql 标准库3 实现一个简单的 log 库4 核心结构 Session本文是7天用Go从零实现ORM框架GeeORM的第一篇。介绍了 SQLite 的基础操作（连接数据库，创建表、增删记录等）。使用 Go 语言标准库 database/sql 连接并操作 SQLite 数据库，并简单封装…...
绘制中国平安股价的交互式 K 线图
在本文中，探索如何使用 Python 的强大库进行股市数据分析与可视化。我们将以中国平安（股票代码：sh601318）为例，展示如何获取其股票数据，并绘制一张交互式 K 线图。 K 线图是股市分析中不可或缺的工具，它能够直观地显示股票的波动情况，包括开盘价、收盘价、最高价和最低…...
[渗透测试]热门搜索引擎推荐— — shodan篇
[渗透测试]热门搜索引擎推荐— — shodan篇 免责声明：本文仅用于分享渗透测试工具，大家使用时，一定需要遵守相关法律法规。 除了shodan，还有很多其他热门的，比如：fofa、奇安信的鹰图、钟馗之眼等࿰…...
JavaScript 在 VSCode 中的优势与应用
JavaScript 在 VSCode 中的优势与应用 引言 随着前端技术的发展，JavaScript 已经成为了网页开发中最流行的编程语言之一。Visual Studio Code（简称 VSCode）作为一款轻量级、可扩展的代码编辑器，因其强大的功能和良好的用户体验，深受广大开发者的喜爱。本文将探讨 JavaSc…...
深度学习之StyleGAN算法解析
StyleGAN 算法解析及详细介绍 1. StyleGAN 算法由来 StyleGAN（Style-Based Generative Adversarial Network）是 NVIDIA 于 2018 年 提出的 高质量图像生成算法，由 Tero Karras 等人在论文 《A Style-Based Generator Architecture for Generative Adversarial Networks》 …...
数据结构之排序
排序 参考链接： https://zq99299.github.io/dsalg-tutorial/dsalg-java-hsp/07/09.html#%E7%AE%80%E5%8D%95%E4%BB%8B%E7%BB%8D 基数排序 计数排序 https://www.hello-algo.com/chapter_sorting/counting_sort/...
Vue.js 与第三方插件的集成
Vue.js 与第三方插件的集成 今天我们来聊聊如何在 Vue 项目中集成第三方插件。随着项目功能不断增多，我们常常需要引入各种第三方库和插件，比如国际化、图表、日期处理等，来提升开发效率和用户体验。下面就跟大家分享一下集成第三方插件的常…...
基于Docker搭建ES集群,并设置冷热数据节点
1.背景 存在三台服务器分别是 192.168.2.91(master节点、data-content节点、data-hot节点)、192.168.2.92(data-cold节点、ingest节点)、192.168.2.93(master节点、data-content节点、data-hot节点) 冷热数据分离搭建教程 2.搭建91节点 热数据节点 （1࿰…...
MyBatis常见知识点
#{} 和 ${} 的区别是什么？ 答： ${}是 Properties 文件中的变量占位符，它可以用于标签属性值和 sql 内部，属于原样文本替换，可以替换任意内容，比如${driver}会被原样替换为com.mysql.jdbc. Driver。 一个…...
Redis --- 使用GEO实现经纬度距离计算
什么是GEO？ Spring Boot 项目中可以通过 Spring Data Redis 来使用 Redis GEO 功能，主要通过 RedisTemplate 和 GeoOperations 接口来操作地理位置数据。 Service public class GeoService {Autowiredprivate RedisTemplate<String, Object> red…...
【0403】Postgres内核 检查（procArray ）给定 db 是否有其他 backend process 正在运行
文章目录 1. 给定 db 是否有其他 backend 正在运行1.1 获取 allPgXact[] 索引1.1.1 MyProc 中 databaseId 初始化实现1.2 allProcs[] 中各 databaseId 判断1. 给定 db 是否有其他 backend 正在运行 CREATE DATABASE 语句创建用户指定 数据库名（database-name）时候， 会通过 …...
[数据结构] Set的使用与注意事项
目录 Set的说明 常见方法说明 注意事项 TreeSet使用案例 Set的说明 Set与Map主要的不同有两点: Set是继承自Collection的接口类,Set中只存储了Key. 常见方法说明 方法解释boolean add(E e)添加元素,但重复元素不会被添加成功void clear()清空集合boolean contains(Object…...
amis组件crud使用踩坑
crud注意 过滤条件参数同步地址栏 默认 CRUD 会将过滤条件参数同步至浏览器地址栏中，比如搜索条件、当前页数，这也做的目的是刷新页面的时候还能进入之前的分页。 但也会导致地址栏中的参数数据合并到顶层的数据链中，例如：自动…...
离线统信系统的python第三方库批量安装流程
一、关于UOS本机 操作系统：UOS（基于Debian的Linux发行版） CPU：海光x86 二、具体步骤 1、在联网的电脑上用控制台的pip命令批量下载指定版本的第三方库 方法A cd <目标位置的绝对路径> pip download -d . --platform many…...
韶音科技：消费电子行业售后服务实现数字化转型，重塑客户服务体系
韶音科技：消费电子行业售后服务实现数字化转型，重塑客户服务体系 在当今这个科技日新月异的时代，企业之间的竞争早已超越了单纯的产品质量比拼，**售后服务成为了衡量消费电子行业各品牌实力与客户满意度的关键一环。**深圳市韶音…...