入门级node+uni-app开发即时通讯聊天室（3）用户的搜索以及好友添加（一）

前言： 这篇仅介绍到用户的搜索与点击加载更多的实现。首先复制好前端结构与样式，别忘记在pages.json 里也注册上页面，直接输入地址跳转到该组件内，如果照着教程未能得到正常的结果可以查看一下是否已登陆过同时保存好了用户的id，token等。

<template>
	<view class="main">
		<view class="top-bar">
			<view class="input">
				<input type="text" value="" @focus="changeFocusStatus" @blur="changeFocusStatus" />
				<view class="search">
					<image src="../../common/images/search.png" mode="" class="autoImg"></image>
				</view>
			</view>
			<view class="cancel" @click="goBack">
				取消
			</view>
		</view>
		<view class="content" >
			<view class="user">
				用户
			</view>
			<view class="userBlock" >
				<view class="left">
					<image src="../../common/images/kana/10.jpg" mode="" class="autoImg"></image>
				</view>
				<view class="right">
					<view class="name">
						liuqing
					</view>
					<view class="msg" >
						发消息
					</view>
				</view>
			</view>
			<view class="more" @click="loadMore">
				点击加载更多~
			</view>
			<view class="group">
				群组
			</view>
			<view class="groupBlock">
				<view class="left">
					<image src="../../common/images/kana/1.jpg" mode="" class="autoImg"></image>
				</view>
				<view class="right">
					<view class="name">
						无聊的一天
					</view>
					<view class="msg">
						发消息
					</view>
				</view>
			</view>
		</view>
		
	</view>
	
</template>

<script>
	export default{
		data(){
			return{
				
			}
		},
		methods:{
			// 回到上一级
			goBack() {
				uni.navigateBack({
					delta: 1,
					animationType: 'pop-out',
					animationDuration: 300
				})
			},
			
		},
		onLoad: function(){
			
		}
	}
</script>

<style lang="scss" scoped>
	.autoImg{
		height: 100%;
		width: 100%;
		overflow: hidden;
	}
	.main{
		.top-bar{
			height: 88rpx;
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1px solid $uni-color-grey;
			.input{
				position: relative;
				flex: 1;
				margin-left: 32rpx;
				height: 60rpx;
				background: #F3F4F6;
				border-radius: 10rpx;
				input{
					padding-left: 20rpx;
					padding-right: 50rpx;
					height: 60rpx;
				}
				.search{
					position: absolute;
					top: 10rpx;
					right: 10rpx;
					height: 40rpx;
					width: 40rpx;
				}
			}
			.cancel{
				display: block;
				height: 88rpx;
				line-height: 88rpx;
				width: 56rpx;
				padding: 0 32rpx 0 42rpx;
				font-family: PingFangSC-Regular;
				font-size: 28rpx;
				font-weight: bold;
				color: #272832;
				letter-spacing: -0.48px;
			}
		}
		.content{
			padding: 0 32rpx;
			.user{
				margin: 34rpx 0 20rpx 0;
				font-family: PingFangSC-Semibold;
				font-size: 44rpx;
				color: #272832;
				font-weight: bold;
				letter-spacing: -0.75px;
			}
			.userBlock{
				display: flex;
				width: 100%;
				margin-bottom: 40rpx;
				.left{
					height: 80rpx;
					width: 80rpx;
					image{
						border-radius: 20rpx;
					}
				}
				.right{
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding-left: 32rpx;
					flex: 1;
					.name{
						font-family: PingFangSC-Regular;
						font-size: 18px;
						color: #272832;
						letter-spacing: -0.62px;
						font-weight: 500;
					}
					.msg{
						border-radius: 24rpx;
						background: #FFE431;
						width: 120rpx;
						height: 48rpx;         
						line-height: 48rpx;
						text-align: center;
						font-family: PingFangSC-Regular;
						font-size: 12px;
						color: #272832;
						letter-spacing: -0.41px;
					}
					.addfriends{
						background: rgba(74,170,255,0.10);
						border-radius: 24rpx;
						width: 120rpx;
						height: 48rpx;         
						line-height: 48rpx;
						text-align: center;
						font-family: PingFangSC-Regular;
						font-size: 12px;
						color: #272832;
						letter-spacing: -0.41px;
					}
				}
			
			}
			.more{
				width: 100%;
				text-align: center;
				margin: 34rpx 0 20rpx 0;
				font-family: PingFangSC-Semibold;
				font-size: 44rpx;
				color: #272832;
				font-weight: bold;
				letter-spacing: -0.75px;
			}
			.group{
				@extend  .user
			}
			.groupBlock{
				@extend  .userBlock
			}
		}
	}
</style>

首先随便往数据库里的user表随便插入几个数据把，我们不需要他加密，只需要他的展示部分。

观察图片，我们需要头像，名字。同时做一下限制，我们一次只渲染5条数据就好了。

这是经过分页查询返回的json结构。我们通过改变pageIndex去改变当前所查询出的数据，只要通过改变这个pageIndex就可以轻松实现加载更多功能，这就是我们为什么使用分页查询的原因。

前端代码如下

接着把他渲染把，什么？你说你不会？行，我就给你看这一次。

同时把之前在common的images目录直接复制在static目录下，假如你不这么做，直接修改数据库里让他v-for渲染common目录下你会发现图片依然是不生效的（要么你就打上require(’…’)，当然我不建议这么做，因为再往后用户上传头像的时候你这个渲染也会拉跨，因为他不存在在本地前端的文件路径中），uni-app的这个static目录就是用来存储静态文件。

好了，我老婆成功的显示了出来。那点击加载更多是不是很烦人？接下来我们就去给他添加按键处理他。
首先得明确思路，前面我们着重的介绍（浅浅的介绍）了一下通过ali-mysql-client进行分页查询，你观察他返回的json对象的属性也描述的很直白，那其实这个主要就是控制他的页数就行了，这就是我们为什么会在之前给他加上count。只要当pageIndex > pageCount ，分页的索引大于数据的页数，我们就返回一个提示框即可。假如pageIndex <= page，那我们就请求数据，把这个数组推进我们的渲染数组里即可。好，可以编写代码了。

其中的pageCount 记得在onload的应用生命周期里赋值。其中async和await用法自行百度吧。有的是优秀的解释。这就很简单的完成了加载更多的功能。示例如下。

用户的搜索实现思路：通过输入框的聚焦状态，去判断当前显示的block是搜索状态的block，还是不是搜索状态的block（怎么有点绕口？），如果聚焦状态，我们就改变一下当前的渲染块，同时修改当前的搜索数组。如果不是聚焦状态，我们就让非聚焦状态的block渲染即可。这里我图方便样式跟结构直接不改了，反正意思到位就行。

初始searchStatus 设置为 false，表示一开始我们没有聚焦的时候不要让他显示

聚焦的时候，我们就吧他设置为true，退出聚焦，我们就让他变回原来的。

记得给他加上监听输入事件

通过名字搜索，所以我们后端还得新增一个路由去给前端发起请求。

mysql模糊查找语句如下：通过like关键字去模糊查找
select * from user where user_name like ?
当然还能严格控制是什么样的模糊查找这里只能你自己去找资料学习了。我的观点是等到你需要用到再去也不迟。

重启服务器，运行，示例如下：

至此用户的搜索功能就实现完了。