入门级node+uni-app开发即时通讯聊天室（4）首页数据渲染（一）

最新推荐文章于 2024-07-04 15:00:36 发布

liuqing0.0

最新推荐文章于 2024-07-04 15:00:36 发布

阅读量339

点赞数

文章标签： mysql node.js uni-app

本文链接：https://blog.csdn.net/q1025387665a/article/details/112647721

版权

在这里插入图片描述

前言：这篇仅介绍到首页有关好友请求的实现。首先我们观察下关于好友请求的数据，最新的请求（或被请求）消息，与最新请求（或被请求）的消息自定义处理的时间，未读消息数。简单直白，其实也不必多考虑，这里唯一的难点未读消息数我们已经通过上章节的详细说明已经可以很轻松的解决了。如果你经过思考，那么你应该考虑到了，好友请求中的消息和时间，他跟未读消息数其实是两个分离的逻辑，我们不应该尝试着去把他写成一条语句。这里有一个小细节，我们即使执行了两条查询语句但也不用让前端请求两次避免网页的资源浪费。
首先先说明下mysql语句

mysql 对字段进行排序，这里我们需要的是对时间进行排序，所谓最新的一条数据。如果我们需要对读取的数据进行排序，我们就可以使用 MySQL 的 ORDER BY 子句来设定你想按哪个字段哪种方式来进行排序，再返回搜索结果。
语法：SELECT field1, field2,…fieldN FROM table_name1, table_name2… ORDER BY field1 [ASC [DESC][默认 ASC]], [field2…] [ASC [DESC][默认 ASC]]
通过order by 默认是升序排列，我们需要的是最大的时间，所以需要指定他是降序。

在这里插入图片描述

let result = await db.sql('select req_msg,req_time from friends where user_id = ? or friend_id = ? order by req_time desc limit 1;').params([userId,userId]).execute();

首先导入index页面，对了，记得注册。

<template>
	<view class="main">
		<!-- 头部导航栏 -->
		<view class="top-bar">
			<view class="top-bar-left">
				<image src="../../common/images/kana/1.jpg" mode=""></image>
			</view>
			<view class="top-bar-center">
				<image src="../../common/images/fire.png" mode=""></image>
			</view>
			<view class="top-bar-right">
				<view class="search">
					<image src="../../common/images/search.png" mode="" ></image>
				</view>
				<view class="add">
					<image src="../../common/images/add.png" mode="" ></image>
				</view>
			</view>
		</view>
		<view class="content-container">
			<!-- 好友请求栏 -->
			<view class="friends-container" >
				<view class="friends-left">
						<image src="../../common/images/userAdd.png" mode=""></image>
						<view class="tips" >
							<text>1</text>
						</view>
					
				</view>
				<view class="friends-right">
					<view class="top-container">
						<text class="name">好友请求</text>
						<text class="time">15:07</text>
					</view>
					<view class="informations">
						<text>请问去哦无</text>
					</view>
				</view>
			</view>
			<!-- 聊天列表 -->
			<view class="friends-container" >
				<view class="friends-left user">
						<image src="../../common/images/kana/1.jpg" mode=""></image>
						<view class="tips" >
							<text>2</text>
						</view>
					
				</view>
				<view class="friends-right">
					<view class="top-container">
						<text class="name">帅就一个字</text>
						<text class="time">昨天 17:02</text>
					</view>
					<view class="informations">
						<text>里在干什么</text>
					</view>
				</view>
			</view>
		</view>
		
	</view>
	
	
</template>

<script>
	import transTime from '../../common/js/transTimestamp.js'
	export default {
		data() {
			return {
				friendTips: -1,
				friendMsg: '',
				friendTime: ''
			}
		},
		computed:{
			
		},
		onLoad:  function(){
			
		},
		methods: {
			
		}
	}
</script>

<style lang="scss">
	.main{
		padding: 0 32rpx;
		box-sizing: border-box;
	}
	.content-container{
		padding-top: 88rpx;
	}
	//头部导航栏
	.top-bar{
		position: fixed;
		z-index: 1001;
		display: flex;
		justify-content: space-between;
		left: 0;
		top: 0;
		width: 100%;
		height: 88rpx;
		box-shadow: 0 0 0 0 rgba(0,0,0,0.10);
		padding: 0 36rpx;
		box-sizing: border-box;
		//头部导航左
		.top-bar-left{
			padding-top: 8rpx;
			padding-bottom: 12rpx;
			image{
				width: 68rpx;
				height: 68rpx;
				border-radius: 16px;
			}
		}
		//头部导航中
		.top-bar-center{
			padding-top: 24rpx;
			padding-bottom: 22rpx;
			image{
				width: 88rpx;
				height: 42rpx;
			}
		}
		// 头部导航右
		.top-bar-right{
			display: flex;
			image{
				height: 100%;
				width: 100%;
			}
			.search{
				padding: 16rpx 40rpx 20rpx 0;
				width: 52rpx;
				height: 52rpx;
			}
			.add{
				padding: 20rpx 0;
				width: 48rpx;
				height: 48rpx;
			}
		}
	}
	// 朋友容器
	.friends-container{
		display: flex;
		margin-top: 36rpx;
		width: 100%;
		box-sizing: border-box;
		.friends-left{
			height: 96rpx;
			width: 96rpx;
			background: $uni-color-common;
			border-radius: 24rpx;
			position: relative;
			image{
				padding: 20rpx;
				height: 56.4rpx;
				width: 55.4rpx;
			}
			.tips{
				position: absolute;
				height: 36rpx;
				width: 36rpx;
				line-height: 36rpx;
				text-align: center;
				top: -7rpx;
				right: -7rpx;
				border-radius: 50%;
				background: #FF5D5B;
				font-size: 12rpx;
				color: #FFF;
			}
		}
		.user{
			height: 96rpx;
			width: 110rpx;
			background: $uni-color-common;
			border-radius: 24rpx;
			position:relative;
			image{
				padding: 0;
				height: 100%;
				width: 100%;
				border-radius: 24rpx;
			}
			.tips{
				position: absolute;
				height: 36rpx;
				width: 36rpx;
				line-height: 36rpx;
				text-align: center;
				top: -7rpx;
				right: -7rpx;
				border-radius: 50%;
				background: #FF5D5B;
				font-size: 12rpx;
				color: #FFF;
			}
		}
		.friends-right{
			padding-left: 32rpx;
			width: 100%;
			box-sizing: border-box;
			.top-container{
				display: flex;
				justify-content: space-between;
				height: 50rpx;
				line-height: 50rpx;
				.name{
					color: $uni-color-black;
					font-size: 36rpx;
					font-family: PingFangSC-Regular;
					letter-spacing: -0.62px;
				}
				.time{
					font-family: PingFangSC-Regular;
					font-size: 24rpx;
					color: $uni-color-grey;
					letter-spacing: -0.41px;
				}
			}
			.informations{
				letter-spacing: -0.96rpx;
				line-height: 40rpx;
				font-size: 28rpx;
				color: $uni-color-shen-grey;
				text-overflow: ellipsis;
			}
		}
	}
	//常规聊天列表 ，此处做的是将朋友容器的左容器的样式覆盖
	//避免写多代码
	
</style>

transtime存放于common/js下
function transTime(date){
	var time;
	var d = new Date(date);
	var n = new Date();
	//获取时间戳
	var dd = d.getTime();
	var h = d.getHours();
	var m = d.getMinutes();
	var Y = d.getFullYear();
	var M = d.getMonth() + 1;
	var D = d.getDate();
	//现在时间
	var nn = n.getTime();
	var hh = n.getHours();
	var mm = n.getMinutes();
	var YY = n.getFullYear();
	var MM = n.getMonth() + 1;
	var DD = n.getDate();
	
	if( D == DD && M == MM && Y ==YY){
		if(h<10){
		h = '0'+h;
		}
		if(m<10){
			m = '0'+m;
		}
		time = h+':'+m;
		return time;
	}else if(D+1 == DD && M == MM && Y ==YY){
		if(h<10){
		h = '0'+h;
		}
		if(m<10){
			m = '0'+m;
		}
		time = '昨天'+' '+h+':'+m;
		return time;
	}else{
		if(M<10){
			M = '0'+M;
		}
		if(D<10){
			D = '0'+D;
		}
		if(h<10){
		h = '0'+h;
		}
		if(m<10){
			m = '0'+m;
		}
		time = Y+'年'+M+'月'+D+'日'+' '+h+':'+m;
		return time;
	}
}
export default transTime;

在这里插入图片描述
好友请求列表可以得到正确的结果了，你可以查看数据库字段的值进行比对。这里把tips为0的情况不让他渲染tips即可。

首页的关于好友请求的到此就结束了。