近来读英文资料较多，翻译量增，索性自己做了个翻译小应用，便于自己翻译使用；
来先看看效果吧
大体就是如此，哈哈，上细节；
整体架构用 Node+Egg搞的；
会用到以上知识点；
问题在于翻译的接口不能被前端直接调用，会跨域，索性就上了node层直接从服务端获取，解决跨域；
首屏用的是的Egg 的egg-view-nunjucks来处理；选其他模板也ok；
Controller层直接调用service，service调用翻译接口将每个单词的数据回传到模板上进行展示；
由于部门的单词还能看懂就实现了，选词翻译功能；
选词的思路是先把词切分，然后将内容调用controller接口获取翻译内容，再回显；
为了快速实现，直接上了jQuery，方便dom操作；
核心code是：
function doSearch() { const sentence = $('.m_txt').val() || 'Select the choice words that make up the complete sentence.'; const words = sentence.split(' '); console.log("words>>>", words) document.getElementById('search').innerHTML = words.reduce((acc, word) => { return `${acc} <span class="word">${word}</span>`; }, ''); const elements = document.getElementsByClassName('word'); [...elements].forEach((el) => { el.addEventListener('click', () => { $("span").removeClass('selected') el.classList.toggle('selected'); let txt = el.innerText txt = txt.TextFilter() let surl = '/checkKey.do?keys=' + txt $.ajax({ url: surl, success: function (res) { $("#showRes").html(res) } }); }) });}
项目的结构如下；
router.js
module.exports = app => { const { router,controller } = app; router.get('/checkKey.do', controller.news.getKeys) router.get('/', controller.hello.index); router.get('/news', controller.news.list);}
controller/news.js
const Controller = require('egg').Controller;class NewsController extends Controller {
async getKeys() { const ctx = this.ctx let keys = ctx.request.query.keys || 'text' console.log('keys>>>', keys) const newsList = await ctx.service.dictService.getKey(keys) this.ctx.response.body = newsList }}module.exports = NewsController;
dictService.js
const Service = require('egg').Serviceclass DictService extends Service {
async getKey(keys = 'text') { let surl = '//apii.dict.cn/apis/dict3.php?skin=default&q=' + keys const { data: res } = await this.ctx.curl( surl, { data: { }, dataType: 'text' }) return res }}
module.exports = DictService
view/news/list.tpl
<html>
<head>
<title>title</title>
<link rel="stylesheet" href="/public/css/news.css" />
<script src="//unpkg.com/axios/dist/axios.min.js"></script>
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
</head>
<body>
<div id="search"> sentence.</div>
{% for item in list %}
<li class="item">
<a href="{{ item.url }}">{{ item.title }}</a>
</li>
{% endfor %}
<script src="/public/js/list.js">
</script>
</body>
</html>
some configs
config.default.js
exports.keys = "wfmauseegg";exports.view = { defaultViewEngine: 'nunjucks', mapping: { '.tpl': 'nunjucks', },}exports.news = { pageSize: 5, serverUrl: 'https://hacker-news.firebaseio.com/v0'}// add for middleware robots exports.middleware = ['robot']exports.robot = { ua: [/Baiduspider/i]}
plugin.js
exports.nunjucks = { enable: true, package: 'egg-view-nunjucks'}
还有个插曲，复制的英文内容，会加特殊标点，索性处理下，上个方法
String.prototype.TextFilter = function () { let pattern = new RegExp("[`~%!@#^=''?~《》！@#￥……&——‘”“'？*()（），,。.、<>]"); let rs = ""; for (let i = 0; i < this.length; i++) { rs += this.substr(i, 1).replace(pattern, ''); } return rs;}
有兴趣的可以拿去练手；
