简易分页制作
简易分页功能实现
分页是一种常见的前端功能，特别是在需要展示大量数据时。它通过将数据分割成多个页面，帮助用户更容易浏览并提高页面加载性能。本文将介绍一个简易分页的实现思路及其代码实现，旨在帮助开发者快速理解并实现分页功能。
功能概述
这个示例实现了一个简单的分页功能，包括以下主要功能：
- 数据分页显示：根据每页的条数和当前页显示相应的数据。
- 分页控件：展示当前页信息，并允许用户通过上一页、下一页按钮或直接跳转到指定页面进行浏览。
- 自定义每页显示的条数：用户可以选择每页显示不同条数的数据。
- 跳转页功能：用户可以直接输入页码跳转到指定的页面。
- 警告提示：如果输入的页码超出有效范围，会弹出警告提示。
核心思路
-
数据存储与加载：
- 数据以JSON格式存储，并通过
XMLHttpRequest请求加载到前端。 - 数据加载完成后，进行分页展示。
- 数据以JSON格式存储，并通过
-
分页计算：
- 根据总数据量和每页数据量，计算出总页数。
- 使用当前页的索引（从0开始）来确定需要展示的数据范围。
-
渲染表格与分页控件：
- 在表格中展示当前页的数据。
- 在底部渲染分页控件，显示当前页数、总页数以及每页显示的条数等信息。
- 动态生成页码链接，根据用户的选择更新页面。
-
用户交互：
- 提供上一页、下一页按钮以及页码跳转功能。
- 用户可以通过选择每页显示的数据条数来调整显示内容。
代码实现
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>简易分页</title><style>/* 表格设置宽高 */.boxes {width: 60%;height: 100%;margin: auto;text-align: center;}.item {min-height: 200px;max-height: 700px;overflow: auto;}/* 设置行高 */.itemes {line-height: 200%;}/* 底部导航栏 */.box {width: 80%;height: 30px;display: flex;margin: 1% auto;justify-content: space-between;line-height: 30px;}.box>button {width: 30px;cursor: pointer;border: none;font-size: 20px;}.pages>span {padding: 3px 8px;cursor: pointer;}input {width: 30px;margin: 4px;}/* 弹出警告窗口 */.warning {width: 25%;height: 50px;border-radius: 10px;box-shadow: 1px 2px 10px lightgray;padding-left: 20px;position: fixed;right: 0;background-color: #fde2e2;color: #f56c6c;display: none;}.title {font-weight: 600;}</style></head><body><!-- 警告弹出窗 --><div class="warning"><div class="title">错误</div><div>没有当前页数，请重新输入</div></div><!-- 表格 --><div class="item"><table class="boxes" cellspacing="0"><thead><tr><th>id</th><th>内容</th><th>标题</th></tr></thead><tbody></tbody></table></div><!-- 底部导航栏 --><div class="box"></div><script>let k = 0; // 当前页let data; // 存储数据let num = 5; // 每页显示的数据条数let total = 0; // 总页数let main = document.getElementsByTagName('tbody')[0]; // 获取表格主体let foot = document.getElementsByClassName('box')[0]; // 获取分页底部// 创建 XMLHttpRequest 获取数据let xhr = new XMLHttpRequest();xhr.open('get', './js/paging.json', true);xhr.send();// 当数据请求完成时，处理响应xhr.onreadystatechange = function() {if (xhr.readyState == 4 && xhr.status == 200) {data = JSON.parse(xhr.responseText); // 解析 JSON 数据console.log(data);renderTable(); // 渲染表格}};// 渲染表格内容function renderTable() {let str = '';for (let i = k * num; i < (k + 1) * num; i++) {if (i >= data.length) break; // 防止超出数据范围str += `<tr class="itemes"><td>${data[i].id}</td><td>${data[i].name}</td><td>${data[i].title}</td></tr>`;}main.innerHTML = str; // 将内容插入表格renderPagination(); // 渲染分页}// 渲染分页控件function renderPagination() {let strs = '';total = Math.ceil(data.length / num); // 计算总页数strs += `<span>第${k + 1}页/共${total}页</span><span>当前${num}条/共${data.length}条数据</span><select onchange="changeItemsPerPage(value)"><option value="${num}">${num}条/页</option><option value="5">5条/页</option><option value="15">15条/页</option><option value="30">30条/页</option><option value="45">45条/页</option><option value="60">60条/页</option></select><button onclick="lastPage()"> < </button><!-- 不要学博主，这边建议用图标,因为可能会被识别成比较运算符 --><div class="pages">`;// 生成页码if (total < 6) {for (let i = 0; i < total; i++) {strs += createPageLink(i);}} else {if (k < 3) {for (let i = 0; i < 5; i++) {strs += createPageLink(i);}strs += `...`;} else if (k > total - 4) {strs += `...`;for (let i = total - 5; i < total; i++) {strs += createPageLink(i);}} else {strs += `...`;for (let i = k - 2; i <= k + 2; i++) {strs += createPageLink(i);}strs += `...`;}}strs += `</div><button onclick="nextPage()"> > </button><!-- 不要学博主，这边建议用图标,因为可能会被识别成比较运算符 --><span>前往第<input type="text" id="input" onchange="goToPageInput()"/>页</span>`;foot.innerHTML = strs;}// 创建页码链接function createPageLink(page) {return `<span class="tail_page" onclick="goToPage(${page})" ${k === page ? 'style="color:#4DAAFF;"' : ''}>${page + 1}</span>`;}// 上一页function lastPage() {if (k > 0) {k--;renderTable();}}// 下一页function nextPage() {if (k < total - 1) {k++;renderTable();}}// 改变每页显示条数function changeItemsPerPage(value) {num = parseInt(value);k = 0; // 每次改变每页显示条数时，返回第一页renderTable();}// 跳转到指定页function goToPageInput() {let input = document.getElementById('input');let warn = document.getElementsByClassName('warning')[0]; // 获取警告信息元素let page = parseInt(input.value); // 获取输入的页码if (page > 0 && page <= total) {k = page - 1; // 跳转到指定页面renderTable();} else {warn.style.display = 'block'; // 显示警告信息input.value = ''; // 清空输入框setTimeout(() => {warn.style.display = 'none'; // 隐藏警告信息}, 3000);}}// 跳转到指定页（点击页码时调用）function goToPage(page) {k = page;renderTable();}</script></body>
</html>JSON假数据（可更改）：
[{"id": 1,"name": "路易威登","title": "老花手袋"},{"id": 2,"name": "Cartier","title": "卡地亚猎豹系列"},{"id": 3,"name": "海瑞温斯顿","title": "The One系列"},{"id": 4,"name": "宝格丽","title": "B.zero1系列"},{"id": 5,"name": "MiuMiu","title": "保龄球包"},{"id": 6,"name": "纪梵希","title": "纪梵希热流香水"},{"id": 7,"name": "古驰","title": "Dionysus 酒神包"},{"id": 8,"name": "YSL圣罗兰","title": "小金条1966"},{"id": 9,"name": "梵克雅宝","title": "四叶草手链"},{"id": 10,"name": "FENDI","title": "经典手袋"},{"id": 11,"name": "DIOR","title": "马鞍包"},{"id": 12,"name": "CHNAEL","title": "香奈儿5号"},{"id": 13,"name": "狐妖小红娘","title": "涂山容容"},{"id": 14,"name": "百妖谱","title": "桃夭"},{"id": 15,"name": "假面超人","title": "假面骑士"},{"id": 16,"name": "眷思量","title": "镜玄丽娘"},{"id": 17,"name": "蜡笔小新","title": "野原美冴"},{"id": 18,"name": "来往不逢人，长歌楚天碧","title": "柳宗元"},{"id": 19,"name": "念天地之悠悠，独怆然而泪下","title": "陈子昂"},{"id": 20,"name": "旧时王谢堂前燕，飞入寻常百姓家","title": "白居易乌衣巷"},{"id": 21,"name": "白日依山尽，黄河入海流","title": "王之涣"},{"id": 22,"name": "君言不得意，归卧南山陲","title": "王维"},{"id": 23,"name": "人生不相见，动如参与商","title": "杜甫赠卫八处士"},{"id": 24,"name": "寒雨连江夜入吴，平明送客楚山孤","title": "王昌龄"},{"id": 25,"name": "海客谈瀛洲，烟涛微茫信难求","title": "李白梦游天姥吟留别"},{"id": 26,"name": "落魄江湖载酒行，楚腰纤细掌中轻","title": "杜牧遣怀"},{"id": 27,"name": "故人具鸡黍，邀我至田家","title": "孟浩然"},{"id": 28,"name": "荡胸生曾云，决眦入归鸟","title": "杜甫"},{"id": 29,"name": "塔势如涌出，孤高耸天宫","title": "岑参与高适薛据同登慈恩寺浮图"},{"id": 30,"name": "臣本布衣，躬耕于南阳","title": "诸葛亮"},{"id": 31,"name": "东临碣石，以观沧海","title": "曹操"},{"id": 32,"name": "小楼昨夜又东风","title": "李煜"},{"id": 33,"name": "沙湖道中遇雨，同行皆狼狈","title": "苏轼"},{"id": 34,"name": "笑谈渴饮匈奴血","title": "岳飞"},{"id": 35,"name": "而来四万八千岁，不与秦塞通人烟","title": "蜀道难"},{"id": 36,"name": "住近湓江地低湿，黄芦苦竹绕宅生","title": "琵琶行"},{"id": 37,"name": "谈笑有鸿儒，而来无白丁","title": "陋室铭"},{"id": 38,"name": "阴风怒号，浊浪排空，日星隐曜","title": "岳阳楼记"},{"id": 39,"name": "闲云潭影日悠悠，物换星移几度秋","title": "滕王阁序"},{"id": 40,"name": "六王毕，四海一，蜀山兀，阿胖出","title": "阿房宫赋"},{"id": 41,"name": "海绵宝宝","title": "章鱼哥"},{"id": 42,"name": "fate","title": "阿尔托莉雅.潘德拉贡"},{"id": 43,"name": "第五人格","title": "红夫人"},{"id": 44,"name": "间谍过家家","title": "约尔"},{"id": 45,"name": "进击的巨人","title": "伊雷娜"},{"id": 46,"name": "及尔偕老，老使我怨","title": "氓"},{"id": 47,"name": "行道迟迟，载渴载饥。","title": "采薇"},{"id": 48,"name": "最是一年春好处，绝胜烟柳满皇都","title": "早春呈水部张十八员外"},{"id": 49,"name": "劝君更尽一杯酒，西出阳关无故人","title": "送元二使西安"},{"id": 50,"name": "明月装饰了你的窗子你装饰了别人的梦","title": "断章"},{"id": 51,"name": "天气你好样的","title": "白天晒毁我晚上吹飞我"},{"id": 52,"name": "超绝混搭风","title": "棉袄配睡裤"},{"id": 53,"name": "再也不玩抽象了","title": "第一真的有人拿我当沙贝，第二没人懂我的幽默"},{"id": 54,"name": "微笑","title": "爱笑的人法令纹不会太浅"},{"id": 55,"name": "我是皇帝","title": "啊哈：吾皇万岁万岁万万岁"}
]相关文章：
简易分页制作
简易分页功能实现 分页是一种常见的前端功能，特别是在需要展示大量数据时。它通过将数据分割成多个页面，帮助用户更容易浏览并提高页面加载性能。本文将介绍一个简易分页的实现思路及其代码实现，旨在帮助开发者快速理解并实现分页功能。 功…...
概率论得学习和整理27：关于离散的数组 随机变量数组的均值，方差的求法3种公式，思考和细节。
目录 1 例子1：最典型的，最简单的数组的均值，方差的求法 2 例子1的问题：例子1只是1个特例，而不是普遍情况。 2.1 例子1各种默认假设，导致了求均值和方差的特殊性，特别简单。 2.2 我觉得 加权…...
arXiv-2024 | NavAgent：基于多尺度城市街道视图融合的无人机视觉语言导航
作者：Youzhi Liu, Fanglong Yao*, Yuanchang Yue, Guangluan Xu, Xian Sun, Kun Fu 单位：中国科学院大学电子电气与通信工程学院，中国科学院空天信息创新研究院网络信息系统技术重点实验室 原文链接：NavAgent: Multi-scale Urba…...
WPF 布局控件
wpf 布局控件有很多，常用的有：Grid, UniformGrid, Border, StackPanel, WrapPanel, DockPanel。 1. Grid Grid 经常作为控件的 Content 使用，常作为 Windows, UserControl 等 UI 元素的根节点。它用来展示一个 n 行 n 列的排版。 因此就有…...
在Mac电脑上安装adb环境
当你在命令行输入 adb version 或adb devices, 报错：zsh: command not found: adb ，那么说明你的 Mac 上没有安装 ADB（Android Debug Bridge），或者它没有添加到你的路径中。你可以按照以下步骤安装和配置 ADBÿ…...
方正畅享全媒体新闻采编系统 reportCenter.do SQL注入漏洞复现
0x01 产品简介 方正畅享全媒体新闻生产系统是以内容资产为核心的智能化融合媒体业务平台，融合了报、网、端、微、自媒体分发平台等全渠道内容。该平台由协调指挥调度、数据资源聚合、融合生产、全渠道发布、智能传播分析、融合考核等多个平台组成，贯穿新闻生产策、采、编、发…...
Linux SHELL脚本中的常用命令
一.设置主机名称 1.文件的方式 [rootlocalhost 桌面]# vim /etc/hostname [rootlocalhost 桌面]# cat /etc/hostname shell.aaa.org 修改完毕文件后在当前的shell中是不生效的 如果需要看到效果，关闭当前shell后重新开启新的shell 2.通过命令更改主机名 [rootl…...
Go语言启动独立进程
文章目录 问题解决方案1. **将 npc.exe 启动为独立的进程**2. **修改 exec.Command 函数**示例代码解释为什么这样有效注意 问题 在你当前的代码中，调用 exec.Command("XXX.exe") 启动 XXX.exe 程序时，这个程序是由 Go 程序直接启动的。如果 …...
STM32中ADC模数转换器
一、ADC简介 ADC模拟-数字转换器 ADC可以将引脚连续变化的模拟电压转换为内存中存储的数字变量，建立模拟电路到数字电路的桥梁 12位逐次逼近型ADC，1us转换时间 输入电压范围： 0~3.3V，转换结果范围：0~4095 18个输入…...
为什么要用单例模式？
单例模式是一种创建型设计模式，用于确保某个类只有一个实例，并提供一个全局访问点，使得其他类可以轻松访问该实例。 使用单例模式的主要原因包括以下几点： 确保唯一性：在某些情况下，我们需要确…...
线性表查找：Python 实现与性能分析
引言 在数据处理领域，查找操作是一项基础且关键的任务。线性表作为一种常见的数据结构，其查找算法的效率直接影响程序的性能。本文将深入探讨线性表查找的原理、Python 实现以及性能分析，为你揭示如何在 Python 中高效地进行线性表查找。 一…...
QT3学习之进阶理解信号和槽：如何自定义一个类信号，供其它类调用槽函数
下面是QWidget源码，定义了两个事件 /*!This event handler can be reimplemented in a subclass to receivewidget enter events.An event is sent to the widget when the mouse cursor enters thewidget.\sa leaveEvent(), mouseMoveEvent(), event() */void QWi…...
（Image Signal Processor）ISP简介
文章目录 ISP功能简介ISP的主要功能ISP的主要模块1. **黑电平校正（Black Level Correction, BLC）**2. **噪声去除（Denoise）**3. **色彩校正（Color Correction Matrix, CCM）**4. **自动曝光（Auto…...
upload-labs靶场保姆级攻略
第一关：删除前端js校验 写一个一句话木马，命名为1.php 一句话木马 浏览上传 我们发现不可以上传，右键检查，依次点击 找到return checkFile()删掉，再上传 去看一下是否已经写入进去一句话木马 页面什么也没有ÿ…...
02、10个富士胶片模拟的设置
二色彩 1、色彩的加减控制全局的饱和度增减； 2、色彩效果只提升暖色系饱和度； 3、FX蓝色大幅度提升蓝色系饱和度； 4、三个参数都不改变颜色的色相。 2.1 色彩 色彩调整的是拍摄画面整体的色彩饱和程度 2.2色彩效果 调整的是画面中暖色…...
大模型呼出机器人详解
大模型呼出机器人详解 原作者：开源呼叫中心FreeIPCC，其Github：https://github.com/lihaiya/freeipcc 大模型呼出机器人是基于大规模深度学习模型构建的智能化客服系统，它能够处理海量数据并学习其中的规律，从而实现高…...
（山东省大数据职称考试）)
计算机基础知识——数据结构与算法(三)（山东省大数据职称考试）
大数据分析应用-初级 第一部分 基础知识 一、大数据法律法规、政策文件、相关标准 二、计算机基础知识 三、信息化基础知识 四、密码学 五、大数据安全 六、数据库系统 七、数据仓库. 第二部分 专业知识 一、大数据技术与应用 二、大数据分析模型 三、数据科学 数据结构与算法…...
【Unity功能集】TextureShop纹理工坊（三）图层（下）
项目源码：在终章发布 索引 图层渲染绘画区域图层Shader 编辑器编辑模式新建图层设置当前图层上、下移动图层删除图层图层快照 图层 在PS中，图层的概念贯穿始终（了解PS图层），他可以称作PS最基础也是最强大的特性之一。…...
基于 SSM 框架 Vue 电脑测评系统：引领电脑评测新方向
4系统概要设计 4.1概述 本系统采用B/S结构(Browser/Server,浏览器/服务器结构)和基于Web服务两种模式，是一个适用于Internet环境下的模型结构。只要用户能连上Internet,便可以在任何时间、任何地点使用。系统工作原理图如图4-1所示： 图4-1系统工作原理…...
Android笔记【19】
具体示例 run: val result someObject.run {// 这里可以使用 thisthis.someMethod() }let: val result someObject?.let {// 这里使用 itit.someMethod() }with: val result with(someObject) {// 这里使用 thissomeMethod() }apply: val obj SomeClass().apply {// 这里使…...
Redis 中 IntSet 底层数据结构
IntSet 底层数据结构 序言: 像字符串 SDS 只是保存了一个变量的值，但是像 Redis 中也是需要保存一些集合元素的，这里就介绍一下其中一种集合 IntSet，由于是 Set 所以也有 Set 的一些特性，不过也多加了一些特性： ● 唯…...
自然语言处理：我的学习心得与笔记
Pytorch 1.Pytorch基本语法 1.1 认识Pytorch 1.2 Pytorch中的autograd 2.Pytorch初步应用 2.1 使用Pytorch构建一个神经网络 2.2 使用Pytorch构建一个分类器 小节总结 学习了什么是Pytorch. 。Pytorch是一个基于Numpy的科学计算包,作为Numpy的替代者,向用户提供使用GPU强大…...
Altair: 轻松创建交互式数据可视化
Altair: 轻松创建交互式数据可视化 Altair 是一个基于 Vega-Lite 的 Python 数据可视化库，它旨在简化数据可视化的创建过程，尤其适用于统计图表的生成。Altair 强调声明式编码方式，通过简单的语法，用户能够快速创建复杂的交互式图…...
【NLP】序列到序列（seq2seq）建模工具fairseq使用详解
文章目录 一、fairseq简介二、安装方式2.1 pip安装2.2 源码安装 三、fairseq命令工具3.1 fairseq-preprocess3.2 fairseq-train3.3 fairseq-generate3.4 fairseq-interactivate3.5 fairseq-score3.6 fairseq-eval-lm 4. 常见报错报错1 参考资料 一、fairseq简介 fairseq 是 Fa…...
[极客大挑战 2019]HardSQL 1
[极客大挑战 2019]HardSQL 1 打开实例，发现是个登陆页面，查看源代码，发现又是GET提交check.php 万能密码尝试 不太行，怀疑字段或者空格被过滤，尝试闭合不加其他东西 确认空格、union、and等都被过滤了，尝试…...
天空分割代码
目录 依赖项： 分割源代码： 依赖项： groundingdino Grounded-Segment-Anything 分割源代码： generate_sky_mask.py import os, syssys.path.append(os.getcwd()) # Change to your folder here sys.path.append(Grounded-Segment-Anything)import argparse import os…...
Leetcode 三角形最小路径和
算法思想与代码详解 这段代码采用的是**动态规划（Dynamic Programming）**的思想，用来解决“120. 三角形最小路径和”问题。动态规划通过将问题分解成更小的子问题，并通过保存子问题的解来避免重复计算，从而提高效率。…...
[Unity]Unity跨平台开发之Android入门
安卓环境配置 安装依赖项 推荐使用Unity Hub进行安装，安装时勾选Android Build Support、Android SDK & NDK Tools、OpenJDK。或者指定已安装的依赖项。（注意：指定的依赖项需要是从UnityHub安装的。比如之前安装Unity2022时勾选了上述依…...
搭建Flume
title: 搭建Flume date: 2024-11-30 23:59:00 categories: - 服务器 tags: - Flume - 大数据搭建Flume 本次实验环境：Centos 7-2009、JDK 8、Flume-1.11.0 开始安装 1. 下载安装文件到服务器 # 使用wget命令下载flume文件（二选一） wget …...
【从零开始入门unity游戏开发之——C#篇10】循环结构——while、do-while、for、foreach的使用
文章目录 一、while 循环1、语法：2、示例： 二、 do-while 循环1、语法：2、示例： 三、for 循环1、语法：2、示例： 四、foreach 循环1、语法：2、示例： 五、总结对比六、注意事项七、使用…...
flask flask-socketio创建一个网页聊天应用
应用所需环境： python 3.11.11 其他 只需要通过这个命令即可 pip install flask3.1.0 Flask-SocketIO5.4.1 -i https://mirrors.tuna.tsinghua.edu.cn/pypi/web/simple 最好是用conda创建一个新的虚拟环境来验证 完整的pip list如下 Package Version ----…...
MVCC了解
MVCC（多版本并发控制）学习指南及代码示例 一、学习MVCC前先了解什么 1. MVCC的定义和作用 MVCC是一种并发控制机制，用于解决并发事务访问数据库时可能出现的问题，如脏读、不可重复读和幻读。它通过为每个数据行维护多个版本来实…...
LabVIEW随机扫描成像系统
利用LabVIEW开发了一套随机扫描成像系统，利用硬件时钟实现声光偏转器（AOD）的频率控制与信号采集之间的高速时间同步。系统利用了高精度的时钟同步技术，确保了成像精度和重复性，从而有效提高了成像速度和质量。 项目背景…...
系统移植——Linux 内核顶层 Makefile 详解
一、概述 Linux Kernel网上下载的版本很多NXP等有自己对应的版本。需要从网上直接下载就可以。 二、Linux内核初次编译 编译内核之前需要先在 ubuntu 上安装 lzop 库 sudo apt-get install lzop 在 Ubuntu 中 新 建 名 为 “ alientek_linux ” 的 文 件夹 ， …...
【一文了解】C#重点-委托1
本篇文章来学习一下C#的委托，委托是C#中的一个重要概念，它允许将方法作为参数传递给其他方法。C#中的委托类似于C或C中的函数指针，并且类型安全。 委托 1.委托的定义 委托（delegate）是方法的代理/代表，委托…...
LeetCode hot100-87
https://leetcode.cn/problems/longest-increasing-subsequence/?envTypestudy-plan-v2&envIdtop-100-liked 300. 最长递增子序列 已解答 中等 相关标签 相关企业 给你一个整数数组 nums ，找到其中最长严格递增子序列的长度。子序列 是由数组派生而来的序列&a…...
项目26：简易在线论坛 --- 《跟着小王学Python·新手》
项目26：简易在线论坛 — 《跟着小王学Python新手》 《跟着小王学Python》 是一套精心设计的Python学习教程，适合各个层次的学习者。本教程从基础语法入手，逐步深入到高级应用，以实例驱动的方式，帮助学习者逐步掌握Pyth…...
知乎 PB 级别 TiDB 数据库集群管控实践
以下文章来源于知乎技术专栏 ，作者代晓磊 导读 在现代企业中，数据库的运维管理至关重要，特别是面对分布式数据库的复杂性和大规模集群的挑战。作为一款兼容 MySQL 协议的分布式关系型数据库，TiDB 在高可用、高扩展性和强一致性方…...
 Iris(R) Xe Graphics安装Anaconda、Pytorch（CPU版本）)
Intel(R) Iris(R) Xe Graphics安装Anaconda、Pytorch（CPU版本）
一、Intel(R) Iris(R) Xe Graphics安装Anaconda 下载网址：https://repo.anaconda.com/archive/ 双击Anaconda3-2024.10-1-Windows-x86_64，一直下一步，选择安装的路径位置，一直下一步就安装完成了。打开Anaconda PowerShell Promp…...
RK3588 , mpp硬编码rgb, 保存MP4视频文件.
RK3588 , mpp硬编码yuv, 保存MP4视频文件. ⚡️ 传送 ➡️ RK3588, FFmpeg 拉流 RTSP, mpp 硬解码转RGBRk3588 FFmpeg 拉流 RTSP, 硬解码转RGBUbuntu x64 架构, 交叉编译aarch64 FFmpeg mppCode Init MppMPP_RET init_mpp...
揭开 Choerodon UI 拖拽功能的神秘面纱
01 引言 系统的交互方式主要由点击、选择等组成。为了提升 HZERO 系统的用户体验、减少部分操作步骤，组件库集成了卓越的拖拽功能，让用户可以更高效流畅的操作系统。 例如：表格支持多行拖拽排序、跨表数据调整、个性化调整列顺序࿱…...
常用网络协议简述
网络协议是计算机网络中规定数据交换格式和交换规则的一套标准。以下是一些常用的网络协议及其简要解释： HTTP（HyperText Transfer Protocol，超文本传输协议） 用于从网络传输超文本数据到本地浏览器的传输协议。基于TCP协议&…...
本地电脑使用命令行上传文件至远程服务器
将本地文件上传到远程服务器，在本地电脑中cmd使用该命令： scp C:/Users/"你的用户名"/Desktop/environment.yml ws:~/environment.yml 其中，C:/Users/“你的用户名”/Desktop/environment.yml是本地文件的路径， ~/en…...
笔记day2
文章目录 1 NavigationDuplivated警告错误2 Home模块组件拆分3 三级联动组件完成4 完成其余静态组件5 POSTMAN测试接口6 axios二次封装6.1 为什么需要进行二次封装axios？6.2 在项目中经常API文件夹【axios】6.3 axios基础不好，可以参考git|NPM关于axios文…...
排序算法（3）——归并排序、计数排序
目录 1. 归并排序 1.1 递归实现 1.2 非递归实现 1.3 归并排序特性总结 2. 计数排序 代码实现 3. 总结 1. 归并排序 基本思想： 归并排序（merge sort）是建立在归并操作上的一种有效的排序算法，该算法是采用分治法࿰…...
【5】C#期末复习第5套
1.int a[3][2]{2,4,6,8,10.12};则*（a[1]1）的值是8 指向（a[1]的第二个元素） 再* 2.合并字符串库函数strcat 3.比较字符串库函数strcmp 4.执行结果是x3，y3 int x3,y; int *px&x; y*px; (优先级高于*) 5.*p[5]没…...
jquery虚拟键盘插件jqkeyboard
jqKeyboard是一款jquery虚拟键盘插件。该虚拟键盘插件依赖于jquery ui，通过该插件，可以在页面中生成一个扁平风格的虚拟键盘面板。 在线预览 下载 安装 可以通过npm来安装jqKeyboard虚拟键盘插件。 npm install jq keyboard --save 使用方法 在页面…...
的程序)
IMX6ULL开发板把屏幕刷黑(黑屏)的程序
承接博文 IMX6ULL开发板基础实验:Framebuffer驱动程序的简单应用实例代码详细分析 很容易写出把屏幕刷黑的程序… Ubuntu中的目录/home/book/mycode下新建目录C0003_draw_lcd_black，然后把把博文中的源码/home/book/mycode/C0002_show_pixel复制到目录C0003_draw_l…...
OpenCV基本图像处理操作（三）——图像轮廓
轮廓 cv2.findContours(img,mode,method) mode:轮廓检索模式 RETR_EXTERNAL ：只检索最外面的轮廓；RETR_LIST：检索所有的轮廓，并将其保存到一条链表当中；RETR_CCOMP：检索所有的轮廓，并将他们组…...
C语言学习day24：DLL给程序打上窗口破解补丁
简言 在上一章节我们知道了DLL，编写DLL以及最重要的导出DLL，这一章节我们学习如何给应用打上窗口破解补丁（DLL）。 流程 工具：studyPE 操作： 把要补丁的程序拖入PE中点击导入菜单，导入dll函…...