項目難點：

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是針對整個服務的監(jiān)聽
//記錄用戶的連接次數(shù)
 num+=1;
 pool.set("connection"+num,ws);
//nodejs的時間體系
 ws.on("message",(mes)=>{
  console.log(mes)
//接收的mes是一個buffer,需要轉換成toString()})

//關閉監(jiān)聽
 ws.on(“close”,()=>{})
 ws.on("error",()=>{})
})

4、WebSocket的網(wǎng)址是ws開頭

let client=new WebSocket("ws://localhost:8000")

5、后端發(fā)送的第一個參數(shù)必須是字符串，前端需要JSON.parse轉換

6、消息發(fā)送給前端，前端接收的是一個事件對象，對象取出data的數(shù)據(jù)

webscoket（項目中的應用）

WebScoket不可能讓所有隨便連接，所有需要攜帶token或者id

• 直接帶在url的query
• 帶在請求頭上
• cookie

實際應用：心跳檢測、定時重連

富文本編輯器

安裝注意事項:

• 有兩種方案分別是安裝對應的vue/react組件，然后直接用組件，或者直接使用tinymce去按原生操作
• 會報找不到文件的錯誤，需要把tinymce都復制到public里

界面需求:

• 在Vue3的項目中，需要在onMounted階段初始化富文本的配置
• Menubar控制菜單，toolbar控制工具欄，statusbar控制狀態(tài)欄
• Skin控制皮膚，或者通過skin_ urI導入自定義皮膚。也可以通過content_css定義內容區(qū)域樣式(工具欄等樣式屬于項目本身，可以直接修改覆蓋)。lcons_ urI導入圖標
• 設置language,然后把對應的語言包丟對位置
• Toolbar和menubar設置菜單和工具欄

進階需求:

• 獲取輸入內容，并通過對應編輯器實例的getContent方法獲取發(fā)給后端
• 設置內容,通過setContent方法設置內容

二次開發(fā):

• Image、link、code、table表格點
• 開發(fā)自己的工具欄插件

項目權限控制

頁面級權限控制：根據(jù)用戶的權限，動態(tài)的決定路由規(guī)則

在登錄成功后會返回用戶人信息、菜單信息、token,菜單信息會拿到樹狀結構或者兄弟層級，兄弟層級需要自己進行遞歸顯示在左側，而在看不見的路由規(guī)則里需要使用addRoute方法(Vue2的是addRoutes，添加路由會報警告需要手動刪除；Vue3是addRoute,已經(jīng)解決了Vue2的問題)與左側菜單進行匹配

按鈕級權限控制: 如果用戶沒有權限，則隱藏按鈕

后端返回按鈕組合，以數(shù)組的形式包含字符串，前端開發(fā)人員使用自定義指令或者v-if控制顯示與隱藏

文件上傳

文件上傳的兩種形式:二進制傳輸和base64

文件相關js對象解析

Blob對象:把文件轉化為二進制形式獲取為blob對象

file:通過input標簽讀取過來的對象

formData:可以用來搭載blob對象來傳輸

fileReader:多用于把文件讀取為某種形式，如文本，base64

大文件切片

file對象他是blob對象子類。blob對象有一個slice方法對二進制數(shù)據(jù)進行分割，所以說file對象也有這個方法，對二進制數(shù)據(jù)進行分割。

斷點續(xù)傳

每次上傳，把當前切片進度存到localStorage。然后下次續(xù)傳，從localStorage讀取上次進度，直接從上次進度開始切。