千锋教育web前端项目难点和亮点效果全解析，手把手实战开发
项目难点：
webscoket（基本前后端通讯）
1、安装ws
npm install ws --save
2、新建服务
//webscoket.client客户端 webscoket,server服务端
let webScokerServer=new webscoket.Server({port:"8000"})
3、长连接
//可能多个用户进行连接
let pool=new Map();
let num=0;
//新建map对象储存连接
webScokerServer.on("connection",(ws)=>{
//connection是针对整个服务的监听
//记录用户的连接次数
num+=1;
pool.set("connection"+num,ws);
//nodejs的时间体系
ws.on("message",(mes)=>{
console.log(mes)
//接收的mes是一个buffer,需要转换成toString()})
//关闭监听
ws.on(“close”,()=>{})
ws.on("error",()=>{})
})
4、WebSocket的网址是ws开头
let client=new WebSocket("ws://localhost:8000")
5、后端发送的第一个参数必须是字符串，前端需要JSON.parse转换
6、消息发送给前端，前端接收的是一个事件对象，对象取出data的数据
webscoket（项目中的应用）
WebScoket不可能让所有随便连接，所有需要携带token或者id
- 直接带在url的query
- 带在请求头上
- cookie
实际应用：心跳检测、定时重连
富文本编辑器
安装注意事项:
- 有两种方案分别是安装对应的vue/react组件，然后直接用组件，或者直接使用tinymce去按原生操作
- 会报找不到文件的错误，需要把tinymce都复制到public里
界面需求:
- 在Vue3的项目中，需要在onMounted阶段初始化富文本的配置
- Menubar控制菜单，toolbar控制工具栏，statusbar控制状态栏
- Skin控制皮肤，或者通过skin_ urI导入自定义皮肤。也可以通过content_css定义内容区域样式(工具栏等样式属于项目本身，可以直接修改覆盖)。lcons_ urI导入图标
- 设置language,然后把对应的语言包丢对位置
- Toolbar和menubar设置菜单和工具栏
进阶需求:
- 获取输入内容，并通过对应编辑器实例的getContent方法获取发给后端
- 设置内容,通过setContent方法设置内容
二次开发:
- Image、link、code、table表格点
- 开发自己的工具栏插件
项目权限控制
页面级权限控制：根据用户的权限，动态的决定路由规则
在登录成功后会返回用户人信息、菜单信息、token,菜单信息会拿到树状结构或者兄弟层级，兄弟层级需要自己进行递归显示在左侧，而在看不见的路由规则里需要使用addRoute方法(Vue2的是addRoutes，添加路由会报警告需要手动删除；Vue3是addRoute,已经解决了Vue2的问题)与左侧菜单进行匹配
按钮级权限控制: 如果用户没有权限，则隐藏按钮
后端返回按钮组合，以数组的形式包含字符串，前端开发人员使用自定义指令或者v-if控制显示与隐藏
文件上传
文件上传的两种形式:二进制传输和base64
文件相关js对象解析
Blob对象:把文件转化为二进制形式获取为blob对象
file:通过input标签读取过来的对象
formData:可以用来搭载blob对象来传输
fileReader:多用于把文件读取为某种形式，如文本，base64
大文件切片
file对象他是blob对象子类。blob对象有一个slice方法对二进制数据进行分割，所以说file对象也有这个方法，对二进制数据进行分割。
断点续传
每次上传，把当前切片进度存到localStorage。然后下次续传，从localStorage读取上次进度，直接从上次进度开始切。
