按照官方给出的数据表来实现，只需要官方的私信数据表
按照逻辑 都是通过插入数据表 如何根据发送给谁来查询是否有私信
可以去青航主题 注册体验该功能
CREATE TABLE `yzm_message` ( `messageid` int(10) unsigned NOT NULL AUTO_INCREMENT, `send_from` varchar(30) NOT NULL DEFAULT '' COMMENT '发件人', `send_to` varchar(30) NOT NULL DEFAULT '' COMMENT '收件人', `message_time` int(10) unsigned NOT NULL DEFAULT '0', `subject` char(80) NOT NULL DEFAULT '' COMMENT '主题', `content` text NOT NULL, `replyid` int(10) unsigned NOT NULL DEFAULT '0' COMMENT '回复的id', `status` tinyint(1) unsigned DEFAULT '1' COMMENT '1正常0隐藏', `isread` tinyint(1) unsigned NOT NULL DEFAULT '0' COMMENT '是否读过', `issystem` tinyint(1) unsigned NOT NULL DEFAULT '0' COMMENT '系统信息', PRIMARY KEY (`messageid`), KEY `replyid` (`replyid`), KEY `status` (`status`) ) ENGINE=MyISAM DEFAULT CHARSET=utf8
前端 vue3+php
构造一个方法list 主要用于输出私信列表 为防止单个用户信息重复 我们可以通过删除相同发送者的key值
比如发送者字段send_from 删除相关值的数组 我们就会等到一个唯一一个发送者的私信 这样就不会重复
函数分享：
function assoc_uniques($arr, $key)
{
$tmp_arr = array();
foreach($arr as $k => $v) {
if(in_array($v[$key], $tmp_arr)) {
unset($arr[$k]);
} else {
$tmp_arr[] = $v[$key];
}
}
return $arr;
}$arr 为数组 key 为要删除的重复字段 删除并重新排序
好 ，我们在方法中 通过db操作类 循环出 数据表中的数据 比如说这样的写法
D('message')->where(['send_to' =>get_cookie('_username')])->select();查询条件是接受者自己的用户名 这样你就得到一个别人发给你你自己的私信
通过遍历循环出 发送者的用户头像 等其他 再转化出时间戳的格式
然后通过 return_json输出数据
return_json(['status' => 200,'data'=>assoc_uniques($data,'send_from')]);
前端通过请求接受数据
axios.post('/member/msg/init').then(res => {
if(res.data.status == 200){
this.list = res.data.data.data
this.isload = true
}else{
layer.msg('请求出错',{icon: 2})
}
})请求成功后v-for 渲染数据到html中
然后我们就等到这样的页面
好 ，我们再写一个show的方法 主要查看该私信的内容
我们需要在show方法中提交userid 该用户id为发送者的ID
通过vue声明周期函数请求 该用户ID 通过该用户ID获取 发送者用户名
如果你觉得麻烦 可以直接获取提交用户名的值 这样就不用通过查ID转化用户名
请求实例：
axios.post('/member/msg/show',{userid:this.userid}).then(res => {
if(res.data.status == 200){
this.list = res.data.data.data
this.isload = true
}else{
layer.msg('请求出错',{icon: 2})
}
})后端通过请求 再输出相关数据
通过
select();
方法输出遍历
查询条件使用or的表达式查询 send_from send_to 两个字段的值 查询自己的用户名 get_cookie('_username')
在遍历插入一条数组为
$item['type'] = $item['send_from'] == get_cookie('_username') ? 'from':'to';通过判断 判断出 类型 作为前端渲染中区分的类型 发送者是from 接收者是to 输出数组类型
然后得到一组 数据 然后渲染在html页面上
我们在设计一个html：
<li :class="item.type == 'from' ? 'msg-self' : 'msg-to'" v-for="item in list">
<div class="my-msg-list" v-if="item.type == 'from'">
<img :src="item.userpic" class="avatar radius4">
<div class="my-msg-info">
<div class="msg-meta">
<span>{{ item.send_from }}</span>
<span>
<time>{{ item.message_time }}</time></span>
</div>
<div class="my-msg-content">
<p style="margin: 0;">{{ item.content }}</p></div>
</div>
</div>
<div class="my-msg-list" v-else>
<div class="my-msg-info">
<div class="msg-meta">
<span>
<time>{{ item.message_time }}</time></span>
<span>{{ item.send_from }}</span></div>
<div class="my-msg-content">
<p style="margin: 0;">{{ item.content }}</p></div>
</div>
<img :src="item.userpic" class="avatar radius4"></div>
</li>通过判断 type方法来作为区分对方发送的信息 作为格式整理 如图在html代码之中 我已经做出了样式类型的区分
请求成功后我们就会得到这样的格式
然后我们在设计一个发送框
<textarea rows="4" v-model="content" placeholder="" class="msg-textarea form-control"></textarea>
发送者send_to 为刚刚上面获取的用户名 相当于重新把消息发给了他
后台写一个发送私信的方法 官方有实例 不多讲 通过axios 发送给方法
内容发布成功后回调一个声明周期函数定义的方法 实现了数据的刷新 就得到一个完整的信息交互了
请按照自己的基础来实现该功能哟 不能盲目尝试 逻辑看不懂句说明无法实现
感谢大家
