又一个愉快的周末来临了。当我轻快地回到家,正要和女友拥抱时,却发现女友正皱着眉头看着电脑上的电脑。堆满了英文文件夹,不停地呻吟,喃喃自语:“我好累”。于是,我定睛一看,看到她电脑上一堆英文文件夹,反复复制文件名,然后在百度翻译中翻译成中文,翻译完后又给文件重命名。这个很难(硬。想到女朋友的烦恼,身为她程序员男朋友的我怎么可能袖手旁观,我陷入了沉思,突然想到可以用Node来做她手上的操作,就这么干了,我立马抛下女朋友,打开电脑开始行动。毕竟,女人只会影响我出剑的速度。项目搭建项目搭建还是采用老组合,Electron+Vue+Node。这次就不说electron和vue怎么整合了。详见文章Electron+vue从零开始搭建本地音乐播放器。懒人可以直接克隆我的模板文件开发,点这里点这里。项目功能显然需要解决几个痛点:自动翻译、译名自动重命名、批量翻译、易操作。明确了能够拖放目录或拖放文件的要求,让我们逐步解决它们。实现效果项目实现项目的实现并不复杂,一一解决,有的放矢。自动翻译已通过有道翻译、百度翻译、谷歌翻译测试。经过比较,我最终选择了百度翻译。百度翻译一般翻译每月200万字免费(QPS=10),还是能满足我的需求。注册并申请翻译服务使用翻译服务需要到百度翻译开放平台申请权限。您可以选择通用翻译服务。注册为开发者后,可以新建项目获取appid。这个appid很重要,决定了能否正确发起翻译请求。.拼接翻译API可以查看文档了解。通用翻译API的HTTP地址为https://api.fanyi.baidu.com/api/trans/vip/translate,可以携带如下参数。由于安全限制,需要生成签名。签名需要按照appid+q+salt+key的顺序拼接得到一个字符串,然后md5加密这个字符串constsalt=parseInt(Math.random()*1000000000);constsign=md5(globalData.appid+q+salt+globalData.key);URLconstparams=encodeURI(`q=${q}&from=auto&to=${globalData.to}&appid=${globalData.appid}&salt=${salt}&sign=${sign}`);翻译函数代码constmd5=require("md5");varrp=require("request-promise");const{globalData}=require("./config.js");functiontranslate(msg){constq=消息;constsalt=parseInt(Math.random()*1000000000);//添加盐constsign=md5(globalData.appid+q+salt+globalData.key);//生成签名constparams=encodeURI(`q=${q}&from=auto&to=${globalData.to}&appid=${globalData.appid}&salt=${salt}&sign=${sign}`);constoptions={uri:`https://fanyi-api.baidu.com/api/trans/vip/translate?${params}`,};返回rnrp(options).then((res)=>JSON.parse(res).trans_result);}module.exports={translate,};主要功能实现主要功能分为:批量翻译,支持向下递归翻译拖拽无限文件,或拖拽文件夹翻译重命名批量翻译。实现批量翻译需要获取目标文件夹的路径,然后通过fs.readdir读取目录下的文件信息,遍历文件信息。如果是文件,检查文件名和后缀是否分开,然后进行翻译操作。如果是目录,则进行递归操作//读取目录下的所有文件/目录fs.readdir(dirPath,(err,files)=>{if(err){//throwerr;dialog.showMessageBox({type:'info',title:'Confirm',message:'请确认是否选择目录',});this.loading=false;throwerr;}files.forEach((fileItem)=>{//遍历文件fs.stat(fullPath,(err,stat)=>{if(err){throwerr;}//判断是否是文件if(stat.isFile()){//处理文件名}elseif(stat.isDirectory()){//递归翻译this.startTrans(fullPath);}});});});获取文件夹路径获取文件夹路径有两种方式:设置inputwebkitdirectory目录属性,然后监听change事件获取选中文件夹的路径getFile(e){this.path=e.target.files[0].path;},拖拽通过H5API监听拖拽事件,获取DataTransfer目的。DataTransfer对象用于保存拖放数据
