思路 按照官方给出的数据表来实现,只需要官方的私信数据表 按照逻辑 都是通过插入数据表 如何根据发送给谁来查询是否有私信 数据表结构 CREATE TABLE ...
思路
按照官方给出的数据表来实现,只需要官方的私信数据表
按照逻辑 都是通过插入数据表 如何根据发送给谁来查询是否有私信
数据表结构
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})
}
})
后端通过请求 再输出相关数据
查询条件使用or的表达式查询 send_from send_to 两个字段的值 查询自己的用户名 get_cookie('_username')
在遍历插入一条数组为
$item['type'] = $item['send_from'] == get_cookie('_username') ? 'from':'to';
通过判断 判断出 类型 作为前端渲染中区分的类型 发送者是from 接收者是to 输出数组类型
然后得到一组 数据 然后渲染在html页面上
我们在设计一个html:
<li>
<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 发送给方法
内容发布成功后回调一个声明周期函数定义的方法 实现了数据的刷新 就得到一个完整的信息交互了