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

Vue接口平台学习五——测试环境页面

news 来源：原创 2025/8/22 9:01:27

一、实现效果图及界面布局简单梳理

在这里插入图片描述
这块内容分左侧，中间，右侧三大部分

左侧：

上面一行固定内容，显示icon，名字，一个按钮。下面部分通过v-for循环读取数据库获取的测试环境列表用来展示名称。

中间：

中间内容分上中下3块，上面是input框，编辑和显示基本信息。中间和下面是一些具体配置信息都使用**代码编辑器（Editor）**来展示数据

右侧：

一些python的全局工具函数，也使用Editor来左显示

二、页面内容具体实现

整体布局

这里使用了el-row，进行横向布局

https://element-plus.org/zh-CN/component/layout.html

在这里插入图片描述

先简单规划出整体样式

左侧

顶部标题部分

上面一个图标 + 名字 + 一个添加按钮。水平flex布局
在这里插入图片描述

 <!-- 顶部标题 --><div class="title_box"><img src="@/assets/icons/data.png" width="25"><div class="name">测试环境</div><el-button size="small" icon='CirclePlus' plain>添加</el-button></div>

加一些scss样式

//左侧
.left_box {height: 100%;.title_box {display: flex;height: 40px;align-items: center;justify-content: center;border-bottom: solid 1px #6a6a6a;.name {font-weight: bold;font-size: 18px;margin: 0 10px;}}.el-menu {border: none;.el-menu-item {height: 40px;line-height: 40px;}}
}

下方列表展示部分

在之前部分就已经获取了环境数据，并保存到了ProjectStore的envList，直接从这读取，使用v-for循环显示name就行了

 <el-menu ><el-menu-item :index="item.id.toString()" v-for='item in pstore.envList' :key="item.id"><img src="@/assets/icons/data.png" width="20" style="margin-right: 10px;"><span>{{ item.name }}</span></el-menu-item></el-menu>

再加一点点样式

.el-menu {border: none;.el-menu-item {height: 40px;line-height: 40px;}
}

在这里插入图片描述

中间部分

基本信息

使用el-divider 分割，也用来显示信息。
两个input输入框，双向绑定数据env_name，env_host

<el-divider content-position="center"><span class="info_text"> 基本信息 </span>
</el-divider>
<el-input v-model="env_name" placeholder="环境名称"><template #prepend>环境名称</template>
</el-input>
<el-input v-model="env_host" placeholder="BaseURL" style="margin-top: 5px;"><template #prepend>BaseURL</template>
</el-input>

  // 中间样式.center_box {padding: 5px;.info_text {border: dashed 1px var(--el-color-primary);border-radius: 10px;}}

在这里插入图片描述

请求头/数据库配置信息

这里用到了代码编辑器组件，在后面有单独写内容。
这里只需要导入，然后直接使用就行了
import Editor from '/src/components/Editor.vue'，

el-divider内容位置放中间感觉不大好看，放左边去了，然后包裹起来不好看，就给去掉样式了

<el-divider content-position="left"><span class="info_text">请求头/数据库</span></el-divider>
<el-tabs type="border-card"><el-tab-pane label="全局请求头"><Editor lang="json" v-model="env_headers"></Editor></el-tab-pane><el-tab-pane label="数据库配置"><Editor lang="json" v-model="env_db"></Editor></el-tab-pane>
</el-tabs>

在这里插入图片描述

全局变量

跟上面的请求头一样，使用代码编辑器

<el-divider content-position="left"><span class="info_text"> 全局变量</span></el-divider>
<el-tabs type="border-card"><el-tab-pane label="全局变量"><Editor lang="json" v-model="env_global_variable"</Editor></el-tab-pane><el-tab-pane label="调试运行变量"><Editor lang="json" v-model="env_debug_global_variable"></Editor></el-tab-pane>
</el-tabs>

在这里插入图片描述

下方固定悬浮的按钮

使用 Affix 固钉组件

https://element-plus.org/zh-CN/component/affix.html#affix-%E5%9B%BA%E9%92%89

<el-affix :offset="50" position="bottom"><div class="btns" v-show='EnvInfo.id'><el-button type="primary" size="small">保存编辑</el-button><el-button type="primary" size="small">复制环境</el-button><el-button type="danger" size="small">删除环境</el-button></div>
</el-affix>

在这里插入图片描述

右侧工具函数部分

同样使用代码编辑器

<div class="card right_box"><el-divider content-position="left">全局工具函数</el-divider><Editor lang="python" v-model="env_global_func" height='calc(100% - 50px)'></Editor>
</div>

  //右侧样式.right_box{height: 100%;}

在这里插入图片描述
页面大致就做好了，现在开始往里面添加功能。

三、函数功能

创建测试环境

这里创建，直接创建一个新的，不需要填写任何内容，创建时默认给定new Env这个名字和127.0.0.1的url。在编辑部分再重新修改内容。

给添加按钮绑定点击函数addEnv

<el-button @click='addEnv' size="small" icon='CirclePlus' plain>添加</el-button>

需要在api/module/ProjectApi下定义好接口（与后端保持一致）
在这里插入图片描述

import http from '@/api/index'
// ----------添加测试环境==================
async function addEnv() {const response = await http.pro.createEnvApi({project: pstore.pro.id,name: "new Env",host: "http://127.0.0.1"})if (response.status === 201) {// 给出提示ElNotification({title: '测试环境创建成功',type: 'success',})// 更新页面数据pstore.getEnvList()}
}

选择测试环境

菜单组件添加点击函数selectEnv

<el-menu-item @click='selectEnv(item)' :index="item.id.toString()" v-for='item in pstore.envList':key="item.id">

let envList = ref([])
// 默认选择第一个
onMounted(async () => {await pstore.getEnvList()envList.value = pstore.envList// 组件上数据挂载完毕之后，设置一个默认选中的测试环境if (envList.value.length > 0) {selectEnv(envList.value[0])}
})// ==============页面数据==============
let env_name = ref('')
let env_host = ref('')
let env_headers = ref('{}')
let env_db = ref('[]')
let env_global_variable = ref('{}')
let env_debug_global_variable = ref('{}')
let env_global_func = ref('')// 保存当前选择的测试环境
let EnvInfo = ref({})function selectEnv(env) {// 保存当前选中的测试环境EnvInfo.value = env// 更新页面上编辑数据的值env_name.value = env.nameenv_host.value = env.hostenv_headers.value = JSON.stringify(env.headers, 0, 4) || "{}"env_db.value = JSON.stringify(env.db, 0, 4) || "[]"env_global_variable.value = JSON.stringify(env.global_variable, 0, 4) || "{}"env_debug_global_variable.value = JSON.stringify(env.debug_global_variable, 0, 4) || "{}"env_global_func.value = env.global_func
}

给el-menu添加默认激活，用来显示激活状态

 <el-menu :default-active="EnvInfo.id+''">

删除测试环境

删除按钮绑定点击事件

<el-button @click='clickDeleteEnv' type="danger" size="small">删除环境</el-button>

使用ElMessageBox 做二次确认

//删除环境
function clickDeleteEnv() {ElMessageBox.confirm('此操作不可恢复，确认要删除该测试环境?','警告', {confirmButtonText: '确认',cancelButtonText: '取消',type: 'warning',}).then(async () => {const response = await http.pro.deleteEnvApi(EnvInfo.value.id)if (response.status === 204) {ElNotification({title: '删除成功',type: 'success',})// 更新页面数据pstore.getEnvList()envList.value = pstore.envList// 这里重新选择存在的第一个环境就行了。if (envList.value.length > 0) {selectEnv(envList.value[0])}}})
}

辅助一份测试环境

 <el-button @click='copyEnv' type="primary" size="small">复制环境</el-button>

只需在名字后加一个Copy就行，其他内容不变。然后调用创建的接口新建一个

//复制测试环境
async function copyEnv() {const params = EnvInfo.valueparams.name = params.name + 'Copy'const response = await http.pro.createEnvApi(params)if (response.status === 201) {// 给出提示ElNotification({title: '复制成功',type: 'success',})// 更新页面数据pstore.getEnvList()envList.value = pstore.envList}
}

保存环境

 <el-button @click="saveEnv" type="primary" size="small">保存编辑</el-button>

// 保存环境
async function saveEnv() {const env_id = EnvInfo.value.id// 修改时传递的参数const params = {name: env_name.value,host: env_host.value,global_func: env_global_func.value,db: JSON.parse(env_db.value),headers: JSON.parse(env_headers.value),global_variable: JSON.parse(env_global_variable.value),debug_global_variable: JSON.parse(env_debug_global_variable.value),}const response = await http.pro.updateEnvApi(env_id, params)if (response.status === 200) {// 给出提示ElNotification({title: '保存成功',type: 'success',})// 更新页面数据pstore.getEnvList()}
}

到此，页面功能几乎就写完了。

代码编辑器

基于 vue3-ace-editor封装的代码编辑器组件，可以用于编辑 json 数据和代码。
首先需要安装一下

npm install vue3-ace-editor

直接在项目目录的 components 中新建一个Edit.vue组件，代码如下，直接使用就行。
在这里插入图片描述

<template><VAceEditor :options="editOption" v-model:value="dataEdit" :lang="lang" :theme="theme":style="{ minHeight: height }" /><el-button type="primary" size="small" @click="formatJson" v-if="lang === 'json'" plain>格式化json</el-button>
</template><script>import { VAceEditor } from 'vue3-ace-editor';import 'ace-builds/src-noconflict/snippets/json';import 'ace-builds/src-noconflict/mode-json';import 'ace-builds/src-noconflict/snippets/python';import 'ace-builds/src-noconflict/mode-python';import 'ace-builds/src-noconflict/mode-html';import 'ace-builds/src-noconflict/snippets/html';import 'ace-builds/src-noconflict/theme-chrome';import 'ace-builds/src-noconflict/theme-monokai';import 'ace-builds/src-noconflict/theme-merbivore';import 'ace-builds/src-noconflict/theme-twilight';import 'ace-builds/src-noconflict/theme-gruvbox';import 'ace-builds/src-noconflict/ext-language_tools';import 'ace-builds/src-noconflict/worker-json'export default {components: {VAceEditor},methods: {formatJson() {const jsObj = JSON.parse(this.dataEdit);this.dataEdit = JSON.stringify(jsObj, null, 4);}},props: {lang: {default: 'json'},modelValue: {type: String,default: '{}'},theme: {default: 'merbivore'},height: {default: '200px'},readOnly: {default: false}},emits: ['update:modelValue'],computed: {editOption() {return {enableBasicAutocompletion: true, // 启用基本自动补全enableSnippets: true, // 启用代码段enableLiveAutocompletion: true, // 启用实时自动提示tabSize: 4, // 	tab键占用的空格的位置fontSize: 14, // 设置字号useWorker: false, // 使用校验语法是否正确showPrintMargin: false, //去除编辑器里的竖线enableMultiselect: true, // 支持鼠标选中多处readOnly: this.readOnly, // 是否只读showFoldWidgets: true, // 显示折叠部件fadeFoldWidgets: true, // 淡入折叠部件wrap: true, //换行,};},dataEdit: {get() {return this.modelValue;},set(value) {this.$emit('update:modelValue', value);}}}};
</script><style></style>

Vue接口平台学习五——测试环境页面

一、实现效果图及界面布局简单梳理这块内容分左侧，中间，右侧三大部分左侧： 上面一行固定内容，显示icon，名字，一个按钮。下面部分通过v-for循环读取数据库获取的测试环境列表用来展示名称。中间&#…...

编程日记 2025/8/22 9:01:27

FFMpeg视频编码实战和音频编码实战

视频编码流程 avcodec_find_encoder：首先，通过指定的编码器名称（如H.264、MPEG-4等）找到对应的编码器。avcodec_alloc_context3：为找到的编码器分配一个上下文结构，这个结构包含了编码器所需的各种参数和状…...

编程日记 2025/8/21 18:14:27

vue+uniapp 获取上一页直接传递的参数

在小程序里页面之间跳转有时候需要传递参数给下个页面用 const toDetail item > { uni.navigateTo({ url: /pagesFood/stu/FoodSelection?groupCode1&merchCode2, }); }; 那么下个页面就要获取到这些参数，在实际开发中&#xff…...

编程日记 2025/8/22 2:02:32

各种排序思路及实现

目录 1.排序概念常见的排序算法 2.常见排序算法实现（1）插入排序直接插入排序希尔排序（缩小增量排序） （2）选择排序直接选择排序堆排序 （3）交换排序冒泡排序快速排序（hoare…...

编程日记 2025/8/21 15:51:14

GPT文生图模型新玩法

GPT-4o发布了最新的生图模型GPT-4o-Image，在图像控制力、一致性上实现了显著提升，其表现甚至展现出超越Midjourney的潜力。这款模型不仅能读懂细致的指令，还能赋予照片艺术化的新生命。接下来，我们将介绍几个有趣的实践方向&#…...

编程日记 2025/8/21 18:05:19

uni-app ucharts自定义换行tooltips

实现效果： 第一步：在uni_modules文件夹下找到config-ucharts.js和u-charts.js文件第二步：在config-ucharts.js文件中配置换行格式 // 换行格式"wrapTooltip":function(item, category, index, opts){return item.name：…...

编程日记 2025/8/22 9:00:49

双列集合 map 实例 package mymap;import java.util.HashMap; import java.util.Map;public class MapDemo1 {public static void main(String[] args) {/*V put(K key,v value)添加元素V remove(object key)根据键删除键值对元素void clear()移除所有的键值对元素boolean c…...

编程日记 2025/8/21 7:11:00

RPC 2025/4/8

RPC（Remote Procedure Call），远程过程调用。应用场景：大型微服务项目，服务部署到不同的服务器上，需要远程调用，可以使用RPC。两个概念： 远程过程调用本地调用 RPC目的&#xff1a…...

编程日记 2025/8/20 12:36:31

浅层神经网络：全面解析（扩展）

浅层神经网络：全面解析（扩展） 前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，可以分享一下给大家。点击跳转到网站。 https://www.captainbed.cn/ccc 一、神经网络架构演进图谱 #mermaid-svg-…...

编程日记 2025/8/22 5:10:19

【Hadoop入门】Hadoop生态之ZooKeeper简介

1 什么是ZooKeeper？ 在分布式系统的世界里，协调各节点之间的工作是一项复杂而关键的任务。ZooKeeper正是为解决这一问题而生的开源分布式协调服务，它像一个高效的"和事佬"，帮助分布式系统中的各个组件达成一致、同步状态…...

编程日记 2025/8/22 8:55:02

树和图论(详细整理，简单易懂！)

树和图论树的遍历模版 #include <iostream> #include <cstring> #include <vector> #include <queue> // 添加queue头文件 using namespace std;const int MAXN 100; // 假设一个足够大的数组大小 int ls[MAXN], rs[MAXN]; // 定义左右子树数…...

编程日记 2025/8/22 8:57:13

CWGAN-GP 原理及实现（pytorch版）

CWGAN-GP 一、CWGAN-GP 原理1.1 CWGAN-GP 的核心改进1.2 CWGAN-GP 的损失函数1.3 CWGAN-GP 的优势1.4 关键参数选择1.5 应用场景二、CWGAN-GP 实现2.1 导包2.2 数据加载和处理2.3 构建生成器2.4 构建判别器2.5 训练和保存模型2.6 查看训练损失2.7 图片转GIF2.8 模型加载和推理…...

编程日记 2025/8/21 22:45:37

zookeeper平滑扩缩容

在进行ZooKeeper的扩容和缩容操作时，需要注意以下几点： 数据一致性重要性：ZooKeeper的核心特性之一是保证数据的一致性。在操作过程中，必须确保数据的一致性，以避免数据丢失或损坏。实现方式：ZooKeeper通…...

编程日记 2025/8/21 17:33:15

Github 热点项目 ChartDB AI自动导表结构+迁移脚本，3分钟生成专业数据库关系图

ChartDB堪称数据库设计神器！亮点①：动动手指输入SQL，秒出结构图，表关系一目了然，团队评审时再也不用画图两小时。亮点②：AI智能转换超贴心，MySQL转PostgreSQL只需点个按钮，跨平台迁移…...

编程日记 2025/8/21 15:08:24

RVOS-1.环境搭建与系统引导

0.环境搭建 riscv-operating-system-mooc: 开放课程《循序渐进，学习开发一个 RISC-V 上的操作系统》配套教材代码仓库。 mirror to https://github.com/plctlab/riscv-operating-system-mooc 在 Ubuntu 20.04 以上环境下我们可以直接使用官方提供的 GNU工具链和 QEM…...

编程日记 2025/8/17 6:55:16

Java List＜JSONObject＞转换为 List＜实体类＞

可以使用 Fastjson 的 toJavaObject 方法直接转换，无需中间序列化步骤。以下是具体实现和注意事项： import com.alibaba.fastjson.JSONObject; import java.util.List; import java.util.stream.Collectors;public class Converter {public static List…...

编程日记 2025/8/19 18:31:51

CesiumEarth v1.12 更新，支持安卓平板离线浏览3DTiles格式的三维倾斜模型

CesiumEarth v1.12 更新 2025年4月8日阅读需 1 分钟发布时间：2025年04月08日新增用户登录： 从1.12版本开始需要通过登录方可使用CesiumEarth 账号可以通过邮箱免费注册后续将陆续发布云服务相关的功能发布Desktop版本： Deskt…...

编程日记 2025/8/20 19:37:06

OpenEuler运维实战-系统资源监控与性能优化-CPU·内存·IO

CPU 基本概念定界定位思路常用CPU性能分析工具基本概念中央处理器（Central Processing Unit，简称CPU）是计算机的主要设备之一，其功能是解释计算机指令以及处理计算机软件中的数据。物理核：可以真实看到的CPU核&…...

编程日记 2025/8/22 9:00:16

react实现SVG地图区域中心点呈现圆柱体，不同区域数据不同，圆柱体高度不同

效果图： 代码： import React, { useState, useEffect } from react;const InnerMongoliaMap () > {// 每个区域的数据（名称、中心坐标、圆柱体高度值）const [regionData, setRegionData] useState([{ id: "呼和浩特市…...

编程日记 2025/8/20 8:18:20

Qwen - 14B 怎么实现本地部署，权重参数大小：21GB

Qwen - 14B 权重参数大小：21GB 参数量与模型占用存储空间（GB）是不同概念。Qwen - 14B参数量约140亿。其模型大小在不同精度下占用存储空间不同，如在一些资料中提到，Qwen - 14B在特定情况下占用空间约21GB 。实际存储…...

编程日记 2025/8/20 15:41:18

线程实现参考资料

参考并发编程系列 - Java线程池监控及CompletableFuture详解_taskexecutor.execute没有执行如何监控到-CSDN博客 JAVA异步实现的四种方式_java异步编程的四种方法-CSDN博客 Java线程池深度解析与自定义实战-CSDN博客 Java8 CompletableFuture 异步多线程的实现_java_脚本之…...

编程日记 2025/8/21 10:46:37

python-63-前后端分离之图书管理系统的Flask后端

文章目录 1 flask后端1.1 数据库实例extension.py1.2 数据模型models.py1.3 .flaskenv1.4 app.py1.5 运行1.6 测试链接2 关键函数和文件2.1 请求视图类MethodView2.2 .flaskenv文件3 参考附录基于flask形成了图书管理系统的后端，同时对其中使用到的关键文件.flaskenv和函数类M…...

编程日记 2025/8/21 17:52:14

Qt网络编程之服务端

Qt网络编程之服务端 TCP（传输控制协议）是一种可靠的、面向流的、面向连接的传输协议。它特别适合连续的数据传输。 1. 主要类和函数 1.1 QTcpServer 监听函数： bool QTcpServer::listen(const QHostAddress &address QHostAddress::…...

编程日记 2025/8/19 17:25:15

案例-流量统计

1.建一个data目录，在data下建log.txt文件输入手机号码上行流量下行流量 2.在com.example.flow下建四个Java类3.flowBean flowMapper flowReducer flowDriver...

编程日记 2025/8/21 10:55:10

开源身份和访问管理方案之keycloak（二）管理员引导和恢复

文章目录开源身份和访问管理方案之keycloak（二）管理员引导和恢复管理员引导和恢复在 Keycloak 启动时引导临时管理员帐户对于恢复丢失的管理员访问权限使用专用命令引导管理员用户或服务帐户创建一个管理员用户创建一个服务账号重新获得对具有更高安全性…...

编程日记 2025/8/20 16:59:05

TCP,UDP协议和域名地址

1.TCP（传输控制协议）是面向连接，UDP（用户数据报协议）是无连接的 2.应用层：FTP,HTTP,SMTP,TELNET,DNS,TFTP 传输层;TCP,UDP 网际层：IP,ICMP,ARP,RARP 3.TCP21:20端口数据传输；21端…...

编程日记 2025/8/20 21:57:35

算法进阶指南分形

问题描述分形，具有以非整数维形式充填空间的形态特征。通常被定义为： “一个粗糙或零碎的几何形状，可以分成数个部分，且每一部分都（至少近似地）是整体缩小后的形状”，即具有自相似的性质。现…...

编程日记 2025/8/20 20:12:43

2025年 npm淘宝镜像最新地址

查看当前镜像 npm config get registry 切换陶宝镜像源 npm config set registry https://registry.npmmirror.com/ 验证npm镜像源是否切换成功 npm config get registry 如果返回的地址是https://registry.npmmirror.com/，那么说明你已经成功切换到淘宝的npm…...

编程日记 2025/8/20 7:46:25

0基础 | 硬件 | LM386芯片

LM386芯片：音频功率放大器芯片内部集成三极管功能将微弱信号放大20-200倍，并且驱动内阻为8Ω的扬声器注意CD系列芯片，内部集成MOS管 LM386特性 LM386主要由以下三个部分组成内部电路差分输入差分输入多个三极管左右对称，形…...

编程日记 2025/8/21 14:46:46

Spring Boot集成APK Parser库实现APK文件解析

目录 1. 添加依赖 2. 创建APK解析服务 3. 创建控制器 4. 测试注意事项在Spring Boot项目中集成APK Parser库并解析APK文件，可以按照以下步骤进行操作： 1. 添加依赖在项目的pom.xml文件中添加apk-parser库的依赖： <dependency&…...

编程日记 2025/8/21 21:18:37

java基础迭代Iterable接口以及迭代器Iterator

Itera迭代 Iterable < T>迭代接口(1) Iterator iterator()(2) forEach(Consumer<? super T> action)forEach结合Consumer常见场景forEach使用注意细节 (3)Spliterator spliterator() Iterator< T>迭代器接口如何“接收” Iterator<T>核心方法迭代器的…...

编程日记 2025/8/21 18:08:53

Linux: network: tcpdump: packets dropped by kernel

文章目录最近遇到一个问题原因libpcap/tcpdump 接口linux/libpcap 接口内核的处理原因可能有以下几种：解决方法：man pcap_stats最近遇到一个问题 tcpdump命令显示有dropped的包，而且是被内核drop的。 [root@-one-01 ~]# tcpdump -i any udp and port 8080 -v -w /root/udp…...

编程日记 2025/8/22 1:47:06

TCP三次握手和TCP四次挥手

一 TCP三次握手 TCP建立连接的过程叫做握手，握手需要客户端和服务器之间交换三个TCP报文段。如图所示，假设主机A为TCP客户端，主机B为TCP服务端。在最初时间，两端的TCP进程都是处于CLOSED状态 （1）主机A主动…...

编程日记 2025/8/21 11:43:14

博途 TIA Portal之1200做主站与调试助手的TCP通讯

博途支持的通讯非常多，常见的有S7、TCP/IP，UDP等等，本文将演示TCP的通讯，通讯的双方是1200PLC和调试助手之间，编程采用ST语言。 1、硬件准备 1200PLC一台，带调试助手的PC机一台，调试助手是我经…...

编程日记 2025/8/20 18:05:39

第十天 - socket编程基础 - TCP/UDP服务开发 - 练习：简易端口扫描器

Python网络编程入门：从Socket到端口扫描器实战一、前言：为什么要学网络编程？ 在这个万物互联的时代，掌握网络编程技术就像拥有了一把打开互联网世界的钥匙。无论是开发聊天软件、网络游戏，还是构建分布式系统&#…...

编程日记 2025/8/21 15:34:09

欧税通香港分公司办公室正式乔迁至海港城！

3月20日，欧税通香港分公司办公室正式乔迁至香港油尖旺区的核心商业区海港城!左手挽着内地市场，右手牵起国际航道——这波乔迁选址操作堪称“地理课代表”! 乔迁仪式秒变行业大联欢!感谢亚马逊合规团队、亚马逊云、阿里国际站、Wayfair、coupang、美客多…...

编程日记 2025/8/20 16:01:18

Maven的安装配置-项目管理工具

各位看官，大家早安午安晚安呀~~~ 如果您觉得这篇文章对您有帮助的话欢迎您一键三连，小编尽全力做到更好欢迎您分享给更多人哦今天我们来学习：Maven的安装配置-项目管理工具目录 1.什么是Maven？Maven用来干什么的&#xff1f…...

编程日记 2025/8/20 22:22:12

【Linux篇】缓冲区的工作原理：如何影响你程序的输入输出速度

从内存到磁盘：缓冲区如何提升文件I/O效率一. 缓冲区1.1 什么是缓冲区1.2 为什么要引入缓冲区1.3 缓冲区类型1.4 FILE1.4.1 基本概念1.4.2 FILE 结构体的作用1.4.3 FILE 的工作机制二. 最后在程序开发中，缓冲区是一个经常被提及却不容易深入理解的概念…...

编程日记 2025/8/21 11:04:10

编写junit测试类 import org.junit.Test；

1. 添加依赖  <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-test</artifactId> <scope>test</scope> </dependency> 2. …...

编程日记 2025/8/22 7:21:55

初识数据结构——深入理解LinkedList与链表：吃透LinkedList与链表的终极指南

📌 深入理解LinkedList与链表：从原理到实战应用 🌟 引言在Java集合框架中，LinkedList和ArrayList是最常用的两种列表结构。它们各有优劣，适用于不同的场景。本文将带你深入探索LinkedList的底层实现——链表&#x…...

编程日记 2025/8/20 2:26:11

C++版Qt之登录界面设计

在C开发中，使用Qt框架可以快速构建美观且功能强大的GUI应用程序。本文将介绍如何设计一个漂亮的登录界面，包括账号和密码输入框，并确保只有验证成功后才能进入主窗口。项目结构文件列表 LoginDialog.h：登录对话框的头文件Logi…...

编程日记 2025/8/18 22:14:24

Java logback框架日志输出中文乱码的解决方案(windows)

在Java开发中，日志记录是一个重要的部分，它可以帮我们定位问题、运行时监控、错误排查与故障恢复。但是，在有些情况下，使用Logback记录的中文日志会出现乱码，这会影响日志的可读性，给维护带来麻烦。本文将探…...

编程日记 2025/8/21 19:42:03

【c++】c/c++内存管理

小编个人主页详情<—请点击小编个人gitee代码仓库<—请点击 c系列专栏<—请点击倘若命中无此运，孤身亦可登昆仑，送给屏幕面前的读者朋友们和小编自己! 目录前言一、c语言内存管理二、一图搞懂c/c中的程序内存区域划分三、c内存管理1. new和d…...

编程日记 2025/8/20 14:45:21

【C++】Stack Queue 仿函数

📝前言： 这篇文章我们来讲讲STL中的stack和queue。因为前面我们已经有了string、vector和list的学习基础，所以这篇文章主要关注一些stack和queue的细节问题，以及了解一下deque（缝合怪）和priority_queue &am…...

编程日记 2025/8/21 8:27:50

Python:基于Flask框架的数据可视化系统

以下是一个基于Flask框架的数据可视化系统代码示例，包含核心功能实现： python 复制 # app.py 后端核心代码 from flask import Flask, render_template, jsonify import sqlite3 from collections import defaultdict import jieba import reapp Fla…...

编程日记 2025/8/19 5:41:51