【UniApp开发小程序】私聊功能uniapp界面实现 (买家、卖家 沟通商品信息)【后端基于若依管理系统开发】

news2024/12/27 13:06:14

文章目录

  • 效果显示
  • WebSocket连接
    • 使用全局变量
    • WebSocket连接细节
  • 最近和自己聊天的用户信息
    • 界面效果
    • 界面代码
      • 最近的聊天内容太长
      • 日期时间显示
      • 未读消息数量显示
  • 私聊界面
    • 界面展示
    • 代码实现
      • 英文长串不换行问题
      • 聊天区域自动滑动到底部
      • 键盘呼出，聊天区域收缩，聊天区域滑动到底部
      • 通知WebSocket服务器哪两个用户开始聊天

效果显示

在这里插入图片描述

WebSocket连接

使用全局变量

本小程序在用户浏览首页的时候创建WebSocket连接，并将连接获得的WebSocket对象存储到全局变量中，方便其他页面来使用WebSocket

首先在项目的main.js文件中声明全局变量socket

在这里插入图片描述

Vue.prototype.$socket = null

对全局变量进行赋值

Vue.prototype.$socket = this.$socket;

后续如果需要使用全局变量，直接使用this.$socket即可

WebSocket连接细节

下面的代码中有一个headbeat方法，该方法主要用来定时给WebSocket服务器发送一个信号，告诉WebSocket服务器当前客户端还处于连接状态。当心跳停止的时候（比如客户端断网），后端服务就会将用户信息从连接中移除

/**
 * 创建websocket连接
 */
initWebsocket() {
	// console.log("this.socket:" + this.$socket)
	if (this.$socket == null || this.$socket.readyState != 1) {
		this.$socket = uni.connectSocket({
			url: "ws://10.23.17.146:8085/websocket/" + uni.getStorageSync("curUser").userName,
			success(res) {
				console.log('WebSocket连接成功', res);
			},
		})
		// console.log("this.socket:" + this.$socket)

		// 监听WebSocket连接打开事件
		this.$socket.onOpen((res) => {
			console.log("websocket连接成功")
			Vue.prototype.$socket = this.$socket;
			// 连接成功，开启心跳
			this.headbeat();
		});
		// 连接异常
		this.$socket.onError((res) => {
			console.log("websocket连接出现异常");
			// 重连
			this.reconnect();
		})
		// 连接断开
		this.$socket.onClose((res) => {
			console.log("websocket连接关闭");
			// 重连
			this.reconnect();
		})
	}
},
/**
 * 重新连接
 */
reconnect() {
	console.log("重连");
	// 防止重复连接
	if (this.lockReconnect == true) {
		return;
	}
	// 锁定，防止重复连接
	this.lockReconnect = true;
	this.initWebsocket();
	// 连接完成，设置为false
	this.lockReconnect = false;
},
// 开启心跳
headbeat() {
	console.log("websocket心跳");
	var that = this;
	setTimeout(function() {
		if (that.$socket.readyState == 1) {
			// websocket已经连接成功
			that.$socket.send({
				data: JSON.stringify({
					status: "ping"
				})
			})
			// 调用启动下一轮的心跳
			that.headbeat();
		} else {
			// websocket还没有连接成功，重连
			that.reconnect();
		}
	}, that.heartbeatTime);
},

最近和自己聊天的用户信息

界面效果

在这里插入图片描述

界面代码

<template>
	<view class="container">
		<scroll-view @scrolltolower="getMoreChatUserVo">
			<view v-for="(chatUserVo,index) in chatUserVoList" :key="index" @click="trunToChat(chatUserVo)">
				<view style="height: 10px;"></view>
				<view class="chatUserVoItem">
					<view style="display: flex;align-items: center;">
						<uni-badge class="uni-badge-left-margin" :text="chatUserVo.unReadChatNum" absolute="rightTop"
							size="small">
							<u--image :showLoading="true" :src="chatUserVo.userAvatar" width="50px" height="50px"
								:fade="true" duration="450">
								<view slot="error" style="font-size: 24rpx;">加载失败</view>
							</u--image>
						</uni-badge>
					</view>
					<view style="margin: 10rpx;"></view>
					<view
						style="line-height: 20px;width: 100%;display: flex;justify-content: space-between;flex-direction: column;">
						<view style="display: flex;	justify-content: space-between;">
							<view>
								<view class="nickname">{{chatUserVo.userNickname}}
								</view>
								<view class="content">{{chatUserVo.lastChatContent}}</view>
							</view>
							<view class="date">{{formatDateToString(chatUserVo.lastChatDate)}}</view>
						</view>

						<!-- <view style="height: 10px;"></view> -->
						<u-line></u-line>
					</view>
				</view>

			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		listChatUserVo
	} from "@/api/market/chat.js";
	import {
		listChat
	} from "@/api/market/chat.js"

	export default {
		data() {
			return {
				chatUserVoList: [],
				page: {
					pageNum: 1,
					pageSize: 15
				},

			}
		},
		created() {

		},
		methods: {
			/**
			 * 滑动到底部，自动加载新一页的数据
			 */
			getMoreChatUserVo() {
				this.page.pageNum++;
				this.listChatUserVo();
			},
			listChatUserVo() {
				listChatUserVo(this.page).then(res => {
					// console.log("res:"+JSON.stringify(res.rows))
					// this.chatUserVoList = res.rows;
					for (var i = 0; i < res.rows.length; i++) {
						this.chatUserVoList.push(res.rows[i]);
					}
				})
			},
			/**
			 * 格式化日期
			 * @param {Object} date
			 */
			formatDateToString(dateStr) {
				let date = new Date(dateStr);
				// 今天的日期
				let curDate = new Date();
				if (date.getFullYear() == curDate.getFullYear() && date.getMonth() == curDate.getMonth() && date
					.getDate() == curDate.getDate()) {
					// 如果和今天的年月日都一样，那就只显示时间
					return this.toDoubleNum(date.getHours()) + ":" + this.toDoubleNum(date.getMinutes());
				} else {
					// 如果年份一样，就只显示月日
					return (curDate.getFullYear() == date.getFullYear() ? "" : (date.getFullYear() + "-")) + this
						.toDoubleNum((
							date
							.getMonth() + 1)) +
						"-" +
						this.toDoubleNum(date.getDate());
				}
			},
			/**
			 * 如果传入的数字是两位数，直接返回；
			 * 否则前面拼接一个0

			 * @param {Object} num
			 */
			toDoubleNum(num) {
				if (num >= 10) {
					return num;
				} else {
					return "0" + num;
				}
			},
			/**
			 * 转到私聊页面
			 */
			trunToChat(chatUserVo) {
				let you = {
					avatar: chatUserVo.userAvatar,
					nickname: chatUserVo.userNickname,
					username: chatUserVo.userName
				}
				uni.navigateTo({
					url: "/pages/chat/chat?you=" + encodeURIComponent(JSON.stringify(you))
				})
			},
			/**
			 * 接收消息
			 */
			receiveMessage() {
				this.$socket.onMessage((response) => {
					// console.log("接收消息：" + response.data);
					let message = JSON.parse(response.data);

					// 收到消息，将未读消息数量加一
					for (var i = 0; i < this.chatUserVoList.length; i++) {
						if (this.chatUserVoList[i].userName == message.from) {
							this.chatUserVoList[i].unReadChatNum++;
							// 显示对方发送的最新消息
							listChat(message.from, {
								pageNum: 1,
								pageSize: 1
							}).then(res => {
								this.chatUserVoList[i].lastChatContent = res.rows[0].content
							});
							break;
						}
					}
				})
			},

		},
		onLoad(e) {
			this.receiveMessage();
		},
		onShow: function() {
			this.chatUserVoList = [];
			this.listChatUserVo();
		},
	}
</script>

<style lang="scss">
	.container {
		padding: 20rpx;

		.chatUserVoItem {
			display: flex;
			margin: 0 5px;

			.nickname {
				font-weight: 700;
			}

			.content {
				color: #A7A7A7;
				font-size: 14px;
				
				/* 让消息只显示1行，超出的文字内容使用...来代替 */
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 1;
				-webkit-box-orient: vertical;
			}

			.date {
				color: #A7A7A7;
				font-size: 12px;
			}
		}

		// .uni-badge-left-margin {
		// 	margin-left: 10px;
		// }
	}
</style>

最近的聊天内容太长

当最近的一条聊天内容太长的时候，页面不太美观，缺少整齐的感觉
在这里插入图片描述
解决的方式非常简单，只需要添加以下样式即可

.content {
	/* 让消息只显示1行，超出的文字内容使用...来代替 */
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
}

在这里插入图片描述

日期时间显示

本文显示日期时间的时候，遵循以下原则：

  • 如果上次聊天时间的年月日和今天一致，那就只显示时间，即显示 时:分
  • 如果上次聊天时间的年份和今年一致，那就只显示月-日
  • 如果上面的条件都不满足，就显示年-月-日

在显示月、日、时、分的时候，如果数字是一位数字，就在前面补一个零，具体操作如方法toDoubleNum

/**
 * 格式化日期
 * @param {Object} date
 */
formatDateToString(dateStr) {
	let date = new Date(dateStr);
	// 今天的日期
	let curDate = new Date();
	if (date.getFullYear() == curDate.getFullYear() && date.getMonth() == curDate.getMonth() && date
		.getDate() == curDate.getDate()) {
		// 如果和今天的年月日都一样，那就只显示时间
		return this.toDoubleNum(date.getHours()) + ":" + this.toDoubleNum(date.getMinutes());
	} else {
		// 如果年份一样，就只显示月日
		return (curDate.getFullYear() == date.getFullYear() ? "" : (date.getFullYear() + "-")) + this
			.toDoubleNum((
				date
				.getMonth() + 1)) +
			"-" +
			this.toDoubleNum(date.getDate());
	}
},
/**
* 如果传入的数字是两位数，直接返回；
 * 否则前面拼接一个0

 * @param {Object} num
 */
toDoubleNum(num) {
	if (num >= 10) {
		return num;
	} else {
		return "0" + num;
	}
},

未读消息数量显示

未读消息数量显示使用角标组件，即uni-badge，使用该组件需要下载安装插件，下载链接，下载之前需要看广告，哈哈哈，当然有钱可以不看

在这里插入图片描述
显示效果如下图
在这里插入图片描述

<uni-badge class="uni-badge-left-margin" :text="chatUserVo.unReadChatNum" absolute="rightTop"
	size="small">
	<u--image :showLoading="true" :src="chatUserVo.userAvatar" width="50px" height="50px"
		:fade="true" duration="450">
		<view slot="error" style="font-size: 24rpx;">加载失败</view>
	</u--image>
</uni-badge>

私聊界面

界面展示

【微信公众平台模拟的手机界面】
在这里插入图片描述
【手机端，键盘呼出之后的聊天区域】
在这里插入图片描述

代码实现

<template>
	<view style="height:100vh;">
		<!-- @scrolltoupper：上滑到顶部执行事件，此处用来加载历史消息 -->
		<!-- scroll-with-animation="true" 设置滚动条位置的时候使用动画过渡，让动作更加自然 -->
		<scroll-view :scroll-into-view="scrollToView" scroll-y="true" class="messageListScrollView"
			:style="{height:scrollViewHeight}" @scrolltoupper="getHistoryChat()"
			:scroll-with-animation="!isFirstListChat" ref="chatScrollView">
			<view v-for="(message,index) in messageList" :key="message.id" :id="`message`+message.id"
				style="width: 750rpx;min-height: 60px;">
				<view style="height: 10px;"></view>
				<view v-if="message.type==0" class="messageItemLeft">
					<view style="width: 8px;"></view>
					<u--image :showLoading="true" :src="you.avatar" width="50px" height="50px" radius="3"></u--image>
					<view style="width: 7px;"></view>
					<view class="messageContent left">
						{{message.content}}
					</view>
				</view>
				<view v-if="message.type==1" class="messageItemRight">
					<view class="messageContent right">
						{{message.content}}
					</view>
					<view style="width: 7px;"></view>
					<u--image :showLoading="true" :src="me.avatar" width="50px" height="50px" radius="3"></u--image>
					<view style="width: 8px;"></view>
				</view>
			</view>
		</scroll-view>

		<view class="messageSend">
			<view class="messageInput">
				<u--textarea v-model="messageInput" placeholder="请输入消息内容" autoHeight>
				</u--textarea>
			</view>
			<view style="width:5px"></view>
			<view class="commmitButton" @click="send()">发 送</view>
		</view>
	</view>

</template>

<script>
	import {
		getUserProfileVo
	} from "@/api/user";
	import {
		listChat
	} from "@/api/market/chat.js"

	let socket;
	export default {
		data() {
			return {
				webSocketUrl: "",
				socket: null,
				messageInput: '',
				// 我自己的信息
				me: {},
				// 对方信息
				you: {},

				scrollViewHeight: undefined,
				messageList: [],
				// 底部滑动到哪里
				scrollToView: '',
				page: {
					pageNum: 1,
					pageSize: 15
				},
				isFirstListChat: true,
				loadHistory: false,
				// 消息总条数
				total: 0,
			}
		},
		created() {
			this.me = uni.getStorageSync("curUser");
		},
		beforeDestroy() {
			console.log("执行销毁方法");
			this.endChat();
		},
		onLoad(e) {
			// 设置初始高度
			this.scrollViewHeight = `calc(100vh - 20px - 44px)`;
			this.you = JSON.parse(decodeURIComponent(e.you));
			uni.setNavigationBarTitle({
				title: this.you.nickname,
			})
			this.startChat();
			this.listChat();
			this.receiveMessage();
		},

		onReady() {
			// 监听键盘高度变化，以便设置输入框的高度
			uni.onKeyboardHeightChange(res => {
				let keyBoardHeight = res.height;
				console.log("keyBoardHeight:" + keyBoardHeight);
				this.scrollViewHeight = `calc(100vh - 20px - 44px - ${keyBoardHeight}px)`;

				this.scrollToView = '';
				setTimeout(() => {
					this.scrollToView = 'message' + this.messageList[this
						.messageList.length - 1].id;
				}, 150)
			})
		},
		methods: {

			/**
			 * 发送消息
			 */
			send() {
				if (this.messageInput != '') {
					let message = {
						from: this.me.userName,
						to: this.you.username,
						text: this.messageInput
					}
					// console.log("this.socket.send:" + this.$socket)
					// 将组装好的json发送给服务端，由服务端进行转发
					this.$socket.send({
						data: JSON.stringify(message)
					});
					this.total++;
					let newMessage = {
						// code: this.messageList.length,
						type: 1,
						content: this.messageInput
					};
					this.messageList.push(newMessage);
					this.messageInput = '';
					this.toBottom();
				}
			},
			/**
			 * 开始聊天
			 */
			startChat() {
				let message = {
					from: this.me.userName,
					to: this.you.username,
					text: "",
					status: "start"
				}
				// 告诉服务端要开始聊天了
				this.$socket.send({
					data: JSON.stringify(message)
				});
			},
			/**
			 * 结束聊天
			 */
			endChat() {
				let message = {
					from: this.me.userName,
					to: this.you.username,
					text: "",
					status: "end"
				}
				// 告诉服务端要结束聊天了
				this.$socket.send({
					data: JSON.stringify(message)
				});
			},
			/**
			 * 接收消息
			 */
			receiveMessage() {
				this.$socket.onMessage((response) => {
					// console.log("接收消息：" + response.data);
					let message = JSON.parse(response.data);

					let newMessage = {
						// code: this.messageList.length,
						type: 0,
						content: message.text
					};
					this.messageList.push(newMessage);
					this.total++;
					// 让scroll-view自动滚动到最新的数据那里
					// this.$nextTick(() => {
					// 	// 滑动到聊天区域最底部
					// 	this.scrollToView = 'message' + this.messageList[this
					// 		.messageList.length - 1].id;
					// });
					this.toBottom();
				})
			},
			/**
			 * 查询对方和自己最近的聊天数据
			 */
			listChat() {
				return new Promise((resolve, reject) => {
					listChat(this.you.username, this.page).then(res => {
						for (var i = 0; i < res.rows.length; i++) {
							this.total = res.total;
							if (res.rows[i].fromWho == this.me.userName) {
								res.rows[i].type = 1;
							} else {
								res.rows[i].type = 0;
							}
							// 将消息放到数组的首位
							this.messageList.unshift(res.rows[i]);
						}

						if (this.isFirstListChat == true) {
							// this.$nextTick(function() {
							// 	// 滑动到聊天区域最底部
							// 	this.scrollToView = 'message' + this.messageList[this
							// 		.messageList.length - 1].id;
							// })
							this.toBottom();
							this.isFirstListChat = false;
						}
						resolve();
					})

				})

			},
			/**
			 * 滑到最顶端，分页加一，拉取更早的数据
			 */
			getHistoryChat() {
				// console.log("获取历史消息")
				this.loadHistory = true;
				if (this.messageList.length < this.total) {
					// 当目前的消息条数小于消息总量的时候，才去查历史消息
					this.page.pageNum++;
					this.listChat().then(() => {})
				}
			},
			/**
			 * 滑动到聊天区域最底部
			 */
			toBottom() {
				// 让scroll-view自动滚动到最新的数据那里
				this.scrollToView = '';
				setTimeout(() => {
					// 滑动到聊天区域最底部
					this.scrollToView = 'message' + this.messageList[this
						.messageList.length - 1].id;
				}, 150)
			}
		}
	}
</script>

<style lang="scss">
	.messageListScrollView {
		background: #F5F5F5;
		overflow: auto;

		.messageItemLeft {
			display: flex;
			align-items: flex-start;
			justify-content: flex-start;

			.messageContent {
				max-width: calc(750rpx - 10px - 50px - 15px - 10px - 50px - 15px);
				padding: 10px;
				// margin-top: 10px;
				border-radius: 7px;
				font-family: sans-serif;
				// padding: 10px;
				// 让view只包裹文字
				width: auto;
				// display: inline-block !important;
				// display: inline;

				// 解决英文字符串、数字不换行的问题
				word-break: break-all;
				word-wrap: break-word;
			}
		}

		.messageItemRight {
			display: flex;
			align-items: flex-start;
			justify-content: flex-end;

			.messageContent {
				max-width: calc(750rpx - 10px - 50px - 15px - 10px - 50px - 15px);
				padding: 10px;
				// margin-top: 10px;
				border-radius: 7px;
				font-family: sans-serif;
				// padding: 10px;
				// 让view只包裹文字
				width: auto;
				// display: inline-block !important;
				// display: inline;

				// 解决长英文字符串、数字不换行的问题
				word-wrap: break-word;
			}
		}

		.right {
			background-color: #94EA68;
		}

		.left {
			background-color: #ffffff;
		}
	}

	.messageSend {
		display: flex;

		background: #ffffff;
		padding-top: 5px;
		padding-bottom: 15px;

		.messageInput {
			border: 1px #EBEDF0 solid;
			border-radius: 5px;
			width: calc(750rpx - 65px);
			margin-left: 5px;
		}

		.commmitButton {
			height: 38px;
			border-radius: 5px;
			width: 50px;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #ffffff;
			background: #3C9CFF;

		}
	}
</style>

英文长串不换行问题

在这里插入图片描述

这个问题属于是整串英文被以为是一个单词了，所以没有换行，看下面的句子，英文单词可以比较短的，所以会自动换行
在这里插入图片描述

解决这个问题只需要添加下面的css即可

// 解决长英文字符串、数字不换行的问题
word-wrap: break-word;

下面是添加之后的效果

在这里插入图片描述

聊天区域自动滑动到底部

在聊天的时候，无论是发送一条新的消息，还是接收到一条新的消息，聊天区域都需要自动滑动到最新的消息那里。本文使用scroll-view组件来包裹显示聊天消息，在scroll-view组件中，可以通过给scroll-into-view属性赋值来指定聊天区域所显示到的位置。使用时需要注意如下问题：

  • 需要先给每一条消息设置一个id属性，id属性存储的内容不能以数字开头，因此本文在id之间拼接了一个字符串’message’
  • scroll-view需要被设置好高度，本文通过绑定一个变量来设置高度，如:style="{height:scrollViewHeight}"，因为手机端使用小程序打字时键盘呼出会影响聊天区域的高度

在这里插入图片描述

后续通过给scrollToView设置不同的值即可控制聊天区域的滑动，比如每接收到一条新的消息，就调用toBottom方法，该方法通过设置scrollToView为'message' + this.messageList[this.messageList.length - 1].id将聊天区域滑动到最新的消息处。需要注意的是，在进行该值的设置之前，需要延迟一段时间，否则滑动可能不成功，本文延迟150ms，读者也可以探索不同的值，该值不能太大或者太小。

通过设置scroll-view的属性scroll-with-animation的值为true，可以让消息区域在滑动的时候使用动画过渡，这样滑动更加自然。

键盘呼出，聊天区域收缩，聊天区域滑动到底部

当键盘呼出时，需要将聊天区域的高度减去键盘的高度。同时将scrollToView赋值为最后一条消息的id。需要注意的是，在设置scrollToView之前，需要先将scrollToView设置为空字符串，否则滑动效果可能不成功

onReady() {
	// 监听键盘高度变化，以便设置输入框的高度
	uni.onKeyboardHeightChange(res => {
		let keyBoardHeight = res.height;
		console.log("keyBoardHeight:" + keyBoardHeight);
		this.scrollViewHeight = `calc(100vh - 20px - 44px - ${keyBoardHeight}px)`;

		this.scrollToView = '';
		setTimeout(() => {
			this.scrollToView = 'message' + this.messageList[this
				.messageList.length - 1].id;
		}, 150)
	})
},

通知WebSocket服务器哪两个用户开始聊天

为了便于后端在存储聊天数据的时候辨别消息是否为已读状态。比如，在小王开始聊天之前，需要先告诉后端：“小王要开始和小明聊天了”，如果正好小明也告诉后端：“我要和小王聊天了”，那小王发出去的消息就会被设置为已读状态，因为他们两个此时此刻正在同时和对方聊天，那小王发出去的消息就默认被小明看到了，因此设置为已读状态

/**
* 开始聊天
*/
startChat() {
	let message = {
		from: this.me.userName,
		to: this.you.username,
		text: "",
		status: "start"
	}
	// 告诉服务端要开始聊天了
	this.$socket.send({
		data: JSON.stringify(message)
	});
},
/**
 * 结束聊天
 */
endChat() {
	let message = {
		from: this.me.userName,
		to: this.you.username,
		text: "",
		status: "end"
	}
	// 告诉服务端要结束聊天了
	this.$socket.send({
		data: JSON.stringify(message)
	});
},

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/929547.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

软考A计划-系统集成项目管理工程师-知识产权管理

软考A计划-系统集成项目管理工程师-知识产权管理

点击跳转专栏>Unity3D特效百例点击跳转专栏>案例项目实战源码点击跳转专栏>游戏脚本-辅助自动化点击跳转专栏>Android控件全解手册点击跳转专栏>Scratch编程案例点击跳转>软考全系列点击跳转>蓝桥系列 &#x1f449;关于作者 专注于Android/Unity和各种游…
阅读更多...
基于黏菌算法优化的BP神经网络（预测应用） - 附代码

基于黏菌算法优化的BP神经网络（预测应用） - 附代码

基于黏菌算法优化的BP神经网络&#xff08;预测应用&#xff09; - 附代码 文章目录 基于黏菌算法优化的BP神经网络&#xff08;预测应用&#xff09; - 附代码1.数据介绍2.黏菌优化BP神经网络2.1 BP神经网络参数设置2.2 黏菌算法应用 4.测试结果&#xff1a;5.Matlab代码 摘要…
阅读更多...
分布式 - 服务器Nginx：一小时入门系列之 HTTPS协议配置

分布式 - 服务器Nginx：一小时入门系列之 HTTPS协议配置

文章目录 1. HTTPS 协议2. 生成 SSL 证书和私钥文件3. 配置 SSL 证书和私钥文件4. HTTPS 协议优化 1. HTTPS 协议 HTTPS 是一种通过计算机网络进行安全通信的协议。它是HTTP的安全版本&#xff0c;通过使用 SSL 或 TLS 协议来加密和保护数据传输。HTTPS的主要目的是确保在客户…
阅读更多...
AI夏令营第三期用户新增挑战赛学习笔记

AI夏令营第三期用户新增挑战赛学习笔记

1、数据可视化 1.数据探索和理解&#xff1a;数据可视化可以帮助我们更好地理解数据集的特征、分布和关系。通过可视化数据&#xff0c;我们可以发现数据中的模式、异常值、缺失值等信息&#xff0c;从而更好地了解数据的特点和结构。2.特征工程&#xff1a;数据可视化可以帮助…
阅读更多...
[Linux]文件IO

[Linux]文件IO

文章目录 1. 文件描述符1.1 虚拟地址空间1.1.1 存在的意义1.1.2 分区 1.2 文件描述符1.2.1 文件描述符1.2.2 文件描述符表 2. Linux系统文件IO2.1 open/close2.1.1 函数原型2.1.2 close函数原型2.1.3 打开已存在文件2.1.4 创建新文件2.1.5 文件状态判断 2.2 read/write2.2.1 re…
阅读更多...
论文解读 | ScanNet：室内场景的丰富注释3D重建

论文解读 | ScanNet：室内场景的丰富注释3D重建

原创 | 文 BFT机器人 大型的、有标记的数据集的可用性是为了利用做有监督的深度学习方法的一个关键要求。但是在RGB-D场景理解的背景下&#xff0c;可用的数据非常少,通常是当前的数据集覆盖了一小范围的场景视图&#xff0c;并且具有有限的语义注释。 为了解决这个问题&#…
阅读更多...
C++学习记录——이십오 C++11（1）

C++学习记录——이십오 C++11（1）

文章目录 1、列表初始化2、声明decltype 3、STL新容器小总结 4、右值引用1、概念2、使用场景&#xff08;包含移动构造&#xff09;3、完美转发4、移动赋值5、C98的const引用延长生命周期 1、列表初始化 大括号{}来代替初始化&#xff0c;并且是所有类型。 struct ZZ {int _x…
阅读更多...
RabbitMQ---订阅模型-Fanout

RabbitMQ---订阅模型-Fanout

1、 订阅模型-Fanout Fanout&#xff0c;也称为广播。 流程图&#xff1a; 在广播模式下&#xff0c;消息发送流程是这样的&#xff1a; 1&#xff09; 可以有多个消费者 2&#xff09; 每个消费者有自己的queue&#xff08;队列&#xff09; 3&#xff09; 每个队列都要绑定…
阅读更多...
记录 JSONObject.parseObject json对象转换 对象字段为null

记录 JSONObject.parseObject json对象转换 对象字段为null

1.业务背景 使用websocket 接收消息都是String类型&#xff0c;没办法自定义实体类接收&#xff0c;所以接发都必须将json 转 对象 对象转 json。 这是我最开始的实体类&#xff0c;也就是转换的类型 package com.trinity.system.domain;import lombok.AllArgsConstructor; im…
阅读更多...
浏览器跨域

浏览器跨域

生活中的事跟跨域有什么关系&#xff0c;那必须有。 跨域的产生是浏览器的安全机制引起的&#xff0c;只有在使用Ajax时才会发生。简单来说就是你可以通过ajax发送请求&#xff0c;但要看远程服务器脸色&#xff0c;他没授权&#xff0c;浏览器这个老六就给拦截了&#xff0c;不…
阅读更多...
Java之ApI之Math类详解

Java之ApI之Math类详解

1 Math类 1.1 概述 tips&#xff1a;了解内容 查看API文档&#xff0c;我们可以看到API文档中关于Math类的定义如下&#xff1a; Math类所在包为java.lang包&#xff0c;因此在使用的时候不需要进行导包。并且Math类被final修饰了&#xff0c;因此该类是不能被继承的。 Math类…
阅读更多...
6.基于二阶锥规划的主动配电网最优潮流求解

6.基于二阶锥规划的主动配电网最优潮流求解

matlab代码&#xff1a; 6.基于二阶锥规划的主动配电网最优潮流求解 参考文献&#xff1a;主动配电网多源协同运行优化研究_乔珊 摘要&#xff1a;最优潮流研究在配 电网规划运行 中不可或缺 &#xff0c; 且在大量分布式能源接入 的主动配 电网环境下尤 为重要 。传统的启发…
阅读更多...
Spring 与【MyBatis 】和【 pageHelper分页插件 】整合

Spring 与【MyBatis 】和【 pageHelper分页插件 】整合

目录 一、Spring整合MyBatis 1. 导入pom依赖 2. 利用mybatis逆向工程生成模型层层代码 3. 编写配置文件 4. 注解式开发 5. 编写Junit测试类 二、AOP整合pageHelper分页插件 1. 创建一个AOP切面 2. Around("execution(* *..*xxx.*xxx(..))") 表达式解析 3. 编…
阅读更多...
Java IDEA Web 项目 1、创建

Java IDEA Web 项目 1、创建

环境&#xff1a; IEDA 版本&#xff1a;2023.2 JDK&#xff1a;1.8 Tomcat&#xff1a;apache-tomcat-9.0.58 maven&#xff1a;尚未研究 自行完成 IDEA、JDK、Tomcat等安装配置。 创建项目&#xff1a; IDEA -> New Project 选择 Jakarta EE Template&#xff1a;选择…
阅读更多...
一文了解SpringBoot中的Aop

一文了解SpringBoot中的Aop

目录 1.什么是Aop 2.相关概念 3.相关注解 4.为什么要用Aop 5.Aop使用案例 1.什么是Aop AOP&#xff1a;Aspect Oriented Programming&#xff0c;面向切面&#xff0c;是Spring三大思想之一&#xff0c;另外两个是 IOC-控制反转 DI-依赖注入 (Autowired、Qualifier、Re…
阅读更多...
LabVIEW开发灭火器机器人

LabVIEW开发灭火器机器人

LabVIEW开发灭火器机器人 如今&#xff0c;自主机器人在行业中有着巨大的需求。这是因为它们根据不同情况的适应性。由于消防员很难进入高风险区域&#xff0c;自主机器人出现了。该机器人具有自行检测火灾的能力&#xff0c;并通过自己的决定穿越路径。 由于消防安全是主要问…
阅读更多...
JAVA设计模式第十二讲：大厂实践 - 美团: 设计模式二三事

JAVA设计模式第十二讲：大厂实践 - 美团: 设计模式二三事

JAVA设计模式第十二讲&#xff1a;大厂实践 - 美团: 设计模式二三事 设计模式是众多软件开发人员经过长时间的试错和应用总结出来的&#xff0c;解决特定问题的一系列方案。现行的部分教材在介绍设计模式时&#xff0c;有些会因为案例脱离实际应用场景而令人费解&#xff0c;有…
阅读更多...
windows上sqlserver的ldf日志文件和数据mdf文件分别放到不同的磁盘

windows上sqlserver的ldf日志文件和数据mdf文件分别放到不同的磁盘

之前我的windows上已安装好了sqlserver2017&#xff0c;有一个名为TestDb的数据库。ldf文件和mdf文件都一起放在D:\Database目录下。现在需要把ldf日志文件到E盘的database目录下。 重要的事情先说三遍 先停止网关&#xff08;例如nginx&#xff09;并备份数据库 先停止网关&am…
阅读更多...
2023泉城杯 easy_log的解题

2023泉城杯 easy_log的解题

压缩包解压里面是一个 access.log 日志文件。 捋数据 进行过远程命令执行 这个后续没啥用 可疑字符串 可疑字符串/upload/ma.php?logvar_dump(%27cGFzc3dvcmQ6IHNAZncjdiVmOQ%27);这个首先就判断是不是base64编码&#xff08;英文大小写、数字和、/&#xff09;以及用作后缀…
阅读更多...
深度学习：Sigmoid函数与Sigmoid层区别

深度学习：Sigmoid函数与Sigmoid层区别

深度学习&#xff1a;Sigmoid函数与Sigmoid层 1. Sigmoid神经网络层 vs. Sigmoid激活函数 在深度学习和神经网络中&#xff0c;“Sigmoid” 是一个常见的术语&#xff0c;通常用来表示两个相关但不同的概念&#xff1a;Sigmoid激活函数和Sigmoid神经网络层。这两者在神经网络…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023