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

使用html 和javascript 实现微信界面功能1

news 来源：原创 2025/7/1 19:17:34

1.功能说明：

搜索模块:
- 提供一个搜索框，但目前没有实现具体的搜索功能。
好友模块:
- 在左侧的“好友”部分有一个“查看好友”按钮。
- 点击左侧的“查看好友”按钮时，会在右侧显示所有好友的列表。
- 列表中每个好友可以点击查看详情，包括状态（正常/已拉黑）、聊天按钮、删除好友按钮和拉黑好友按钮。
- 如果好友已被拉黑，则聊天按钮会被禁用。
- 删除好友和拉黑好友操作通过确认弹窗进行。
- 右侧还会显示一个“添加好友”的按钮，方便随时添加新的好友。
收藏模块:
- 在左侧的“收藏”部分有一个“查看收藏”按钮。
- 点击左侧的“查看收藏”按钮时，会在右侧显示所有收藏内容的列表。
- 列表中每个收藏内容可以点击查看详情，包括点赞和删除操作。
- 右侧还会显示一个“新增收藏内容”的按钮，方便随时添加新的收藏内容。
- 删除收藏操作通过确认弹窗进行。
文件模块:
- 在左侧的“文件”部分有一个“查看文件”按钮。
- 点击左侧的“查看文件”按钮时，会在右侧显示所有文件的列表。
- 列表中每个文件可以点击查看详情，包括下载和删除操作。
- 右侧还会显示一个“上传文件”的按钮，方便随时上传新的文件。
- 删除文件操作通过确认弹窗进行。
朋友圈模块:
- 在左侧的“朋友圈”部分有一个“查看朋友圈”按钮。
- 点击左侧的“查看朋友圈”按钮时，会在右侧显示所有朋友圈的列表。
- 列表中每个朋友圈可以点击查看详情，包括点赞和删除操作。
- 右侧还会显示一个“发布朋友圈”的按钮，方便随时发布新的朋友圈。
- 删除朋友圈操作通过确认弹窗进行。
视频号模块:
- 在左侧的“视频号”部分有一个“查看视频”按钮。
- 点击左侧的“查看视频”按钮时，会在右侧显示所有视频的列表。
- 列表中每个视频可以点击查看详情，包括点赞和删除操作。
- 右侧还会显示一个“展示视频”的按钮，方便随时添加新的视频。
- 删除视频操作通过确认弹窗进行。

2.完整代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>简易版微信</title><style>body {font-family: Arial, sans-serif;display: flex;justify-content: center;align-items: center;height: 100vh;margin: 0;background-color: #f5f5f5;}.container {width: 80%;max-width: 1200px;background: white;border-radius: 10px;box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);overflow: hidden;display: flex;}.sidebar {width: 25%;background: #e9ecef;padding: 20px;box-sizing: border-box;}.main-content {width: 75%;padding: 20px;box-sizing: border-box;}.search-area {margin-bottom: 20px;}.search-area input {width: calc(100% - 22px);padding: 10px;border: 1px solid #ddd;border-radius: 5px;outline: none;}.friends-list, .favorites-list, .files-list, .moments-list, .videos-list {margin-top: 20px;}.item {padding: 10px;border-bottom: 1px solid #ddd;cursor: pointer;}.item:last-child {border-bottom: none;}.item:hover {background: #f1f1f1;}.video-item video {width: 100%;border-radius: 10px;}.disabled {opacity: 0.5;pointer-events: none;}.messages {max-height: 300px;overflow-y: auto;border-bottom: 1px solid #ddd;padding-bottom: 10px;}.message {margin-bottom: 10px;}.message.user {text-align: right;}.message.bot {text-align: left;}.input-area {display: flex;border-top: 1px solid #ddd;}.input-area input {flex-grow: 1;padding: 10px;border: none;outline: none;}.input-area button {padding: 10px;border: none;background: #07c160;color: white;cursor: pointer;}.input-area button:hover {background: #06a352;}.confirmation-message {margin-top: 20px;padding: 10px;background: #ffcccc;border: 1px solid #ff4d4d;border-radius: 5px;}.confirmation-message p {margin: 0;}.confirmation-buttons button {margin-right: 10px;}.friend-details img {width: 50px;height: 50px;border-radius: 50%;object-fit: cover;margin-right: 10px;}.form-group {margin-bottom: 15px;}.form-group label {display: block;margin-bottom: 5px;}.form-group input,.form-group select {width: 100%;padding: 10px;border: 1px solid #ddd;border-radius: 5px;outline: none;}.form-group button {padding: 10px 20px;border: none;background: #07c160;color: white;cursor: pointer;border-radius: 5px;}.form-group button:hover {background: #06a352;}</style>
</head>
<body><div class="container"><div class="sidebar"><h3>搜索</h3><div class="search-area"><input type="text" id="searchInput" placeholder="搜索..."></div><h3>好友</h3><div class="friends-list" id="friendsList"><div class="item" onclick="showFriends()">查看好友</div></div><h3>收藏</h3><div class="favorites-list" id="favoritesList"><div class="item" onclick="showFavorites()">查看收藏</div></div><h3>文件</h3><div class="files-list" id="filesList"><div class="item" onclick="showFiles()">查看文件</div></div><h3>朋友圈</h3><div class="moments-list" id="momentsList"><div class="item" onclick="showMoments()">查看朋友圈</div></div><h3>视频号</h3><div class="videos-list" id="videosList"><div class="item" onclick="showVideos()">查看视频</div></div></div><div class="main-content"><h2 id="contentTitle">主界面</h2><div id="contentArea"></div></div></div><script>let friends = [];let favorites = [];let files = [];let moments = [];let videos = [];let confirmationCallback = null;function generateUniqueId() {return Math.random().toString(36).substr(2, 9);}function addFriendForm() {const contentArea = document.getElementById('contentArea');contentArea.innerHTML = `<h3>添加好友</h3><form id="addFriendForm"><div class="form-group"><label for="friendNickname">网名:</label><input type="text" id="friendNickname" required></div><div class="form-group"><label for="friendAge">年龄:</label><input type="number" id="friendAge" min="1" required></div><div class="form-group"><label for="friendAvatar">头像URL:</label><input type="url" id="friendAvatar" required></div><button type="submit">添加好友</button></form>`;document.getElementById('addFriendForm').onsubmit = (event) => {event.preventDefault();const nickname = document.getElementById('friendNickname').value;const age = parseInt(document.getElementById('friendAge').value);const avatar = document.getElementById('friendAvatar').value;const friendId = generateUniqueId();friends.push({ id: friendId, nickname, age, avatar, blocked: false });showMessage(`已添加好友 ${nickname}`);showFriends();};}function deleteFriend(index) {confirmationCallback = () => {friends.splice(index, 1);showFriends();};showConfirmation(`确定要删除 ${friends[index].nickname} 吗？`);}function blockFriend(index) {friends[index].blocked = !friends[index].blocked;showMessage(`已将 ${friends[index].nickname} ${friends[index].blocked ? '拉黑' : '取消拉黑'}`);showFriends();}function addToFavorites() {const favoriteContent = prompt("请输入要收藏的内容:");if (favoriteContent) {favorites.push({ content: favoriteContent, likes: 0 });showFavorites();}}function deleteFavorite(index) {confirmationCallback = () => {favorites.splice(index, 1);showFavorites();};showConfirmation(`确定要删除此收藏吗？`);}function likeFavorite(index) {favorites[index].likes++;showFavorites();}function uploadFile() {const fileInput = document.createElement('input');fileInput.type = 'file';fileInput.onchange = () => {const file = fileInput.files[0];if (file) {files.push(file);showMessage(`${file.name} 已上传`);showFiles();}};fileInput.click();}function downloadFile(index) {const file = files[index];const url = URL.createObjectURL(file);const a = document.createElement('a');a.href = url;a.download = file.name;document.body.appendChild(a);a.click();a.remove();}function deleteFile(index) {confirmationCallback = () => {files.splice(index, 1);showFiles();};showConfirmation(`确定要删除此文件吗？`);}function postMoment() {const momentContent = prompt("请输入朋友圈内容:");if (momentContent) {moments.push({ content: momentContent, likes: 0 });showMoments();}}function deleteMoment(index) {confirmationCallback = () => {moments.splice(index, 1);showMoments();};showConfirmation(`确定要删除此朋友圈吗？`);}function likeMoment(index) {moments[index].likes++;showMoments();}function showVideo() {const videoUrl = prompt("请输入视频URL:");if (videoUrl) {videos.push({ url: videoUrl, likes: 0 });showVideos();}}function deleteVideo(index) {confirmationCallback = () => {videos.splice(index, 1);showVideos();};showConfirmation(`确定要删除此视频吗？`);}function likeVideo(index) {videos[index].likes++;showVideos();}function updateFriendsList() {const friendsList = document.getElementById('friendsList');friendsList.innerHTML = `<div class="item" οnclick="showFriends()">查看好友</div>`;if (friends.length > 0) {friends.forEach((friend, index) => {const item = document.createElement('div');item.className = 'item';item.textContent = `${friend.nickname} (${friend.age}) ${friend.blocked ? '(已拉黑)' : ''}`;item.onclick = () => showFriendDetails(index);friendsList.appendChild(item);});}}function updateFavoritesList() {const favoritesList = document.getElementById('favoritesList');favoritesList.innerHTML = `<div class="item" οnclick="showFavorites()">查看收藏</div>`;if (favorites.length > 0) {favorites.forEach((favorite, index) => {const item = document.createElement('div');item.className = 'item';item.textContent = `${favorite.content} (${favorite.likes} 点赞)`;item.onclick = () => showFavoriteDetails(index);favoritesList.appendChild(item);});}}function updateFilesList() {const filesList = document.getElementById('filesList');filesList.innerHTML = `<div class="item" οnclick="showFiles()">查看文件</div>`;if (files.length > 0) {files.forEach((file, index) => {const item = document.createElement('div');item.className = 'item';item.textContent = `${file.name}`;item.onclick = () => showFileDetails(index);filesList.appendChild(item);});}}function updateMomentsList() {const momentsList = document.getElementById('momentsList');momentsList.innerHTML = `<div class="item" οnclick="showMoments()">查看朋友圈</div>`;if (moments.length > 0) {moments.forEach((moment, index) => {const item = document.createElement('div');item.className = 'item';item.textContent = `${moment.content} (${moment.likes} 点赞)`;item.onclick = () => showMomentDetails(index);momentsList.appendChild(item);});}}function updateVideosList() {const videosList = document.getElementById('videosList');videosList.innerHTML = `<div class="item" οnclick="showVideos()">查看视频</div>`;if (videos.length > 0) {videos.forEach((video, index) => {const item = document.createElement('div');item.className = 'item';item.innerHTML = `<video src="${video.url}" controls></video> (${video.likes} 点赞)`;item.onclick = () => showVideoDetails(index);videosList.appendChild(item);});}}function showFriends() {const contentArea = document.getElementById('contentArea');contentArea.innerHTML = `<h3>好友列表</h3><button οnclick="addFriendForm()">添加好友</button><div id="friendsContent"></div>`;const friendsContent = document.getElementById('friendsContent');friends.forEach((friend, index) => {const item = document.createElement('div');item.className = 'item';item.textContent = `${friend.nickname} (${friend.age}) ${friend.blocked ? '(已拉黑)' : ''}`;item.onclick = () => showFriendDetails(index);friendsContent.appendChild(item);});}function showFriendDetails(index) {const friend = friends[index];const contentArea = document.getElementById('contentArea');contentArea.innerHTML = `<h3>${friend.nickname}</h3><div class="friend-details"><img src="${friend.avatar}" alt="${friend.nickname}'s Avatar"><p>年龄: ${friend.age}</p><p>状态: ${friend.blocked ? '已拉黑' : '正常'}</p><button οnclick="chatWithFriend(${index})" ${friend.blocked ? 'class="disabled"' : ''}>聊天</button><button οnclick="deleteFriend(${index})">删除好友</button><button οnclick="blockFriend(${index})">${friend.blocked ? '取消拉黑' : '拉黑好友'}</button></div>`;}function chatWithFriend(index) {const friend = friends[index];if (friend.blocked) {showMessage('无法与已拉黑的好友聊天');return;}const contentArea = document.getElementById('contentArea');contentArea.innerHTML = `<h3>与 ${friend.nickname} 聊天</h3><div class="messages" id="friendMessages"></div><div class="input-area"><input type="text" id="friendMessageInput" placeholder="输入消息..."><button οnclick="sendFriendMessage(${index})">发送</button></div>`;}function sendFriendMessage(index) {const friendMessageInput = document.getElementById('friendMessageInput');const friendMessagesContainer = document.getElementById('friendMessages');const userMessage = friendMessageInput.value.trim();if (userMessage === '') return;// 创建用户消息元素const userMessageElement = document.createElement('div');userMessageElement.className = 'message user';userMessageElement.textContent = userMessage;friendMessagesContainer.appendChild(userMessageElement);// 添加撤回按钮const revokeButton = document.createElement('button');revokeButton.textContent = '撤回';revokeButton.onclick = () => {friendMessagesContainer.removeChild(userMessageElement);};userMessageElement.appendChild(revokeButton);// 清空输入框friendMessageInput.value = '';// 模拟好友回复setTimeout(() => {const friendReply = `收到：${userMessage}`;const friendMessageElement = document.createElement('div');friendMessageElement.className = 'message bot';friendMessageElement.textContent = friendReply;friendMessagesContainer.appendChild(friendMessageElement);// 自动滚动到底部friendMessagesContainer.scrollTop = friendMessagesContainer.scrollHeight;}, 1000);}function showFavoriteDetails(index) {const contentArea = document.getElementById('contentArea');contentArea.innerHTML = `<h3>收藏内容</h3><p>${favorites[index].content}</p><p>点赞数: ${favorites[index].likes}</p><button οnclick="likeFavorite(${index})">点赞</button><button οnclick="deleteFavorite(${index})">删除收藏</button>`;}function showFileDetails(index) {const contentArea = document.getElementById('contentArea');contentArea.innerHTML = `<h3>文件详情</h3><p>文件名: ${files[index].name}</p><button οnclick="downloadFile(${index})">下载文件</button><button οnclick="deleteFile(${index})">删除文件</button>`;}function showMomentDetails(index) {const contentArea = document.getElementById('contentArea');contentArea.innerHTML = `<h3>朋友圈内容</h3><p>${moments[index].content}</p><p>点赞数: ${moments[index].likes}</p><button οnclick="likeMoment(${index})">点赞</button><button οnclick="deleteMoment(${index})">删除朋友圈</button>`;}function showVideoDetails(index) {const contentArea = document.getElementById('contentArea');contentArea.innerHTML = `<h3>视频详情</h3><video src="${videos[index].url}" controls></video><p>点赞数: ${videos[index].likes}</p><button οnclick="likeVideo(${index})">点赞</button><button οnclick="deleteVideo(${index})">删除视频</button>`;}function showFavorites() {const contentArea = document.getElementById('contentArea');contentArea.innerHTML = `<h3>收藏内容列表</h3><button οnclick="addToFavorites()">新增收藏内容</button><div id="favoritesContent"></div>`;const favoritesContent = document.getElementById('favoritesContent');favorites.forEach((favorite, index) => {const item = document.createElement('div');item.className = 'item';item.textContent = `${favorite.content} (${favorite.likes} 点赞)`;item.onclick = () => showFavoriteDetails(index);favoritesContent.appendChild(item);});}function showFiles() {const contentArea = document.getElementById('contentArea');contentArea.innerHTML = `<h3>文件列表</h3><button οnclick="uploadFile()">上传文件</button><div id="filesContent"></div>`;const filesContent = document.getElementById('filesContent');files.forEach((file, index) => {const item = document.createElement('div');item.className = 'item';item.textContent = `${file.name}`;item.onclick = () => showFileDetails(index);filesContent.appendChild(item);});}function showMoments() {const contentArea = document.getElementById('contentArea');contentArea.innerHTML = `<h3>朋友圈列表</h3><button οnclick="postMoment()">发布朋友圈</button><div id="momentsContent"></div>`;const momentsContent = document.getElementById('momentsContent');moments.forEach((moment, index) => {const item = document.createElement('div');item.className = 'item';item.textContent = `${moment.content} (${moment.likes} 点赞)`;item.onclick = () => showMomentDetails(index);momentsContent.appendChild(item);});}function showVideos() {const contentArea = document.getElementById('contentArea');contentArea.innerHTML = `<h3>视频列表</h3><button οnclick="showVideo()">展示视频</button><div id="videosContent"></div>`;const videosContent = document.getElementById('videosContent');videos.forEach((video, index) => {const item = document.createElement('div');item.className = 'item';item.innerHTML = `<video src="${video.url}" controls></video> (${video.likes} 点赞)`;item.onclick = () => showVideoDetails(index);videosContent.appendChild(item);});}function showConfirmation(message) {const contentArea = document.getElementById('contentArea');contentArea.innerHTML += `<div class="confirmation-message" id="confirmationMessage"><p>${message}</p><div class="confirmation-buttons"><button οnclick="confirmAction()">确认</button><button οnclick="cancelAction()">取消</button></div></div>`;}function confirmAction() {if (confirmationCallback) {confirmationCallback();confirmationCallback = null;}hideConfirmation();}function cancelAction() {confirmationCallback = null;hideConfirmation();}function hideConfirmation() {const confirmationMessage = document.getElementById('confirmationMessage');if (confirmationMessage) {confirmationMessage.remove();}}function showMessage(message) {const contentArea = document.getElementById('contentArea');contentArea.innerHTML += `<div class="confirmation-message" id="confirmationMessage"><p>${message}</p></div>`;setTimeout(hideConfirmation, 3000); // Hide after 3 seconds}// 初始化列表updateFriendsList();updateFavoritesList();updateFilesList();updateMomentsList();updateVideosList();</script>
</body>
</html>

3.效果演示

在这里插入图片描述

使用html 和javascript 实现微信界面功能1

1.功能说明： 搜索模块: 提供一个搜索框，但目前没有实现具体的搜索功能。好友模块: 在左侧的“好友”部分有一个“查看好友”按钮。点击左侧的“查看好友”按钮时，会在右侧显示所有好友的列表。列表中每个好友可以点击查看详情，包…...

编程日记 2025/7/1 19:17:34

趣味编程：猜拳小游戏

1.简介这个系列的第一篇以猜拳小游戏开始，这是源于我们生活的灵感，在忙碌的时代中，我们每个人都在为自己的生活各自忙碌着，奔赴着自己所走向的那条路上，即使遍体鳞伤。但是，生活虽然很苦，也不…...

编程日记 2025/7/1 19:21:32

图形化界面MySQL（MySQL）（超级详细）

目录 1.官网地址 1.1在Linux直接点击NO thanks..... 1.2任何远端登录，再把jj数据库给授权 1.3建立新用户优点和好处示例代码（MySQL Workbench） 示例代码（phpMyAdmin） 总结图形化界面 MySQL 工具大全及其功…...

编程日记 2025/7/1 19:56:58

JavaScript技巧方法总结

技巧总结字符串字符串首字母大写翻转字符串字符串过滤数字十进制转换二进制、八进制、十六进制获取随机数字符串转数字指数幂运算数组从数组中过滤出虚假值数组查找检测是否为一个安全数组数组清空实现并集、交集、和差集对象检查对象是否为空从对象中选择指定数据动态属性…...

编程日记 2025/7/1 1:24:08

【Web】2023安洵杯第六届网络安全挑战赛 WP

目录 Whats my name easy_unserialize signal Swagger docs 赛题链接：GitHub - D0g3-Lab/i-SOON_CTF_2023: 2023 第六届安洵杯题目环境/源码 Whats my name 第一段正则用于匹配以 include 结尾的字符串，并且在 include 之前，可以有任…...

编程日记 2025/7/2 2:04:11

【VUE2】纯前端播放海康视频录像回放，视频格式为rtsp格式，插件使用海康视频插件[1.5.4版本]

一、需求 1、后端从海康平台拉流视频回放数据，前端进行页面渲染播放，视频格式为rtsp eg： 基本格式：rtsp://<username>:<password><ip_addr>:<port>/<path>参数说明： username&#xff…...

编程日记 2025/6/30 11:17:22

mysql程序介绍,选项介绍(常用选项,指定选项的方式,特性),命令介绍(查看,部分命令),从sql文件执行sql语句的两种方法

目录 mysql程序介绍选项介绍常用选项指定选项的方式编辑配置文件环境变量选项特性指定选项选项名选项值命令介绍查看客户端命令 tee/notee prompt source system help contents 从.sql文件执行sql语句介绍方式 source 从外部直接导入…...

编程日记 2025/6/28 10:40:44

3D 生成重建032-Find3D去找到它身上的每一份碎片吧

3D 生成重建032-Find3D去找到它身上的每一份碎片吧文章目录 0 论文工作1 论文方法2 实验结果 0 论文工作该论文研究三维开放世界部件分割问题：基于任何文本查询分割任何物体中的任何部件。以往的方法在物体类别或部件词汇方面存在局限性。最近人工智能的进步在二…...

编程日记 2025/6/28 14:28:49

树莓派4B android 系统添加led灯 Hal 层

本文内容需要用到我上一篇文章做的驱动，可以先看文章https://blog.csdn.net/ange_li/article/details/136759249 一、Hal 层的实现 1.Hal 层的实现一般放在 vendor 目录下，我们在 vendor 目录下创建如下的目录 aosp/vendor/arpi/hardware/interfaces/…...

编程日记 2025/6/29 23:30:28

LLama系列模型简要概述

LLama-1（7B, 13B, 33B, 65B参数量；1.4T tokens训练数据量） 要做真正Open的AI Efficient：同等预算下，增大训练数据，比增大模型参数量，效果要更好训练数据： 书、Wiki这种量少、质量高…...

编程日记 2025/7/1 19:24:22

Elasticsearch使用（2）：docker安装es、基础操作、mapping映射

1 安装es 1.1 拉取镜像 docker pull swr.cn-north-4.myhuaweicloud.com/ddn-k8s/docker.io/library/elasticsearch:7.17.3 1.2 运行容器运行elasticsearch容器，挂载的目录给更高的权限，否则可能会因为目录权限问题导致启动失败： docker r…...

编程日记 2025/6/30 12:12:37

Python跳动的爱心

系列文章序号直达链接表白系列1Python制作一个无法拒绝的表白界面2Python满屏飘字表白代码3Python无限弹窗满屏表白代码4Python李峋同款可写字版跳动的爱心5Python流星雨代码6Python漂浮爱心代码7Python爱心光波代码8Python普通的玫瑰花代码9Python炫酷的玫瑰花代码10Python多…...

编程日记 2025/7/1 15:25:52

安卓手机怎么轻松转换更新ip网络地址

随着移动互联网的快速发展，IP地址作为网络身份标识的重要性日益凸显。对于安卓手机用户来说，但有时候我们希望能够轻松转更换ip地址，以提高网络安全性或访问特定内容的需要。那么，安卓手机如何更换IP地址呢？本文将为您…...

编程日记 2025/7/1 19:01:42

socket UDP 环路回显的服务端

基于socket通讯的方式，无论用http或者udp或者自定义的协议，程序结构都是类似的。这个以UDP协议为例简要说明。 #include <stdio.h> // 标准输入输出库 #include <sys/types.h> // 提供了一些数据类型，如ssize_t #include <sy…...

编程日记 2025/6/28 20:09:58

单例模式的缺点

1. 违反单一职责原则单例模式不仅管理对象的实例化，还负责提供对该实例的全局访问。这使得单例类承担了过多的职责。复杂的单例类可能变得难以维护和扩展。 2. 难以进行单元测试单例模式引入了全局状态，使得测试环境中的依赖关系难以隔离。在测试中…...

编程日记 2025/6/28 19:51:59

如何通过看板进行跨境电商的圣诞商品数据分析与优化选品流程？

引言随着圣诞季的临近，跨境电商迎来了重要的销售时机。选品工作对于跨境电商的成功至关重要，直接关系到销售业绩和利润。本文结合相关网页信息，深入探讨跨境电商在圣诞期间如何利用信息整合工具展开选品工作，并优化选品流程。同…...

编程日记 2025/7/1 20:24:44

【Linux】vi/vim 使用技巧

文章目录 1. 简介vi和vim的历史vi和vim的区别安装vimUbuntu/DebianCentOS/RHELFedoramacOSWindows 2. 基本操作启动和退出启动退出模式介绍普通模式插入模式命令模式光标移动基本移动高级移动 3. 文本编辑插入文本删除文本复制和粘贴撤销和重做 4. 搜索与替换基本搜索搜索文本…...

编程日记 2025/6/28 19:34:42

React的功能是什么？

以下是一些React的主要功能和特点： 组件化架构： React将UI拆分为可复用的独立组件，每个组件负责一部分UI的逻辑和展示。组件可以嵌套使用，形成复杂的UI结构。虚拟DOM： React使用虚拟DOM来管理UI的状态和更新&#xff…...

编程日记 2025/7/1 19:24:46

【6】数据分析检测（DataFrame 1）

学习目标3 昨天，我们学习了Series。而Pandas的另一种数据类型：DataFrame，在许多特性上和Series有相似之处。今天，我们将学习DataFrame的相关知识： 1. DataFrame的概念 2. 构造一个DataFrame 3. DataFrame的常用…...

编程日记 2025/6/28 1:40:54

效果须知 Next.js与React有哪些区别？https://juejin.cn/post/7112334604027035655 React中文手册 https://react.docschina.org/learn/start-a-new-react-project Next.js中文手册 https://www.nextjs.cn/docs/getting-started 步骤 npx提速 - 更换npm国内源 - 参考文档 …...

编程日记 2025/6/30 12:25:19

学生信息管理系统（简化版）

前端部分（vue2） ！！前端采用vue2框架，下面只写出必要的代码文件，想要使用需自行先创建vue项目部分截图下面是目录结构下面是public文件夹里面的html文件 <!DOCTYPE html> <html lang"&q…...

编程日记 2025/6/29 21:42:25

网易云信荣获“HarmonyOS NEXT SDK星河奖”

近日，鸿蒙生态伙伴 SDK 开发者论坛在北京举行。网易云信凭借在融合通信领域的技术创新和鸿蒙生态贡献，荣获鸿蒙生态“HarmonyOS NEXT SDK星河奖”。会上，华为鸿蒙正式推出 SDK 生态繁荣伙伴支持计划，旨在为 SDK 领域伙伴和开发…...

编程日记 2025/7/1 17:45:10

Java版-图论-最小生成树-Prim算法

实现描述如图： Prim算法的基本思想是从一个顶点开始，逐步构建最小生成树。具体步骤如下：随机选取一个顶点作为起始点，并将其加入最小生成树的集合中。从该顶点出发，选择一条边连接到其他未被访问的顶点中的最小权值边。将该顶点加入到最小生成树的集合中，并标记为已…...

编程日记 2025/7/1 3:55:27

python-@property 和setter属性

T 一个装饰器，使得类中方法像属性一样被使用。 W 这是原本的类及其属性的访问 class Person():def __init__(self, firstname:str, lastname:str):self.first firstnameself.last lastnameself.full_name self.first self.lastdef printFullname(self):re…...

编程日记 2025/7/1 16:00:14

es有string类型字段吗

在较新的版本的 Elasticsearch (ES) 中，string 类型已经被移除，取而代之的是更具体的 text 和 keyword 类型。这一改变是在 Elasticsearch 5.0 版本引入的，目的是为了提供更好的性能和更明确的数据处理方式。 Text 类型用途：text 类型用于全文搜索。当你有一个字段需要进…...

编程日记 2025/6/28 19:48:01

shell编程入门之提取字符并设置rtc时间

awk用法 awk是一款文本处理工具，通常在Unix和Linux操作系统中使用，用于以行为单位对文本进行处理和操作。它可以读取输入文本，对其进行处理，生成报表、统计信息等，并将结果输出到标准输出设备中。它主要有以下特点&…...

编程日记 2025/6/28 19:28:33

数据库进阶教程：结合编程实现动态数据操作

在前一篇文章中，我们了解了数据库的基础知识及其核心操作。这次，我们将通过编程语言（以 Python 为例）与数据库进行交互，进一步提升你的数据库应用能力。我们将学习如何通过代码完成数据的插入、查询、更新和删除&#…...

编程日记 2025/7/1 15:14:24

高效可靠：吉客云数据集成到MySQL技术详解

测试-查询货品供应商报价-dange：吉客云数据集成到MySQL的技术案例分享在现代企业的数据管理中，如何高效、可靠地实现不同系统之间的数据对接是一个关键问题。本文将聚焦于一个具体的系统对接集成案例——将吉客云的数据集成到MySQL数据库中&#xff0c…...

编程日记 2025/7/1 17:47:04

docker安装ddns-go（外网连接局域网）

docker先下载镜像，目前最新版是v6.7.6 也可以csdn资源下载再导入dockers https://download.csdn.net/download/u014756339/90096748 docker load -i ddns-go.tar 启动 docker run -d --name ddns-go --restartalways --nethost -v /opt/ddns-go:/root jeessy/…...

编程日记 2025/6/28 18:49:51

hbuilder 安卓app手机调试中基座如何设置

app端使用基座手机在线预览功能 1.点击运行 2.点击运行到手机或者模拟器 3.制作自定义调试基座 4.先生成证书【可以看我上一篇文档写的有】，点击打包 5.打包出android自定义调试基座【android_debug.apk】,【就跟app打包一样需要等个几分钟】 6.点击运行到手…...

编程日记 2025/6/28 18:46:49

【pyspark学习从入门到精通23】机器学习库_6

目录分割连续变量标准化连续变量分类分割连续变量我们经常处理高度非线性的连续特征，而且只用一个系数很难拟合到我们的模型中。在这种情况下，可能很难只通过一个系数来解释这样一个特征与目标之间的关系。有时，将值划分到离散的桶中…...

编程日记 2025/6/28 18:35:43

Postman高阶技能：Collection集合批量运行！

01、Collection（集合）介绍当我们对一个或多个系统中的很多接口用例进行维护时，首先想到的就是对接口用例进行分类管理，同时还希望对这批接口用例做回归测试。在 Postman 中也提供了这样一个功能，就是 Collection&a…...

编程日记 2025/6/28 19:32:35

ipset搭配iptables实现城市IP访问限制

最近刷了一台飞牛os，但是没有二次验证的功能，裸奔在公网上，看着让人揪心。于是最近研究了一下，设置防火墙只让某些城市能够访问设备，这样大大降低了服务器的风险，因为大多数被黑的原因都是来自国外。 1.下…...

编程日记 2025/7/1 5:11:24

WPF表格控件的列利用模块适配动态枚举类

将枚举列表转化到类内部赋值，在初始化表格行加载和双击事件时，触发类里面的枚举列表的赋值 <c1:Column Header"变更类型" Binding"{Binding ChangeType, ModeTwoWay, ValidatesOnExceptionsTrue, ValidatesOnDataErrorsTrue, NotifyOn…...

编程日记 2025/6/30 12:14:45

java引用相关（四大引用类型，软引用避免oom，弱引用表，虚引用和引用队列，可达性分析算法）

1. 什么是引用？ 问题：什么是引用？Java中的引用是如何工作的？ 答案： 引用是对象的句柄，用于访问堆内存中的对象。在Java中，引用变量实际上存储的是对象的地址，而不是对象本身。通…...

编程日记 2025/6/28 20:27:05

图像识别 | Matlab基于卷积神经网络(CNN)的宝可梦识别源程序，GUI界面。附详细的运行说明。

图像识别 | Matlab基于卷积神经网络(CNN)的宝可梦识别源程序，GUI界面。附详细的运行说明。目录图像识别 | Matlab基于卷积神经网络(CNN)的宝可梦识别源程序，GUI界面。附详细的运行说明。预测效果基本介绍程序设计参考资料预测效果基本介绍 Matlab基…...

编程日记 2025/6/28 19:30:13

2、开发环境优化与创建第一个插件程序

一、创建测试用例二、vscode优化2.1 修改默认终端为普通cmd2.2 配置一键编译&&运行&&监视一、创建测试用例使用命令yo code生成一个测试用例，选择或输入下面的内容。2. 命令的最后会提示是否使用vscode打开，选择打开就行。 3. 在当前目录下会产生helloworld…...

编程日记 2025/7/1 23:06:04

Android CoordinatorLayout：打造高效交互界面的利器

目录一、CoordinatorLayout 介绍及特点二、使用方法 2.1 创建 CoordinatorLayout 布局 2.2 添加需要协调的子视图 2.3 自定义 Behavior 三、结语相关推荐在Android开发中，面对复杂多变的用户界面需求，CoordinatorLayout以其强大的交互管理能力…...

编程日记 2025/7/1 1:12:39

计算机视觉：学习指南

一、引言计算机视觉作为人工智能领域的一个重要分支，致力于让计算机理解和解释视觉信息，近年来取得了令人瞩目的进展，广泛应用于安防监控、自动驾驶、图像编辑、医学影像分析等众多领域。从入门到精通计算机视觉需要系统地学习一系列知识和…...

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

创建型设计模式

一、设计模式介绍 1.设计模式是什么设计模式是指在软件开发中，经过验证的，用于解决在特定环境下，重复出现的，特定问题的解决方案； 2.设计模式怎么来的？ 满足设计原则后，慢慢迭代出来的。 3.设…...

编程日记 2025/6/30 4:13:01

【Ubuntu】使用ip link工具创建虚拟局域网并配置？

🦋🦋🦋如何使用ip link工具创建虚拟局域网？ sudo ip link add link enx888bd66b7000 name enx.120 type vlan id 120 上述命令使用ip link工具在Linux系统中创建了一个新的虚拟局域网（VLAN）接口&#xff0c…...

编程日记 2025/7/1 21:22:49

川渝地区软件工程考研择校分析

通过最新数据分析,5所高校软件工程专业2025年考研难度从高到低预计为: 电子科技大学 >> 四川大学 > 重庆大学 ≈ 西南交通大学 > 西南大学对于想考川渝地区985但核心目标为优先上岸的考生,建议重点考虑西南交通大学软件工程学硕。该校24届软件工程学硕实际录取1…...

编程日记 2025/6/28 18:11:54

云原生基础设施指南：精通 Kubernetes 核心与高级用法

1. 云原生的诞生随着互联网规模的不断增长，以及企业对敏捷开发、快速交付和高可用性的需求日益增强，传统的单体架构逐渐暴露出局限性，难以满足现代业务对动态扩展和高效迭代的要求。为此，云原生应运而生。云原生是为云计算时代…...

编程日记 2025/6/30 1:41:37

Pyinstaller使用指南以及遇到的问题

一、在cmd命令行执行安装pyinstaller工具 pip install pyinstaller 二、在命令行中执行打包命令即可格式如下： pyinstaller [opts] yourprogram.py 参数含义 -F 指定打包后只生成一个exe格式的文件(建议写上这个参数) -D –onedir 创建一个目录，包含…...

编程日记 2025/7/2 1:39:56

美图撕掉蔡文胜标签

卖掉比特币的美图不投机了。作者|周立青编辑|杨舟 12月5日，比特币突破10万美元大关，曾花费1亿美元购入虚拟货币的美图宣布已出售所有加密货币。美图在港交所发布公告称，自2024年11月起，公司已开始出售其持有的加密货币&…...

编程日记 2025/7/1 19:59:04

【Spring】IoC和DI，控制反转，Bean对象的获取方式

阿华代码，不是逆风，就是我疯你们的点赞收藏是我前进最大的动力！！ 希望本文内容能够帮助到你！！ 目录一：什么是IoC 1：什么是容器 2：什么是IoC 二：IoC应用…...

编程日记 2025/7/1 21:02:47

【015】对文件进行压缩_#py

对文件进行压缩 1. 下载7z软件2. 调用exe文件3. 压缩和分卷压缩4. 完整代码 1. 下载7z软件从官网下载https://www.7-zip.org/软件。 2. 调用exe文件主要是通过 subprocess 调用对应的command的命令。 subprocess.run(command, checkTrue)其中 command 的应包含7z软件的ex…...

编程日记 2025/6/30 18:22:04