聊天室
思路
-
登录页面
-
通过数据库判断用户名、密码等是否输入正确
-
匹配成功后跳转到聊天室页面
-
-
聊天室主页面
- 页面布局
- 上（展示登录用户，在和谁聊天的提示）
- 下左（在线用户）
- 下右 (展示消息内容，聊天框)
- 通过点击左侧不同的名字展示不同的对话内容
- 功能：发送消息，发送文件
- 页面布局
-
服务端页面
- 上方是在线人员，可进行管理人员下线
- 下方是聊天信息的大致展示
知识
sessionStorage
sessionStorage存储在客户端，不与服务器进行通信
只能存储字符串类型，其他格式要转换格式后进行存储
//存储字符串 sessionStorage.setItem(key,value)
var page = 'newPage'
sessionStorage.setItem('page',page)
//存储对象
var pageParams={
type:1,
name:'子兮',
}
sessionStorage.setItem('pageParams',JSON.stringify(pageParams))
//获取
let page=sessionStorage.getItem('page')
let pageParams = JSON.parse(sessionStorage.getItem('pageParams'))
//移除
sessionStorage.removeItem('pageParams')
sessionStorage.removeItem('page')
sessionStorage、cookie、localstorage区分
cookie：储存在用户本地终端上的数据，是网站为了识别用户和跟踪会话而存储在用户本地终端中的文本数据。
sessionStorage：存储会话中的数据，这些数据只有在同一个会话当中的页面才可以访问，并且当会话结束之后数据也会跟着销毁。页面刷新或者恢复页面的时候都不会丢失或者被清空。
localSotrage：持久化的本地存储。除非是你主动删除数据，否则的话，数据是永远也不会过期的。
-
共同点：都是保存在浏览器端、且同源的
-
区别：
1、存储空间：cookie存储空间最小、只有4kb、但是http请求中可以携带cookie，loacalstorage、sessionstorage存储空间5m或更大
2、有效期：cookie不设置时间、关闭游览器销毁，sessionstorage关闭游览器（窗口或者标签页）销毁，loacalstorage不手动清除一直保留
3、作用域：sessionStorage不在不同游览器窗口（标签页）共享、即使同源，cookie、localstorage在所有同源窗口之间共享
1、sessionStorage 属性允许你访问一个 session Storage 对象。它与 localStorage 相似。
2、不同之处在于 localStorage 里面存储的数据没有过期时间设置，而存储在 sessionStorage 里面的数据在页面会话结束时会被清除。
3、sessionStorage在页面会话在浏览器打开期间一直保持，并且重新加载或恢复页面仍会保持原来的页面会话。
4、不同tab之间就算相同url，sessionStorage也是不会共享的。sessionStorage只存在于当前会话中。
5、使用window.open或者点击链接跳转的页面，新页面的sessionStorage会拷贝老页面的。但两者之间并无关联，还是两个会话。
Pormise.all
promise.all用于处理多个异步操作的静态方法，可以实现发起多个异步请求，并在所有请求都完成后进行处理。
- 当传入的 Promise 数组中的所有 Promise 对象都变为 fulfilled 状态时，返回的 Promise 对象会被 resolved。
- 当所有对象都被resolved后，将执行.then()方法中的回调函数。
- 如果其中任何一个 Promise 对象变为 rejected 状态，返回的 Promise 对象会被 rejected。因，在.catch()方法中可以捕获到任何一个请求发生错误的情况
var axiosRequests = [];
for (var name of this.onlineUser) {
var userPictureRequest = axios.get("http://localhost:8080/chatRoom/user/getPicture?name=" + name);
axiosRequests.push(userPictureRequest);
userPictureRequest.then(resp => {
//相应回后触发的事件
}).catch(error => {
console.error(error);
});
}
Promise.all(axiosRequests)
.then(() => {
//循环内的所有请求响应结束后的事件
}).catch((error) => {
console.error(error);
});
JS中Date类型
创建日期对象
var date = new Date();
getFullYear();//获取四位数的年份
getMonth();//获取日期中的月份
//0表示一月，11表示十二月
getDate();//返回日期月份中的天数（1-31）
getDay();//返回日期中的星期几
//0表示星期日
getHours()//返回日期中的小时数（0-23）
getHours()//返回日期中的小时数（0-23）
getHours()//返回日期中的小时数（0-23）