按照官方給出的數(shù)據(jù)表來實(shí)現(xiàn)，只需要官方的私信數(shù)據(jù)表
按照邏輯 都是通過插入數(shù)據(jù)表 如何根據(jù)發(fā)送給誰來查詢是否有私信
可以去青航主題 注冊體驗該功能
CREATE TABLE `yzm_message` ( `messageid` int(10) unsigned NOT NULL AUTO_INCREMENT, `send_from` varchar(30) NOT NULL DEFAULT '' COMMENT '發(fā)件人', `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 '回復(fù)的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 '系統(tǒng)信息', PRIMARY KEY (`messageid`), KEY `replyid` (`replyid`), KEY `status` (`status`) ) ENGINE=MyISAM DEFAULT CHARSET=utf8
前端 vue3+php
構(gòu)造一個方法list 主要用于輸出私信列表 為防止單個用戶信息重復(fù) 我們可以通過刪除相同發(fā)送者的key值
比如發(fā)送者字段send_from 刪除相關(guān)值的數(shù)組 我們就會等到一個唯一一個發(fā)送者的私信 這樣就不會重復(fù)
函數(shù)分享：
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 為數(shù)組 key 為要刪除的重復(fù)字段 刪除并重新排序
好 ，我們在方法中 通過db操作類 循環(huán)出 數(shù)據(jù)表中的數(shù)據(jù) 比如說這樣的寫法
D('message')->where(['send_to' =>get_cookie('_username')])->select();查詢條件是接受者自己的用戶名 這樣你就得到一個別人發(fā)給你你自己的私信
通過遍歷循環(huán)出 發(fā)送者的用戶頭像 等其他 再轉(zhuǎn)化出時間戳的格式
然后通過 return_json輸出數(shù)據(jù)
return_json(['status' => 200,'data'=>assoc_uniques($data,'send_from')]);
前端通過請求接受數(shù)據(jù)
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 渲染數(shù)據(jù)到html中
然后我們就等到這樣的頁面
好 ，我們再寫一個show的方法 主要查看該私信的內(nèi)容
我們需要在show方法中提交userid 該用戶id為發(fā)送者的ID
通過vue聲明周期函數(shù)請求 該用戶ID 通過該用戶ID獲取 發(fā)送者用戶名
如果你覺得麻煩 可以直接獲取提交用戶名的值 這樣就不用通過查ID轉(zhuǎn)化用戶名
請求實(shí)例：
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})
}
})后端通過請求 再輸出相關(guān)數(shù)據(jù)
通過
select();
方法輸出遍歷
查詢條件使用or的表達(dá)式查詢 send_from send_to 兩個字段的值 查詢自己的用戶名 get_cookie('_username')
在遍歷插入一條數(shù)組為
$item['type'] = $item['send_from'] == get_cookie('_username') ? 'from':'to';通過判斷 判斷出 類型 作為前端渲染中區(qū)分的類型 發(fā)送者是from 接收者是to 輸出數(shù)組類型
然后得到一組 數(shù)據(jù) 然后渲染在html頁面上
我們在設(shè)計一個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方法來作為區(qū)分對方發(fā)送的信息 作為格式整理 如圖在html代碼之中 我已經(jīng)做出了樣式類型的區(qū)分
請求成功后我們就會得到這樣的格式
然后我們在設(shè)計一個發(fā)送框
<textarea rows="4" v-model="content" placeholder="" class="msg-textarea form-control"></textarea>
發(fā)送者send_to 為剛剛上面獲取的用戶名 相當(dāng)于重新把消息發(fā)給了他
后臺寫一個發(fā)送私信的方法 官方有實(shí)例 不多講 通過axios 發(fā)送給方法
內(nèi)容發(fā)布成功后回調(diào)一個聲明周期函數(shù)定義的方法 實(shí)現(xiàn)了數(shù)據(jù)的刷新 就得到一個完整的信息交互了
請按照自己的基礎(chǔ)來實(shí)現(xiàn)該功能喲 不能盲目嘗試 邏輯看不懂句說明無法實(shí)現(xiàn)
感謝大家
