网页聊天软件

立即下载用AI写一个

发布时间：2018-02-22

13人 | 浏览：4447次 | 收藏 |

技术：RequireJS, Vue.js, NodeJS, Express, MongoDB, Bootstrap, WebSocket, JQuery, ES2015

运行环境：nodejs, mongodb

概述

类似于网页QQ的聊天软件

详细

### 一、运行
* 项目依赖node环境和mongodb，请先下载安装好以上两个环境。
* 双击/server/core/run.bat文件即可启动服务器。
* 打开谷歌浏览器输入http://127.0.0.1:8080 即可使用

### 二、演示效果

![主界面](https://renhongl.github.io/images/homeAndRoom.png)
### 三、项目文件结构
![](https://t1.picb.cc/uploads/2018/02/22/K1vgw.png)
### 四、代码实现过程
由于代码量较大，这里只拿出部分来介绍。
#### 1、获取验证码的代码

```
_getCode(){
    this.app.get('/getCode', (req, res) => {
        let email = req.query.email;
        let code = '';
        for(let i = 0; i < 5; i++){
            code += Math.floor(Math.random() * 10);
        }
        let queryData = {
            email: email
        };
        let updateData = {
            code: code
        };
        let callback = (db) => {
            let collection = db.collection(this.userCollection);
            collection.updateOne(queryData, {$set: updateData}, (err, result) => {
                assert.equal(null, err);
                db.close();
                if(result.result.n === 1){
                    new Email(email, '重置密码', '你的验证码是：' + code);
                    this._removeCode(email);
                    res.send({status: 'success', text: '验证码已发往你的邮箱，请查收。30分钟内有效。'});
                }else{
                    res.send({status: 'error', text: '没有此邮箱，或许你需要注册账号。'});
                }
            });
        };
        new MongoDB(this.currentDB, callback);
    });
}
```

#### 2、拖动功能
```
define([], function() {
    'use strict';
    class Draggable {
        constructor($container) {
            this.$container = $container;
            for (let subContainer of $container.children()) {
                this._handleEvents($(subContainer));
            }
        }

_handleEvents($subContainer) {
            $subContainer.on('mousedown', (e) => {
                if (!$(e.target).hasClass('button')) {
                    this._handleMousedown(e);
                }
            });

$(document).on('mousemove', (e) => {
                if (!$(e.target).hasClass('button')) {
                    this._handleMousemove(e);
                }
            });

$(document).on('mouseup', (e) => {
                if (!$(e.target).hasClass('button')) {
                    this._handleMouseup(e);
                }
            });
        }

_handleMousedown(e) {
            let {left, top} = this.$container.css(['left', 'top']);
            this.offsetX = this._parseStr(left) - e.clientX;
            this.offsetY = this._parseStr(top) - e.clientY;
            this.mouseDown = true;
        }

_handleMousemove(e) {
            $(e.target).css('cursor', 'url(/images/m1.cur),default !important');
            if (this.mouseDown) {
                let x = e.clientX;
                let y = e.clientY;
                let positionX = x + this.offsetX;
                let positionY = y + this.offsetY;
                this.$container.css({
                    left: positionX,
                    top: positionY,
                });
            }
        }

_handleMouseup(e) {
            $(e.target).css('cursor', 'url(/images/m1.cur),default !important');
            this.mouseDown = false;
        }

_parseStr(str) {
            if(typeof str !== 'string'){
                str += ''; 
            }
            return Number(str.split('px')[0]);
        }
    }

return Draggable;
});
```

#### 3、点击雨滴效果的代码
```
define([], function() {
    'use strict';
    class Rain {
        constructor() {
            this.settings = {
                width: 10,
                height: 10,
                borderColor: '#c6cac9',
                opacity: 0.7,
                borderRadius: 5,
                borderWidth: 5,
                maxWidth: 70,
                widthOffset: 2,
                radiusOffset: 1,
                opacityOffset: 0.05,
                borderOffset: 1,
                position: 'fixed',
                zIndex: 100,
                borderStyle: 'solid',
                class: 'rain',
            };
            this._handleEvents();
        }

_handleEvents() {
            let settings = this.settings;
            $(document).on('click', (e) => {
                if($(e.target).hasClass('button')){
                    return;
                }
                let $rain = $('<div>').attr('class', settings.class).css({
                    position: settings.position,
                    zIndex: settings.zIndex,
                    borderStyle: settings.borderStyle,
                });
                $('body').append($rain);
                let x = e.clientX;
                let y = e.clientY;
                this._initRain($rain, x, y);
                this._updateRain($rain, x, y);
            });
        }

_updateRain($rain, x, y) {
            let settings = this.settings;
            let rainThread = setInterval( () => {
                let {width, height,top, left, opacity, borderWidth, borderRadius} = $rain.css(['width', 'height','top', 'left', 'opacity', 'borderWidth', 'borderRadius']);
                $rain.css({
                    width: this._parseStr(width) + settings.widthOffset,
                    height: this._parseStr(height) + settings.widthOffset,
                    top: y - this._parseStr(height) / 2,
                    left: x - this._parseStr(width) / 2,
                    opacity: this._parseStr(opacity) - settings.opacityOffset,
                    borderWidth: this._parseStr(borderWidth) + settings.borderOffset,
                    borderRadius: this._parseStr(borderRadius) + settings.radiusOffset,
                });
                if (this._parseStr(width) > settings.maxWidth) {
                    clearInterval(rainThread);
                    $rain.remove();
                }
            }, 10);
        }

_initRain($rain, x, y) {
            let settings = this.settings;
            $rain.css({
                width: settings.width,
                height: settings.height,
                borderColor: settings.borderColor,
                opacity: settings.opacity,
                borderRadius: settings.borderRadius,
                borderWidth: settings.borderWidth,
                top: y - this._parseStr(settings.height) / 2,
                left: x - this._parseStr(settings.width) / 2,
            });
        }

_parseStr(str){
            if(typeof str !== 'string'){
                str += ''; 
            }
            return Number(str.split('px')[0]);
        }

}

return Rain;
});
```
### 五、其他说明
> 暂没

本实例支付的费用只是购买源码的费用，如有疑问欢迎在文末留言交流，如需作者在线代码指导、定制等，在作者开启付费服务后，可以点击“购买服务”进行实时联系，请知悉，谢谢

感谢

手机上随时阅读、收藏该文章？请扫下方二维码

网页聊天软件

概述

详细

相似例子推荐

评论

作者

评分详细

作者例子