Web手Q

Vue全家桶+Socket.io+Express/Koa2打造的网页版手机QQ(web app),高仿手机QQ7.1.0版本。为了方便大家学习，现在IP定ä½?接å?£å’Œå®žæ—¶æ°”温接å?£ä¹Ÿå¼€æ”¾äº†ï¼?接å?£è¯·åœ¨æº?ç ?中查看。

预览

在线预览地å?€ï¼šhttps://qq.lenshen.com （尽é‡?使用Chromeæµ?览器体验最佳效果，å?¦å¤–æ??供了3个测试账å?·ï¼Œéœ€è¦?è´¦å?·æ‰?能登录哦）

三个测试账�如下:

• qq:986992484 密ç ?:111111 (对应昵称是莫知我哀----宇文玥)

• qq:986992483 密ç ?:111111 (对应昵称是浅唱低å?Ÿ----楚乔)

• qq:986992482 密ç ?:111111 (对应昵称是以梦之铭----马哲涵)

技术栈

• Vue2.0：实现å‰?端页é?¢æž„建
• Vuex：实现ä¸?å?Œç»„件间的状æ€?共享
• Vue-router：页é?¢è·¯ç”±åˆ‡æ?¢,实现å?•é¡µçš„核心
• vueg：页é?¢å¤?æ?‚场景切æ?¢æ•ˆæžœ
• Socket.io：实现实时消æ?¯æŽ¨é€?
• axios：一个基于 Promise çš„ HTTP 库，å?‘å?Žç«¯å?‘起请求
• Expressã€?Koa2：开å?‘环境使用Express，生产环境使用Koa2
• ES6ã€?ES7ã€?ES8：æœ?务端和客户端å?‡ä½¿ç”¨ES6语法，promise/async/await 处ç?†å¼‚æ­¥
• localStorage：本地ä¿?存用户信æ?¯
• Webpack：模å?—打包，å‰?端项目构建工具首选
• SASS(SCSS)：CSS预处ç?†è¯­è¨€
• Flex：flex弹性布局，简å?•é€‚é…?手机ã€?PC端
• CSS3：CSS3过渡动画å?Šæ ·å¼?
• IScroll：模拟原生app的列表滚动效果(ListView)
• MySQL：MySQL关系型数æ?®åº“æŒ?久化数æ?®ï¼ˆè€ƒè™‘到表与表之间关系å¤?æ?‚，需è¦?多表查询，最å¤?æ?‚的时候是六张表è?”查，用MySQL会比Mongodb好得多）
• jsonp：跨域请求数æ?®
• pm2：æœ?务端使用pm2部署，常驻进程，比forever好用得多（https://github.com/Unitech/pm2 ）
• nginx：æœ?务端使用nginx代ç?†ç«¯å?£è½¬å?‘

使用方�

先将根目录下的qq.sql导入到你的MySQLæ•°æ?®åº“里(å?¯ä»¥ä½¿ç”¨Navicat)，用户å??为root，登录密ç ?为空。å?¯åŠ¨MySQLæœ?务。然å?Žä½¿ç”¨cnpm install 安装所有ä¾?èµ–(最好用cnpm安装，因为项目ä¾?赖很多，npm用的是国外的镜åƒ?，在网络ä¸?稳定的情况下很有å?¯èƒ½ä¼šå¯¼è‡´å®‰è£…失败，而且下载速度远远慢于国内的cnpm)，最å?Žè¿?è¡Œnpm run dev。æœ?务器部署è¿?行项目å?ªéœ€è¦?npm run pm2，这样就å?¯ä»¥å¸¸é©»è¿›ç¨‹ï¼Œä¸?过å‰?æ??是得先全局安装pm2。

ç›®å‰?å·²ç»?实现了QQ的核心功能，如消æ?¯åˆ—表ã€?好å?‹åˆ—表ã€?新朋å?‹ã€?好å?‹ç”³è¯·ã€?实时群è?Šã€?实时ç§?è?Šã€?è?Šå¤©è®¾ç½®ã€?å±?蔽对方è?Šå¤©ã€?特别关心ã€?会员等级ã€?个性å??片ã€?添加好å?‹ã€?删除好å?‹ã€?好å?‹åˆ†ç»„ã€?查找用户ã€?登录ã€?注销ã€?切æ?¢ç”¨æˆ·ã€?å?³æ»‘显示侧æ ?ã€?地ç?†å®šä½?ã€?温度等等。å?ŽæœŸä¼šè€ƒè™‘增加更多功能。如果你想体验实时è?Šå¤©çš„酷炫效果，那么你å?¯ä»¥æ‰“开两个æµ?览器，用上é?¢ä¸?å?Œçš„è´¦å?·ç™»å½•å?³å?¯ã€‚

截图

• 消æ?¯é¡µé?¢

• è?”系人页é?¢

• 群è?Š

• ç§?è?Š

分�

• æœ?务端使用ES6语法

�需�使用babel转�以�一系列的�置，�需�将node�级到V8版本，V8已�很好地支�了ES6/ES7/ES8等最新特性，这是目�最好的办法。�级到V8版本，�以直接到nodejs中文网(http://nodejs.cn/download/) 下载��，也�以使用NVM切�node版本。

�级到V8�，还�支�通过import/export关键字�导入导出模�(因为�务端已�有了CommonJS规范，如果�使用import/export的�就有点冲�了)，如果一定�使用import/export关键字，这时�以在�务端的入�文件首行添加以下代�：

require("babel-core/register")({
	presets: ['es2015', 'stage-0']
})
require("babel-polyfill")

上�的模���以使用import�导入，必须使用require，�时需�通过npm安装babel-core�babel-preset-es2015�babel-preset-stage-0�babel-polyfill等�赖。这样就�以愉快地使用import/export了。

�务端代�片段如下：

// ES7 async/await
import express from 'express'
import login from '../../controller/login'

const loginRouter = express.Router()

loginRouter
	.get('/:user/:pwd', async(req, res) => { // 登录
		const result = await login.login(req, res)
		res.json(result)
	})

export default loginRouter

• Socket.io

�务端(结�Express/Koa):

// Server
import express from 'express'
import http from 'http'
import socketio from 'socket.io'

const app = express()
const server = http.createServer(app)
const io = socketio(server)
server.listen(3000)

io.on('connection', (socket)=>{
  socket.emit('news', { hello: 'world' })
  socket.on('my other event', function (data) {
    console.log(data)
  })
})

客户端：

// Client
<script src="http://localhost:3000/socket.io/socket.io.js"></script>
<script>
  const socket = io.connect('http://localhost:3000')
  socket.on('news', (data)=>{
    socket.emit('my other event', { my: 'data' })
  })
</script>

socket.io最核心的两个api就是emit å’Œ on了 ，æœ?务端和客户端都有这两个api。通过 emit å’Œ onå?¯ä»¥å®žçŽ°æœ?务器与客户端之间的å?Œå?‘通信。

emit ：å?‘射一个事件，第一个å?‚数为事件å??，第二个å?‚数为è¦?å?‘é€?çš„æ•°æ?®ï¼Œç¬¬ä¸‰ä¸ªå?‚数为回调函数（如需对方接å?—到信æ?¯å?Žç«‹å?³å¾—到确认时，则需è¦?用到回调函数）。

on ：监å?¬ä¸€ä¸ª emit å?‘射的事件，第一个å?‚数为è¦?监å?¬çš„事件å??，第二个å?‚数为回调函数，用æ?¥æŽ¥æ”¶å¯¹æ–¹å?‘æ?¥çš„æ•°æ?®ï¼Œè¯¥å‡½æ•°çš„第一个å?‚数为接收的数æ?®ã€‚

�务端常用API：

socket.emit()：å?‘建立该连接的客户端å?‘é€?消æ?¯

socket.on()：监å?¬å®¢æˆ·ç«¯å?‘é€?ä¿¡æ?¯

io.to(socketid).emit()：å?‘指定客户端å?‘é€?消æ?¯

io.sockets.socket(socketid).emit()：å?‘指定客户端å?‘é€?消æ?¯ï¼Œæ–°ç‰ˆæœ¬ç”¨io.sockets.socket[socketid].emit() ，数组访问

socket.broadcast.emit()：å?‘除去建立该连接的客户端的所有客户端广播

io.sockets.emit()：å?‘所有客户端广播

客户端常用API：

socket.emit()：å?‘æœ?务端å?‘é€?消æ?¯

socket.on()：监å?¬æœ?务端å?‘æ?¥çš„ä¿¡æ?¯

FAQ

若使用的过程中é?‡åˆ°é—®é¢˜ï¼Œå?¯ä»¥åŠ å®˜æ–¹ç¾¤äº¤æµ?：611212696。如果觉得ä¸?错，就毫ä¸?å??啬地给个starå?§ã€‚å?ŽæœŸé¡¹ç›®è¿˜ä¼šç»§ç»­æ›´æ–°å’Œå®Œå–„。

�动�如果报以下错误，请�考：https://github.com/lensh/vue-qq/issues/8

Expression #2 of SELECT list is not in GROUP BY clause and contains nonaggregated column \'qq.b.face\' which is not functionally dependent on columns in GROUP BY clause; this is incompatible with sql_mode=only_full_group_by