实现简易博客聊天系统（仿微信）

最新推荐文章于 2021-12-23 13:01:40 发布

妙团团

最新推荐文章于 2021-12-23 13:01:40 发布

阅读量277

点赞数 1

分类专栏： node 文章标签： css3 jquery vue.js node.js mongodb

本文链接：https://blog.csdn.net/qq_52440306/article/details/117202432

版权

node 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

前言

学习最好的方法就是实践，在实践中成长。
本次将微信作为模仿目标，也许实现了不到百分百之零点一的功能，但所获还是不小的。
收获
1，前后端如何交互，怎么个工作流程，有了进一步认识；
2， vue掌握50%+，三目表达式可以作为开关使用，多个三目表达式组合，有神奇的效果，v-for循环无往不利；我应该很快就能会学会vue;
3， express框架简洁而又高效，后台开发确实十分复杂，数据是不可见得。对于逻辑思维要求高。已经学会如何使用express框架。
4， css rgba()的灵活使用，cs是短板，这些东西是需要背的。
5，移动端的适配，在各种机型中都能展示相同的样式；

项目介绍

结构

前端

前端分为三个部分，分别是 登陆注册， 主页面， 多人聊天室。
其中主页面就是登陆进入后看到的页面，多人聊天室通过主页面进入；主页面分为十五小的个页面，其实就是十五个div,每次展示的部分不同；通过切换display属性实现；

后端

分为两部分，分别是数据库模块封装，服务器

实现的功能

1，登陆注册
2，发表博客，删除博客
3，点赞评论，取下点赞，删除评论
4，修改个人资料
5，多人聊天室
6，私聊（实现了一部分）
7，加好友，删好友
8，输入框有消息，弹出发送按钮，没有消息隐藏发送按钮

效果展示

登陆注册
在这里插入图片描述

注册返回的是登陆页面
主页面
选项卡使用的是字体图标

通讯录

我·
在这里插入图片描述
点击发现世界进入博客

这是另一个号发的
点赞和评论

换了个头像

设置页面，下拉有一个退出按钮皮肤是可选的，其实就是背景颜色

多人聊天室‘ 页面

这个按钮弹出和隐藏是用 watch监听的
在这里插入图片描述
点击上方放大镜进如搜索页面使用了模糊查询需要做处理，为空不查询

加好友

在这里插入图片描述
也可以自己加自己，加完之后会有提示

点进去选择是否同意

同意之后在通讯录就有显示了；

点击好友名字

点击右上角弹出，好友设置

可以选择删除
返回到好友资料页面点击发送消息，会进入私聊房间
在这里插入图片描述
私聊的功能实现了部分，难度超出了我的想象

代码部分

后台

const express=require('express');
const mongodb=require('./model/packaging.js');
const cookie=require('cookie-parser');
const session=require('express-session');//引入session
const nedbStore=require('nedb-session-store')(session);//引入session持久化保存
const body=require('body-parser');//读取body请求发送过来的文件
const fileupload=require('express-fileupload');//引入文件阅读器
const ejs=require('ejs');//引入模板引擎
const fs=require('fs');
const path=require('path');
const { SSL_OP_SSLEAY_080_CLIENT_DH_BUG } = require('constants');
//服务器
//会话房间编号;不要手动更改
var arr={
	sessionPrivate:'111',//好友号
    sessionGroup:'111',//群聊编号（待办）
	identity:'123456789',//根据此号码给每个注册的用户生成一个专属的身份号，操作用户直接身份证号（待办）
}
arr=JSON.stringify(arr);
//先找一下有没有这个文件，没有就创建一个;
fs.readFile('./public/session.json',(err,f)=>{
	if(err){
        fs.writeFile('./public/session.json',arr,(err)=>{
			if(err) throw err;
		})
	}
})
const app=express();
app.set('view engine','ejs');
const http=require('http').Server(app);//引入http
const io=require('socket.io')(http);
app.use(cookie());//
app.use(fileupload());//
//传入body中间件，解析post数据
app.use(body.urlencoded({
	extended:true,}));
//登陆页面,进入登陆页面
//呈递静态资源
app.use('/public',express.static('./public/'));
//进入登陆页面
app.use('/index',(req,res)=>{
	res.render('index');
});
//注册页面
app.use('/login',(req,res)=>{
	res.render('login');
});
//主页面
app.use('/homePage',(req,res)=>{
	if(!(req.cookies.names)){
		res.render('index');
	}else{
        res.render('homePage');
	}
	
});
//多人聊天室
app.use('/GroupChat',(req,res)=>{
	if(!(req.cookies.names)){
		res.render('index');
	}else{
		res.render('GroupChat');
	}
})
//接收注册信息
app.use('/loginss',(req,res)=>{
	//账号是唯一的。用户名可以重复。
	
	let user={name:req.body.user};
	// 要先对比再查找
	// 拿到的数据插入数据库
	//注册需要包含用户身份证，因为数据id是可不修改字段，
	mongodb.find('user','ID',user,(a)=>{
		// console.log(a);
		if(a.length==0){
			var temp;
            fs.readFile('./public/session.json',(err,data)=>{
				if(err) throw err;
				let file=JSON.parse(data);
				let number=file.identity;
				number=parseInt(number);
				number+=1;
				temp=number;
				//设置回去
				temp=JSON.stringify(temp);
				file.identity=number;
                file=JSON.stringify(file);
				let obj={
					user:req.body.user,//账号
					name:req.body.name,//用户名
					password:req.body.password,//密码
					AddFriend:[],//好友申请列表
					friendList:[],//好友列表
					sessionList:[],//会话列表，用于开启临时会话
					groupChat:[],//群聊
					identity:temp,//身份证号
					headSrc:'',
				}
				mongodb.insert('user','ID',obj,(a)=>{
					res.send('true');
				})	
				fs.writeFile('./public/session.json',file,(err)=>{
					if(err) throw err;
				})
			})          
		}else{
			res.send('false');
		}
	})
})
//登陆
app.use('/go',(req,res)=>{
	let obj={
	    'user':req.body.user,
		'password':req.body.password,
	}
	let user={
		'user':req.body.user,
        }
	mongodb.find('user','ID',user,(a)=>{
		if(a.length==0){
			res.send('账号未注册');
		}else if(obj.user==a[0].user&&obj.password==a[0].password){
			let name=a[0].name;
			res.cookie('names',name,{maxAge:100000000,httponly:true});
             res.send('true');
		}else{
			res.send('false');
		}
	})
})
//登陆进来之后获取用户信息

app.use('/getuserinfo',(req,res)=>{
	if(!(req.cookies.names)){
		res.render('index');
	}else{
        //用户的身份证
 		let obj={
			identity:req.body.identity
		}
		mongodb.find('user','ID',obj,(a)=>{
			res.send(a);
		})
	}
	
})

// //获取·cookie
app.use('/getName',(req,res)=>{
	if(!(req.cookies.names)){
		res.render('index');
	}else{
		//通过cookie获取用户信息
		mongodb.find('user','ID',{name:req.cookies.names},(a)=>{
            res.send(a);
		})
	}
})
//修改名称(更新数据)
//修改名称需要更新整个数据库里的同一名字
app.use('/changename',(req,res)=>{
	if(!(req.cookies.names)){
		res.render('index');
	}else{
		//修改的是自己的名字
        let news={name:req.body.news};
	    let odl={name:req.cookies.names};
	    //将新的用户名设置为cookie
	    mongodb.update('user','ID',odl,news,(s)=>{
		//修改成功之后重新拿下数据
	    	mongodb.find('user','ID',news,(a)=>{
				//到了这一步自身的用户名已更新;需要更新其他地方与我有关系的相同名字
		    	var names=a[0].name;
			    res.cookie('names',names,{maxAge:100000000,httponly:true});
			    res.send(a);
		    })
     	})
    }
})
//修改账号(更新数据)
app.use('/changeuser',(req,res)=>{
	if(!(req.cookies.names)){
		res.render('index');
	}else{
        let news={user:req.body.news};
	    let odl={name:req.cookies.names};
	    mongodb.update('user','ID',odl,news,(s)=>{
		//修改成功之后重新拿下数据
		    mongodb.find('user','ID',news,(a)=>{
			    res.send(a);
		    });
	    });
	}
	
});
//修改头像
app.use('/headSrc',(req,res)=>{
	if(!(req.cookies.names)){
		res.render('index');
	}else{
		let myurl=req.files;
		const fileName = req.files.myfile.name
		const path = __dirname  +'/public/image/'+ fileName;//保存图片的路径
		myurl.myfile.mv(path);
		let odl={
			name:req.cookies.names,
		}
		let news={
			name:req.cookies.names,
			headSrc:"../public/image/"+fileName,
		}
		mongodb.update('user','ID',odl,news,(s)=>{
			mongodb.find('user','ID',news,(a)=>{
				res.send(a);
			});
		});
	}

});
//发布朋友圈消息 
app.use('/setCompileImg',(req,res)=>{
	if(!(req.cookies.names)){
		res.render('index');
	}else{
        let myurl=req.files;
		let imgName=myurl.img.name;
		const path = __dirname  +'/public/compileImg/'+ imgName;//保存图片的路径
		myurl.img.mv(path);
        res.send('true');

	}
})
//只有分两次了
app.use('/setCompileNews',(req,res)=>{
    if(!(req.cookies.names)){
		res.render('index');
	}else{
        //判断用户名cookie是否存在
		let obj={
			name:req.cookies.names,
		}
		mongodb.find('user','ID',obj,(a)=>{
			let ovl={
				pinglun:req.body.val,//朋友圈文字内容
				time:req.body.time,//发表的时间
				name:req.cookies.names,//用户名
				headsrc:a[0].headSrc,//头像地址
				img:req.body.img,//发表的图片
				likelist:[],//点赞列表 爱心和用户名
				commentlist:[],//评论列表，评论时间，用户名头像，内容
				identity:a[0].identity,//身份证号用于验证信息
			}
			mongodb.insert('user','word',ovl,(s)=>{
				res.send('ture');
			})
		})
	}
})
//获取朋友圈信息
app.use('/getCompileNews',(req,res)=>{
	if(!(req.cookies.names)){
		res.render('index');
	}else{
        let obj={
			name:req.cookies.names,
		};

		mongodb.findAll('user','word',(s)=>{
			res.send(s);
		})
	}
})
// //点赞朋友圈//为了让它成为一个公共的方法。需要让好友都可以点赞；
// //和模板不同别人的数据是固定的
app.use('/likeFriend',(req,res)=>{
	if(!(req.cookies.names)){
		res.render('index');
	}else{
        	//1,根据发送过来的时间确定是哪一条数据
	    let time={
		    time:req.body.time,
	    }
	    let identity={identity:req.body.identity};//朋友圈消息里存的身份证号
        mongodb.find('user','ID',{name:req.cookies.names},(a)=>{//找到我的身份证
		    mongodb.find('user','word',time,(s)=>{//根据谁发的消息找到对应集合的数据
		        let newLikeList=JSON.stringify(s[0].likelist);//消息列表
			    newLikeList=JSON.parse(newLikeList);//转化成字符串深拷贝
			    let username={
					name:req.cookies.names,
				    identity:a[0].identity,//我的身份证号
				}//我的用户名
			    let temp=false;//判断该条消息点赞列表，是否有我自己
			    for(let i=0;i<newLikeList.length;i++){
					//如果有temp为true
					console.log(newLikeList);
				    if(newLikeList[i].identity==username.identity){
					    temp=true;
					    break;
				    }
			    }
			    //如果temp为true了表示有了
			    if(temp==true){
				    //先用简单暴力的方法
                    // 如果有就删除,将更新后的数据返回到前端
				    //不用删除的方法用更新的方法
				    for(let i=0;i<newLikeList.length;i++){
					    //如果有temp为true
					    if(newLikeList[i].identity==username.identity){
						    newLikeList.splice(i,1);
					    };
				    };
				    let news={
					    likelist:newLikeList,
					    time:req.body.time,
						identity:s[0].identity,//增加身份证
				    };
				    let odl={
					    likelist:s[0].likelist,
					    time:req.body.time,
				    }
				    mongodb.update('user',`word`,odl,news,(q)=>{
					    mongodb.findAll('user','word',(s)=>{
							res.send(s);
						})
				    })
			    }else{
				    // 没有的话就需要,把点赞加上,将用户名追加到该条数据里，在返回给前端
				    //方法，将拿出来的数据，修改再更新;
				    //并没有保存进去，转成字符串，在转回来可以实现深拷贝
				    //更新数据
				    //插入之前要先找一下，这样增加了复杂度
					// 确定找到再更新,还要通过时间确定是那条数据
					// 将整条数据拿出来，更新
					//s是未更新的原始数据
					let like=JSON.stringify(s[0]);
					like=JSON.parse(like);
					like.likelist.push(username);
					//更新数据
					// s是拿到的数据
					let news={
						likelist:like.likelist,
						time:req.body.time,
						identity:s[0].identity,//增加身份证

					}
					let odl={
						likelist:s[0].likelist,
						time:req.body.time,
					}
			        mongodb.update('user','word',odl,news,(q)=>{
						//这里应该返回我自己的数据
						mongodb.find('user','ID',{name:req.cookies.names},(b)=>{
							mongodb.find('user','word',{},(data)=>{
								res.send(data);
							})
						})
                       
					})
		        }
		   })
	    })
	}
})
//删除朋友圈消息
app.use('/delmoments',(req,res)=>{
	if(!(req.cookies.names)){
		res.render('index');
	}else{
		//这里是我自己的用户名
        let name={name:req.cookies.names};//获取cookie保存的用户名
	    let time={time:req.body.time};//时间线
	    //通过name找到所在集合
	    mongodb.find('user','ID',name,(a)=>{
		//找到之后，
		mongodb.del('user','word',(s)=>{
			mongodb.findAll('user','word',(e)=>{
				    res.send(e);
			    })
		    },time)
    	})
	}
});
//朋友圈评论消息
app.use('/commentNews',(req,res)=>{
	if(!(req.cookies.names)){
		res.render('index');
	}else{
        let name={
			name:req.cookies.names,
		}
		//需要找到自己的头像路径，将其保存到评论的消息中
		mongodb.find('user','ID',name,(a)=>{
			let headSrc=a[0].headSrc;
			let time1=req.body.time1;//该条朋友圈发布的时间
			let time=req.body.time;//现在的时间
			//找到评论消息的专属集合
			mongodb.find('user',`word`,{time:time1},(s)=>{
				let commentlist=s[0].commentlist;//原有的数据
				//转成字符串复制
				let newcommentlist=JSON.stringify(commentlist);
				newcommentlist=JSON.parse(newcommentlist);//
				let arr={
						name:req.cookies.names,
						headSrc:headSrc,
						time:time,
						val:req.body.val,
						identity:s[0].identity,//增加身份证
					};
				newcommentlist.push(arr);
				// 旧的
				let odl={
					time:time1,
					commentlist:commentlist,
				}
				//新的
				let news={
					time:time1,
					commentlist:newcommentlist,
				}
				mongodb.update('user',`word`,odl,news,(e)=>{
					mongodb.findAll('user',`word`,(k)=>{
						res.send(k);
					})
				})
			})
		})
	}
})
//删除朋友圈评论
app.use('/delComment',(req,res)=>{
    if(!(req.cookies.names)){
		res.render('index');
	}else{
        //一，根据发布人名字找到数据所在集合的名字
	    //二，根据集合名字找到所在集合
	    //三，根据发布时间找到对应的数据/加工成数组
	    //四，根据评论时间找到评论的数据删除
	    //五，更新数据，返回到前台。
	    //朋友圈发布人身份证号
	    let identity={
		    identity:req.body.identity,
	    }
	    朋友圈发布时间
	    let issueTime={
		    time:req.body.issueTime,
	    }
	    //评论时间
	    let commentTime={
		    time:req.body.commentTime,
	    }
	    mongodb.find('user','ID',identity,(a)=>{
		    mongodb.find('user',`word`,issueTime,(r)=>{
			    let data=JSON.stringify(r[0]);
			    data=JSON.parse(data);
			    //复制
			    let commentlist=JSON.stringify(data.commentlist);
			    commentlist=JSON.parse(commentlist);
			    //循环遍历
			    for(var i=0;i<commentlist.length;i++){
				    if(commentTime.time==commentlist[i].time){
					    commentlist.splice(i,1);
					    break;
				    }
			    }
			    let odl={
				    commentlist:data.commentlist,
				    time:req.body.issueTime,
			    };
			    let news={
				    commentlist:commentlist,
				    time:req.body.issueTime,
			    };
			    //应该是该条数据的发布时间
			    //id是不可改变的
			    mongodb.update('user',`word`,odl,news,(s)=>{
				    mongodb.findAll('user',`word`,(e)=>{
					    res.send(e);
				    })
     			})
	    	})
	   })
	}
})
// 搜索用户
app.use('/friendly',(req,res)=>{
	if(!(req.cookies.names)){
		res.render('index');
	}else{
		let obj=req.query.name;
		mongodb.inquire('user','ID','name',obj,(a)=>{
			res.send(a);
		})	
	}
})
// 加好友
// 1，我需要一个好友申请列表
// 2，被申请人根据好友申请列表，同意是否添加好友
//2，关系为好友的朋友圈关系是可见的
app.use('/AddFriend',(req,res)=>{
	if(!(req.cookies.names)){
		res.render('index');
	}else{
         //需要添加的好友的身份证号
	    let identity={
		    identity:req.body.identity,
	    }
	    //找到该用户
	    mongodb.find('user','ID',identity,(a)=>{
		    let identity=a[0].identity;//目标用户的账号；
		    if(a[0].AddFriend){
			    var AddFriend=JSON.stringify(a[0].AddFriend);
			    AddFriend=JSON.parse(AddFriend);
		    }else{
			    var AddFriend=[];
	    	}
		    let on=true;
		    //要判断一下这个列表中有没有相同的申请信息，如果有就不添加，
		    for(var i=0;i<AddFriend.length;i++){
			    if(AddFriend[i].name==req.cookies.names){
				    //如果有也将数据拿到前台
				    on=false;
			   };
	    	};
		    //追加进去/这里要追加的应该是添加人的信息
		    if(on){
			    let myName={
				    name:req.cookies.names,
			    }
			    //找到我自己的信息
			    mongodb.find('user','ID',myName,(s)=>{
				//要保存自己的用户名，头像
				let nameAndSrc={
					name:s[0].name,
					headSrc:s[0].headSrc,
					val:req.query.val,//验证信息。
					identity:s[0].identity,//身份证信息
				}
				AddFriend.push(nameAndSrc); 
				//将需要添加好友的用户信息更新，需要用到目标用户的账号
				let news={
					identity:identity,
					AddFriend:AddFriend
				}
				let odl={
					identity:identity,
				}
				//更新//我加别人好友是不显示添加信息的，添加信息会在别人那里显示
				//只有自己加自己的时候才显示，其他一律不显示//目标账户的身份证号等同于我的身份证号时表示自己加自己
				mongodb.update('user','ID',odl,news,(k)=>{
					    mongodb.find('user','ID',news,(e)=>{
						    if(nameAndSrc.identity==identity.identity){
								
							    res.send(e);
						    }else{
							    res.send('false');
						    }
     					})	
	     			})		 
		    	})	
		    }else{
			     res.send('false');
	     	}
	    })
	}
});
// 不同意加好友 //见鬼了
app.use('/vuto',(req,res)=>{
	if(!(req.cookies.names)){
		res.render('index');
	}else{
		let myName={
			name:req.cookies.names,
		}
		//先找到自己的信息
		mongodb.find('user','ID',myName,(a)=>{
			 //拿到 好友申请列表
			let AddFriend=a[0].AddFriend;
			//申请人的身份证号
			let identity=req.query.identity;
			//对比 ,如果有删除该条数据
			for(var i=0;i<AddFriend.length;i++){
				if(AddFriend[i].identity==identity){
					AddFriend.splice(i,1);
				}
			}
			//在更新一下数据，需要和账号一起更新
			let odl={
				user:a[0].user,
			}
			let news={
				user:a[0].user,
				AddFriend:AddFriend
			};
			mongodb.update('user','ID',odl,news,(s)=>{
			   //重新获取数据
			})
			mongodb.find('user','ID',odl,(data)=>{
				res.send(data);
			})
	
		})
	}
   
})
//同意加好友
//除了删除好友申请列表外，还需要获取好友信息添加到好友列表
//思路
//1.先找到我的好友申请列表信息，
//2.与当前申请人名字对比
//3.将对比成功的信息从好友申请列表，移动到好友信息列表
//4.好友添加是双向的，将我的信息添加到好友的好友信息列表中
app.use('/consent',(req,res)=>{
    if(!(req.cookies.names)){
		res.render('index');
	}else{
        //根据cookie找到我的信息
	    let myName={
		    name:req.cookies.names,
	    }
		// 在加好友的时候就生成好友号
		var number;
		fs.readFile('./public/session.json',(err,da)=>{
			if(err) throw err;
		    let room=JSON.parse(da);
			let n=room.sessionPrivate
			n=parseInt(n);//生成房间
			n+=1;		
			n=JSON.stringify(n);
			number=n;//拿到房间号
			room.sessionPrivate=n;
			room=JSON.stringify(room);
			// console.log('。。。。。。。。。。。。')
            // console.log(room);
			// console.log('。。。。。。。。。。。。')

			fs.writeFile('./public/session.json',room,(err)=>{
                if(err) throw err;
			})
			mongodb.find('user','ID',myName,(a)=>{
				//好友申请列表
				let AddFriend=a[0].AddFriend;
				//与当前申请人身份证号字对比,需要确定是谁加我为好友
				let identity=req.query.identity;
				for(var i=0;i<AddFriend.length;i++){
					if(AddFriend[i].identity==identity){
						var temp=AddFriend[i];
						//转为字符串复制
						temp=JSON.stringify(temp);
						temp=JSON.parse(temp);
						AddFriend.splice(i,1);
					}
				}
				//更新我的好友列表，好友申请列表
				let friendList=JSON.stringify(a[0].friendList);
				friendList=JSON.parse(friendList);
				//确定好友列表是否已经有好友
				let len=true;
				//当前身份证是好友的与我对比
				for(var i=0;i<friendList.length;i++){
					if(identity==friendList[i].identity){
						len=false;
					}
				}
				//避免重复加好友
				if(len){
					temp.room=number;
					friendList.push(temp);		 	
				}
				let myOdl={
					identity:a[0].identity,
				}
				let myNews={
					identity:a[0].identity,
					AddFriend:AddFriend,
					friendList:friendList,
				}
				//更新我的好友列表
				mongodb.update('user','ID',myOdl,myNews,(b)=>{
					//将我的数据更新到好友的好友列表
					mongodb.find('user','ID',{identity:identity},(d)=>{
						let herFriend=JSON.stringify(d[0].friendList);
						herFriend=JSON.parse(herFriend);
						let one=true;//去重
						for(var i=0;i<herFriend.length;i++){
							if(a[0].identity=herFriend[i].identity){
								one=false;
							}
						}
						//我的用户名和头像
						let myData={
							name:myName.name,
							headSrc:a[0].headSrc,
							identity:a[0].identity,
							room:number,//我的身份证号;
						}
						if(one){
							herFriend.push(myData);
						}
						let herOdl={
							identity:d[0].identity,
						}
						let herNews={
							identity:d[0].identity,
							friendList:herFriend,
						}
						//更新好友的好友列表1
						mongodb.update('user','ID',herOdl,herNews,(e)=>{
							mongodb.find('user','ID',myNews,(c)=>{
								res.send(c);
							})
						})
					 })		
			        })
			
		})
	    //我的好友列表信息
	   
	   })
	}
})
//删除好友,删除好友其实删除的是好友列表里的数据(用户名/头像)，以及对方好友列表里我的数据
app.use('/delfriend',(req,res)=>{
    if(!(req.cookies.names)){
		res.render('index');
	}else{
		//获取我的数据将其要删除的好友数据更新掉
		let myName=req.cookies.names;
	    mongodb.find('user','ID',{name:myName},(a)=>{
			//拿到我的数据对其更新
			let friendList=JSON.stringify(a[0].friendList);
            friendList=JSON.parse(friendList);
			//好友的身份证
  			let herIdentiyt=req.body.identity;
            //和我的好友列表进行对比
			for(var i=0;i<friendList.length;i++){
				if(friendList[i].identity==herIdentiyt){
					friendList.splice(i,1);
				}
			} 
			let myOdl={
				identity:a[0].identity,
			}
			let myNews={
				identity:a[0].identity,
				friendList:friendList,
			}
			// 更新
			mongodb.update('user','ID',myOdl,myNews,(b)=>{
				mongodb.find('user','ID',{name:req.cookies.names},(c)=>{
					res.send(c);
				})
			})
		})
	}
})
//以上代码，在架构的时候，偏离了方向，功能上做了改动，朋友圈更改为世界频道，数据储存到word集合，以时间线为轴。
//针对修改用户名，会造成找不到用户的问题，决定不在使用用户名查找，而使用该条数据的id查找，就算更改了可变信息也不会造成数据丢失
//开启临时会话
//思路，在会话列表中添加会话的房间号信息.房间号是唯一的，如何生成房间号
//发送消息的前提就是判断有没有专属的房间，如果有，直接进入发送消息页面，并将房间（集合的数据）展示出来
app.use('/sendSession',(req,res)=>{
	if(!(req.cookies.names)){
		res.render('index');
	}else{
        //读取房间编号
		//这里要做的是什么
		//1，获取前台传来该好友的身份证
		//1.根据身份证编号，找到该好友在好友列表中的信息，将其添加到临时会话列表
        //因为是好友所以无需验证
		let herIdentiyt=req.body.identity;
		let myName=req.cookies.names;
		let temp;
		mongodb.find('user','ID',{name:myName},(a)=>{
            let friendList=a[0].friendList;//好友列表
			for(var i=0;i<friendList.length;i++){
				if(friendList[i].identity==herIdentiyt){
				    
				    temp=friendList[i];	
				}
			}
			
            //将该数据追加到我的临时会话列表,需要判断我的会话列表中是否有自己，如果有就不添加
			//追加
			let sessionList=a[0].sessionList;
			//判断/这个列表是我·的
			var on=true;
			for(var i=0;i<sessionList.length;i++){
                if(sessionList[i].identity==herIdentiyt){
                    on=false;
				}
			}
			if(on){
			    sessionList.push(temp); 
			}
            //更新数据
			var odl={
				identity:a[0].identity,
			}
			var news={
				identity:a[0].identity,
				sessionList:sessionList,
			}
			mongodb.update('user','ID',odl,news,(b)=>{
               //更新完毕之后，还需要将该好友的临时会话列表页更新
			    //通过好友身份证，找到该好友数据
				//还要判断一下是不是自己加自己，是自己加自己就结束，避免重复加自己;
				mongodb.find('user','ID',{identity:herIdentiyt},(c)=>{
					if(c[0].identity==a[0].identity){
						mongodb.find('user','ID',{name:myName},(e)=>{
							res.send(e);
						})
					}else{
						let herfriendList=c[0].friendList;
						let temp2;
						for(var i=0;i<herfriendList.length;i++){
							if(a[0].identity==herfriendList[0].identity){
								//这种情况表示，找到好友列表中我的数据
								temp2=herfriendList[i];
							};
						}
						let odls={
							identity:c[0].identity,
						} 
						//上面的好友会话列表是我的·
						//下面应该是好友的
						let sessionList2=c[0].sessionList;
						var on=true;
						//这里是对比好友回话中是否有我的信息
						for(var i=0;i<sessionList2.lenth;i++){
							if(sessionList2[i].identity==a[0].identity){
                                on=false;
							}
						}
						if(on){
						    sessionList2.push(temp2) 
 						}
						let newss={
							identity:c[0].identity,
							sessionList:sessionList2,
						} 
						mongodb.update('user','ID',odls,newss,(d)=>{
							//更新完毕以后，返回我的数据
							mongodb.find('user','ID',{name:myName},(e)=>{
								res.send(e);
							})
						})
					}
				})
			})
		})
	}
})
app.use('/wordNews',(req,res)=>{
    mongodb.findAll('user','worsNews',(a)=>{
		let len=a.length;
		let skip=len-20;
        if(skip<0){
			skip=0;
		}
		mongodb.findAll('user','wordNews',(b)=>{
		    res.send(b);
             
		},skip,20);
	}) 
})
//获取好友之间的私信;
io.on('connection',(socket)=>{
	//多人聊天室
	socket.on('chat',(a)=>{
		mongodb.insert('user','wordNews',a,(s)=>{
		    io.emit('send',a);
		})
	})
	//在回调中可以处理一些事情
	socket.on('interflow',(a)=>{
        let room=a.room;
		console.log(a);
		//将接收的数据放入私信的集合里
		console.log(room);
		mongodb.insert('user',`${room}`,a,(s)=>{
		})
		io.emit('all',a);
	})
})
//一进入私聊页面初始化
app.use('/words',(req,res)=>{
	let room=req.body.room;
	mongodb.findAll('user',`${room}`,(a)=>{
		//获取最新20条
		let skip=a.length;
		skip=skip-20;
		if(skip<0){
			skip=0;
		}
		console.log(room);
		mongodb.findAll('user',`${room}`,(b)=>{
			res.send(b)
		},skip,20);
	})
})
app.use('/',(req,res)=>{
	res.render('index');
});
http.listen('9999');

数据库封装

;const mongodb=require('mongodb').MongoClient;
const url='mongodb://localhost:27017';
//把数据库连接操作封装起来
function _connect(callback){
	mongodb.connect(url,function(err,db){
		if(err) throw err;
		callback(db);
	})
}
//添加数据
module.exports.insert=function(drname,gather,obj,callback){
	_connect(function(db){
		if(!(obj instanceof Array)){
			obj=[obj];
		};
		db.db(drname).collection(gather).insertMany(obj,(err,data)=>{
			if(err) throw err;
			db.close();//关闭文件;
			callback(data);
		})
	})
}
//查询所有数据
module.exports.findAll=function(drname,gather,callback,skip=0,limit=0){
	_connect(function(db){
		db.db(drname).collection(gather).find({}).skip(parseInt(skip)).limit(limit).toArray((err,a)=>{
			if(err) throw err;
			db.close();
			callback(a);
		})
	})
}
//精确查询 //如果有相同的用户名就不能注册（插入数据），如果没有相同的用户名就注册（插入数据）;
module.exports.find=function(drname,gather,obj,callback){
	_connect(function(db){
		db.db(drname).collection(gather).find(obj).toArray((err,a)=>{
			if(err) throw err;
			db.close();
			callback(a);
		})
	})
}
//模糊查询
module.exports.inquire=function(drname,gather,name,obj,callback){
	_connect(function(db){
		db.db(drname).collection(gather).find({name:{'$regex':obj}}).toArray((err,a)=>{
			if(err) throw err;
			db.close();
			callback(a);
		})
	})
}
//删除数据
module.exports.del=function(drname,gather,callback,obj={}){
	_connect(function(db){
		db.db(drname).collection(gather).deleteMany(obj,(err,a)=>{
			if(err) throw err;
			db.close();
			callback(a);
		})
	})
}
//更新数据
module.exports.update=function(drname,gather,obj,obj2,callback){
	_connect(function(db){
		db.db(drname).collection(gather).updateOne(obj,{$set:obj2},function(err,a){
			if(err) throw err;
			db.close();
			callback(a);
		})
	})
}
//有针对性的更新数据//根据数据更新；
//升序降序
module.exports.sort=function(drname,gather,obj,callback,skip=0,limit=0){
    _connect(function(db){
		db.db(drname).collection(gather).find({}).sort(obj).skip(skip).limit(limit).toArray((err,a)=>{
			if(err) throw err;
			db.close();
			callback(a);
		})
	})

前台

html

登陆

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>不闲聊</title>
    <script type="text/javascript" src='../public/js/jquery3.5.1.min.js'></script>
	<script type='text/javascript' src='../public/js/index.js'></script>
	<link rel='stylesheet' href='../public/css/bootstrap.css' type='text/css'/>
	<link rel='stylesheet' href='../public/css/index.css' type='text/css' />
	<style>
	
	</style>
</head>
<body>
	<div id='app' class='app'>
		<div class='title'>登陆</div>
		<div class='body'>
			<ul>
				<li>
					<div>账号：<input type='text' placeholder="请输入账号" onkeyup="this.value=this.value.replace(/^ +| +$/g,'')"></div>
				    <div>密码：<input type='text' placeholder='请输入密码'></div>
				</li>
				<li></li>
				<li>登陆</li>
				<li><a href='http://localhost:9999/login'>注册</a></li>
				
			</ul>
		</div>
	</div>
</body>
<script>

</script>
</html>

注册

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>注册</title>
		<link rel='stylesheet' type='text/css' href='../public/css/login.css'/>
		<script src='../public/js/jquery3.5.1.min.js'></script>
		<script src='../public/js/login.js'></script>
	</head>
	<body>
		<div id='app' class='app'>
			<div class='title'>
			    <a href='http://localhost:9999/index'><img src='../public/img/zuo.png' class='img'></a>	
				注册
			</div>
			<div class='body'>
				<ul>
					<li>
						<div>账号：<input type='text' placeholder="请输入账号" onkeyup="this.value=this.value.replace(/^ +| +$/g,'')"></div>
						<div>昵称：<input type='text' placeholder="昵称" onkeyup="this.value=this.value.replace(/^ +| +$/g,'')"></div>
						<div>密码：<input  placeholder='请输入密码' onkeyup="this.value=this.value.replace(/^ +| +$/g,'')"></div>
						<div>确认密码：<input placeholder='再次输入密码' onkeyup="this.value=this.value.replace(/^ +| +$/g,'')"></div>
					</li>
					<li>
						<div class='parcel'>
							<div class='verify_s'>
								<input placeholder='请输入验证码'>
							</div>
							<div class='verify_x'></div>  
							
						</div>
                        </li>
					<li>注册</li>
					<li><a href='http://localhost:9999/index'>已有账号，去登陆</a></li>
				</ul>
				<div class=hint></div>
	            <div class='shade'></div>
			</div>
		</div>
	</body>
</html>

多人聊天室

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>多人聊天室</title>
		<script src='../public/js/vue.js'></script>
		<script src='socket.io/socket.io.js'></script>
		<script src='../public/js/jquery3.5.1.min.js'></script>
		<script src='../public/js/GroupChat.js'></script>
		<link rel='stylesheet' href='../public/css/GroupChat.css'>
	</head>
	<body>
		<div class='groupChat' id='groupChat'>
            <header>
				<a href='http://localhost:9999/homePage'><img src='../public/img/zuo.png' class='left'></a>
				<span>多人聊天室</span>
				<span class='right'>•••</span>
			</header>
			<div class='newsDiv'>
				<div class='showDiv'>
					<ul>
						<li class='li my-right' v-for="item in list">
							<div class='text'>{{item.time}}</div>
							<div>
								<img src='../public/img/head%20portrait.png' :src=item.headSrc class='img' :class='{"my-img":item.name==name}'>
								<div class='warp'>
								    <div class='showname' :class='{"my-name":item.name==name}'>{{item.name==name?null:item.name}}</div>
									<div class='len' :class='{"before-left":item.name!=name,"before-right":item.name==name}'>
										<span class='showNews' :class='{"my-news":item.name==name}'>{{item.val}}</span>
									</div>
								</div>
							</div>
							
						</li>
					</ul>
					<!-- //一开始底部输入框，使用了固定定位，位置不受其他元素影响 -->
					<!-- 将显示的位置垫高了一点，避免输入框遮挡消息 -->
					<div class='top'></div>
				</div>
			</div>
			<footer>
				<img src='../public/img/langunge.png'>		
				<textarea class='input' v-model='input' ></textarea>	
				
				<div class='right'>
					<img src='../public/img/face_h.png' class='left' >
					<img src='../public/img/add.png' class='right' :class='{"hide":switch2}'>
					<div class='send' :class='{"show":switch2}' v-on:touchend='sendNews()'>发送</div>
				</div>
			</footer>
		</div>

主页面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>主页面</title>
		<script src='../public/js/axios.js'></script>
		<script src='../public/js/vue.js'></script>
		<script src='socket.io/socket.io.js'></script>
		<script src='../public/js/jquery3.5.1.min.js'></script>
		<link rel='stylesheet' href='../public/css/personal.css' type='text/css' />
		<link rel='stylesheet' href='../public/css/homePage.css' type='text/css' />
		<link rel='stylesheet' href='../public/css/showAndHide.css' type='text/css' />
		<link rel='stylesheet' href='../public/css/GroupChat.css' type='text/css' />
        
	</head>
	<body>
		<div id='app' class='app'>
			<!-- 主页面 -->
			<div>
		    <header class='header'>
				<span v-text="show">消息</span>
				<span class='iconfont right_1'>&#xe611;</span>
				<span class='iconfont right_2'  ontouchend='goseofriendly()'>&#xe601;</span>
			</header>	
			<div class='news'  v-show='xiaoxi'>
				<div class='word'>
					<ul>
						<a href='http://localhost:9999/GroupChat'>
				            <li class='li_1'>
				        	    <img class='headPortrait' src='../public/img/qunliao.png'>
				        	    <ul class='ul'>
				        		     <li class='name'>多人聊天室</li>
				        		     <li class='newss'>消息</li>
				        	    </ul>
				        	<div class='time'>当前时间</div>
							
				        </li>
						</a>
						<li class='li_1 index' v-for='item in newLists'>
							<img class='headPortrait' :src=item.headSrc>
							<ul class='ul'>
								<li class='name'><em class='em'>{{item.identity}}</em>{{item.name}}</li>
								<li class='newss'>消息</li>
							</ul>
							<!-- <div class='time'>当前时间</div> -->
						</li>
					</ul>
				</div>
			</div>
			<div class="addressList" :class='{"allShow":txl}' v-show='txl'>
				<ul>
					<li ontouchend='goFriendRequest()'><img src='../public/img/newF.png'><span>新的朋友</span><span class='hint-span' v-show='datalist.AddFriend?(datalist.AddFriend.length==0?null:datalist.AddFriend.length):null'>{{datalist.AddFriend?(datalist.AddFriend.length==0?null:datalist.AddFriend.length):null}}</span></li>
					<li><img src='../public/img/qunliao.png'><span>群聊</span></li>
					<li></li>
					<li v-for='item in datalist.friendList' class='a-list'>
						<img :src='item.headSrc'>
						<span>{{item.name}}</span>
						<em class='em'>{{item.identity}}</em>
					</li>
				</ul>
			</div>
			<div class='discover' :class='{"allShow":fa}' v-show='fa'>
				<ul>
					<li ontouchend='goMoments()'>
						<img src='../public/img/word.png'><span>发现世界</span>
						<span>
							
						</span>
						<img  class='right' src='../public/img/you.png'>
					</li>
					<li>
						<img src='../public/img/Friends .png'><span>朋友圈</span><img  class='right' src='../public/img/you.png'>
					</li>
					<li>
						<img src='../public/img/search.png'><span>搜一搜</span><img  class='right' src='../public/img/you.png'>
					</li>
					<li>
						<img src='../public/img/nearby.png'><span>附近</span><img  class='right' src='../public/img/you.png'>
					</li>
					<li>
						<img src='../public/img/take.png'><span>看一看</span><img  class='right' src='../public/img/you.png'>
					</li>
					<li>
						<img src='../public/img/play.png'><span>游戏</span><img  class='right' src='../public/img/you.png'>
					</li>
					<li>
						<img src='../public/img/applet.png'><span>小程序</span><img  class='right' src='../public/img/you.png'>
					</li>
					<li>
						<img src='../public/img/shop.png'><span>购物</span><img  class='right' src='../public/img/you.png'>
					</li>
				</ul>
			</div>
			<div class='my':class='{"allShow":mi}' v-show="mi">
				<ul>
					<li>
						<div>
							<img src='../public/img/head%20portrait.png' class='headsrc'>
						</div>
						<ul>
							<li><b class='nickname'>晴</b></li>
							<li>账号：<span class='accountNumber'>111</span><img src='../public/img/you.png' ontouchend='goPersonal()'></li>
							<li><span class='sapn'>+状态</span><span class='sapn'>•••</span></li>
						</ul>
					</li>
					<li><img src='../public/img/set.png'>设置<img src='../public/img/you.png' class='right' ontouchend='goQuit()'></li>
					<li class='li'><img src='../public/img/collect.png'>收藏<img src='../public/img/you.png' class='right'></li>
				    <li class='li'><img src='../public/img/cardBag.png'>卡包<img src='../public/img/you.png' class='right'></li>
					<li class='li'><img src='../public/img/face.png'>表情<img src='../public/img/you.png' class='right'></li>
			        <li class='li'><img src='../public/img/pay.png'>支付<img src='../public/img/you.png' class='right'></li>
				</ul>
			</div>
			<footer class='footer'>
			   <ul>
				    <li v-on:touchend='xiaoxi_f'>
					   <p><span class='iconfont black' :class='{"green":xiaoxi}'>&#xe602;</span></p>
					   <span class='size' :class='{"green":xiaoxi}'>消息</span>
				    </li>
				    <li v-on:touchend='txl_f()'>
					    <p><span class='iconfont black' :class='{"green":txl}'>&#xe645;</span></p>
					    <span class='size' :class='{"green":txl}'>通讯录</span>
				    </li>
				    <li v-on:touchend='fa_f()'>
					    <p><span class='iconfont black' :class='{"green":fa}'>&#xe604;</span></p>
					    <span class='size' :class='{"green":fa}'>发现</span>
				    </li>
				    <li v-on:touchend='mi_f'>
					    <p><span class='iconfont black' :class='{"green":mi}'>&#xe709;</span></p>
						<span class='size' :class='{"green":mi}'>我</span>
					</li>
			   </ul>
			</footer>
			</div>
			<!-- 朋友圈 -->
			<div calss='Moments' id='Moments'>
				<header class=header>
					<img class='img' src='../public/img/zuo.png' ontouchend='Moments_One()'>
					<div class='showImg'>
						<img src='../public/img/liao.jpg' class='img_2'>
					</div>
					<div class='showPortrait'>
						<span class='left nickname'></span>
						<img class='img_3 headsrc' src='../public/img/head%20portrait.png'>	
					</div>
					<img class='publish' src='../public/img/publish.png' ontouchend='publish()'>
				</header>
				<ul class='ul'>
					<li class='li' v-for='item in momentsnewslist'>
						<img class=' img' :src=item.headsrc>
						<div class='div'>
							<ul>
								<li class='bottom blue'>{{item.name}}<em class='em'>{{item.identity}}</em></li>
								<li class='bottom'>{{item.pinglun}}</li>
								<li class='bottom'>
								    <ul>
										<li v-for='src in item.img' class='imgli'><img :src='src'></li>
									</ul>
								</li>
								<li class='showtime bottom'><span class='time1'>{{item.time}}</span>
								     <a class='del'></a>
								     <div class='little'>••</div>
									 <div class='like'>
									 	<ul>
									 		<li class='likeli give'><img src='../public/img/love2.png'><span>点赞</span></li>
									 		<li class='likeli discuss'><img src='../public/img/comment.png'>评论</li>
									 	</ul>
									 </div>
								</li>
								<li class='bottom normal bgblue'>
  									<div class='left thumbupbutton' style='float: left;margin-left:0.5rem;' v-for='item_name in item.likelist'><img class='img_name' src='../public/img/love.png'><span>{{item_name.name}}</span></div>
								</li>
								<li>
									<div class='commentdiv'>
					                     <textarea class='textarea' v-model='commentsendtext'></textarea>
										 <div class='commentsend commentsend_gray' :class='{"commentsend_green":commentsend_green}'>发送</div>
										 <img src='../public/img/face_h.png' class='commentimg'>
				                    </div>
								</li>
								<li class='bottom bottom-top'>
									<ul>
										<!-- 评论内容 -->
										<li class='comment_list' v-for='data in item.commentlist'>
											<img class='comment_list_head' :src=data.headSrc>
											<div class='comment_list_vessel'>
												<div class='comment-list-name' style='color:blue'>{{data.name}}<em class='em'>{{item.identity}}</em></div>
												<div class='comment-list-time' style="position:absolute;font-size:20px;top:0;right:0;">{{data.time}}</div>
												<div class='comment-list-news' ><span class='list-news-span'>{{data.val}}</span></div>
											</div>
										</li>
									</ul> 
								</li>
							</ul>
							
							
						</div>
					</li>
					
				</ul>
				<footer class="footer_f">
					<ul>
						<li ontouchend='compile_f()'>编辑</li>
						<li>拍摄</li>
						<li>从相册选择</li>
						<li>用秒剪制作视频</li>
						<li ontouchend='MomentsCancel()'>取消</li>
					</ul>
				</footer>
				
				<div class='masklayer'></div>
				<ul class='delmoments' id='delmoments'>
					<li>提示</li>
					<li class='gray'>删除该朋友圈？</li>
					<li>
						<div class='divleft_1 ok'>取消</div>
						<div class='divleft_2 ok'>确定</div>
					</li>
					<li id='check'></li>
				</ul>
				<ul class='delmoments' id='delcomments'>
					<li>提示</li>
					<li class='gray'>删除该评论？</li>
					<li>
						<div class='divleft_1 ok_2'>取消</div>
						<div class='divleft_2 ok_2'>确定</div>
					</li>
					<li id='check'></li>
				</ul>
			</div>
			<!-- 发布消息的编辑页面 -->
			<div class='compile'>
				<ul>
					<li class=li>
						<img src='../public/img/zuo.png' class='left' ontouchend='returnMoments()'>
						<div class='divRight' ontouchend='compileNews()'>发表</div>
					</li>
					<li>
						<textarea></textarea>
						<ul class='rem5-ul'>
						</ul>
						<div class='rem5'>
							<div class='rem5-row'></div>
							<div class='rem5-col'></div>
							<input class='rem5-file' capture='camera' multiple="multiple" type='file' />
						</div>
					</li>
				    <li class='li'>所在位置 <img class='img_2' src='../public/img/you.png'></li>
					<li class='li'>提醒谁看 <img class='img_2' src='../public/img/you.png'></li>
					<li class='li'>谁可以看 <img class='img_2' src='../public/img/you.png'></li>
				</ul>
			</div>
			<!-- 个人资料 -->
		    <div class='personal'>
				    <header class='header'>
					    <img class='left' src='../public/img/zuo.png' ontouchend='personal_One()'>
					    <span>个人信息</span>
				    </header>
				    <ul>
					    <li class='li_1' ontouchend='goUploadPhotoAsAvatar()'>
						    <span class='span_1'>头像</span>
						    <img  class='img headsrc' src='../public/img/head%20portrait.png'>
		             <img class='right img_2' src='../public/img/you.png'>
					    </li>
					    <li ontouchend='goChangename()'>
						    <span>昵称</span>
						    <span class='span_right nickname'></span>
							<img class='right' src='../public/img/you.png'>
						</li>
						<li>
							<span>拍一拍</span>
							<img  class='right' src='../public/img/you.png'>
						</li>
						<li ontouchend='goChangeuser()'>
							<span>账号</span>
							<img  class='right' src='../public/img/you.png'>
							<span class='span_right accountNumber'>111</span>
						</li>
						<li>
							<span>二维码名片</span>
							<img  class='right' src='../public/img/you.png'>
						</li>
						<li>
							<span>更多</span>
							<img class='right' src='../public/img/you.png'>
						</li>
						<li>
							<span>我的地址</span>
							<img class='right' src='../public/img/you.png'>
						</li>
						<li>
							<span>喵喵币</span>
							<img class='right' src='../public/img/you.png'>
						</li>
				   </ul>
				</div>  
				<!-- 修改上传头像 -->
                <div class='changename ' id='uploadPhotoAsAvatar'>
                    <header>
					   <img src='../public/img/zuo.png' ontouchend='uploadPhotoAsAvatar_p()'>
                  		<span>修改头像</span>
                 		<div class='submit'>保存</div>
                   	</header>
						<img class='bg'>
						<input type='file'>

                 
                    <p>好的头像可以让你的朋友更容易记住你</p>
                </div>
				<!-- 更改名称 -->
				 <div class='changename ' id='changename'>
					 <header>
						 <img src='../public/img/zuo.png' ontouchend='changename_p()'>
						 <span>更改名字</span>
						 <div>保存</div>
					 </header>
					 <input v-model='changenames'>
					 <p>好的名字可以让你的朋友更容易记住你</p>
				 </div>
				<!-- 更改账号 -->
				<div class='changename' id='changeuser'>
					<header>
						<img src='../public/img/zuo.png' ontouchend='changeuser_p()'>
						<span>更改账号</span>
						<div>保存</div>
					</header>
 				    <input v-model='changeuser' type='number'>
				    <p>好的名字可以让你的朋友更容易记住你</p>
				</div>
				<!-- 设置 -->
				<div class='quit'>
					<header class=header>
						<img class='img' src='../public/img/zuo.png' ontouchend='quit_One()'>
						<span>设置</span>
					</header>
					<ul>
						<li><span>账号安全</span><img src='../public/img/you.png'></li>
						<li><span>青少年模式</span><span>未开启</span><img src='../public/img/you.png'></li>
						<li><span>新消息提醒</span><img src='../public/img/you.png'></li>
						<li><span>勿扰模式</span><img src='../public/img/you.png'></li>
						<li><span>聊天</span><img src='../public/img/you.png'></li>
						<li><span>隐私</span><img src='../public/img/you.png'></li>
						<li><span>通用</span><img src='../public/img/you.png'></li>
						<li><span>帮助与反馈</span><img src='../public/img/you.png'></li>
						<li><span>插件</span><img src='../public/img/you.png'></li>
						<li><span>注销账号</span><img src='../public/img/you.png'></li>
				        <li><span>皮肤<input type='color' v-model='color_bg'></span></li>
						<li class='text_quit'><a @touchend='pushOut()'><span>退出登录</span></a></li>
					</ul>
				</div>
				<!-- //搜索页面 -->
				<div class='seofriendly'>
					<div class='header'>
						<input v-model='friendly' id='SEOfriendly'>
						<span ontouchend='seofriendly_One()'>取消</span>
					</div>
					<ul class='ul'>
						<li class='li' v-for='item in friendlylist'>
							<img class='img' src='../public/img/newF.png' :src=item.headSrc>
							<span class='span'>{{item.name}}<em class="em">{{item.identity}}</em></span>
						</li>
						
					</ul>
				</div>
				<!-- 加好友页面-->
				<div class='AddFriend'>
					<ul>
						<li><img  ontouchend='return_seofriendly()' src='../public/img/zuo.png' class='return-img'></li>
						<li class='li'>
							<img :src=Add_Friend_f.headSrc class='head-img'>
							<div class='data-div'>
								<div class='data-name' style='font-size:100px;'><em class='em'>{{Add_Friend_f.identity}}</em><b>{{Add_Friend_f.name}}</b></div>
								<div class='data-2'>昵称：{{Add_Friend_f.name}}</div>
								<div class='data-2'>账号：{{Add_Friend_f.user}}</div>
							</div>
						</li>
						<li class='li-input'><textarea placeholder='验证信息'></textarea></li>
						<li class='add'>
							<div>加好友</div>
						</li>
					</ul>
				</div>
			    <!-- 好友申请界面 -->
				<div class='FriendRequest'>
					<header class='header'>
					    <img  ontouchend='FriendRequest_One()' src='../public/img/zuo.png' class='r-img'>
					    <span>好友申请</span>
					</header>
					<ul>
						<li v-for='item in datalist.AddFriend' class='li'>
							<img :src=item.headSrc class='h-img'>
							<div class='show-r'>
							    <span class='f-name'>{{item.name}}<em class='em'>{{item.identity}}</em></span>
								<br>
								<p>你好:</p>
								<div class='f-data'>{{item.val}}</div>
								<div class='vuto'>不同意</div>
								<div class='consent'>同意</div>
							</div>
						</li>
					</ul>
				</div>
				<!-- 好友资料页面 -->
				<div class='Friendprofile' id='Friendprofile'>
                    <div class='header'>
					    <img class='r-img' src='../public/img/zuo.png' ontouchend='Friendprofile_One()' >
						<span ontouchend='godataSet()' class='f-right'>•••</span>
					
					</div>
                    <ul>
                        <li>
							<img class='f-img' :src='Friendprofile_0.headSrc'>
							<div class='f-box'>
								<div class='f-name'>{{Friendprofile_0.name}}<em class='em'>{{Friendprofile_0.identity}}</em></div>
								<div class='f-user'>账号:{{Friendprofile_0.user}}</div>
							</div>
						</li>
                        <li class='li'>设置备注和标签
							<img class='img' src='../public/img/you.png'>
						</li>
                        <li class='li'>朋友权限
							<img class='img' src='../public/img/you.png'>
						</li>
                        <li class='li'>朋友圈
							<img class='img' src='../public/img/you.png'>
						</li>
						<li class='li'>更多信息
							<img class='img' src='../public/img/you.png'>
						</li>
                        <li class='text send-session'>发消息</li>
					</ul>
				</div>
				<!-- 资料设置 -->
				<div class='Friendprofile' id='dataSet'>
                    <div class='header'>
					    <img ontouchend='dataSet_f()' class='r-img' src='../public/img/zuo.png' ontouchend='Friendprofile_One()' >
						<span>资料设置</span>
					</div>
                    <ul>
						<li class='li'>设置备注和标签
							<img class='img' src='../public/img/you.png'>
						</li>
                        <li class='li'>朋友权限
							<img class='img' src='../public/img/you.png'>
						</li>
                        <li class='li'>把她推荐给朋友
							<img class='img' src='../public/img/you.png'>
						</li>
						<li class='li'>添加到桌面
							<img class='img' src='../public/img/you.png'>
						</li>
						<li class='li'>设置备注和标签
							<img class='img' src='../public/img/you.png'>
						</li>
                        <li class='li'>设为新标朋友
						</li>
                        <li class='li'>加入黑名单
						</li>
						<li class='li'>投诉
							<img class='img' src='../public/img/you.png'>
						</li>
                        <li class='text de-friended'>删除</li>
					</ul>
				</div>
                <!-- 私聊页面 -->
                <div class='groupChat' id='groupChat'>
					<header>
						<a ontouchend='privateChat_One()'><img src='../public/img/zuo.png' class='left'></a>
						<span>{{Friendprofile_0.name}}</span>
						<span class='right'>•••</span>
					</header>
					<div class='newsDiv'>
						<div class='showDiv'>
							<ul>
								<li class='li my-right' v-for='item in private_list'>
									<div class='text'></div>
									<div>
										<img :src=item.headSrc class='img' :class='{"my-img":item.name==changenames}'>
										<div class='warp'>
											<div class='showname' :class='{"my-name":item.name==changenames}'>{{item.name==changenames?null:item.name}}</div>
											<div class='len' :class='{"before-left":item.name!=changenames,"before-right":item.name==changenames}'>
												<span class='showNews' :class='{"my-news":item.name==changenames}'>{{item.val}}</span>
											</div>
										</div>
									</div>
									
								</li>
							</ul>
							<!-- //一开始底部输入框，使用了固定定位，位置不受其他元素影响 -->
							<!-- 将显示的位置垫高了一点，避免输入框遮挡消息 -->
							<div class='top'></div>
						</div>
					</div>
					<footer>
						<img src='../public/img/langunge.png'>		
						<textarea class='input' v-model='private' ></textarea>	
						
						<div class='right'>
							<img src='../public/img/face_h.png' class='left' >
							<img src='../public/img/add.png' class='right' :class='{"hide":private_s}'>
							<div class='send' :class='{"show":private_s}'>发送</div>
						</div>
					</footer>
				</div>


		</div>
	</body>
	
</html>
<!-- 加载完毕 -->
<script src='../public/js/homePage.js'></script>

js

登陆

$(function(){
	let li_show=$('li').eq(1);
	let input=$('input');
	$('li').eq(2).on('touchstart',function(){
		let user=$('input').eq(0).val();
		let password=$('input').eq(1).val();
		if(!user){
			li_show.text('账号不能为空');
			return;
		}
		if(!password){
			li_show.text('密码不能为空');
			return;
		}
		$.ajax({
			type:'post',
			url:'http://localhost:9999/go',
			data:{
				'user':user,
				'password':password,
			},
			success:function(res){
				console.log(res);
				if(res=='true'){
					let obj={
						'user':user,
						'password':password,
					};
					location.href='http://localhost:9999/homePage';
                    return;
				}
				if(res=='false'){
				    li_show.text('账号密码错误');
					return;
				}else{
					li_show.text('账号未注册-点击注册-即可');
					return;
				}
			}
		});
		return false;
	});
	input.on('input',function(){
		if(input.eq(0).val()){
		    li_show.text('');	
		}
		if(input.eq(1).val()){
			li_show.text('');
		}
	});
	//页面初始化调用
	
})

注册

$(function(){
	//注册
	 // 1.对比两次密码是否一样 ,如果不同弹出一个框框，一秒钟后消失;
	 // 2.验证码是否输入正确
	 // 3.发送数据到后台,对比数据库里是否有相同的用户
	 // 4.接收数据,如果登陆成功跳转到登陆页面.
	 //验证码是随机生成的四位数
	function auteCode(){
		let verify='';
		var str='0123456789zxcvbnmasdfghjklpoiuytrewqZXCVBNMLKJHGFDSAQWERTYUIOP';
	    for(var i=0;i<4;i++){
			let temp=Math.floor(Math.random()*62);
			verify+=str[temp];
		}
	    return verify;
	 }
	let ver=auteCode();//生成验证码
	let hint=$('.hint');//提示框；
	$('.verify_x').text(ver);
	function show(a){
		hint.text(a);
		setTimeout(()=>{
			hint.text('');
		},2000);
	}
	$('li').eq(2).on('touchstart',function(){
		let user=$('input').eq(0).val();
		let name=$('input').eq(1).val();
		let password_1=$('input').eq(2).val();
		let password_2=$('input').eq(3).val();
		let verify=$('input').eq(4).val();
		if(!user){
			show('账号未输入')
			return;
		}
		if(!name){
			show('用户名未输入');
			return;
		}
		if(!password_1){
			show('密码未输入');
			return;
		}
		if(password_1!==password_2){
			show('两次密码不一样');
			return;
		}
		if(!verify){
			show('验证码未输入');
			return;
		}
		if(verify!=ver){
			show('验证码输入错误');
			return;
		}
		$.ajax({
			url:'http://localhost:9999/loginss',
			method:'post',
			data:{
				'user':user,
				'name':name,
				'password':password_1,
			},
			success:(res)=>{
				console.log(res);
				if(res=='true'){
					hint.text('注册成功');
					//这里是跳转本地页面，不是服务器页面；
					setTimeout(function(){
						location.href='http://localhost:9999/index';
					},500);
				}else if(res='false'){
					hint.text('账号已存在');
					setTimeout(()=>{
						hint.text('');
					},2000);
				}
			}
		})
		console.log('执行完毕');
	});
	
	
	
});

多人聊天室

window.onload=function(){
	let socket=io();
	const vw=new Vue({
	    el:"#groupChat",
		data:{
			list:[],
			input:'',
			switch1:true,
			switch2:false,
			name:'',
			headSrc:'',
			null:'',
		},
		methods:{
		
			sendNews:function(){
				
				if(this.input){
					let name=this.name;
					let date=new Date();
					let s={
						y:date.getFullYear(),
						my:date.getMonth()+1,//月份是从零开始的
						d:date.getDate(),
						h:date.getHours(),
						m:date.getMinutes(),
						s:date.getSeconds(),
					}
					let time=`${s.y}-${s.my}-${s.d}:${s.h}:${s.m}:${s.s}`;
					//socket不用$.ajax
					//还有自己的头像
					let data={
						time:time,
						val:this.input,
						name:this.name,
						headSrc:this.headSrc,
					}
					socket.emit('chat',data);
				}
				
			}
		},
		watch:{
		    input:{ //监听的对象
		        deep:true, //深度监听设置为 true
		        handler:function(newV,oldV){
					if(this.input){
						// this.switch1=false;
						this.switch2=true;
					}else{
						// this.switch1=true;
						this.switch2=false;
					}
		        }
	       }
	    }
	})
	getCookie();
	function getCookie(){
		// 不仅要获取名字.还要获取头像
		// 获取名字
		$.ajax({
			url:'http://localhost:9999/getName',
			method:'get',
			success:function(res){
				vw.headSrc=res[0].headSrc;
				let showname=$('.showname');
				vw.name=res[0].name;
				showname.text(res);
			}
			
		})
	}
	//将自己发送的消息，放置在右边
	function myRight(){
		let li=$('.li');
		let name=vw.name;
		for(var i=0;i<li.length;i++){
			let newsName=li.find('.showname').text();
			if(newsName==name){
				li.eq(i).addClass('my-right');
				console.log(li);
			}
		}
	}
	socket.on('send',(res)=>{
		console.log(res);
		vw.list.push(res);
		//限制消息数量 100条
		if(vw.list.length>=100){
			vw.list.shift();
		};
		$('.newsDiv').scrollTop(($('.li').height())*($('.li').length));
		vw.input='';
	})
	word();
	function word(){
		$.ajax({
			url:'http://localhost:9999/wordNews',
			method:'get',
			success:(res)=>{
				vw.list=res;
				setTimeout(()=>{
					$('.newsDiv').scrollTop(($('.li').height())*($('.li').length));
					vw.input='';
				},1);
				
			}
		})
	}
	
}

主页面

	let socket=io();
	const vue=new Vue({
		el:'#app',
		data:{
			newLists:[],
			material:'',
			xiaoxi:true,//消息页面控制变量
			txl:false,//通讯页面录控制变量
			fa:false,//发现页面控制变量
            mi:false,//我页面控制变量
			show:'消息',//主页面标题
			show1:true,//临时控制  真
			show2:false,//临时控制 假
			list:[],
			input:'',
			null:'',//空变量;
			switch1:true,
			switch2:false,
			changenames:'',//当前登录用户名
			changeuser:'',	//当前登录账号
			momentsnewslist:'',//朋友圈消息列表
			commentsendtext:'',//平论发送消息监听
			commentsend_green:false,//控制发送按钮的类名
			friendly:'',//搜索用户名，加好友。
			friendlylist:[],//搜索到的用户信息列表；
			color_bg:'',//设置背景颜色
			Add_Friend_f:'',//加好友信息
			datalist:[],//当前登录用户基本资料列表
			Friendprofile_0:'',//获取通讯录里面 好友的资料;
			switchLike:true,//判断初始时点赞
			private:'',//监听私聊的输入变量
			private_s:false,//显示发送按钮
			//是一个房间创建一个变量，？还是公用一个变量
			private_list:[],
		},
		methods:{
			//切换消息页
			xiaoxi_f:function(){
				this.xiaoxi=true;
				this.txl=false;
				this.fa=false;
				this.mi=false;
			    this.show='消息';
			},
			//切换通讯录页面
			txl_f:function(){
				this.xiaoxi=false;
				this.txl=true;
				this.fa=false;
				this.mi=false;
			    this.show='通讯录';
			},
			//切换发现页面
			fa_f:function(){
				this.xiaoxi=false;
				this.txl=false;
				this.fa=true;
				this.mi=false;	
				this.show='发现';
			},
			//切换个人中心
			mi_f:function(){
				this.xiaoxi=false;
				this.txl=false;
				this.fa=false;
				this.mi=true;
				this.show='我';
				return false;
			},
			//退出登陆
			pushOut:function(){
				location.href='http://localhost:9999/index';
			},
		},
		watch:{   
			commentsendtext:{//监听对象
				deep:true,//深度监听设置为true
				handler:function(newV,odlv){
					if(this.commentsendtext){
						this.commentsend_green=true;
					}else{
						this.commentsend_green=false;
					}
				}
			},
			friendly:{//监听对象
				deep:true,//深度监听设置为true
				handler:function(newV,odlV){
				    $.ajax({
				    	url:'http://localhost:9999/friendly',
				        method:'get',
				    	data:{
				    		name:vue.friendly,
				    	},
				    	success:function(res){
				    		vue.friendlylist=res;
				    	}
				    })    
				},
			},
			color_bg:{
				deep:true,
				handler:function(newV,odlV){
					$('body').css('background-color',`${this.color_bg}`);
				}
			},
			private:{
				deep:true,
				handler:function(newV,odlV){
					if(this.private){
						this.private_s=true;
					}else{
						this.private_s=false;
					}
				}
			}
		}
	});
let divOne=$('#app>div').eq(0);//主页面div，用于切换的页面
let personal=$('.personal')//个人信息页面;
let quit=$('.quit')//设置页面;
let Moments=$('#Moments')//设置朋友圈页面;
let publish_f=$('#Moments .footer_f');
let compile=$('.compile')//设置编辑页面;
let changename=$('#changename')//设置更改名称页面
let changeuser=$('#changeuser')//设置更改账号页面
let uploadPhotoAsAvatar=$('#uploadPhotoAsAvatar')//设置更改头像页面
let seofriendly=$('.seofriendly')//搜索页面
let AddFriend=$('.AddFriend')//加好友页面
let FriendRequest=$('.FriendRequest')//好友申请页面；
let Friendprofile=$('#Friendprofile')//好友资料页面
let dataSet=$('#dataSet')//资料设置页面;
let privateChat=$('#groupChat')//私聊页面;
//私聊页面返回主页面
function privateChat_One(){
	privateChat.hide(100);
	divOne.show(100);
}
//设置页面到好友资料页面
function dataSet_f(){
	dataSet.hide(100);
	Friendprofile.show(100);
}
//好友资料页面到资料设置页面
function godataSet(){
	dataSet.show(100);
	Friendprofile.hide(100);
}
//好友资料页面到主页面
function Friendprofile_One(){
	Friendprofile.hide(100);
	divOne.show(100);
}
//到达好友申请页面
function goFriendRequest(){
	FriendRequest.show(100);
	divOne.hide(100);
}
//离开好友申请页面
function FriendRequest_One(){
	FriendRequest.hide(100);
	divOne.show(100);
}
//加好友页面返回搜索页面
function return_seofriendly(){
	AddFriend.hide(100);
	seofriendly.show(100);
}
function goseofriendly(){
//切换主页面与搜索页面
	divOne.hide(100);
	seofriendly.show(100);
}
//返回主页面
function seofriendly_One(){
	divOne.show(100);
	seofriendly.hide(100);
}
//切换主页面与设置页面
// 去设置页面
function goQuit(){
	divOne.hide(100);
	quit.show(100);
}
//返回主页面
function quit_One(){
	divOne.show(100);
	quit.hide(100);
	console.log('我执行了');
}
//切换资料页面和主页面
//去资料页面
function goPersonal(){
	personal.show(100);
	divOne.hide(100);
}
//返回主页面
function personal_One(){
	personal.hide(100);
	divOne.show(100);
}
//切换朋友圈页面和主页面
//去朋友圈页面
function goMoments(){
	divOne.hide(100);
	Moments.show(100);
	getuserinfo_2();
}
//朋友圈页面去主页面
function Moments_One(){
	divOne.show(100);
	Moments.hide(100);
	publish_f.hide(100);
}
//打开发布消息按钮
function publish(){
	publish_f.show(100);
}
//取消发布消息
function MomentsCancel(){
	publish_f.hide(100);
}
//打开编辑页面
function compile_f(){
	
	compile.show(100);
	Moments.hide(100);
	publish_f.hide(100);
}
//返回朋友圈页面
function returnMoments(){
	compile.hide(100);
	Moments.show(100);
}
//切换个人信息页面与修改头像页面
//到修改头像页面
function goUploadPhotoAsAvatar(){
	uploadPhotoAsAvatar.show(100);
	personal.hide(100);
}
//返回个人信息页面
function uploadPhotoAsAvatar_p(){
	uploadPhotoAsAvatar.hide(100);
	personal.show(100);
}
//从设置页面到更改名称页面
//去更改名称页面
function goChangename(){
	changename.show(100);
	personal.hide(100);
}
//返回个人信息页面
function changename_p(){
	$('.changename input').removeClass('input');
	$('.changename div').removeClass('green');
	changename.hide(100);
	personal.show(100);
}

//修改信息函数
function changeInformation(res){
	let name=$('.nickname')//设置用户名称
	let accountNumber=$('.accountNumber')//显示账号
	name.text(res[0].name);
	vue.changenames=res[0].name;
	accountNumber.text(res[0].user);
}
//切换个人资料与更改账号页面
// 到达更改账号页面
function goChangeuser(){
	changeuser.show(100);
	personal.hide(100);
}
//返回个人资料页面
function changeuser_p(){
	changeuser.hide(100);
	personal.show(100);
}
//填写名称的时候保存按钮样式改变
$('.changename input').on('input',()=>{
    $('.changename input').addClass('input');
	$('.changename div').addClass('green');
})
//提交更改后的昵称
$('#changename div').on('touchend',()=>{
	// console.log('程序还需要修改，此功能暂时已封印');
	let val=$('#changename input').val();//修改用户名
	if(!val){
		return;
	}
	$.ajax({
		url:'http://localhost:9999/changename',
		method:'post',
		data:{
			news:val,
		},
		success:(res)=>{
			// 修改成功
			$('.changename input').removeClass('input');
			$('.changename div').removeClass('green');
			changeInformation(res);
			setTimeout(function(){
				changename.hide(100);
				personal.show(100);
			},500);
		},
	});
});
//提交更改账号按钮
$('#changeuser div').on('touchend',()=>{
	let val=$('#changeuser input').val();
	if(!val){
		return;
	}
	$.ajax({
		url:'http://localhost:9999/changeuser',
		method:'post',
		data:{
			news:val,
		},
		success:(res)=>{
			// 修改成功
			$('.changename input').removeClass('input');
			$('.changename div').removeClass('green');
			changeuser.hide(100);
			changeInformation(res);
			setTimeout(function(){
				changename.hide(100);
				personal.show(100);
			},500);
		}
	})
})
//上传头像按钮
$('#uploadPhotoAsAvatar .submit').on('touchend',()=>{
	let file=$('#uploadPhotoAsAvatar').find('input[type=file]').get();
	let headSrc=file[0].files[0];//拿到了的图片
	let reader=new FileReader();
    let formdata=new FormData();
	formdata.append('myfile',headSrc);
	console.log(formdata);	
	$.ajax({
		url:'http://localhost:9999/headSrc',
		method:'post',
		data:formdata,
		dataType: 'json',
		processData: false, // 告诉jQuery不要去处理发送的数据
		contentType: false, // 告诉jQuery不要去设置Content-Type请求头
		xhrFields:{withCredentials:true},
		async: true, //默认是true：异步，false：同步。
		success:(res)=>{
			let headsrc=$('.headsrc');
			headsrc.attr('src',res[0].headSrc);
			setTimeout(()=>{
				uploadPhotoAsAvatar.hide(100);
				personal.show(100);
			},500);
		}
	})
})
//通过状态改变来展示图片
$('#uploadPhotoAsAvatar input[type=file]').on('change',function(){
	let file=$(this).get()[0].files[0];
	console.log(file);
	 //确认上传的是不是图片
	 if(file.type.indexOf('image')==0){
		 let reader=new FileReader();//文件阅读器
		 reader.readAsDataURL(file);
		 reader.onload=function(e){
			 var newUrl=this.result;
			 let bg=$('#uploadPhotoAsAvatar .bg');
		     bg.attr('src',newUrl);
		 }
	 }	
})

//获取用户信息
getuserinfo_1();
function getuserinfo_1(){
	let name=$('.nickname')//设置用户名称
	let accountNumber=$('.accountNumber')//显示账号
	$.ajax({
		url:'http://localhost:9999/getName',
		method:'get',
		success:((res)=>{
			console.log(res);
			vue.datalist=res[0];
			name.text(res[0].name);
		    vue.changeuser=res[0].user;
		    vue.changenames=res[0].name
			accountNumber.text(res[0].user);
	    	let headsrc=$('.headsrc');
			headsrc.attr('src',res[0].headSrc);
			vue.newLists=res[0].sessionList;
		})
	})

	    //获取朋友圈发布的消息
			$.ajax({
				url:'http://localhost:9999/getCompileNews',
				method:'post',
				success:(a)=>{
					//将获取成功的数据给vue渲染
					vue.momentsnewslist=a.reverse();
				}
			})
			
    // 如果我有点赞就显示取消,没有就显示点赞		
}
//用于获取点赞信息/删除信息/评论信息

function getuserinfo_2(){
	let li=Moments.find('.li');//获取每条数据，
	let name=Moments.find('.nickname').text();//页面上显示的用户名

	//找到每条数据下，显示已点赞的内容
	//实现原理，通过对比每条信息里面，已点赞用户名字和当前登录用户名字对比，如果相同表示已点赞。
	//点赞按钮显示取消，反之显示点赞
	
	for(var i=0;i<li.length;i++){
		let span=li.eq(i).find('.thumbupbutton span');
		let newsname=li.eq(i).find('.blue').text();
		if(newsname==vue.changenames){//确定这条消失是自己的。是就显示删除
			li.eq(i).find('.del').text('删除');
		}
		for(var j=0;j<span.length;j++){
			let text=span.eq(j).text();
			console.log(text);
			//相同表示，已点赞
			if(text==name){
				li.eq(i).find('.give span').text('取消');
				break;
			}
		}
	}
	return false;
}
//发表图片，并展示
var ImgFile=[];//图片名暂时储存
compile.find('input[type=file]').on('change',function(){
	let file=$(this).get()[0].files[0];//获取文件属性

	if(file.type.indexOf('image')==0){
		let reader=new FileReader();//文件阅读器;
		reader.readAsDataURL(file);
		reader.onload=function(e){
			var newUrl=this.result;
			//创建一个节点
			let li=$(`<li class='rem5 rem5-li'><img class='rem5-img' src=${newUrl}></li>`);
			let ul=$('.rem5-ul');
			ul.append(li);
        	ImgFile.push(file);//将图片文件追加到数组里
			console.log(ImgFile);

		}
	}

})
//点击图片取消
$('.rem5-ul').on('touchend','.rem5-li',function(){
	let index=$(this).index();
	console.log(index);
	$(this).remove();
	ImgFile.splice(index,1);
	return false;
})
//发布朋友圈
function compileNews(){
	    let reader=new FileReader();
		let formdata=new FormData();            
		let val=$('.compile textarea').val();
		let date=new Date();
		let s={
			y:date.getFullYear(),
			my:date.getMonth()+1,//月份是从零开始的
			d:date.getDate(),
			h:date.getHours(),
			m:date.getMinutes(),
			s:date.getSeconds(),
		}
		let time=`${s.y}-${s.my}-${s.d}:${s.h}:${s.m}:${s.s}`;
	    //将文件转化为二进制编码
		for(var i=0;i<ImgFile.length;i++){
		    let formdata=new FormData();            
		    formdata.append('img',ImgFile[i]);
			$.ajax({
				url:'http://localhost:9999/setCompileImg',
				method:'post',
				data:formdata,
				dataType: 'json',
				processData: false, // 告诉jQuery不要去处理发送的数据
				contentType: false, // 告诉jQuery不要去设置Content-Type请求头
				xhrFields:{withCredentials:true},
				async: true, //默认是true：异步，false：同步。
				success:(res)=>{

				}
			});
		}
		    //需要拿到所有图片的地址一并发送到后台
			let img=[];//图片地址
			for(var i=0;i<ImgFile.length;i++){
                let temp=`../public/compileImg/${ImgFile[i].name}`;
				img.push(temp);
			}
                $.ajax({ 
					url:'http://localhost:9999/setCompileNews',
					method:'post',
					data:{
						val:val,
						time:time,
						img:img,
					},
					success:(res)=>{
						ImgFile=[];
						$('.rem5-ul').html('');
						//插入成功以后还要获取消息
						$.ajax({
							url:'http://localhost:9999/getCompileNews',
							method:'post',
							success:(a)=>{
								//将获取成功的数据给vue渲染
								vue.momentsnewslist=a.reverse();
								setTimeout(()=>{
									getuserinfo_2();
									returnMoments();//0.3秒后返回朋友圈;
								},300);
							}
						})
					}
				})
	}   
$('#Moments').on('touchend','.little',function(){
	let like=$(this).parent().find('.like');
	if(like.is(':hidden')){
		like.show(200);
	}else{
		like.hide(200);
	}
})
//点赞 思路 查找这一条数据，自己点赞就取消点赞，否则点赞。
$('#Moments').on('touchend','.give',function(){
	let span=$(this).find('span');
	let time=$(this).parent().parent().parent().find('.time1').text();//获取发表的时间
	// 只知道时间仍然无法判断着条数据是谁的,还需要知道发数据这个人的身份证号码;
	let indetity=$(this).parent().parent().parent().parent().find('em').text();
	//如何判断取消。
	$.ajax({
		url:'http://localhost:9999/likeFriend',
		method:'post',
		data:{
			time:time,
			indetity:indetity,
		},
		success:(a)=>{
			// 后台直接返回true或false
			console.log(a);
			vue.momentsnewslist=a.reverse();//反转数据
			//通过渲染的数据，来改变。
	        if(span.text()=='取消'){
				span.text('点赞');
		        console.log(span.text())
			}else{
				span.text('取消');
				console.log(span.text())
			};
			let like=$(this).parent().parent();
			like.delay(300).hide(200);
		}
	})
	return false;
});
//删除朋友圈消息.我只能删除我自己的，别人的删不了
Moments.on('touchend','.del',function(){
	//找到该条信息的时间，通过cookie存贮的name
	let time=$(this).parent().find('.time1').text();
    let mask=Moments.find('.masklayer');
	let delmoments=Moments.find('#delmoments');
	let check=Moments.find('#check');//临时保存时间
	check.text(`${time}`);
	mask.show(200);
	delmoments.show(200);
	return false;
})
//删除函数
Moments.on('touchend','.ok',function(){
	let index=$(this).index();
	let mask=Moments.find('.masklayer');//遮罩层
	let delmoments=Moments.find('#delmoments');//删除/取消
	if(index==0){
		mask.hide(200);
		delmoments.hide(200);
	}else{
		let time=delmoments.find('#check').text();//临时保存时间；
		$.ajax({
			url:'http://localhost:9999/delmoments',
			method:'post',
			data:{
				time:time,
			},
			success:(res)=>{
				console.log(res);
				vue.momentsnewslist=res.reverse();
			},
		})
		mask.hide(200);
		delmoments.hide(200);
	}
	return false;
})
// 弹出评论框
Moments.on('touchend','.discuss',function(){
	let commentnews=$(this).parent().parent().parent().parent().find('.commentdiv');
	commentnews.show(100);//显示评论框
	$(this).parent().parent().hide(100);//隐藏点赞按纽
	return false;
})
//发布评论
Moments.on('touchend','.commentsend',function(){
	//评论四要素，头像，时间，消息，用户名
	//用户名。从cookie中获取
	//时间，现在new
	// 头像 从数据库中保存的资料获取
	//val现在有
	let val=vue.commentsendtext;
	if(!val){
		$(this).parent().hide(100);
		return;
	}
	//需要找到评论原有时间，在专属评论集合中查找该条数据
	let time1=$(this).parent().parent().parent().find('.time1').text();
	let time=nowTime();
	$.ajax({
		url:'http://localhost:9999/commentNews',
		method:'post',
		data:{
			val:val,
			time:time,
			time1:time1,
        },
		success:(res)=>{
			vue.momentsnewslist=res.reverse();
			console.log(res);
            vue.commentsendtext='';//清空消息框
			$(this).parent().hide(100);
		},
	})
})
//获取当前时间
function nowTime(){
	let date=new Date();
	let s={
		y:date.getFullYear(),
		my:date.getMonth()+1,//月份是从零开始的
		d:date.getDate(),
		h:date.getHours(),
		m:date.getMinutes(),
		s:date.getSeconds(),
	}
	let time=`${s.y}-${s.my}-${s.d}:${s.h}:${s.m}:${s.s}`;
	return time;
}
//离开当前li,关闭样式
Moments.on('mouseout','.li',function(){
	$(this).find('.like').hide(100);
	return false;
})
Moments.on('mouseout','.commentdiv',function(){
	$(this).hide(100);
	return false;
})
//删除评论--弹性出删除框
let delCommentObj={}
Moments.on('touchend','.list-news-span',function(){
	//评论人的名字
	let name1=$(this).parent().parent().find('.comment-list-name').text();
	//登陆人的名字
	let loginName=Moments.find('.nickname').text();
	//发布人的名字
	let identity=$(this).parent().parent().parent().parent().parent().parent().find('em').text();
	//发布时间
	let issueTime=$(this).parent().parent().parent().parent().parent().parent().find('.time1').text();
	//评论时间
	let commentTime=$(this).parent().parent().find('.comment-list-time').text();
    //首先判断是不是自己评论的,是自己评论的才可以删除
	if(!(name1==loginName)){
		return ;
	};
	delCommentObj={
		loginName:loginName,
		identity:identity,
		issueTime:issueTime,
		commentTime:commentTime,
	}
	Moments.find('.masklayer').show(100);//遮罩层
    Moments.find('#delcomments').show(100);
	
})
//删除评论--删除
Moments.find('#delcomments').on('touchend','.ok_2',function(){
	let index=$(this).index();
	if(index==1){
		$.ajax({
			url:'http://localhost:9999/delComment',
			method:'post',
			data:delCommentObj,
			success:(res)=>{
				vue.momentsnewslist=res.reverse();
				Moments.find('.masklayer').hide(100);//遮罩层
				Moments.find('#delcomments').hide(100);
			},
		})
	
		return false;
	}
	if(index==0){
		Moments.find('.masklayer').hide(100);//遮罩层
		Moments.find('#delcomments').hide(100);
		return false;
	}
})
//进入他人信息页面//搜索页面
seofriendly.on('touchend','.li',function(){
	//他人的身份证号
	let identity=$(this).find('em').text();
	console.log(identity);
	$.ajax({
		url:'http://localhost:9999/getuserinfo',
		method:'post',
		data:{
			identity:identity,
		},
		success:(res)=>{
			vue.Add_Friend_f=res[0];
            AddFriend.show(100);//显示加好友页面
			seofriendly.hide(100);//隐藏搜索页面
			getuserinfo_1();
		}
	})
});
//加好友//思路//是否添加验证信息
AddFriend.find('.add').on('touchend',function(){
    let identity=$(this).parent().find('em').text();
	let val=$(this).parent().find('textarea').val();
	$.ajax({
		url:'http://localhost:9999/AddFriend',
		method:'post',
		data:{
			identity:identity,
			val:val,
		},
		success:(res)=>{
			AddFriend.hide(100);//显示加好友页面
			seofriendly.show(100);//隐藏搜索页面
			if(res=='false'){
               return;
			}
			vue.datalist=res[0];
		
			
		}
	})
})
//同意加好友/不同意加好友
FriendRequest.on('touchend','.consent',function(){
	//好友身份证信息
	let identity=$(this).parent().find('em').text();
	$.ajax({
		url:'http://localhost:9999/consent',
		method:'get',
		data:{
			identity:identity
		},
		success:(res)=>{

            vue.datalist=res[0];
		}
	 })
	 return false;
});
//不同意
FriendRequest.on('touchend','.vuto',function(){
	//好友身份证
    let identity=$(this).parent().find('em').text();
	$.ajax({
		url:'http://localhost:9999/vuto',
		method:'get',
		data:{
			identity:identity
		},
		success:(res)=>{
            vue.datalist=res[0]; 
		}

	})
	return false;
});
//到达好友资料页面
$('.addressList').on('touchend','.a-list',function(){
	//好友身份证
    let identity=$(this).find('em').text();
	console.log(identity);
	//拿到该好友的资料进入该页面
	$.ajax({
		url:'http://localhost:9999/getuserinfo',
		method:'post',
		data:{
			identity:identity,
		},
		success:(res)=>{
            console.log(res);
			Friendprofile.show(100);
	        divOne.hide(100);
            vue.Friendprofile_0=res[0];
		}

	})
});
//删除好友
dataSet.find('.de-friended').on('touchend',function(){
	$.ajax({
		url:'http://localhost:9999/delfriend',
		method:'post',
		data:vue.Friendprofile_0,
		success:(res)=>{
            //成功以后重新渲染数据//并返回主页面
			vue.datalist=res[0];
			console.log(vue.datalist);
			dataSet.hide(100);
			divOne.show(100);                
        },
	})
})
//发消息。开启临时会话
Friendprofile.find('.send-session').on('touchend',function(){
    // 如何开起 根据当前用户名向后台发起请求
	let identity=Friendprofile.find('em').text();
	console.log(identity);
	$.ajax({
		url:'http://localhost:9999/sendSession',
		method:'post',
        data:{
			identity:identity,
		},
		success:(res)=>{
			vue.newLists=res[0].sessionList;
			//获取好友信息进入私聊页面
            $.ajax({
			    url:'http://localhost:9999/getuserinfo',
				method:'post',
				data:{
					identity:identity,
				},
				success:(a)=>{
                    // 获取到用户的信息
					privateChat.show(100);
					Friendprofile.hide(100);//好友资料页面;
					vue.Friendprofile_0=a[0];
					// getprivate();
					let myFir=vue.datalist.friendList;
					for(var i=0;i<myFir.length;i++){
						if(identity==myFir[i].identity){
							var temp=myFir[i].room; 
							getprivate(temp);
						}
					}
					//进入页面信息初始化
				}
			})
		}
	})
});
//通过主页面进入私聊页面
$('#app .news .word').on('touchend','.index',function(){
	//好友身份证
    let identity=$(this).find('em').text();
	$.ajax({
		url:'http://localhost:9999/getuserinfo',
		method:'post',
		data:{
			identity:identity,
		},
		success:(a)=>{
			// 获取到用户的信息
			privateChat.show(100);
			divOne.hide(100);//好友资料页面;
			vue.Friendprofile_0=a[0];
		//通过好友关系对比
		    console.log(a);//获取的是好友的
			let myFir=vue.datalist.friendList;
			for(var i=0;i<myFir.length;i++){
				if(identity==myFir[i].identity){
					var temp=myFir[i].room;
					console.log(temp);
					getprivate(temp);
				}
			}
			//进入页面信息初始化
		}
	})
})
//发送信息
privateChat.find('.send').on('touchend',function(){
	let date=new Date();
	let s={
		y:date.getFullYear(),
		my:date.getMonth()+1,//月份是从零开始的
		d:date.getDate(),
		h:date.getHours(),
		m:date.getMinutes(),
		s:date.getSeconds(),
	}
	let time=`${s.y}-${s.my}-${s.d}:${s.h}:${s.m}:${s.s}`;
	//socket不用$.ajax
	let sessionList=vue.datalist.sessionList;
	var room;
	let herName=vue.Friendprofile_0.name;
	for(var i=0;i<sessionList.length;i++){
        if(herName==sessionList[i].name){
			room=sessionList[i].room;
		}
	}
	//还有自己的头像
	let data={
		time:time,
		val:vue.private,
		name:vue.changenames,
		headSrc:vue.datalist.headSrc,
		identity:vue.datalist.identity,
		room:room,
	};
    socket.emit('interflow',data);
})
//shwng//
//全新思路，通过一个接口接收消息，根据消息内容分配给指定房间
socket.on('all',(res)=>{
    vue.private_list.push(res);
	let li=$('#groupChat').find('.newsDiv').find('.li');
	$('#groupChat').find('.newsDiv').scrollTop((li.height())*(li.length));
	vue.private='';
	console.log(res);
})
function getprivate(room){
    $.ajax({
		url:'http://localhost:9999/words',
		method:'post',
		data:{
			room:room,
		},
		success:(res)=>{
			console.log(res);
			vue.private_list=res;
			setTimeout(function(){
				let li=$('#groupChat').find('.newsDiv').find('.li');
				$('#groupChat').find('.newsDiv').scrollTop((li.height())*(li.length));
			},1);
		}
	})
}

css

登陆

html{
	font-size:5vw;
    }
*{
	margin: 0;
	padding: 0;
}
.app{
	height:100vh;
	width:100vw;
	font-size: 1rem;
	}
.app .title{
	text-align: center;
	}
	.app ul{
		width:18rem;
		margin: auto;
	}
.app ul>li{
	list-style: none;
	background-color: white;
	text-align: center;
	width:18rem;
	border-radius: 0.2rem;
}
.app ul>li:nth-child(1){
	border: 1px solid #c0c0c0;
}
.app ul>li:nth-child(3){
	background-color: #0A98D5;
	color:white;
	height:1.5rem;
	line-height: 1.5rem;
}
.app ul>li:nth-child(4){
	margin-top:1rem;
	height:1.5rem;
	line-height: 1.5rem;
	border: 1px solid  #c0c0c0;
}
.app ul>li:nth-child(2){
	height:1.5rem;
	line-height: 1.5rem;
	text-align: left;
	color: red;
	background-color:#f6f6f6 ;
}
.app ul>li>div{
	width:18rem;	
	height:2rem;
    line-height: 2rem;
}
.app ul>li input{
	height: 1rem;
	border: none;
	outline: none;
	background-color: ;
}
.app ul>li div:nth-child(1){
	border-bottom: 1px solid #c0c0c0;
}
.app ul>li>a{
	display: block;
	height:100%;
	width: 100%;
}
.app .title{
	height:2rem;
	font-size:1.25rem;
	line-height: 2.5rem;
}
.app .body{
	padding: 1rem;
	background-color: #f6f6f6;
	height:100%;
	position:relative;
}
.app .body .miao{
	position:absolute;
	bottom:20%;
	left:9rem;
	width:2rem;
	height:2rem;
	text-align: center;
	line-height:2rem;
	border:1px solid #ffffff;
	color: wheat;
	border-radius:0.5rem;
	
}

注册


html{
	font-size:5vw;
    }
	
*{
	margin: 0;
	padding: 0;
}
input{
	font-size: 0.8rem;
	border: none;
	outline:none;
}
a{
	text-decoration:none;
}
.app{
	height:100vh;
	width:100vw;
	font-size: 0.8rem;
	}
.app .title{
	text-align: center;
	font-size: 1.25rem;
	position:relative;
}
.app .title .img{
	position:absolute;
	left:0.8rem;
	width:1.25rem;
	height:1.5rem;
}
.app ul{
		width:18rem;
		margin: auto;
}
.app ul>li{
	list-style: none;
	background-color: white;
	text-align: center;
	width:18rem;
	border-radius: 0.2rem;
}

.app ul>li:nth-child(1) div{
	text-align: left;
	height:1rem;
	padding:0.5rem;
	border-radius: 0.2rem;
}
.app ul>li:nth-child(1){
	border: 1px solid #c0c0c0;
}
.app ul>li:nth-child(1) div{
    border-bottom:1px solid #c0c0c0;	
}
.app ul>li:nth-child(2){
	background-color:#f6f6f6 ;
	margin-top:0.8rem;
	margin-bottom:0.8rem;
}
.app .parcel{
	position:relative;
	width:100%;
	height: 100%;
}
.app .verify_s{
	position: absolute;
	left:0;
	padding: 0.5rem;
	background-color:white;
	border: 1px solid #c0c0c0;
	width: 8rem;
}
.app .verify_s input{
	width:6rem;
}
.app .verify_x{
	position: absolute;
	right:0;
	padding: 0.5rem;
	background-color:white;
	border: 1px solid #c0c0c0;
	width: 4rem;
	color: red;
}
.app ul>li:nth-child(3){
	margin-top: 3.8rem;
	background-color: #0A98D5;
	color:white;
	height:1.5rem;
	line-height: 1.5rem;
	clear:left;
}
.app ul>li:nth-child(4){
	margin-top:1rem;
	height:1.5rem;
	line-height: 1.5rem;
	border: 1px solid  #c0c0c0;
}
.app .body{
	padding: 1rem;
	background-color: #f6f6f6;
	height:100%;
	position:relative;
}
.app .hint{
	color:red;
}

多人聊天

html{
	font-size:5vw;
}
*{
	padding:0;
	margin:0;	
}
.groupChat{
	position:relative;
	width:100vw;
	height:100vh;
}
.groupChat  li{
	list-style-type:none;
	
}
.groupChat .newsDiv{
	top:3rem;
	position:absolute;
	bottom:3rem;
	overflow-y:scroll;
}
.groupChat .newsDiv .showDiv{
	/* position:absolute; */
	/* bottom: 0; */
	width:100vw;
}
.groupChat footer{
	/* font-size:0.8rem; */
	position:absolute;
	height:3rem;
	width:100vw;
	border-top:1px solid rgba(200,200,200,0.5);
	border-bottom:1px solid rgba(200,200,200,0.5);
	bottom:0;
	background-color:rgb(240,240,240);	
} 
.groupChat footer img{
	width:1.5rem;
	height:1.5rem;
	margin:0.75rem;
}
.groupChat footer .right{
	float:right;
}
.groupChat footer .left{
	float:left;
}
.groupChat footer .input{
    position: absolute;
	top:0.5rem;
	background-color: rgb(255,255,255);
	height:2rem;
	width:10.8rem;
	font-size:1rem;
}
.groupChat header{
	/* font-size:0.8rem; */
	height:3rem;
	text-align:center;
	background-color: rgba(255,155,255,0.5);
	line-height:3rem;
}
.groupChat header .left{
    width:1.5rem;
	height:1.5rem;
	margin:0.5rem;
	float: left;
}
.groupChat header .right{
    width:1.5rem;
	height:1.5rem;
	margin-right:0.5rem;
	float: right;
}
.newsDiv .li{
	float: left;
	width:20rem;
}
.groupChat .newsDiv .text{
	text-align:center;
	font-size:20px;
}
.groupChat .newsDiv .img{
	width:2.5rem;
	height:2.5rem;
	margin-left:0.5rem;
	border-radius:0.2rem;
	float: left;
}
.groupChat .newsDiv .warp{
	padding-right: 0.3rem;
	padding-bottom: 0.3rem;
	padding-left: 0.3rem;
	top:1.5rem;
	margin-left:3.5rem;
}

.groupChat .newsDiv .showname{
	
	color:blue;
}
.groupChat .newsDiv .warp .zeroFive{
	font-size:1rem;
	width: 3rem;
	float:right;
	background-color: #000000;
}
.groupChat .newsDiv .len{
	position: relative;
	word-break:normal;
	word-break: break-all;
	margin:0.5rem;
	width:12rem;
}
.groupChat .newsDiv .showNews{
	border-radius:0.5rem;
	border:0.5rem solid #d5f0ff;
	background-color:#d5f0ff;
	font-size:40px;
	z-index: 10;
}
.groupChat .newsDiv .before-left:before{
	content:'';
	width:0;
	height:0;
	border-top:0.2rem solid transparent;
	border-bottom:0.5rem solid transparent;
	border-right:2rem solid #d5f0ff;
	position: absolute;
	left:-1.3rem;
	z-index: 0;
}
.groupChat .newsDiv .top{
	float: left;
	height:10rem;
	width: 100vw;
}
.groupChat footer .send{
	display: none;
	background-color: rgba(155,255,155,0.8);
	width:3rem;
	height:2rem;
	margin-top:0.5rem;
	margin-right:0.5rem;
	float:left;
	line-height: 2rem;
	text-align: center;
	transition: all 0.5 linear;
	
}
.groupChat footer .hide{
	display: none;
}
.groupChat footer .show{
	display: block;
}
.groupChat .my-right{
	float:right;
}
.groupChat .my-right .my-img{
	float: right;
	margin-right:0.5rem ;
}
.groupChat .my-right .my-name{
	float:right;
}
.groupChat .my-right .my-news{
	float:right;
	margin-right:0.5rem;
	text-align:right;
	border-radius:0.5rem;
	border:0.5rem solid #a5ffc2;
	background-color:#a5ffc2;
	z-index:10;
}

.groupChat .my-right .my-news:before{
	content:'';
	width:0;
	height:0;
	z-index:-10;
	border-top:0.2rem solid transparent;
	border-bottom:0.5rem solid transparent;
	border-left:2rem solid #a5ffc2;
	position: absolute;
	left:10.6rem;
	
}

资料



*{
    padding: 0;
	margin:0;
	/* font-size: 0.8rem; */
}
.personal{
	font-size: 0.8rem;
	display: none;
}
.personal li{
	line-height: 3rem;
    height:3rem;
	list-style: none;
	border-bottom:1px solid rgba(200,200,200,0.5);
}

.personal li span{
	margin-left:1rem;
}
.personal .header{
	height:3rem;
	text-align: center;
	position:relative;
	line-height: 3rem;
	background-color: rgba(255,155,255,0.5);
}
.personal .li_1{
	height:4rem;
	position: relative;
	line-height: 4rem;
}
.personal .li_1 .img{
	width: 3.5rem;
	height: 3.5rem;
	margin-top: 0.25rem;
	position:absolute;
	right:3rem;
}
.personal .span_right{
	position:absolute;
	right:3rem;	
}
.personal .header .left{
	width: 1rem;
	height: 1rem;
    position: absolute;
	left:0;
	margin-top: 1rem;
	margin-left: 1rem;
}
.personal .right{
	width: 1rem;
	height: 1rem;
	position: absolute;
	right:0;
	margin: 1rem;
}
.personal .li_1 .img_2{
	margin-top:1.5rem;
}

主页面

@font-face {
  font-family: "iconfont"; /* Project id 2529172 */
  src: url('../font/iconfont.woff2?t=1620290085696') format('woff2'),
       url('../font/iconfont.woff?t=1620290085696') format('woff'),
       url('../font/iconfont.ttf?t=1620290085696') format('truetype');
}
.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/*  
@media screen and (max-width: 700px)and( min-width:400) {
   html{
   	font-size: 5vw;
   }
}
@media screen and (max-width: 600px) {
    html{
 	    font-size: 4vw;
 } 
}

@media screen and (max-width: 800px) {
	    html{
	   	     font-size: 2vw;
	   }
}
@media screen and (max-width: 1000px) {
    html{
   	    font-size: 1vw;
    }
} */

/* html{
	font-size: 5vw;
} */
*{
	margin:0;
	padding: 0;
	/* font-size: 0.8rem; */
}
html{
	font-size:5vw;
}
li{
	list-style-type:none;
}
/* .app{
	position: relative;
} */
a{
	text-decoration:none;
}
body{
	/* font-size: 0.8rem; */
	word-break: initial;
	word-wrap:break-word;
}
.header{
    position:fixed ;
	top:0;
	line-height: 2rem;
	width: 100vw;
	height: 2rem;
	font-size: 1.25rem;
	text-align: center;
	background-color:rgba(107,138,189,0.5);
}
.header .r-img{
	width: 1rem;
	height: 1rem;
	margin: 0.5rem;
	position: absolute;
	left: 0;
}
.footer{
	position:fixed;
	bottom: 0;
	width: 100vw;
	border-bottom: 1px solid rgba(200,200,200,0.5);
	border-top: 1px solid rgba(200,200,200,0.5);
	text-align: center;
}
.bgd{
	background-color: rgba(107,138,189,0.5);
}
.right_1{
	position: absolute;
	right: 0.5rem;
	font-size: 1rem;
	color: #000000;
}
.right_2{
	position: absolute;
	right: 1.5rem;
	font-size: 1rem;
	color: #000000;
	margin-right:0.5rem ;
}
.footer ul{
 	width:100vw;

}
.footer ul>li{
	list-style: none;
	float: left;
    width:5rem;	
}
.black{
	color:gray;
	font-size:2rem;
}
.green{
	color:green;
	font-size:2rem;
}
.size{
	font-size: 0.8rem;
}
.news{
	/* display: none; */
	position: absolute;
	bottom: 4.1rem;
	top:2rem;
	width:100%;
	padding-bottom: 2.8rem;
	overflow-y:scroll ;
}
.news .word{
	width: 100vw;
	position: absolute;
	overflow-y:scroll ;
}
.news .li_1{
	height:3rem;
	overflow:hidden;
	border-bottom: 1px solid rgba(200,200,200,0.5);
}
.news .li_1:hover{
	background-color: rgba(255,255,255,0.3);
}
.news .headPortrait{
	float: left;
	margin-top:0.25rem;
	margin-left:0.25rem;
	height: 2.5rem;
	width: 2.5rem;
}
.news .time{
	height: 2rem;
	margin-top: 0.5rem;
    float: right;
	margin-right: 0.5rem;
	font-size: 0.4rem;
}
.news .name{
	font-size: 1rem;
}
.news li{
	list-style: none;
}
.news .newss{
	font-size: 0.6rem;
}
.news .ul{
	float: left;
	height: 2rem;
	margin-top:0.5rem ;
	margin-left:0.5rem;
	width:10rem;
}
.addressList{
	display: none;
	position: relative;
	bottom: 4.1rem;
	top:2rem;
	width:100%;
	padding-bottom: 2.8rem;
	overflow-y:scroll ;
}
.addressList ul li{
	height:2.5rem;
	line-height: 2.5rem;
	font-size: 0.8rem;
	border-bottom:1px solid #dedede;
}
.addressList ul li img{
	float: left;
	margin-top:0.5rem;
	margin-left:1rem;
	margin-right: 1rem;
	width: 1.5rem;
	height:1.5rem;
}
.addressList ul li .span{
	margin-left:3.5rem;
}
.discover{
	display: none;
	position: relative;
	bottom: 4.1rem;
	top:2rem;
	width:100%;
	padding-bottom: 2.8rem;
	overflow-y:scroll ;
}
.discover ul li{
	font-size:0.8rem;
	height:2.5rem;
	line-height: 2.5rem;
	background-color:rgba(255,255,255,0.5);
	border-bottom: 1px solid rgba(200,200,200,0.5);
}
.discover ul li img{
	margin-top:0.75rem;
	float: left;
	margin-left:1rem;
	width: 1rem;
	height: 1rem;
}
.discover ul li span{
	margin-left:1rem ;
}
.discover .right{
	float: right;
	margin-right:1rem;
	margin-top:0.75rem;
}

.my{
	display: none;
	position: absolute;
	bottom: 4.1rem;
	top:2rem;
	width:100%;
	padding-bottom: 2.8rem;
	overflow-y:scroll ;
}

.my>ul>li:nth-child(1){
	margin-top:0.5rem;
	background-color: rgba(255,255,255,0.5);
	height: 5rem;
}
.my>ul>li{
	width: 100vw;
	font-size: 0.8rem;
	list-style: none;
    height:2rem;
}
.my .li{
	height:2.5rem;
	line-height: 2.5rem;
	border:1px solid rgba(200,200,200,0.5);
	background-color: rgba(255,255,255,0.5);
}
.my .right{
	margin-top:0.5rem;
	float: right;
}
.my>ul>li:nth-child(2){
	margin-top:0.5rem;
	height:2.5rem;
	line-height: 2.5rem;
	clear:left;
	background-color: rgba(255,255,255,0.5);
}

.my img{
	margin-left:1rem;
	margin-right:1rem;
	width: 0.8rem;
	height: 0.8rem;
}
.my>ul>li>div{
	float:left;
	width: 4rem;
	height: 4rem;
}
.my>ul>li>div>img{
	width: 3rem;
	height: 3rem;
	margin-left:1rem;
}
.my>ul>li>ul{
	width: 16rem;
	float: right;

}
.my>ul>li>ul>li{
	list-style: none;
}
.my>ul>li>ul>li:nth-child(1){
	font-size: 1rem;
	margin-bottom:0.5rem;
	margin-left:1rem;
}
.my>ul>li>ul>li:nth-child(2){
	font-size: 0.6rem;
	margin-bottom:0.5rem;
	margin-left:1rem;
}
.my>ul>li>ul>li:nth-child(2) img{
	float: right;
	margin-right:1rem;
	width: 0.6rem;
	height: 0.6rem;
}
.my>ul>li>ul>li:nth-child(3){
	margin-left:1rem;
	font-size: 0.6rem;
	margin-bottom:0.5rem;	
}
.my .sapn{
    display:block;
	float:left;
	margin-right:0.5rem;
	border: 1px solid rgba(200,200,200,0.5);
	border-radius:50%;
	padding:0.2rem;
}
.quit{
	font-size: 0.8rem;
	display: none;
}
.quit .header{
	position: relative;
	height: 3rem;
	line-height: 3rem;
	background-color: rgba(255,155,255,0.5);
}
.quit .header .img{
	position: absolute;
	left:1rem;
	width: 1rem;
	height: 1rem;
	top:1rem;
}
.quit li{
	position: relative;
	height: 3rem;
	line-height: 3rem;
	border-bottom:1px solid rgba(200,200,200,0.5);
}
.quit li img{
	position: absolute;
	right: 1rem;
	top:1rem;
	width: 1rem;
	height: 1rem;
}
.quit li span{
	margin-left: 1rem;
}
.quit .text_quit{
	margin-left: -1rem;
	text-align: center;
}
#Moments{
	font-size: 0.8rem;
	display: none;
}
#Moments .header{
	position: relative;
	height: 3rem;
	line-height: 3rem;
	background-color: rgba(255,155,255,0.5);
}
#Moments .header .img{
	position: absolute;
	left:1rem;
	width: 1rem;
	height: 1rem;
	top:1rem;
}
#Moments .header .showImg{
	width:100vw;
	height:35vh;
}
#Moments .header .showImg .img_2{
	width:100%;
	height:100%;
}
#Moments .header .showPortrait{
	position:absolute;
	top:28vh;
	right:1rem;
	height:3rem;
	line-height: 3rem;
}
#Moments .header .showPortrait .img_3{
	width:3rem;
	height:3rem;
	float: left;
}
#Moments .header .showPortrait .left{
	float: left;
	margin-right:0.3rem;
}
#Moments .publish{
    position:absolute;
	top:0;
	right: 0;
	width:1rem;
	height:1rem;
	margin: 1rem;
}
#Moments .footer_f{
	display: none;
	position: fixed;
	bottom:0;
}
#Moments .footer_f li{
	width:100vw;
	list-style: none;
	height:2.5rem;
	border-bottom: 1px solid rgba(200,200,200,0.5);
	text-align: center;
	line-height: 2.5rem;
    clear:left;
}
#Moments .footer_f ul{
	background-color: rgba(255,255,255,0.5);
	border-top-left-radius: 1rem;
	border-top-right-radius: 1rem;
}
#Moments .ul{
	padding-top:30vh;
	width:20rem;
	
}
#Moments .ul .li{
	border-bottom:1px solid rgba(200,200,200,0.8);
	margin-bottom:1rem;
	margin-top:1rem;
	width:20rem;
	display:inline-block;
}
#Moments .ul .img{
	float: left;
	width:2rem;
	height:2rem;
	margin-left:0.5rem;
	margin-right:0.5rem;
	margin-bottom:0.5rem;
}
#Moments .ul .div{
    float:right;
	margin-right:1rem ;
	left:3rem;
	width:16rem;
	white-space:normal;
	word-break:break-all;
}
/* 超出部分隐藏 */
.normal{
	white-space:normal;
	word-break:break-all;
}
.bgblue{
	background-color:wheat;
	color:blue;
}
#Moments .ul li{
	list-style: none;
}
#Moments .ul .li .little{
	background-color:rgba(200,200,200,0.5);
	float:right;
	width:2rem;
	text-align:center;
	border-radius: 0.5rem;
    	
}
#Moments .ul .li .bottom{
	margin-bottom:0.5rem;
}
#Moments .ul .li .bottom-top{
	margin-top:2rem;
}
#Moments .ul .li .bottom .img_name{
	width:0.6rem;
	height:0.6rem;
}
#Moments .ul .li .blue{
	color:blue;
}
#Moments .ul .li .del{
	color:blue;
}
#Moments .ul .li .like{
	display: none;
   	position:absolute;
	top:0;
	right:3rem;
	border-radius:0.3rem;
	overflow:hidden;
}
#Moments .ul .li .showtime{
	position:relative;
	height:1.5rem;
}
#Moments .ul .li .showtime .time1{
	font-size:20px;
}
#Moments .ul .li .like .likeli{
	float: left;
	width:4rem;
	font-size:0.8rem;
	height:1.5rem;
	background-color: rgba(0,0,0,0.8);
	line-height: 1.5rem;
	text-align: center;
	color: white;

	
}
#Moments .ul .li .like .likeli img{
    width:0.8rem;
	height:0.8rem;
	
	
}
#Moments .ul .li .div .bottom .imgli{
	width:16rem;
}
#Moments .ul .li .div .bottom-b{
    margin-bottom:1rem;
}
#Moments .ul .li .div .bottom .imgli img{
	width:100%;
	height:100%;
}
#Moments .delmoments{
	display: none;
	position:fixed;
	width:16rem;
	height:9rem;

	top:40vh;
	left:2rem;
	background-color: white;
	border-radius:0.5rem;
	text-align: center;
	overflow:hidden;
}
#Moments .delmoments li{
	list-style: none;
	height: 2.75rem;
	line-height: 2.75rem;
	
}
#Moments .delmoments li .divleft_1{
	width:7.975rem;
	height: 3.45rem;
	line-height:3.45rem ;
	border-right:0.05rem solid rgba(200,200,200,0.5);
	border-top:0.05rem solid rgba(200,200,200,0.5);
	float: left;
	font-weight:bold;
	
}
#Moments .delmoments li .divleft_2{
	width:7.975rem;
	height: 3.45rem;
	line-height: 3.45rem;
	border-top:0.05rem solid rgba(200,200,200,0.5);
	float: left;
	color:blue;
	
}
#Moments .delmoments .gray{
	color:gray;
}
#Moments .masklayer{
	display: none;
	position:fixed;
	top:0;
	left:0;
	width:100vw;
	height: 100vh;
	background-color: rgba(0,0,0,0.2);
	
}
#Moments .commentdiv{
	display: none;
    position: relative;
	background-color: rgb(240,240,240);
	height:3rem;
}
#Moments .commentdiv .textarea{
	position:absolute;
	font-size: 0.8rem;
	border: none;
	outline: none;
	width: 10rem;
	height:2rem;
	margin-left:0.5rem;
	margin-top: 0.5rem;
}
#Moments .commentdiv .commentsend{
	position: absolute;
	right: 0;
	bottom: 0.75rem;
	width:3rem;
	height:1.5rem;
	text-align: center;
	line-height: 1.5rem;
	border-radius:0.1rem;
}

#Moments .commentdiv .commentsend_gray{
	background-color: lightgrey;
	border: 1px solid rgba(155,155,155,0.8);
	color:gray;
}
#Moments .commentdiv .commentsend_green{
	background-color: #008000;
	color:white;
}
#Moments .commentdiv .commentimg{
	width: 1.5rem;
	height:1.5rem;
	position: absolute;
	right: 3.5rem;
	bottom: 0.75rem;
}

#Moments .comment_list{
	margin-bottom:0.5rem;
	display:inline-block;
}
#Moments .comment_list .comment_list_head{
	width:1.6rem;
	height:1.6rem;
	float: left;
}
#Moments .comment_list .comment_list_vessel{
	position: relative;
	margin-left:0.5rem;
	width:13.5rem;
	float: left;
}
#Moments .comment_list .comment_list_vessel .comment-list-name{
	color:blue;
	font-size:0.6rem;
}
#Moments .comment_list .comment-list-time{
	font-size:20px;
	position: absolute;
	right: 0;
	top: 0;
}
#Moments .comment_list .comment-list-news{
	font-size:0.8rem;
}

.compile{
	display: none;
	position: relative;
}

.compile .li{
	position:relative;
	height: 2.5rem;
	text-indent:1rem;
	line-height: 2.5rem;
	clear:left;
	
}
.compile .li .img_2{
	position: absolute;
	top:0.75rem;
	right:1rem;
	width: 1rem;
	height: 1rem;
	
}
.compile .li .divRight{
	position: absolute;
	width:3rem;
	height: 2rem;
	line-height: 2rem;
	background-color: #008000;
	color:white;
	top:0.25rem;
	right:1rem;
	text-indent: 0px;
	text-align: center;
}
.compile textarea{
	height: 20vh;
	width: 90vw;
	margin-left:5vw;
	border: none;
	outline: none;
}
.compile .li .left{
	position: absolute;
	top:0.75rem;
	left:1rem;
	width: 1rem;
	height: 1rem;
}
.compile .rem5{
	float: left;
	width:5rem;
	height: 5rem;
	margin-left:1rem;
	margin-top:1rem;
    border:5px solid green;
	position: relative;
}
.compile .rem5-ul{
	width:100%;
}
.compile .rem5-ul .rem5-li{
	float: left;
	width:5rem;
	height: 5rem;
	margin-left:1rem;
	margin-top:1rem;
    border:5px solid green;
	position: relative;
}

.compile .rem5 .rem5-file{
	position: absolute;
	width:5rem;
	height:5rem;
	opacity: 0;
}
.compile .rem5 .rem5-row{
	position: absolute;
	width:3rem;
	height:1rem;
	top:2rem;
	left:1rem;
	background-color: greenyellow;
}
.compile .rem5 .rem5-col{
	position: absolute;
	width:1rem;
	height:3rem;
	top:1rem;
	left:2rem;
	background-color: greenyellow;

}
.compile .rem5 .rem5-img{
	width:5rem;
	height:5rem;
}

.changename{
	width:90vw;
	margin-left:5vw;
}
#changename{
	font-size: 1rem;
	display: none;
}
.changename header{
	position: relative;
	height: 3rem;
	line-height: 3rem;
	text-align: center;
}
.changename header img{
	width: 1rem;
	height: 1rem;
	position:absolute;
	left:0;
	top:1rem;
}
.changename header div{
	position: absolute;
	top:0.5rem;
	right: 0;
	width: 3rem;
	height: 2rem;
	line-height: 2rem;
	text-align: center;
	background-color: lightgray;
	color:gray;
}
.changename header .green{
	position: absolute;
	top:0.5rem;
	right: 0;
	width: 3rem;
	height: 2rem;
	font-size: 1rem;
	line-height: 2rem;
	text-align: center;
	background-color:green;
	color:white;
}
.changename input{
	font-size: 1rem;
	width:100%;
	border:none;
	outline:none;
	border-bottom:1px solid rgba(200,200,200,1) ;
}
.changename .input{
	border-bottom: 1px solid greenyellow;
}
.changename p{
	font-size: 0.5rem;
	color:gray;
}
#changeuser{
	display: none;
}
#uploadPhotoAsAvatar{
	display: none;
}
#uploadPhotoAsAvatar .bg{
	width:5rem;
	height: 5rem;
	
}
.headsrc{
	border-radius: 50%;
	width:2rem;
	height:2rem;
}
.seofriendly{
	display:none;
}
.seofriendly input{
    font-size: 1rem;
}
.seofriendly .ul{
	padding-top:2.5rem;
}
.seofriendly .ul .li{
	position: relative;
	list-style:none;
	height:3rem;
	line-height: 3rem;
	background-color: white;
	border-bottom: 1px solid rgba(200,200,200,0.8);
}
.seofriendly .ul .li .img{
	position: absolute;
	width:2rem;
	height:2rem;
	margin: 0.5rem;
	
}
.seofriendly .ul .li .span{
	margin-left:3.5rem;
	color: blue;
	
}
.AddFriend{
	font-size: 0.8rem;
	display: none;
}
.AddFriend .li-input{
	clear:left;
	text-align:center;
}
.AddFriend li textarea{
	outline:none;
	border:5px solid gray;
	border-radius:0.5rem;
	width:18rem;
	height:6rem;
	font-size:0.8rem;
}
.AddFriend li{
	list-style:none;
}
.AddFriend li .return-img{
	width:1rem;
	height:1rem;
	margin: 1rem;
}
.AddFriend .li .head-img{
	margin-bottom:1rem;
	margin-left:1rem;
	margin-right:1rem;
	width:5rem;
	height:5rem;
	float: left;
	border-radius: 0.5rem;
	border: 5px solid sandybrown;
}
.AddFriend .li .data-div{
	float: left;
	color: darkblue;
	border-bottom: 1px solid rgba(200,200,200,0.8);
}
.AddFriend .li .data-div .name-div{
	font-size: 1.2rem;
    border-bottom: 1px solid rgba(200,200,200,0.8);	
}
.AddFriend .li .data-div .data-2{
	font-size: 0.8rem;
	color:dimgray;
	border-bottom: 1px solid rgba(200,200,200,0.8);
}
.AddFriend .add{
	margin-top: 1rem;
	width: 20rem;
    height:3rem;
	font-size:1.2rem;
	color:white;
	text-align: center;
	clear:left;
}
.AddFriend .add div{
	margin:0 auto;
	width:18rem;
	height:2rem;
	line-height:2rem;
	border-radius: 1rem;
	background-color: #008000;
}
.FriendRequest{
    font-size: 0.8rem;
	display: none;
}
/* .heder{
	 position: relative;
	height:3rem;
	line-height: 3rem;
	font-size: 1rem;
	background-color: rgba(255,155,255,0.5);
	text-align: center;
} */

.FriendRequest .li{
	display: inline-block;
	margin-bottom: 1rem;
}
.FriendRequest ul{
	margin-top:3rem;
}
.FriendRequest .li .h-img{
	width: 2rem;
	height:2rem;
	margin-left: 0.5rem;
	float: left;
}
.FriendRequest ul .li .show-r{
	float: left;
	margin-left:0.5rem;
    top:0;
	width:15rem;
}
.FriendRequest ul .li .show-r .f-name{
	font-size: 1rem;
}
.FriendRequest ul .li .show-r .f-data{
	margin-bottom:1rem;
}

.FriendRequest ul .li .show-r .vuto{
	width: 50%;
	text-align: center;
	background-color: rgba(255,155,255,0.5);
	float: left;
}
.FriendRequest ul .li .show-r .consent{
	width: 50%;
	background-color: green;
	color:white;
	text-align: center;
	float: left;
}
.FriendRequest ul .li .show-r .f-data{
   border:1px solid rebeccapurple;
   border-radius: 5px;       
}
.Friendprofile{
	font-size:0.8rem;
	display: none;
}
.Friendprofile .f-right{
	margin-right:0.5rem;
	float: right;
}
.Friendprofile ul{
	margin-top:3rem;
}
.Friendprofile ul .text{
	text-align:center;
	color: blue;
	height: 3rem;
	border:1px solid rgba(200,200,200,0.6);
	line-height: 3rem;
}

.Friendprofile ul .li{
	clear:left;
	height: 3rem;
	border:1px solid rgba(200,200,200,0.6);
	line-height: 3rem;
	text-indent:1rem;
}
.Friendprofile ul .li .img{
	float: right;
	width:1rem;
	height:1rem;
	margin:1rem;
}
.Friendprofile .f-img{
	width: 4rem;
	height:4rem;
	border:5px solid goldenrod;
	border-radius:0.5rem;
	margin-left:1rem;
	float: left;
}

.Friendprofile .f-box{
	float: left;
	width:10rem;
	margin-left:1rem;
}
.Friendprofile .f-box .f-name{
	word-wrap:break-word;
	font-size:1.2rem;
	font-weight:bolder;
}

/* #dataSet input{
	width:50px;
	height:20rem;
} */
.hint-span{
    float: right;
	margin-right: 2rem;
	margin-top:0.5rem;
	display: block;
	width:2rem;
	height:1.5rem;
	font-weight:bolder;
	font-size: 1rem;
	text-align:center;
	border-radius:50%;
	background-color:chartreuse;
	line-height:1.5rem;
	color:red;
}
.groupChat{
	display: none;
}
.em{
	display:none;
}

底部

如何后续有时间，

妙团团

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
实现简易博客聊天系统（仿微信）

前言学习最好的方法就是实践，在实践中成长。本次将微信作为模仿目标，也许实现了不到百分百之零点一的功能，但所获还是不小的。收获1，前后端如何交互，怎么个工作流程，有了进一步认识；2， vue掌握50%+，三目表达式可以作为开关使用，多个三目表达式组合，有神奇的效果，v-for循环无往不利；我应该很快就能会学会vue;3， express框架简洁而又高效，后台开发确实十分复杂，数据是不可见得。对于逻辑思维要求高。已经学会如何使用express框架。4， css rgba()的灵活使用，cs是短板
复制链接

扫一扫