## **安裝前端MD5加密 js-md5**
1. 進入項目根目錄
2. cnpm install js-md5 --save
## **封裝工具類**
在/project-name/src/renderer目錄中,新增utils文件夾,新建tools.js
```
import md5 from 'js-md5';
var app={
//封裝請求的url
config:{
apiUrl:"http://localhost/electron/public/api/"
},
//localStorage只能存儲字符串,所以將對象的存儲封裝起來,一般瀏覽器支持的大小是5M
storage:{
set(key,value){
localStorage.setItem(key,JSON.stringify(value));
},
get(key){
var result=localStorage.getItem(key);
if(result){
return JSON.parse(result);
}else{
return '';
}
},
remove(key){
localStorage.removeItem(key)
}
}
,
sign(json) {
var arr = [];
for (var i in json) {
arr.push(i);
}
//將元素按照 ASCII 字符順序進行升序排列(也就是所謂的自然順序)
arr = arr.sort();
var str = '';
for (let i = 0; i < arr.length; i++) {
if (json[arr[i]] === '') continue;
if (str !== '') str += '&';
str += arr[i] + '=' + encodeURI(json[arr[i]])
}
var signature = md5(str)
return signature.toUpperCase();
}
}
export default app;
```
- 快速安裝electron-vue
- 集成element-ui
- 實例:封裝api請求接口、數據簽名、數據存儲
- 實例:用戶登錄,本地存儲用戶信息
- 實例:獲取用戶列表,分頁查詢
- 實例:用戶增加,表單校驗,防重復提交
- 實例:用戶編輯
- 實例:用戶刪除
- 實例:集成echarts,完成圖表統計
- 實例:監聽網絡變化,彈出斷網通知(解決win10通知沒法出來的問題)
- 實例:自定義應用程序菜單、系統右鍵菜單
- 實例:自定義系統托盤,托盤右鍵菜單,圖標閃爍
- 實例:自定義關閉按鈕,點擊右上角關閉按鈕隱藏到托盤
- 實例:開機自啟動
- 實例:實現單實例,確保只有一個應用程序
- 實例:集成socket.io主動給客戶端發送消息
- thinkphp整合phpsocketio
- 集成vue-socket.io
- 實例:打包軟件,自定義軟件名稱、軟件版本
- 實例:NSIS安裝包定制及美化
- 實例:版本升級,自動下載更新