基于vue和nodejs的智能聊天室的实现
项目github地址：项目地址
项目效果预览：
（不太擅长设计页面，有点花里胡哨）
一、项目准备
- node环境搭建
- 本地创建的mysql数据库
二、创建mysql数据库
在本地创建一个exercise的数据库，在数据库中创建一个user的数据表，这张数据表中存放了用户相关信息和其好友关系
字段有id，username，password，friends
其中friends存放每个用户的好友id，以逗号隔开
三、设计前端页面
----登录注册页面的设计
按照上图进行登录注册页面设计，用户填写登录信息后，将用户名和密码post到后端进行数据库比对，成功后，可进入聊天页面，此时将用户的用户名存进cookie，cookie.js文件如下所示：
function setCookie(json, hours) {
// 设置过期时间
let data = new Date(
new Date().getTime() + hours * 60 * 60 * 1000
).toUTCString();
for (var key in json) {
document.cookie = key + "=" + json[key] + "; expires=" + data;
}
}
/**
* @description 获取cookie
* @param {String} name 需要获取cookie的key
*/
function getCookie(name) {
var arr = document.cookie.match(new RegExp("(^| )" + name + "=([^;]*)(;|$)"));
if (arr != null) {
return unescape(arr[2])
} else {
return null
}
}
/**
* @description 删除cookie
* @param {String} name 需要删除cookie的key
*/
function clearCookie(name) {
let json = {};
json[name] = '';
setCookie(json, -1)
}
export default {
setCookie,
getCookie,
clearCookie
}
注册页面可将新的用户名和密码添加到数据库
—聊天界面的设计
聊天界面主要分为头部信息栏，左侧好友列表栏和右侧聊天界面
头部信息栏通过cookie获取到当前登录的用户，通过公开的天气api得到天气信息，并对应图片显示，获取当前时间格式化显示，右侧一个头像有下拉框
点击修改密码向后端发送修改密码请求，操作数据库进行修改，点击退出登录后，清除cookie，路由跳转到登录界面
好友列表栏通过v-for指令将获取到的好友显示在左侧，点击对应好友，右侧显示对应好友的聊天界面
聊天界面设计如上所示，通过下方输入框输入，调用智能机器人api自动回复显示
四、设计后端接口
基于nodejs，将后端分为了服务模块index.js，配置模块config.js，路由模块router.js，路由处理模块handler.js，数据库操作模块data.js，用来对接前端需要处理的接口
其中router.js文件如下：
var express = require('express');
var path = require('path')
var handler = require('./handler.js');
var bodyParser = require("body-parser");
var router = express.Router();
router.use('/resource',express.static(path.join(__dirname,'resource')));
// router.use('/resource',function(req,res){
// console.log('nihaoa');
// res.end('hello');
// })
router.post('/login',handler.loginHandler)
router.post('/register',handler.registerHandler)
router.post('/changePassword',handler.changePasswordHandler)
router.post('/getFriends',handler.getFriendsHandler)
router.post('/addFriend',handler.addFriendHandler)
module.exports = router;
resource处理静态资源，其他接口都需要进行数据库操作
handler.js文件如下：
var data = require('./data.js');
module.exports.loginHandler = function(req,res){
data.login(req,res);
}
module.exports.registerHandler = function(req,res){
data.register(req,res)
}
module.exports.changePasswordHandler = function(req,res){
data.changePassword(req,res)
}
module.exports.getFriendsHandler = function(req,res){
data.getFriends(req,res)
}
module.exports.addFriendHandler = function(req,res){
data.addFriend(req,res)
}
data.js文件如下：
var mysql = require('mysql');
var connection = mysql.createConnection({
host: '127.0.0.1',
user: 'root',
password: '123456',
database: 'exercise'
})
// 登录
module.exports.login = function(req,res){
body = ""
req.on('data',function(chunk){
body += chunk;
});
req.on('end',function(){
body = JSON.parse(body);
connection.query("select username,password from user where username='" + body.username + "'",(err, data) => {
if (err) {
console.log("error!", err);
} else {
if(data.length==0){
result = {
code:"200",
msg:"userNull"
}
res.json(result)
}
else{
if(body.password == data[0].password){
result= {
code:"200",
msg:"OK"
}
res.json(result)
}
else{
result= {
code:"200",
msg:"passwordError"
}
res.json(result)
}
}
}
});
});
}
// 注册
module.exports.register = function(req,res){
body = ""
req.on('data',function(chunk){
body += chunk;
});
req.on('end',function(){
body = JSON.parse(body);
connection.query("select username,password from user where username='" + body.username + "'",(err, data) => {
if (err) {
console.log("error!", err);
} else {
if(data.length==0){
connection.query("insert into user(username,password) values(?,?)",[body.username,body.password],function(err1,result){
if(err1){
console.log("error!", err1);
}
else{
result = {
code:"200",
msg:"registerSuccess"
}
res.json(result)
}
})
}
else{
result = {
code:"200",
msg:"userExist"
}
res.json(result)
}
}
});
});
}
// 修改密码
module.exports.changePassword = function(req,res){
body = ""
req.on('data',function(chunk){
body += chunk;
});
req.on('end',function(){
body = JSON.parse(body);
connection.query("select username,password from user where username='" + body.username + "'",(err, data) => {
if (err) {
console.log("error!", err);
} else {
if(data[0].password != body.originalPassword){
result = {
code:"200",
msg:"originalError"
}
res.json(result)
}
else{
connection.query("update user set password=? where username=?",[body.newPassword,body.username],function(err1,result){
if(err1){
console.log("error",err1)
}
else{
result={
code:"200",
msg:"changeSuccess"
}
res.json(result)
}
})
}
}
});
});
}
// 获取好友列表
module.exports.getFriends = function(req,res){
body = ""
req.on('data',function(chunk){
body += chunk;
});
req.on('end',function(){
body = JSON.parse(body);
connection.query("select friends from user where username='" + body.username + "'",(err, data) => {
if (err) {
console.log("error!", err);
} else {
connection.query("select username from user where id in ("+data[0].friends+')',function(err1,result){
if(err1){
console.log("error!",err1)
}
else{
res.json(result)
}
})
}
});
});
}
// 添加好友
module.exports.addFriend = function(req,res){
body = ""
req.on('data',function(chunk){
body += chunk;
});
req.on('end',function(){
body = JSON.parse(body);
connection.query("select id from user where username='" + body.newFriend + "'",(err, data) => {
if (err) {
console.log("error!", err);
} else {
if(data.length == 0){
response = {
code:"200",
msg:"friendNotExist"
}
res.json(response)
}
else{
connection.query("select friends from user where username=?",[body.username],function(err1,result){
if(err1){
console.log("error!",err1)
}
else{
result = data[0].id + "," + result[0].friends
connection.query("update user set friends = ? where username = ?",[result,body.username],function(err2,result1){
if(err2){
console.log("error!",err2)
}
else{
response = {
code:"200",
msg:"addSuccess"
}
res.json(response)
}
})
}
})
}
}
});
});
}
五、结语
没有过多涉及到页面优化和其他安全问题，欢迎读者修改指正，完整代码在页面顶端的链接中