当前位置：首页 > news >正文

Vue（3）

news 2025/9/18 10:49:45

一.生命周期及其四个阶段

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--"&…...

编程日记 2025/2/10 20:09:58

11vue3实战-----封装缓存工具

11vue3实战-----封装缓存工具 1.背景2.pinia的持久化思路3.以localStorage为例解决问题4.封装缓存工具 1.背景在上一章节，实现登录功能时候，当账号密码正确，身份验证成功之后，把用户信息保存起来，是用的pinia。然而p…...

编程日记 2025/2/10 20:07:54

第16章 Single Thread Execution设计模式（Java高并发编程详解：多线程与系统设计）

简单来说， Single Thread Execution就是采用排他式的操作保证在同一时刻只能有一个线程访问共享资源。 1.机场过安检 1.1非线程安全先模拟一个非线程安全的安检口类，旅客(线程)分别手持登机牌和身份证接受工作人员的检查，示例代码如所示。…...

编程日记 2025/2/10 20:03:43

MySQL 8.0.41 终端修改root密码

1.在 MySQL 命令行中，运行以下命令修改密码 ALTER USER rootlocalhost IDENTIFIED BY new_password; 其中，new_password替换为你想要设置的新密码 2.退出 MySQL终端，重新打开，使用新密码进入，修改成功...

编程日记 2025/2/10 20:00:39

微信小程序案例2——天气微信小程序（学会绑定数据）

文章目录一、项目步骤1 创建一个weather项目2 进入index.wxml、index.js、index.wxss文件，清空所有内容，进入App.json，修改导航栏标题为“中国天气网”。3进入index.wxml，进行当天天气情况的界面布局，包括温度、最低温、最高温、天气情况、城市、星期、风行情况，代码如下…...

编程日记 2025/2/10 19:53:27

android的Compose 简介

Jetpack Compose 简介 Jetpack Compose 是 Android 官方推出的声明式 UI 工具包，用于替代传统 XML 布局，简化界面开发流程。它基于 Kotlin 语言，通过函数式编程实现高效、灵活的 UI 构建，支持实时预览和更直观的状态管理。优势…...

编程日记 2025/2/10 19:48:16

缓存实战：Redis 与本地缓存

引言在现代互联网应用中，缓存是提升系统性能和用户体验的关键技术之一。通过将频繁访问的数据存储在快速访问的存储介质中，可以显著减少对数据库的直接访问压力，从而提高系统的响应速度和吞吐量。本文将从实战的角度出发，详细…...

编程日记 2025/2/10 19:47:14

apisix的real-ip插件使用说明

k8s集群入口一般都需要过负载均衡，然后再到apisix。这时候如果后台业务需要获取客户端ip，可能拿到的是lb或者网关的内网ip。这里一般要获取真实ip需要做几个处理。 1. 负载均衡上，一般支持配置获取真实ip参数，需要配置上。然…...

编程日记 2025/2/10 19:44:10

音视频协议

1. 多媒体信息 1.1 多媒体信息的两个主要特点： 信息量很大标准语音：64Kbits(8KHz采样，8位编码)高质量音频：3Mbps(100KHz采样，12位编码) 在传输多媒体数据时，对时延和时延抖动均有较高要求 1.2 处理时延…...

编程日记 2025/2/10 19:37:01

第一财经对话东土科技 | 探索工业科技新边界

当前以ChatGPT、Sora等为代表的生成式人工智能快速发展，越来越多面向垂直场景的行业大模型涌现出来，并成为推动制造业智能化改造与数字化转型、加快推进新型工业化，进而培育发展新质生产力的新引擎。在垂类场景的应用落地，是AI发…...

编程日记 2025/2/10 19:35:57

Maven 与企业项目的集成

1. Maven 在企业级项目中的作用 Maven 是 Java 生态中最流行的构建和依赖管理工具，广泛用于企业级项目的构建、依赖管理、测试、打包、部署和 CI/CD 集成。对于大型企业项目，Maven 提供了一整套标准化的构建流程，并支持多模块（M…...

编程日记 2025/2/10 19:33:55

激活函数篇 01 —— 激活函数在神经网络的作用

欢迎来到我的主页：【Echo-Nie】本篇文章收录于专栏【机器学习】以下是激活函数系列的相关的所有内容: 激活函数篇 01 —— 一文搞懂激活函数在神经网络中的作用逻辑回归：Sigmoid函数在分类问题中的应用 1 激活函数的作用 1.1 引入非线性激活函数…...

编程日记 2025/2/10 19:32:53

22.2、Apache安全分析与增强

目录 Apache Web安全分析与增强 - Apache Web概述Apache Web安全分析与增强 - Apache Web安全威胁Apache Web安全机制Apache Web安全增强 Apache Web安全分析与增强 - Apache Web概述阿帕奇是一个用于搭建WEB服务器的应用程序，它是开源的，它的配置文件…...

编程日记 2025/2/10 19:31:52

Day.23

leetcode 413.等差数列划分问题：如果一个数列至少有三个元素 ，并且任意两个相邻元素之差相同，则称该数列为等差数列。给你一个整数数组 nums ，返回数组 nums 中所有为等差数组的子数组个数。子数组是数组中的一个连续序列…...

编程日记 2025/2/10 19:30:51

CentOS虚机在线扩容系统盘数据盘

最近在制作Openstack下的镜像，用户需要CentOS6以及CentOS7的虚机镜像，遇到了些关于系统盘以及数据盘在线扩容的问题，故此整理一下。传统我们想对磁盘在线热扩容，必然会想到LVM逻辑卷。如果没有LVM逻辑卷的情况下，…...

编程日记 2025/2/10 19:28:48

动手写ORM框架 - GeeORM第一天 database/sql 基础

文章目录 1 初识 SQLite2 database/sql 标准库3 实现一个简单的 log 库4 核心结构 Session本文是7天用Go从零实现ORM框架GeeORM的第一篇。介绍了 SQLite 的基础操作（连接数据库，创建表、增删记录等）。使用 Go 语言标准库 database/sql 连接并操作 SQLite 数据库，并简单封装…...

编程日记 2025/2/10 19:23:42

绘制中国平安股价的交互式 K 线图

在本文中，探索如何使用 Python 的强大库进行股市数据分析与可视化。我们将以中国平安（股票代码：sh601318）为例，展示如何获取其股票数据，并绘制一张交互式 K 线图。 K 线图是股市分析中不可或缺的工具，它能够直观地显示股票的波动情况，包括开盘价、收盘价、最高价和最低…...

编程日记 2025/2/10 19:22:37

[渗透测试]热门搜索引擎推荐— — shodan篇

[渗透测试]热门搜索引擎推荐— — shodan篇免责声明：本文仅用于分享渗透测试工具，大家使用时，一定需要遵守相关法律法规。除了shodan，还有很多其他热门的，比如：fofa、奇安信的鹰图、钟馗之眼等&#xff0…...

编程日记 2025/2/10 19:17:31

JavaScript 在 VSCode 中的优势与应用

JavaScript 在 VSCode 中的优势与应用引言随着前端技术的发展，JavaScript 已经成为了网页开发中最流行的编程语言之一。Visual Studio Code（简称 VSCode）作为一款轻量级、可扩展的代码编辑器，因其强大的功能和良好的用户体验，深受广大开发者的喜爱。本文将探讨 JavaSc…...

编程日记 2025/2/10 19:10:18

StyleGAN 算法解析及详细介绍 1. StyleGAN 算法由来 StyleGAN（Style-Based Generative Adversarial Network）是 NVIDIA 于 2018 年提出的高质量图像生成算法，由 Tero Karras 等人在论文《A Style-Based Generator Architecture for Generative Adversarial Networks》 …...

编程日记 2025/2/10 19:06:14

vscode里如何用git

打开vs终端执行如下： 1 初始化 Git 仓库（如果尚未初始化） git init 2 添加文件到 Git 仓库 git add . 3 使用 git commit 命令来提交你的更改。确保在提交时加上一个有用的消息。 git commit -m "备注信息" 4 …...

编程新知 2025/8/24 20:45:38

React 第五十五节 Router 中 useAsyncError的使用详解

前言 useAsyncError 是 React Router v6.4 引入的一个钩子，用于处理异步操作（如数据加载）中的错误。下面我将详细解释其用途并提供代码示例。一、useAsyncError 用途处理异步错误：捕获在 loader 或 action 中发生的异步错误替…...

编程新知 2025/9/1 12:53:45

DeepSeek 赋能智慧能源：微电网优化调度的智能革新路径

目录一、智慧能源微电网优化调度概述1.1 智慧能源微电网概念1.2 优化调度的重要性1.3 目前面临的挑战二、DeepSeek 技术探秘2.1 DeepSeek 技术原理2.2 DeepSeek 独特优势2.3 DeepSeek 在 AI 领域地位三、DeepSeek 在微电网优化调度中的应用剖析3.1 数据处理与分析3.2 预测与…...

编程新知 2025/6/15 19:07:20

2024年赣州旅游投资集团社会招聘笔试真

2024年赣州旅游投资集团社会招聘笔试真题 ( 满分 1 0 0 分时间 1 2 0 分钟 ) 一、单选题(每题只有一个正确答案，答错、不答或多答均不得分) 1.纪要的特点不包括()。 A.概括重点 B.指导传达 C. 客观纪实 D.有言必录【答案】: D 2.1864年，()预言了电磁波的存在，并指出…...

编程新知 2025/7/25 10:29:46

Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility

Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility 1. 实验室环境1.1 实验室环境1.2 小测试 2. The Endor System2.1 部署应用2.2 检查现有策略 3. Cilium 策略实体3.1 创建 allow-all 网络策略3.2 在 Hubble CLI 中验证网络策略源3.3 …...

编程新知 2025/9/11 12:54:55

Vue2 第一节_Vue2上手_插值表达式{{}}_访问数据和修改数据_Vue开发者工具

文章目录 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染2. 插值表达式{{}}3. 访问数据和修改数据4. vue响应式5. Vue开发者工具--方便调试 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染准备容器引包创建Vue实例 new Vue()指定配置项 ->渲染数据准备一个容器,例如: …...

编程新知 2025/8/30 16:47:37