VueSocial
something like QQ报咳、weibo侠讯、weixin（仿微博、微信的聊天社交平臺）前后端分離的vue+express+socket.io練手項目
內(nèi)容
預(yù)覽
在線demo （移動端無法打開請復(fù)制地址使用瀏覽器打開少孝，pc端按了f12后有個小問題继低，刷新一下就好,resize觸發(fā)的問題，待改進(jìn)）http://47.107.66.252:3001/public/dist/#/home
技術(shù)棧
vue：前端框架
express：后端框架
socket.io：實現(xiàn)實時消息推送
axios：一個基于 Promise 的 HTTP 庫稍走，發(fā)送ajax請求
localStorage：瀏覽器本地存儲
Webpack：模塊打包工具，前端項目構(gòu)建工具
mongoose：mongodb的框架
better-scroll:一款重點解決移動端(已支持 PC)各種滾動場景需求的插件
已實現(xiàn)功能
登錄注冊
圖片分享：上傳本地圖片到云服務(wù)器（我用的是阿里云的oss柴底，可以根據(jù)自己的情況修改router/upload.js的代碼）
頭像修改
評論：socket.io
實時消息推送
查看個人主頁
實時聊天：socket.io
首頁下拉刷新：better-scroll
搜索：搜索用戶與動態(tài)婿脸、使用localStorage保存歷史搜索記錄
待改進(jìn)
同一個用戶多個設(shè)備同時登錄時socket.io會出現(xiàn)問題，所以要限制登錄柄驻？還是修改數(shù)據(jù)庫結(jié)構(gòu)狐树？
移動端的坑：有的瀏覽器會卡頓、Safari監(jiān)聽不到輸入框按下搜索鍵（內(nèi)心是崩潰的）
resize時better-scroll的小bug
4.沒做分頁請求鸿脓，都是一次性請求全部數(shù)據(jù)
安裝
分別兩個文件目錄下安裝依賴npm install抑钟，在server文件夾下node app.js,在blogPhone下npm run dev，然后打開localhost：8081就可以了
項目部分圖片
首頁
登錄
消息
聊天
個人信息
個人主頁
分享動態(tài)
更改頭像
搜索頁面
分析總結(jié)
socket.io
服務(wù)端:
let serve = app.listen(3001);
const io = socketio(serve);
io.on('connection', socket => {
socket.on('login', (username) => {
console.log(username+'上線了野哭！');
});
}
客戶端:
在index中引入
<script src="http://47.107.66.252:3001/socket.io/socket.io.js"></script>
<script type="text/javascript">
const socket = io.connect('http://47.107.66.252:3001');
</script>
這部分的數(shù)據(jù)庫寫得有點亂（很亂在塔。。拨黔。）蛔溃，但是socket.io的使用其實很方便，無非就是on和emit
socket.emit()：向建立該連接的客戶端發(fā)送消息
socket.on()：監(jiān)聽客戶端發(fā)送信息
io.to(socketid).emit()：向指定客戶端發(fā)送消息
socket.broadcast.emit()：向除去建立該連接的客戶端的所有客戶端廣播
io.sockets.emit()：向所有客戶端廣播
vue
總結(jié)一些項目遇到的難點
- ajax在生命周期函數(shù)created發(fā)起篱蝇，dom操作在生命周期函數(shù)mounted中操作贺待，如果需要dom元素完全掛起后在操作則還需要在$nextTick中操作，例如：
mounted() {
this.$nextTick(() => {
this.initImg();
})
}
動態(tài)生成（例如通過v-for）的dom元素在mounted中通過ref是獲取不到的零截，需要在生命周期函數(shù)updated中獲取
keepalive后的組件如果需要在跳轉(zhuǎn)進(jìn)入時進(jìn)行操作可通過路由守衛(wèi)和生命周期函數(shù)actived配合使用麸塞，如：
beforeRouteEnter(to, from, next) {
if (from.path == '/upload' ) {
next(vm => {
vm._getList = true
})
} else {
next()
}
}
activated() {
this.$nextTick(() => {
if (this._getList) {
this.getPyqLists();
}
})
}
更新中...
