基于vue和nodejs的智能聊天室的实现

最新推荐文章于 2024-06-07 16:02:01 发布

菜鸟的传奇人生

最新推荐文章于 2024-06-07 16:02:01 发布

阅读量1.3k

点赞数 1

分类专栏： js

本文链接：https://blog.csdn.net/qq_40820235/article/details/106603012

版权

js 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

项目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)
                                }
                            })
                        }
                    })
                }
                
            }
        });
     });
    
}

五、结语

没有过多涉及到页面优化和其他安全问题，欢迎读者修改指正，完整代码在页面顶端的链接中

菜鸟的传奇人生

关注

1
点赞
踩
13

收藏

觉得还不错? 一键收藏
1
评论
基于vue和nodejs的智能聊天室的实现

项目github地址：项目地址项目效果预览：（不太擅长设计页面，有点花里胡哨）一、项目准备node环境搭建本地创建的mysql数据库二、创建mysql数据库在本地创建一个exercise的数据库，在数据库中创建一个user的数据表，这张数据表中存放了用户相关信息和其好友关系字段有id，username，password，friends其中friends存放每个用户的好友id，以逗号隔开三、设计前端页面----登录注册页面的设计按照上图进行登录注册页面设计，用户填写登录信息后，
复制链接

扫一扫