## **安装前端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安装包定制及美化
- 实例:版本升级,自动下载更新