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

uniapp前端开发,基于vue3,element plus组件库,以及axios通讯

news 来源：原创 2025/7/14 18:31:46

简介

UniApp 是一个基于 Vue.js 的跨平台开发框架，旨在通过一次开发、编译后运行在多个平台上，如 iOS、Android、H5、以及小程序（微信小程序、支付宝小程序、百度小程序等）等。UniApp 为开发者提供了统一的开发体验，使得同一套代码可以在多个平台上运行，从而减少开发和维护成本。

基本上可以直接使用vue的语法,为了可移植性,所以大部分的东西都是用的vue的,少部分,像页面导航,使用uniapp自带的

vue

配置

换淘宝源

npm config set registry https://registry.npm.taobao.org

下载

npm install -g @vue/cli
npm uninstall -g @vue/cli

创建项目

vue create vue01

如果创建遇到报错

error Error: certificate has expired

关闭strict-ssl后再安装

yarn config set strict-ssl false

cd到工程目录之后

npm run dev

存储

localStorage

长期有效

<template><div><input v-model="username" placeholder="输入用户名" /><button @click="saveUsername">保存用户名</button><p>存储的用户名：{{ storedUsername }}</p></div>
</template><script setup>
import { ref, onMounted } from 'vue';// 定义数据
const username = ref('');
const storedUsername = ref('');// 保存用户名到 localStorage
const saveUsername = () => {localStorage.setItem('username', username.value);storedUsername.value = username.value;
};// 获取存储的用户名
onMounted(() => {const savedUsername = localStorage.getItem('username');if (savedUsername) {storedUsername.value = savedUsername;}
});
</script>

sessionStorage

关闭浏览器后失效,跟本地存储类似

设置数据到 sessionStorage：

sessionStorage.setItem('sessionData', 'someValue');

获取 sessionStorage 中的数据：

const sessionData = sessionStorage.getItem('sessionData');
console.log(sessionData); // 'someValue'

删除 sessionStorage 中的数据：

sessionStorage.removeItem('sessionData');

清空 sessionStorage 中的所有数据：

sessionStorage.clear();

生命周期钩子

可以在页面开始挂载时,进行一些操作,如开始监听消息,填充默认数据等

<template><div><p>当前时间：{{ currentTime }}</p><button @click="stopTimer">停止计时</button></div>
</template><script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue';const currentTime = ref('');
let timer = null;// 组件挂载后开始计时
onMounted(() => {timer = setInterval(() => {currentTime.value = new Date().toLocaleTimeString();}, 1000);
});// 组件销毁之前清除定时器
onBeforeUnmount(() => {clearInterval(timer);
});
</script>

route

uniapp中路由使用自带的uni.navigateTo()跳转

npm install vue-router@4

uniapp

页面跳转

pageA

<!-- pageA.vue -->
<template><view><button @click="goToPageBWithParams">跳转到页面B并传递参数</button><button @click="goToPageB">跳转到页面B不传递参数</button></view>
</template><script setup>
import { ref } from 'vue';const goToPageBWithParams = () => {uni.navigateTo({url: '/pages/pageB/pageB?name=John&age=25'});
};const goToPageB = () => {uni.navigateTo({url: '/pages/pageB/pageB'});
};
</script>

pageB

<!-- pageB.vue -->
<template><view><text v-if="name && age">名字：{{ name }}, 年龄：{{ age }}</text><text v-else>没有接收到参数</text></view>
</template><script setup>
import { ref, onMounted } from 'vue';
import { useRoute } from 'vue-router';const name = ref('');
const age = ref('');onMounted(() => {const route = useRoute();// 获取查询参数name.value = route.query.name || '';age.value = route.query.age || '';
});
</script>

也可以使用页面栈来获取查询参数

  // 获取当前页面的 query 参数const pages = getCurrentPages();const currentPage = pages[pages.length - 1];const { name: pageName, age: pageAge } = currentPage.options;name.value = pageName || '';age.value = pageAge || '';

页面栈

在 UniApp 中，页面栈是管理页面之间跳转和返回的一个重要机制。每次打开一个新页面，当前页面会被压入栈中，新的页面会成为栈顶的页面。当用户返回时，栈顶的页面被移除，返回到之前的页面。UniApp 的页面栈管理类似于浏览器的历史记录机制。以下是一些主要概念：

页面栈限制

UniApp 的页面栈最多允许 10 层页面（这可以通过 H5 端的history模式来拓展），超过限制时，会自动将底部的页面出栈，从而保持页面栈的数量。

页面跳转方式

uni.navigateTo: 进入新页面时，新页面会被压入页面栈，当前页面保持在栈中，适合在栈内管理跳转。
uni.redirectTo: 替换当前页面，不会保留当前页面到栈中，适用于不希望用户返回之前页面的场景。
uni.reLaunch: 清空整个页面栈，打开指定的页面，一般用于登录页面、首页等。
uni.switchTab: 切换到tabBar页面，不会涉及页面栈管理，因为tabBar页面是独立的。

页面返回

uni.navigateBack: 返回上一个页面，默认返回一层，可以通过传入参数指定返回的页面层级。

生命周期与页面栈的关系

每当页面栈发生变化，页面生命周期函数也会相应地触发：

onLoad: 页面第一次加载时触发。
onShow: 每次页面显示时触发，包括返回时。
onHide: 页面隐藏时触发，通常是在页面跳转到其他页面时触发。

这种页面栈机制帮助开发者在管理多页面应用时，更好地控制页面间的导航和返回操作。

如果有具体的应用场景或问题，也可以进一步探讨如何使用页面栈。

可以用如下代码打印关于页面栈的信息

  // 获取当前页面栈const pages = getCurrentPages(); // 打印页面栈console.log(pages);// 打印页面栈的长度（当前打开的页面数量）console.log("页面栈长度: ", pages.length);// 获取栈顶页面（当前显示的页面）const currentPage = pages[pages.length - 1];console.log("当前页面路径: ", currentPage.route);console.log("当前页面参数: ", currentPage.options);

Element plus

简介

一个基于vue3组件库,挺好看的.嗯

配置

安装

npm install element-plus

修改配置文件main.js中vue3部分

import App from './App'import { createSSRApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'export function createApp() {const app = createSSRApp(App)app.use(ElementPlus) // 挂载 ElementPlusreturn {app}
}

示例代码

<template><div><el-input v-model="inputValue" placeholder="请输入内容" style="width: 300px;"></el-input><el-button type="primary" @click="handleClick" style="margin-left: 10px;">提交</el-button><p>输入的内容：{{ inputValue }}</p></div>
</template><script setup>
import { ref } from 'vue';const inputValue = ref('');const handleClick = () => {alert(`你输入的内容是：${inputValue.value}`);
};
</script>

图标库

npm install @element-plus/icons-vue

使用

<template><div><el-button type="primary"><el-icon><search /></el-icon>     搜索</el-button><el-button type="success"><el-icon><edit /></el-icon>     编辑</el-button><el-button type="danger"><el-icon><delete /></el-icon>删除</el-button><el-button><el-icon><refresh /></el-icon>刷新</el-button><el-button type="warning"><el-icon><share /></el-icon>分享</el-button></div>
</template><script setup>
import { Search, Edit, Delete, Refresh, Share } from '@element-plus/icons-vue';
import { ElButton, ElIcon } from 'element-plus';</script>

axios

简介

用于前后端交换数据,通过url与后端连接

url

一个完整的URL（Uniform Resource Locator，统一资源定位符）通常由以下几个部分组成：

协议（Scheme/Protocol）：
- 定义访问资源所用的协议，例如http、https、ftp等。
- 格式：http://或https://
域名（Domain Name）或IP地址：
- 标识资源所在的服务器地址，例如www.example.com或192.168.1.1。
- 也可以包含www子域，或是更具体的子域名如blog.example.com。
端口号（Port）：
- 指定服务器上运行的特定服务的端口，默认为80（HTTP）或443（HTTPS），通常省略。
- 格式：:8080
路径（Path）：
- 服务器上资源的具体位置，通常类似于文件系统路径，如/folder/page.html。
- 如果没有路径，通常默认指向网站的根目录。
查询参数（Query Parameters）：
- 包含键值对，用于传递给资源的参数，通常用于动态页面或API请求。
- 动态页面如根据id显示不同的界面,API请求如rest风格的接口
- 一般在get里面定位资源,在post里面应用一般都是API版本控制、分页、身份验证、路径补充、兼容性支持等场景，以便保持API接口的一致性和简洁性。
- 格式：?key1=value1&key2=value2
片段标识符（Fragment Identifier）：
- 指向资源内的某个位置，如页面内的锚点。
- 在wiki百科中经常用到定位某个标签https://en.wikipedia.org/wiki/Wiki#Conferences
- 格式：#section1

示例URL:

https://www.example.com:8080/folder/page.html?search=query#section1

配置

npm i axios

示例

<template><div><div @click="fetchData" class="box">Click me to GET data</div><button @click="sendData">Send POST Request</button><div v-if="data"><h3>Data from GET request:</h3><pre>{{ data }}</pre></div><div v-if="postResponse"><h3>Response from POST request:</h3><pre>{{ postResponse }}</pre></div></div>
</template><script setup>
import axios from 'axios'
import { ref } from 'vue'const data = ref(null)
const postResponse = ref(null)async function fetchData() {try {const res = await axios.get("http://localhost:8088/user/list")data.value = res.dataconsole.log(res, "Data received from GET request")} catch (error) {console.error("Error fetching data:", error)}
}async function sendData() {try {const payload = { key: 'value' } // Replace with actual data to sendconst res = await axios.post("http://localhost:8088/user/add", payload)postResponse.value = res.dataconsole.log(res, "Data received from POST request")} catch (error) {console.error("Error sending data:", error)}
}
</script><style scoped>
.box {cursor: pointer;padding: 10px;background-color: #f0f0f0;border: 1px solid #ccc;text-align: center;
}
</style>

库封装

因为需要很多与后端的接口,所以我们进行封装,减少调用复杂度

import axios from 'axios';
import { ElMessage } from 'element-plus';// 创建axios实例
const http = axios.create({baseURL: 'http://localhost:8080', // 设置基础URLtimeout: 5000, // 设置超时时间
});// 请求拦截器
http.interceptors.request.use(config => {// 在请求发送之前做些什么，比如添加 token 等// config.headers.Authorization = `Bearer ${getToken()}`;return config;},error => {// 请求错误处理ElMessage.error('请求发送失败');return Promise.reject(error);}
);// 响应拦截器
http.interceptors.response.use(response => {// 处理响应成功if (response.status === 200) {return response.data;}ElMessage.error('服务器异常');return Promise.reject(response);},error => {// 处理响应失败const status = error.response ? error.response.status : null;if (status === 404) {ElMessage.error('请求的资源未找到');} else if (status === 500) {ElMessage.error('服务器内部错误');} else {ElMessage.error('网络错误，请稍后重试');}return Promise.reject(error);}
);// 封装常用请求方法
export const get = (url, params = {}) => http.get(url, { params });
export const post = (url, data = {}) => http.post(url, data);
export const put = (url, data = {}) => http.put(url, data);
export const del = (url, data = {}) => http.delete(url, { data });

uniapp前端开发,基于vue3,element plus组件库,以及axios通讯

简介 UniApp 是一个基于 Vue.js 的跨平台开发框架，旨在通过一次开发、编译后运行在多个平台上，如 iOS、Android、H5、以及小程序（微信小程序、支付宝小程序、百度小程序等）等。UniApp 为开发者提供了统一的开发体验，使…...

编程日记 2025/7/14 18:31:46

STM32-- 串口发送数据

while(USART_GetFlagStatus(USART2,USART_FLAG_TXE)RESET);？？ 答： 这行代码： while(USART_GetFlagStatus(USART2, USART_FLAG_TXE) RESET);的作用是等待串口 USART2 的发送数据寄存器（TXE，Transmit Dat…...

编程日记 2025/7/14 5:41:42

网络安全提示

如果您是企业主或 IT 经理，您应该知道计算机安全的重要性。从保护密码安全的基础知识到网络钓鱼、恶意软件等的危险，本文将为您提供您需要了解的有关网络安全的信息。每年，互联网都变得越来越大，这意味着我们为黑客和网络犯罪分…...

编程日记 2025/7/10 13:50:08

【计算机网络】多路转接之epoll

epoll也是一种linux中的多路转接方案(epoll也是只负责IO过程中的"等") 一、epoll相关接口的使用 1.epoll_create int epoll_create(int size); 功能：创建一个epoll模型 ① int size：没意义了 >0就行返回值：返回一个文件…...

编程日记 2025/7/8 7:45:26

nextjs+nestjs+prisma写todolist全栈项目

技术栈 nextjsnestjsprisma所学知识 Nextjs组件渲染，状态，路由docker启动Mysql容器prisma操作Mysql（CRUD）允许跨域请求APITanStack Query异步状态管理fetch api服务器组件预请求数据nestjs 管道和异常处理检测id是否正整数Docker启动Mysql容器 compose.yml name: todoLis…...

编程日记 2025/7/8 22:12:50

重构代码之将双向关联改为单向关联

在代码重构中，双向关联改为单向关联是指将原本双向关联转变为单向关联。这种重构方式有助于简化对象模型和提高代码的可维护性，减少不必要的耦合。下面是对这个重构技巧的详细讲解。一、为什么需要将双向关联改为单向关联？ 减少耦合&#…...

编程日记 2025/7/14 7:52:35

Linux介绍与安装指南：从入门到精通

1. Linux简介 1.1 什么是Linux？ Linux是一种基于Unix的操作系统，由Linus Torvalds于1991年首次发布。Linux的核心（Kernel）是开源的，允许任何人自由使用、修改和分发。Linux操作系统通常包括Linux内核、GNU工具集、图…...

编程日记 2025/7/13 8:42:08

深度学习中的正则化模型是什么意思？

一、定义在深度学习中，正则化是一种用于防止过拟合的技术。过拟合是指模型在训练数据上表现非常好，但在新的、未见过的数据（测试数据）上表现很差的情况。正则化模型就是通过在损失函数中添加额外的项来约束模型的复杂度&#xf…...

编程日记 2025/7/12 16:28:01

rabbitMq两种消费应答失败处理方式

在rabbitMq消费端，有三种应答模式： none：不处理。即消息投递给消费者后立刻 ack 消息会立刻从MQ删除。非常不安全，不建议使用 manual：手动模式。需要自己在业务代码中调用api，发送 ack 或 reject&#xff…...

编程日记 2025/7/8 16:47:39

windows C#-使用反射访问特性

你可以定义自定义特性并将其放入源代码中这一事实，在没有检索该信息并对其进行操作的方法的情况下将没有任何价值。通过使用反射，可以检索通过自定义特性定义的信息。主要方法是 GetCustomAttributes，它返回对象数组，这些对象在…...

编程日记 2025/7/14 8:40:30

java中链表的数据结构的理解

在 Java 中，链表是一种常见的数据结构，可以通过类的方式实现自定义链表。以下是关于 Java 中链表的数据结构和实现方式的详细介绍。 1. 自定义链表结构 Java 中链表通常由一个节点类 (ListNode) 和可能的链表操作类构成。节点类 (ListNode) 这是链表…...

编程日记 2025/7/11 13:54:47

ctfshow

1,web153 大小写绕过失败使用.user.ini 来构造后⻔ php.ini是php的⼀个全局配置⽂件，对整个web服务起作⽤；⽽.user.ini和.htaccess⼀样是⽬录的配置⽂件，.user.ini就是⽤户⾃定义的⼀个php.ini，我们可以利⽤这个⽂件来构造后⻔和…...

编程日记 2025/7/5 23:15:07

【AI绘画】Midjourney进阶：色调详解（下）

博客主页： [小ᶻ☡꙳ᵃⁱᵍᶜ꙳] 本文专栏: AI绘画 | Midjourney 文章目录 💯前言💯Midjourney中的色彩控制为什么要控制色彩？为什么要在Midjourney中控制色彩？ 💯色调纯色调灰色调暗色调 &#x1f4af…...

编程日记 2025/7/9 23:35:37

lanqiaoOJ 3747：繁忙的精神疗养院 ← STL queue

【题目来源】https://www.lanqiao.cn/problems/3747/learning/【题目描述】心灵之园是一家知名的精神疗养院，为了提供更优质的服务，他们专门设立了一个 VIP 诊室和一个普通诊室。VIP 诊室主要接待特殊需求的高级会员，而普通诊室则服务所有的…...

编程日记 2025/7/12 23:30:16

Local Changes不展示，DevEco Studio的git窗口中没有Local Changes

DevEco Studio的git窗口中，没有Local Changes，怎么设置可以调出？ 进入File-->Settings-->Version Control，将Use non-modal commit interface前的勾选框取消勾选，点击OK即可在打开git窗口，就可以看到…...

编程日记 2025/7/10 12:13:50

探索Python项目模板化的新纪元 —— Copier库揭秘

文章目录 **探索Python项目模板化的新纪元 —— Copier库揭秘**1. 背景介绍：为何Copier成为Python开发者的新宠？2. Copier究竟是什么？3. 如何安装Copier？4. 简单库函数使用方法创建模板从Git URL创建项目使用快捷方式动态文件生成…...

编程日记 2025/7/10 5:33:51

导入100道注会cpa题的方法，导入试题，自己刷题

一、问题描述复习备考的小伙伴们，往往希望能够利用零碎的时间和手上的试题，来复习和备考用一个能够导入自己试题的刷题工具，既能加强练习又能利用好零碎时间，是一个不错的解决方案目前市面上刷题工具存下这些问题 1、要收费…...

编程日记 2025/7/10 2:14:15

使用NAS开启无纸化办公，Docker部署开源文档管理系统『Paperless-ngx』

使用NAS开启无纸化办公，Docker部署开源文档管理系统『Paperless-ngx』哈喽小伙伴们好，我是Stark-C~ 对于文案类的办公场景来说，手头堆放最多的可能就是各种文档文件，以及各种用过的打印废纸。这么多年来，不管是领…...

编程日记 2025/7/9 22:58:04

1.拉取mysql镜像 docker pull mysql:5.7 2.启动mysql容器 docker run -d -e MYSQL_ROOT_PASSWORD123456 -e MYSQL_TCP_PORT3307 -p 3307:3307 -v /SDXL/wjz/docker_mysql_log:/var/log/mysql -v /SDXL/wjz/docker_mysql_data:/var/lib/mysql -v /SDXL/wjz/docker_mysql_conf:/e…...

编程日记 2025/7/10 0:54:53

9、深入剖析PyTorch的nn.Sequential及ModuleList源码

文章目录 1. train&eval2. 求导数3. 参数更新4. ModuleList,Sequential5. Parameter&Parameter_List&ParmeterDict 1. train&eval train 模式：表示的是神经网络的训练模式，能够进行样本学习，通过样本来更新权重weighteval 模…...

编程日记 2025/7/9 10:30:48

idea初始化设置

下载idea： https://www.jetbrains.com/idea/ 安装idea 安装插件： Rainbow BracketsLombokMybatisXSonarLintMaven HelperCodeGeeX（国内AI插件可用） 设置idea注释模板： 设置代码注释模板： https://blo…...

编程日记 2025/7/12 7:50:25

【C/C++】内存管理详解：从new/delete到智能指针的全面解析

文章目录更多文章C/C中的传统内存管理方式new和delete运算符malloc和free函数传统内存管理的弊端智能指针的崛起智能指针的定义与作用C11引入的标准智能指针详解C标准智能指针std::unique_ptr特点使用方法适用场景 std::shared_ptr特点使用方法适用场景 std::weak_ptr特点使…...

编程日记 2025/7/14 8:42:46

Vue.Draggable使用nested-with-vmodel进行拖拽

Vue.Draggable使用nested-with-vmodel进行拖拽 1. 介绍 ‌draggable‌是一个基于Sortable.js的Vue组件，用于实现拖拽功能。它支持触摸设备、拖拽和选择文本、智能滚动、不同列表之间的拖拽等功能，并且与Vue的视图模型同步刷新，兼容Vue2的过…...

编程日记 2025/7/13 1:32:10

MySQL 中的乐观锁与悲观锁

文章目录 MySQL 中的乐观锁与悲观锁一、引言二、乐观锁（一）原理（二）应用场景（三）示例代码三、悲观锁（一）原理（二）应用场景（三）示例代…...

编程日记 2025/7/10 2:05:43

面试题分享（一）

实习的项目成员规模用到过哪些设计模式？ 策略、单例、工厂、代理责任链模式了解吗？ 责任链模式（Chain of Responsibility Pattern）是一种行为型设计模式，目的是为了避免请求的发送者与接收者之间的耦合关系。通…...

编程日记 2025/7/10 2:57:28

用天翼云搭建一个HivisionIDPhoto证件照处理网站

世人不必记我，我不记世人。 HivisionIDPhoto证件照处理网站世人不必记我，我不记世人。项目地址项目搭建与修改前端后端遇到的坑成果图前段时间工作需要频繁处理证件照，当时同事推荐一个证件照小程序（要看广告）&…...

编程日记 2025/7/10 17:47:27

Conda环境迁移到内网

文章目录一、conda是什么？ conda环境迁移二、迁移方法 1.docker方式 2.conda包方式 3.conda指定目录创建环境 4.pip方式 5.单个包安装总结前言搞Python，使用conda是避免不了的，利用conda可以方便的管理多个不同的虚拟环境&…...

编程日记 2025/7/13 19:15:29

React Hooks中use的细节

文档 useState useState如果是以函数作为参数，那要求是一个纯函数，不接受任何参数，同时需要一个任意类型的返回值作为初始值。 useState可以传入任何类型的参数作为初始值，当以一个函数作为参数进行传入的时候需要注意&#xff…...

编程日记 2025/7/11 14:50:35

Android 16 开发者预览版抢先使用

Android 16 开发者预览版获取 Android 16在 Google Pixel 设备上获取 Android 16设置 Android 模拟器设置 Android 16 SDK获取 Android Studio安装 SDK更新应用的 build 配置获取 Android 16 你可以通过以下任一方式获取 Android 16 在 Google Pixel 设备上获取 Android 1…...

编程日记 2025/7/13 16:37:40

蓝桥杯c++算法秒杀【6】之动态规划【上】（数字三角形、砝码称重(背包问题)、括号序列、组合数问题：：：非常典型的必刷例题！！！）

下将以括号序列、组合数问题超级吧难的题为例子讲解动态规划别忘了请点个赞收藏关注支持一下博主喵！！！! ! ! ! ！ 关注博主，更多蓝桥杯nice题目静待更新:) 动态规划一、数字三角形【问题描述】上图给出了…...

编程日记 2025/7/10 1:59:49

c#:winform引入bartender

1、vs新建项目 ①选择Windows窗体应用（.NET Framework） 2、将bartender引入vs中 ①找到bartender的安装目录，复制Seagull.BarTender.Print.dll文件 ②粘贴到项目->bin->Debug文件，并可创建Model文件夹：为了存放…...

编程日记 2025/7/14 6:15:00

Zabbix 模板翻译自动化教程

在企业 IT 运维管理中，Zabbix 作为一款强大的开源监控平台被广泛应用。而 Zabbix 模板作为监控配置的重要组成部分，用来定义监控项、触发器、图形等。随着国际化的需求增加，Zabbix 模板的翻译工作变得日益重要，特别是在需要为不同…...

编程日记 2025/7/13 8:45:07

HarmonyOS开发：DevEco Studio的Beta3（5.0.5.200）新增和增强特性

新增特性 DevEco Studio支持开发API 13工程。DevEco Profiler Frame模板新增Lost Frames和Hitch Time泳道，用于识别和优化卡顿和丢帧现象。具体请参考Frame分析。hvigor-config.json5中properties下新增ohos.arkCompile.noEmitJs字段，用于指定ArkTS编译…...

编程日记 2025/7/14 5:43:29

macOS安装nvm node

macOS安装nvm macOS安装nvm创建 nvm 工作目录配置环境变量使用 nvm查看可用的 Node.js 版本安装特定版本 macOS安装nvm brew install nvm创建 nvm 工作目录 mkdir ~/.nvm配置环境变量 vim ~/.zshrc# nvm export NVM_DIR"$HOME/.nvm" [ -s "/opt/homebrew/opt…...

编程日记 2025/7/2 19:27:51

SpringBoot 集成MQTT实现消息订阅

1、引入依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-integration</artifactId></dependency><dependency><groupId>org.springframework.integrat…...

编程日记 2025/7/9 15:35:17

VM+Ubuntu18.04+XSHELL+VSCode环境配置

前段时间换了新电脑，准备安装Linux学习环境：VM虚拟机、Ubuntu18.04操作系统、XSHELL、XFTP远程连接软件、VSCode编辑器等，打算把安装过程记录一下。 1. 虚拟机介绍为什么要用虚拟机？ 想学习Linux操作系统，一般有3种…...

编程日记 2025/7/9 16:29:59

C#上机练习66-70

66.数组x中存有20个四位整数，请编制函数，求出正整数的个数tn。以及各位数字之和是偶数的数的个数tc,以及满足条件的这些数的算术平均ta.，将tn，tc，ta在控制台输出。 67.数组x中存有20个四位整数，请编制函数…...

编程日记 2025/7/14 1:34:42

pip 与当前python环境版本不匹配, pyenv, pipenv, conda

目录 pip 与当前python环境不匹配解决pip版本不一致 CondaPyenv pip 与当前python环境不匹配电脑中安装了多个python虚拟环境, 有anaconda创建的虚拟环境,也有pyenv创建的虚拟环境,但是环境变量配置的是anaconda的路径从而导致在vscode中选择的python版本是3.8.10,而pip却是…...

编程日记 2025/7/14 18:31:46

HAProxy面试题及参考答案（精选80道面试题）

目录什么是 HAProxy？ HAProxy 主要有哪些功能？ HAProxy 的关键特性有哪些？ HAProxy 的主要功能是什么？ HAProxy 的作用是什么？解释 HAProxy 在网络架构中的作用。 HAProxy 与负载均衡器之间的关系是什么？ HAProxy 是如何实现负载均衡的？阐述 HAProxy 的四层…...

编程日记 2025/7/10 1:24:47

ElasticSearch为什么不能在query阶段直接返回_id,从而避免fetch?

整理自Github的一个issue,也正好解答了我的疑惑 https://github.com/elastic/elasticsearch/issues/17159 提问是否可以避免搜索的fetch阶段并仅返回文档ID？查询阶段结束时是否有_id，这样当我只需要_id时，fetch就多余了？可以通过…...

编程日记 2025/7/10 0:47:04

任意文件读取漏洞（CVE-2024-7928）修复

验证CVE-2024-7928问题是否存在可以使用如下方法： https://域名/index/ajax/lang?lang..//..//目录名/文件名（不带后缀） 目录名是该项目的一个目录，这里目录位置为nginx设置站点目录为基准，网上两层目录。文件名…...

编程日记 2025/7/14 16:11:07

07 初始 Oracle 优化器

查询优化器，简称优化器，是数据库最核心的组件之一。我们在这个系列的第一篇文章中已经给大家介绍了，优化器会参与到SQL语句的解析过程中，用来生成SQL语句的执行计划，直接决定SQL语句执行性能的优劣。什么是执行计划 …...

编程日记 2025/7/11 13:55:02

深入理解React Hooks：使用useState和useEffect

引言 React Hooks是React 16.8引入的一项强大功能，它使函数组件能够使用状态和其他React特性。本文将深入探讨两个最常用的Hooks：useState和useEffect，并通过实际代码示例展示它们的使用方法。 1. 什么是React Hooks？ React Ho…...

编程日记 2025/7/8 2:03:48

深入浅出剖析典型文生图产品Midjourney

2022年7月，一个小团队推出了公测的 Midjourney，打破了 AIGC 领域的大厂垄断。作为一个精调生成模型，以聊天机器人方式部署在 Discord，它创作的《太空歌剧院》作品，甚至获得了美国「数字艺术/数码摄影」竞赛单元一等奖。这一事件展示了 AI 在绘画领域惊人的创造力，让人们…...

编程日记 2025/7/11 11:17:51

大数据学习18之Spark-SQL

1.概述 1.1.简介 Spark SQL 是 Apache Spark 用于处理结构化数据的模块。 1.2.历史 1.2.1.Shark Hadoop诞生初期，Hive是唯一在Hadoop上运行的SQL-on-Hadoop工具，MR的中间计算过程产生了大量的磁盘落地操作，消耗了大量的I/O，降低…...

编程日记 2025/7/13 21:20:56

Flink开发入门简单案例--统计实时流订单

Flink开发入门简单案例 0.简介1.订单数据生成器1.1 新建工程TestFlink1.2 在pom.xml中引入Flink依赖包1.3 订单数据生成类订单类（Item）订单生成数据流类测试订单生成类 2.订单统计2.1 仅统计订单中商品的件数 2.2 同时统计商品数量和金额 0.简介本案例…...

编程日记 2025/7/14 17:01:44

Scala身份证上的秘密以及Map的遍历

object test {def main(args: Array[String]): Unit {val id "42032220080903332x"//1.生日是？//字符串截取val birthday id.substring(10,14) //不包括终点下标println(birthday)val year id.substring(6,10) //println(year)//性别：倒数第…...

编程日记 2025/7/10 9:12:23