这是我参与「第四届青训营 」笔记创作活动的第12天
编辑用户资料
修改头像
1.<input type="file" hidden ref="file" @change="onFileChange">
<van-cell title="头像" is-link @click="$refs.file.click()">。。。
onFileChange () {
// 已选择文件的第一个
const file = this.$refs.file.files[0]
// 基于文件对象获取 blob属性
const data = window.URL.createObjectURL(file)
console.log(data)
//清空选择过的图片的·数据使得即使选择同一个文件也会触发change事件
this.$refs.file.value = ''
}
使用cropperjs 包处理裁切图片的效果
利用webSocket实现对话
http通信的特点：
- 请求+响应
- 没有请求也没有响应
- http通信只能有客户端发起
webSocket特点
- 服务器可以主动向客户推送消息，客户端也可主动向服务端发送消息，是真正的双向平等对话，属于服务器推送技术的一种
- 第一次链接采用http协议
- 没有同源跨域限制，客户端可以与任意服务器通信
- 协议标识符为ws（加密为wss）
- 浏览器为websocket通信提供请求对象websocket
socket.io第三方包
使用：
组件缓存
在动态组件外包裹 keep-alive
直接给App.vue中的 包裹即可 仅对一级路由起作用
若想对二级路由起作用需要对包裹其的一级路由包裹。。。
<keep-alive :include="['LayOut']">
<router-view/>
</keep-alive>
//表示只有一级路由的LayOut缓存
需要根据用户登录的账号来渲染layout页面
因此需要在退出登录时清除layout缓存登陆时开启layout缓存
被 keep-alive 缓存的组件不会调用created等钩子 beforeupdate和update不影响
被 keep-alive 缓存的组件激活时调用activated
被 keep-alive 缓存的组件失活时调用。deactivated
用拦截器（axios interceptors）来处理token过期的问题（响应拦截器）
用路由元信息来控制那些页面在未登录情况也可使用
配置路由时在最后加上
// 任何人都可以阅读文章
meta: { requiresAuth: false }
2.使用全局导航守卫
router.beforeEach((to, from,next) => {
// ...
if(to.meta.requiresAuth){
// 校验登录状态
Dialog.confirm({
title: '访问提示',
message: '该功能需要登录才能访问，确认登录吗',
})
.then(() => {
// on confirm
router.replace({
name: 'login',
query: {
redirect: router.currentRoute.fullPath
}
})
})
.catch(() => {
// on cancel
// 返回 false 以取消导航
return false
});
}else{
// 不需要登录直接过去
next()
}
})
