基于vue和nodejs的智能聊天室的实现_vue node聊天毕设

作者：小桥流水78 | 2024-07-29 19:42:05

踩

vue node聊天毕设

项目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
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

注册页面可将新的用户名和密码添加到数据库

—聊天界面的设计
聊天界面主要分为头部信息栏，左侧好友列表栏和右侧聊天界面
头部信息栏通过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;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

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)
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196

五、结语

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

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小桥流水78/article/detail/900283