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

vue3搭建实战项目笔记三

vue3搭建实战项目笔记三

      • 3.1.行高偏移问题
      • 3.2.谷歌浏览器上不能定位
        • 3.2.2 移动端css隐藏滚动条
      • 3.3.获取列表的数据
        • 3.3.1 服务器返回十万条数据
        • 3.3.2 分页展示数据
        • 3.3.2 防止展示数据为空报错
      • 3.4.上拉加载数据
        • 3.4.1 加载更多数据
        • 3.4.2 监听页面滚动到底部
        • 3.4.3 监听滚动的时机
        • 3.4.4 监听滚动抽取成hooks
        • 3.4.5 useScrollHook在页面中使用
        • 3.4.6 监听滚动距离scrollTop
        • 3.4.7 优化scrollHook
      • 3.5.显示头部搜索
      • 3.6 解决手动切换路由不更新tarBar的问题
      • 3.7 开始时间和结束的共享

3.1.行高偏移问题

  • 3.1.1.引入了normalize.css,引起的行高偏差问题
    - 1.产生的原因:
    • 由于引入了normalize.css, 所以html的line-height: 1.15;
    • line-height是会继承的,line-height没有设置单位,相当于是fontSize的倍数
    • 例如:
          line-height: 2; => 12*2 = 24pxfont-size: 12px;
      
    • line-height去掉文字的高度后再进行平方,1.15*12 = 13.8
    • 去掉文字高度后,只剩下1.8 无法平方,可能有些浏览器会下面来个1,上面来一个0(0.8做一个向下取证Math.floor(0.8))
- 2.防止行高偏差的解决方案:在assets文件夹下的css目录下的reset.css进行html行高的重置```csshtml {/* 目前大多数浏览器的line-height:1.2是比较常见的 */line-height: 1.2; }```
- 3.补充:中文的文字会向上偏移一点点,英文反而是有一点点向下沉的

3.2.谷歌浏览器上不能定位

  • 1.在Edge浏览器测试定位
    Edge浏览器在渲染界面的时候,渲染的引擎对应的chrome里面的Blink是一样的
    在实现一些API的时候不一样的
  • 2.拿到对应的经纬度发送给服务器(或第三方服务器百度,高德)并返回城市信息
    • longitude:113.2643
    • latitude: 23.129
  • 3.分析谷歌浏览器不能定位的原因:
    • 3.1.如果电脑可以连上国外的服务器,就可以获取到对应的定位信息
    • 3.2.edge浏览器和chrome浏览器对于geolocation.getCurrentPosition()的实现不一样
      • edge:
      • 获取当前位置信息,是直接获取下电脑有没有获取到当前用户的位置,如果有获取的到直接返回当前用户位置
      • chrome:
      • 拿到当前电脑的IP地址,把IP地址发送给谷歌服务器,要求必须先连接上谷歌的服务器,
        在国内是连接不上谷歌服务器的,连接不上就没法根据IP地址分析出当前位置,无法返回对应的地址信息
      • 手机上是可以正常获取的
    • 3.3.解决:
      在edge、手机上是可以正常获取到定位信息
  • 4.参考文档:https://www.w3.org/TR/geolocation/#introduction
    • geolocationAPI是一个高度抽象的接口,就是不告诉内部怎么实现的
    • 内部是不管不规定是如何通过IP地址、GPS、RFID、WiFi、蓝牙等设备信息来分析出当前用户的位置信息,只是和设备的速度有关联
    • 在谷歌PC端,谷歌是通过IP地址来分析出当前用户的位置信息,不保证返回的一定是当前设备的真实位置
  • 5.补充:sdk - software development kit
  • 完整代码:
        navigator.geolocation.getCurrentPosition((renderToString) => {// latitude// 纬度// longitude// 经度console.log('获取位置成功:', renderToString);}, (res) => {console.log('获取位置失败:', res);},{enableHighAccuracy: true,timeout: 5000,maximumAge: 0,})
    
3.2.2 移动端css隐藏滚动条
  ::webkit-scrollbar {display: none;}

3.3.获取列表的数据

3.3.1 服务器返回十万条数据
    1. 在当前应用程序里开一个对应的线程(多线程的东西-webworker)
    1. 虚拟列表,比较少见
    1. 一般在整个项目架构的时候不推荐返回十万条数据,除非非常需要,最好不要放在前端处理十万条数据,前端出处理十万条数据,会让浏览器变得非常卡,对用户体验不好,让服务器去处理去占用对应的资源,让前端来做展示(用户浏览器占用过多资源的话,会造成卡顿,体验不好,最好不要这么做)
  • 两种做法如下:
    1. 引入第三方库 axios,直接在组件页面直接使用axios发送网络请求,但是这样来做不好,不利于代码维护
    2. 最好对axios做一层封装,不管是复用性、可用性、可维护性,甚至框架的替换都是更方便的
3.3.2 分页展示数据
  • 1.分页请求传参
    页码和每页条数 page, size (服务器有做分页的情况下)
    每页条数和偏移 size offset=0,30,60 (服务器没有做分页的情况下)
3.3.2 防止展示数据为空报错
- 1.使用可选链?.```javascriptconst { userInfo } = getUserInfo()console.log(userInfo?.image?.url)```
- 2.使用v-if```html<div v-if="userInfo.image">{{userInfo.image.url}}</div>```

3.4.上拉加载数据

3.4.1 加载更多数据
- 1.在homeStore中定义一个页码来记录当前第几页,默认为第一页
- 2.每次点击加载更多,发送请求,请求成功后, 把数据添加到数组中,然后重新渲染页面, 然后页码+1。
- 3.代码如下:```javascript// 1.service.jsexport function getHomeCategories () {return hyRequest.get({ url: "/home/categories" })}// 2.homeStore.jsimport { defineStore } from "pinia";import { getHomeHouseList} from "@/service";const useHomeStore = defineStore("home", {state: () => ({currentPage: 1,houselist: []}),actions: {async fetchHouseListData () {const res = await getHomeHouseList(this.currentPage)this.houselist.push(...res.data)this.currentPage++}}})export default useHomeStore```
3.4.2 监听页面滚动到底部
- 1. 页面为什么会滚动- 1.1.window窗口滚动(整个页面所有内容超过100%并且有滚动条)- 1.2.元素滚动(元素设置overflow-y: auto)
- 2.监听滚动```javascript// window窗口的滚动window.addEventListener('scroll', () => {})// 元素的滚动divEl.addEventListener('scroll', () => {})```
- 3.监听滚动到底部- 3.1.想要知道滚动了多少区域 - 3.1.1. 它其实是我们对应文档的一个滚动,整个窗口之所以可以滚动,是因为它的文档变得非常的长,当往上面滚动的时候,有一个往上滚动的高度- 3.1.2. 往上滚动的高度叫做scrollTop- 3.2.怎么知道滚动到了底部- 3.2.1. 可以拿到整个文档可以滚动的区域scrollHeight(也相当于整个文档的高度)- 3.2.2. 拿到客户端的高度,如果客户端的高度 + scrollTop >= scrollHeight 说明滚动到底部- 3.3.代码如下: ```javascript// 监听窗口的滚动window.addEventListener('scroll', () => {const clientHeight = document.documentElement.clientHeightconst scrollTop = document.documentElement.scrollTopconst scrollHeight = document.documentElement.scrollHeightif (clientHeight + scrollTop >= scrollHeight) {// 如果说到达底部了,就加载更多数据homeStore.fetchHouseListData()}})```
3.4.3 监听滚动的时机
- 1. 当加载页面时,监听滚动```javascriptonMounted(() => {window.addEventListener('scroll', scrollListenerHandler)})```
- 2. 当离开页面时,移除监听滚动(原因:页面之间都监听了window的滚动,会影响下一个页面的监听滚动,所以需要再卸载页面移除滚动事件)```javascriptonUnmounted(() => {window.removeEventListener('scroll', scrollListenerHandler)}) ```
3.4.4 监听滚动抽取成hooks
- 在hooks中封装一个useScroll(原因:别的页面也需要进行类似的监听)- 1.1.判断滚动到底部的两种做法:1. 传入一个回调函数,一旦滚动到底部执行回调函数 ```javascriptimport { ref, onActivated, onDeactivated, onMounted, onUnmounted } from 'vue'export default function useScroll(reachBottomCB) {const scrollListenerHandler = () => {const clientHeight = document.documentElement.clientHeightconst scrollTop = document.documentElement.scrollTopconst scrollHeight = document.documentElement.scrollHeightif (clientHeight + scrollTop >= scrollHeight) {if(reachBottomCB) {reachBottomCB()}}}onMounted(() => {window.addEventListener('scroll', scrollListenerHandler)})onUnmounted(() => {window.removeEventListener('scroll', scrollListenerHandler)}) onActivated(() => {window.addEventListener('scroll', scrollListenerHandler)})onDeactivated(() => {window.removeEventListener('scroll', scrollListenerHandler)})}```2. 返回一个变量,代表是否滚动到底部原因:回调比较多的时候,不好管理,更好管理的是变量```javascriptimport { ref, onActivated, onDeactivated, onMounted, onUnmounted } from 'vue'export default function useScroll() {const isReachBottom = ref(false)const scrollListenerHandler = () => {const clientHeight = document.documentElement.clientHeightconst scrollTop = document.documentElement.scrollTopconst scrollHeight = document.documentElement.scrollHeightif (clientHeight + scrollTop >= scrollHeight) {isReachBottom.value = false}}onMounted(() => {window.addEventListener('scroll', scrollListenerHandler)})onUnmounted(() => {window.removeEventListener('scroll', scrollListenerHandler)}) onActivated(() => {window.addEventListener('scroll', scrollListenerHandler)})onDeactivated(() => {window.removeEventListener('scroll', scrollListenerHandler)})return {isReachBottom}}```
3.4.5 useScrollHook在页面中使用
  - 3.4.2.4.1. 回调函数形式```javascriptimport useScroll from '@/hooks/useScroll';// 监听是否滚动底部useScroll(() => {homeStore.fetchHouseListData()})```- 3.4.2.4.2. 返回一个变量```javascriptimport useScroll from '@/hooks/useScroll';// 拿到isReachBottom,然后监听isReachBottom为真的时候滚动到底部const { isReachBottom } = useScroll()// 监听是否滚动底部watch(isReachBottom, (newValue) => {if(newValue) {homeStore.fetchHouseListData().then(() => {isReachBottom.value = false})}})```
3.4.6 监听滚动距离scrollTop
  - 1.局部监听滚动距离放到全局上,返回把滚动距离返回出去- 2. 代码如下:```javascriptimport { ref, onActivated, onDeactivated, onMounted, onUnmounted } from 'vue'export default function useScroll() {const isReachBottom = ref(false)const clientHeight = ref(0) // 可见的高度const scrollTop = ref(0) // 滚动的距离const scrollHeight = ref(0) // 整个文档的可滚动的高度// 监听窗口的滚动const scrollListenerHandler = (reachBottomCB) => {clientHeight.value = document.documentElement.clientHeightscrollTop.value = document.documentElement.scrollTopscrollHeight.value = document.documentElement.scrollHeightif (clientHeight.value + scrollTop.value >= scrollHeight.value) {isReachBottom.value = true}}onMounted(() => {window.addEventListener('scroll', scrollListenerHandler)})onUnmounted(() => {window.removeEventListener('scroll', scrollListenerHandler)}) onActivated(() => {window.addEventListener('scroll', scrollListenerHandler)})onDeactivated(() => {window.removeEventListener('scroll', scrollListenerHandler)})return {isReachBottom,clientHeight,scrollTop,scrollHeight,}}```
3.4.7 优化scrollHook
- 使用使用underscore库节流优化scrollHook- 1.监听滚动时,发现函数执行的次数很频繁,使用节流处理,减少函数执行次数。- 2.使用underscore.js中的throttle函数,对scrollHook进行优化。- 3.安装underscore: npm install underscore- 4.使用:import { throttle } from 'underscore'```javascriptimport { ref, onActivated, onDeactivated, onMounted, onUnmounted } from 'vue'import { throttle } from 'underscore'// 执行频率太高使用:防抖/节流// 防抖:本来准备去执行一个东西,但是发现又触发了,然后把这个事件不断的延后,直到最后一次才执行// 节流:在单位时间内执行一个函数是非常频繁的,规定一个时间执行一次函数,每间隔一个时间执行一次函数export default function useScroll() {const isReachBottom = ref(false)const clientHeight = ref(0) // 可见的高度const scrollTop = ref(0) // 滚动的距离const scrollHeight = ref(0) // 整个文档的可滚动的高度const scrollListenerHandler = throttle(() => {clientHeight.value = document.documentElement.clientHeightscrollTop.value = document.documentElement.scrollTopscrollHeight.value = document.documentElement.scrollHeightif (clientHeight.value + scrollTop.value >= scrollHeight.value) {isReachBottom.value = true}}, 100)onMounted(() => {window.addEventListener('scroll', scrollListenerHandler)})onUnmounted(() => {window.removeEventListener('scroll', scrollListenerHandler)}) onActivated(() => {window.addEventListener('scroll', scrollListenerHandler)})onDeactivated(() => {window.removeEventListener('scroll', scrollListenerHandler)})return {isReachBottom,clientHeight,scrollTop,scrollHeight,}}```

3.5.显示头部搜索

-3.4.3.7.滚动到100显示头部搜索框
```javascript
import { watch, ref, computed } from ‘vue’;
import useScroll from ‘@/hooks/useScroll’;
const { isReachBottom, scrollTop } = useScroll()

    // const isShowSearchBar = ref(false)// 1.监听scrollTop的距离// watch(scrollTop, (newScrollTop) => {//  isShowSearchBar.value = newScrollTop > 100// })// 当一个可响应式数据依赖(影响)另外一个可响应式数据的时候,使用计算函数const isShowSearchBar = computed(() => {return scrollTop.value >= 100})```

3.6 解决手动切换路由不更新tarBar的问题

  ```javascript// 1.开启路由模式<template><van-tabbar v-model="currentIndex" active-color="#ff9854" route></van-tabbar></template>// 2.监听路由变化,找到对应的索引,并修改currentIndeximport { ref, watch } from 'vue';const route = useRoute()watch(route, (newRoute) => {const index = tabbarData.findIndex(item => item.path === newRoute.path)if(index === -1) returncurrentIndex.value = index})```

3.7 开始时间和结束的共享

```javascript// 抽取到一个公共的mainStore中// src/store/main.jsimport { defineStore } from "pinia";const startDate = new Date()const endDate = new Date()endDate.setDate(startDate.getDate()+1) // 或者  nowDate.getTime() + 24*60*60*1000const useMainStore = defineStore('main', {state: () => ({token: '',startDate: startDate,endDate: endDate})})export default useMainStore// src/views/cpns/home-search-box.vue// 日期范围处理(页面中使用)import { computed, ref } from 'vue'import { storeToRefs } from 'pinia'import { formatMonthDay, getDiffDays } from '@/utils/format_date';import useMainStore from '@/stores/modules/main';const calendarShow = ref(false)const mainStore = useMainStore()const { startDate, endDate} = storeToRefs(mainStore)// formatMonthDay格式日期,默认格式为MM月DD日const startDateStr = computed(() => formatMonthDay(startDate.value))const endDateStr = computed(() => formatMonthDay(endDate.value))const stayCount = ref(getDiffDays(startDate.value, endDate.value))const onConfirm = (value) => {// 1.设置日期const selectStartDate = value[0]const selectEndDate = value[1]mainStore.startDate = selectStartDatemainStore.endDate = selectEndDatestayCount.value = getDiffDays(selectStartDate, selectEndDate)// 2.隐藏日历calendarShow.value = false}// src/components/search-bar.vue// 页面中使用import useMainStore from '@/stores/modules/main';import { formatMonthDay } from '@/utils/format_date';import { computed } from 'vue';import { storeToRefs } from 'pinia';const mainStore = useMainStore()const { startDate, endDate } = storeToRefs(mainStore)const startDateStr = computed(() => formatMonthDay(startDate.value, 'MM.DD'))  const endDateStr = computed(() => formatMonthDay(endDate.value, 'MM.DD'))```

相关文章:

vue3搭建实战项目笔记三

vue3搭建实战项目笔记三 3.1.行高偏移问题3.2.谷歌浏览器上不能定位3.2.2 移动端css隐藏滚动条 3.3.获取列表的数据3.3.1 服务器返回十万条数据3.3.2 分页展示数据3.3.2 防止展示数据为空报错 3.4.上拉加载数据3.4.1 加载更多数据3.4.2 监听页面滚动到底部3.4.3 监听滚动的时机…...

【商城实战(101)】电商未来已来:新技术引领商城发展新航向

【商城实战】专栏重磅来袭!这是一份专为开发者与电商从业者打造的超详细指南。从项目基础搭建,运用 uniapp、Element Plus、SpringBoot 搭建商城框架,到用户、商品、订单等核心模块开发,再到性能优化、安全加固、多端适配,乃至运营推广策略,102 章内容层层递进。无论是想…...

深入解析最大公约数(GCD)与最小公倍数(LCM)的C++实现

深入解析最大公约数&#xff08;GCD&#xff09;与最小公倍数&#xff08;LCM&#xff09;的C实现 一、GCD与LCM的数学定义 1. 最大公约数&#xff08;GCD&#xff09; 两个或多个整数共有约数中最大的一个。 例如&#xff1a; GCD(12, 18) 6GCD(21, 14) 7 2. 最小公倍数…...

低功耗LPWAN模块开发指南:远距离无线通信与边缘计算融合实战‌

在远程资产追踪、野外环境监测等场景中&#xff0c;稳定可靠的长距离通信与超低功耗是系统设计的核心挑战。eFish-SBC-RK3576通过 ‌原生双UART接口 USB OTG扩展能力‌ &#xff0c;可无缝集成主流LPWAN模组&#xff08;LoRa/NB-IoT&#xff09;&#xff0c;实现“数据采集-边…...

【质量管理】纠正、纠正措施和预防的区别与解决问题的四重境界

“质量的定义就是符合要求”&#xff0c;我们在文章【质量管理】人们对于质量的五个错误观念-CSDN博客中提到过&#xff0c;这也是质量大师克劳士比所说的。“质量的系统就是预防”&#xff0c;防止出现产品不良而造成的质量损失。 质量问题的解决可以从微观和宏观两个方面来考…...

STM32F103_LL库+寄存器学习笔记12 - 提高串口通讯程序的健壮性:异常监控 + 超时保护机制

导言 首先&#xff0c;进行USART和DMA状态监测、记录异常状态并主动处理&#xff0c;是高健壮性嵌入式系统开发的核心思想之一。 这种机制看似复杂&#xff0c;实则能有效保障系统长期、稳定地运行&#xff1a; 提升通讯可靠性。降低维护成本。增强系统自恢复能力。 因此&…...

搜索-BFS

马上蓝桥杯了&#xff0c;最近刷了广搜&#xff0c;感觉挺有意思的&#xff0c;广搜题类型都差不多&#xff0c;模板也一样&#xff0c;大家写的时候可以直接套模板 这里给大家讲一个比较经典的广搜题-迷宫 题目问问能否走到 (n,m) 位置&#xff0c;假设最后一个点是我们的&…...

Keil调试(RTT Debug 断点)

调试 打印操作 方式接口优缺点串口打印TXRX简单,但是占用串口,速度慢,重定向fputc简单RTT打印SWDIOSWCLK速度快,不占额外接口,直接移植RTT库断点打印SWDIOSWCLKDebug的时候断点操作SWOSWDIOSWCLKSWO需要连接SWO引脚,重定向fputc简单 这里我只介绍RTT打印和断点打印; 一. RT…...

【jQuery】插件

目录 一、 jQuery插件 1. 瀑布流插件&#xff1a; jQuery 之家 http://www.htmleaf.com/ 2. 图片懒加载&#xff1a; jQuery 插件库 http://www.jq22.com/ 3. 全屏滚动 总结不易~ 本章节对我有很大收获&#xff0c;希望对你也是~~~ 一、 jQuery插件 jQuery 功能…...

leetcode 28 Find the Index of the First Occurrence in a String

直接用kmp算法 class Solution { public:int strStr(string haystack, string needle) {return kmp(haystack,needle);}int kmp(std::string &text,std::string &pattern){int n text.size();int m pattern.size();if(m 0)return 0;std::vector<int> next;ne…...

nginx 动静分离

一.动静分离 1.动静分离的好处 Apache Tocmat 严格来说是一款java EE服务器&#xff0c;主要是用来处理 servlet请求。处理css、js、图片这些静态文件的IO性能不够好&#xff0c;因此&#xff0c;将静态文件交给nginx处理&#xff0c;可以提高系统的访问速度&#xff0c;减少…...

1.2 斐波那契数列模型:LeetCode 面试题 08.01. 三步问题

动态规划解三步问题&#xff1a;LeetCode 面试题 08.01. 三步问题 1. 题目链接 LeetCode 面试题 08.01. 三步问题 题目要求&#xff1a;小孩上楼梯&#xff0c;每次可以走1、2或3步&#xff0c;计算到达第 n 阶台阶的不同方式数&#xff0c;结果需对 1e9 7 取模。 2. 题目描述…...

关于AutoMapper

AutoMapper 概述 AutoMapper 是一个基于约定的对象 - 对象映射库&#xff0c;主要用于在不同对象类型之间自动映射属性值。它能根据配置的映射规则&#xff0c;将源对象的属性值填充到目标对象中&#xff0c;避免了手动编写大量繁琐的对象映射代码。 作用 提升开发效率&…...

是否每一层之间都要线性变换和激活函数?

1. 神经网络层的基本组成 一个典型的神经网络层通常包含两个步骤&#xff1a; 线性变换&#xff08;加权求和&#xff09;&#xff1a; z Wx} b 其中W 是权重矩阵&#xff0c;b是偏置向量&#xff0c;是输入&#xff0c;z 是线性输出。激活函数&#xff1a; 其中&#xff0c…...

golang 的reflect包的常用方法

目录 reflect 包方法总结 类型 (Type) 方法 值 (Value) 方法 代码示例&#xff1a; reflect 包方法总结 p : Person{Name: "小明", Age: 22}t : reflect.TypeOf(&p)v : reflect.ValueOf(p) 类型 (Type) 方法 方法名描述示例               Na…...

CentOS 7 安装 EMQX (MQTT)

CentOS 7 安装 EMQX 通过 Yum 源安装 EMQX 支持通过 Yum 源安装&#xff0c;您可通过以下 Yum 命令从中自动下载和安装 EMQX。 通过以下命令配置 EMQX Yum 源&#xff1a; curl -s https://assets.emqx.com/scripts/install-emqx-rpm.sh | sudo bash安装以下依赖项&#xff…...

Flask项目部署:Flask + uWSGI + Nginx

目录 1,网络架构 2,环境安装 2.1,安装yum:Shell软件包管理器 2.2 安装python 2.3 安装uWSGI 2.4 安装Flask 3,上传工程包到服务器,打包Flask项目 4,创建和配置 uwsgi 配置文件 uwsgi.ini 4.1配置文件 4.2配置文件注释详解 5,启动服务 6,安装nginx 7,nginx配置 8,…...

软件工程面试题(十五)

1、servlet 创建过程以及ruquest,response,session的生命周期? Servlet的创建过程: 第一步 public class AAA extends HttpServlet{ 实现对应的doxxx方法 } 第二步: 在web.xml中配置 <servlet> <servlet-name></servlet-name> <servlet-c…...

当Kafka化身抽水马桶:论组件并发提升与系统可用性的量子纠缠关系

《当Kafka化身抽水马桶&#xff1a;论组件并发提升与系统可用性的量子纠缠关系》 引言&#xff1a;一场OOM引发的血案 某个月黑风高的夜晚&#xff0c;监控系统突然发出刺耳的警报——我们的数据发现流水线集体扑街。事后复盘发现&#xff1a;Kafka集群、Gateway、Discovery服…...

python和Java的区别

Python和Java是两种流行的编程语言&#xff0c;它们之间有一些重要的区别&#xff1a; 语法&#xff1a;Python是一种动态类型的脚本语言&#xff0c;语法简洁明了&#xff0c;通常使用缩进来表示代码块。Java是一种静态类型的编程语言&#xff0c;语法更为严格&#xff0c;需要…...

QFlightInstruments飞行仪表控件库

QFlightInstruments 是一个开源的飞行仪表控件库&#xff0c;专为基于 Qt 的应用程序设计。它提供了一系列仿真实飞机仪表的组件&#xff0c;适用于飞行模拟软件、航空电子系统或任何需要高仿真飞行仪表显示的项目。 主要功能 高仿真飞行仪表&#xff1a;包括空速表、高度表、…...

可发1区的超级创新思路(python\matlab实现):MPTS+Lconv+注意力集成机制的Transformer时间序列模型

首先声明,该模型为原创!原创!原创!且该思路还未有成果发表,感兴趣的小伙伴可以借鉴! 应用场景 该模型主要用于时间序列数据预测问题,包含功率预测、电池寿命预测、电机故障检测等等。 一、模型整体架构(本文以光伏功率预测为例) 本模型由多尺度特征提取模块(MPTS)…...

Nginx — Nginx版本升级

例如&#xff1a;将10.224.11.220、10.224.11.221、10.208.11.220 三台服务器上的Nginx从1.21.1版本升级到1.23.3版本。 一、Nginx升级步骤 步骤一&#xff1a;备份老版本的Nginx&#xff08;10.224.11.220、10.224.11.221、10.208.11.220&#xff09; #关闭Nginx cd /usr/l…...

CSS学习笔记6——网页布局

目录 一、元素的浮动属性、清除浮动 清除浮动的其他方法 1、使用空标签清除浮动影响 2、使用overflow属性清除浮动 3、使用伪元素清除浮动影响 原理 overflow属性 二、元素的定位 1、相对定位 2、绝对定位 ​编辑 3、固定定位 z-index层叠等级属性 一、元素的浮动…...

C语言【指针二】

引言 介绍&#xff1a;const修饰指针&#xff0c;野指针 应用&#xff1a;指针的使用&#xff08;strlen的模拟实现&#xff09;&#xff0c;传值调用和传指调用 一、const修饰指针 1.const修饰变量 简单回顾一下前面学过的const修饰变量&#xff1a;在变量前面加上const&…...

第十六届蓝桥杯模拟二(串口通信)

由硬件框图可以知道我们要配置LED 和按键 一.LED 先配置LED的八个引脚为GPIO_OutPut,锁存器PD2也是,然后都设置为起始高电平,生成代码时还要去解决引脚冲突问题 二.按键 按键配置,由原理图按键所对引脚要GPIO_Input 生成代码,在文件夹中添加code文件夹,code中添加fun.…...

Java List 集合取交集、并集、差集、补集

在Java中&#xff0c;集合操作是编程中非常常见的需求&#xff0c;尤其是在处理数据集合时&#xff0c;如List、Set等。本文将详细介绍如何在Java中实现List集合的交集、并集、差集和补集操作&#xff0c;并提供代码示例和实现方法。 1. 交集操作 交集是指两个集合中都存在的元…...

SkyWalking+Springboot实战

1、下载SkyWalking APM 1.手动下载 Downloads | Apache SkyWalkinghttps://skywalking.apache.org/downloads/ 2.链接下载 https://dlcdn.apache.org/skywalking/10.2.0/apache-skywalking-apm-10.2.0.tar.gzhttps://dlcdn.apache.org/skywalking/10.2.0/apache-skywalking-…...

【小兔鲜】day01 项目、Vue3介绍、组合式API、小案例

【小兔鲜】day01 项目、Vue3介绍、组合式API、小案例 0. 市场上Vue前端工程师用到的技术1. Vue3小兔鲜先导课1.1 技术栈1.2 项目规模1.3 项目亮点1.4 课程安排 2. 认识Vue32.1 Vue3组合式API体验 3. create-vue创建Vue3项目3.1 新建项目结构3.2 小节3.3 补充说明npm init vuela…...

【Pandas DataFrame】

以下是 Pandas DataFrame 的核心知识点总结&#xff0c;用结构化分类帮你高效记忆关键操作和概念&#xff1a; 1. 基础操作 创建DataFrame 方法代码示例说明从字典创建df pd.DataFrame({A: [1,2], B: [3,4]})字典键为列名&#xff0c;值为数据从列表创建df pd.DataFrame([[…...

华为OD机试2025A卷 - 生成回文素数(Java Python JS C++ C )

最新华为OD机试 真题目录:点击查看目录 华为OD面试真题精选:点击立即查看 题目描述 求出大于或等于 N 的最小回文素数。 如果一个数大于 1,且其因数只有 1 和它自身,那么这个数是素数。 例如,2,3,5,7,11 以及 13 是素数。 如果一个数从左往右读与从右往左读是一…...

Jenkins教程(自动化部署)

Jenkins教程(自动化部署) 1. Jenkins是什么&#xff1f; Jenkins是一个开源的、提供友好操作界面的持续集成(CI)工具&#xff0c;广泛用于项目开发&#xff0c;具有自动化构建、测试和部署等功能。Jenkins用Java语言编写&#xff0c;可在Tomcat等流行的servlet容器中运行&…...

C#里使用libxl的对齐/边框/颜色

一份好的EXCEL文件,通道会有不同的颜色和边框来表示。 以便表示一些重要的信息,这样才能让人们一眼就看到需要关注的信息。 如下面所示: 要显示上面的内容,需要使用下面的例子: private void button12_Click(object sender, EventArgs e){var book = new ExcelBook();if…...

虚拟pinctrl驱动

之前呢&#xff0c;我们讲解了在内核中pinctrl子系统是怎么实现的&#xff0c;今天我们来尝试一下自己去写一个pinctrl子系统&#xff1a; 首先呢&#xff0c;我们来看看一个pinctrl子系统需要做的事情: 上面的话&#xff0c;我们看了一个pinctrl子系统需要的三大功能以及在驱…...

pycharm虚拟环境项目转移后配置解释器

添加解析器提示&#xff1a;无效的 Python SDK 解决方法 在到电脑安装python解析器&#xff0c;复制&#xff1a;python.exe和pythonw.exe 项目虚拟环境venv/Scripts Python解释器添加 项目现有虚拟环境&#xff0c;就可以正常使用...

蓝桥杯嵌入式学习笔记

用博客来记录一下参加蓝桥杯嵌入式第十六届省赛的学习经历 工具环境准备cubemx配置外部高速时钟使能设置串口时钟配置项目配置 keil配置烧录方式注意代码规范头文件配置 模块ledcubemx配置keil代码实现点亮一只灯实现具体操作的灯&#xff0c;以及点亮还是熄灭 按键cubemx配置k…...

0201-jsx语法基础-jsx-仿低代码平台项目

文章目录 1.jsx标签2.jsx属性3.jsx 事件3.1 声明事件3.2 使用事件&#xff08;对象&#xff09; 4. typescript类型基础4.1 类型声明4.2 事件函数传递自定义参数 5.插入js变量6. 条件判断7. 循环结语 1.jsx标签 jsx标签与html标签区别&#xff1a; 首字母大小写 大写是自定义组…...

在MCU工程中优化CPU工作效率的几种方法

在嵌入式系统开发中&#xff0c;优化 CPU 工作效率对于提升系统性能、降低功耗、提高实时性至关重要。Keil 作为主流的嵌入式开发工具&#xff0c;提供了多种优化策略&#xff0c;包括 关键字使用、内存管理、字节对齐、算法优化 等。本文将从多个方面介绍如何在 Keil 工程中优…...

Elasticsearch 的搜索功能

Elasticsearch 的搜索功能 建议阅读顺序&#xff1a; Elasticsearch 入门Elasticsearch 搜索&#xff08;本文&#xff09;Elasticsearch 搜索高级Elasticsearch 高级 1. 介绍 使用 Elasticsearch 最终目的是为了实现搜索功能&#xff0c;现在先将文档添加到索引中&#xff0c…...

【鸿蒙5.0】向用户申请麦克风授权

#效果图 步骤 在 config.json 里声明权限&#xff1a;在项目的 config.json 文件中添加麦克风权限的声明&#xff0c;告知系统应用需要使用该权限。检查权限状态&#xff1a;在代码里检查应用是否已经获得了麦克风权限。请求权限&#xff1a;若应用未获得麦克风权限&#xff0…...

数据结构与算法分析:树与哈希表(一)

遇到的问题&#xff0c;都有解决方案&#xff0c;希望我的博客能为你提供一点帮助。 一、概述 背景&#xff1a;链表处理大量数据时&#xff0c;线性访问耗时多。二叉查找树多数操作平均运行时间为 O (log N)&#xff0c;相对于链表树更加高效。 1.预备知识 1.1. 树的定义与…...

VBA第三十四期 VBA中怎么用OnKey事件

我们在VBA设计中经常需要使用到OnKey方法&#xff0c;特别是在窗口设计中比如我们想用到翻页按键&#xff0c;则就可以来建立一个OnKey事件。Setup_OnKey过程运行以后&#xff0c;就会达到最终效果&#xff0c;按PgDn键会将指针下移一行&#xff0c;按PgUp键会将指针上移一行。…...

HarmonyOS NEXT开发进阶(十五):日志打印 hilog 与 console.log 的区别

文章目录 一、前言二、两者区别对比三、HiLog 详解四、拓展阅读 一、前言 在日常开发阶段&#xff0c;日志打印是调试程序非常常用的操作&#xff0c;在鸿蒙的官方文档中介绍了hilog这种方式&#xff0c;前端转过来的开发者发现console.log也可以进行日志打印&#xff0c;而且…...

Skynet 框架中 gateserver、gate、watchdog 的关系

一、概述 在 Skynet 框架的网络通信架构中&#xff0c;gateserver、gate、watchdog 是三个核心组件&#xff0c;共同实现客户端连接的监听、管理和业务逻辑的分发。其设计目标是通过分层解耦&#xff0c;提升网络层的稳定性与业务逻辑的灵活性。 二、组件职责 1. ‌gateserve…...

第11章:优化I/O_《C++性能优化指南》_notes

第十一章核心知识点详解 11.1 读取文件的优化技巧 重点&#xff1a;减少内存分配、使用大缓冲区、优化函数调用链。 难点&#xff1a;理解系统调用开销与缓冲区大小的权衡。 代码示例与详解 示例1&#xff1a;使用高效函数签名和减少内存分配 #include <fstream> #inc…...

【C++初阶】--- 内存管理

1.C/C内存分布 我们一般说的32位机器和64位机器指的是虚拟空间的大小&#xff0c;也就是进程地址空间的大小&#xff0c;32位机器下&#xff0c;进程地址空间的大小是232个字节&#xff0c;也就是4G&#xff0c;64位机器下&#xff0c;进程地址空间的大小是264个字节,大概160亿…...

使用 Ansys Discovery 可视化液体池中的水流

了解 ANSYS Discovery&#xff1a;设计领域的变革者 ANSYS Discovery 是一款功能强大的软件工具&#xff0c;能够彻底改变设计流程。借助其先进的仿真功能&#xff0c;工程师现在可以在设计投入生产之前更深入地了解其设计。通过使用 ANSYS Discovery&#xff0c;设计师可以快…...

网络安全-网络安全基础

一、网络安全概述 TCP/IP协议定义了一个对等的开放性网络&#xff0c;使得连接到这个网络中的所有用户都可能面临来自网络中的恶意的破坏和攻击。这些攻击通过网络通信协议、网络应用协议甚至物理传输链路来实现。主要针对于软件和硬件进行攻击。那在互联网上如何保证自己的安…...

YOLOv8+ Deepsort+Pyqt5车速检测系统

该系统通过YOLOv8进行高效的目标检测与分割&#xff0c;结合DeepSORT算法完成目标的实时跟踪&#xff0c;并利用GPU加速技术提升处理速度。系统支持模块化设计&#xff0c;可导入其他权重文件以适应不同场景需求&#xff0c;同时提供自定义配置选项&#xff0c;如显示标签和保存…...

QML中的附加属性和附加信号处理程序

QML中的附加属性和附加信号处理程序 在QML中&#xff0c;附加属性(Attached Properties)和附加信号处理程序(Attached Signal Handlers)是特殊类型的属性和信号&#xff0c;它们由附加类型(Attached Types)提供&#xff0c;而不是由对象本身直接提供。 什么是附加的(Attached…...