tornado框架學習及借用有道翻譯api做自動翻譯頁面
阿新 • • 發佈：2018-11-23
趁著這幾天有時間，就簡單的學了一下tornado框架，簡單做了個自動翻譯的頁面
僅為自己學習參考，不作其他用途
資料夾目錄結構如下：
.
├── server.py
├── static
│ └── css
│ └── bootstrap.min.css
└── templates
└── index.html
static：主要存放一些css，js及圖片檔案
templates：主要存放html頁面檔案
頁面如下：（可能有點醜）
主要思路是：
本地啟動tornado框架服務 - 瀏覽器訪問127.0.0.1:8888(可自定義埠號) - 返回首頁頁面 - 輸入想要翻譯的內容 - 點選翻譯 - 後臺呼叫有道翻譯的api並將結果返回 - 將結果顯示在第二個框中
主要解釋就放在程式碼中
服務端程式碼：
檔案server.py
#coding=utf-8 import os import json import time import hashlib import random import requests import tornado.ioloop import tornado.web # 首次請求直接返回index.html頁面 class MainHandler(tornado.web.RequestHandler): def get(self): self.render("index.html") # 這是下面點選翻譯按鈕觸發的請求類 class EnglineHandler(tornado.web.RequestHandler):
# 通過get()函式，可以獲取get請求的引數，還有post()函式 def get(self):
# get_argument()是用來獲取get請求的引數 msg = self.get_argument('msg', 'msw')
# 呼叫有道翻譯的api，並接受翻譯結果 result = self.req_data(msg)
# 將結果返回給請求的地方 self.write(result)def req_data(self, kw):
# 以下是破解和獲取有道翻譯api的過程 salt = str(random.randint(1, 10) + time.time() * 1000) s = "fanyideskweb%s%ssr_3(QOHT)L2dx#[email protected]" % (kw, salt) sign = self.md5Encode(s) youdao_url = "http://fanyi.youdao.com/translate_o?smartresult=dict&smartresult=rule" data = { "i": kw, "from": "AUTO", "to": "AUTO", "client": "fanyideskweb", "salt": salt, "sign": sign, "keyfrom": "fanyi.web", } headers={ "Cookie": "[email protected]; JSESSIONID=aaa3-OEP9rPK9_KECL_Cw; OUTFOX_SEARCH_USER_ID_NCOO=1519777863.8355908; ___rl__test__cookies=%s" % str(time.time()*1000), "Referer": "http://fanyi.youdao.com/", "User-Agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.102 Safari/537.36", } res = requests.post(youdao_url, headers=headers, data=data).text return self.filter_content(res) # 將但會結果進行處理 def filter_content(self, value): res = json.loads(value) result = '' result += res.get('translateResult')[0] + '\n\n\n' if not res.get('smartResult'): return result result += '相關內容：\n' for data in res.get('smartResult')['entries']: result += (data + '\n') return result # 將引數加密 def md5Encode(self,msg): m = hashlib.md5() m.update(msg.encode('utf-8')) return m.hexdigest() # if __name__ == "__main__":
# 執行tornado服務配置 settings = { "template_path":os.path.join(os.path.dirname(__file__), "templates"), #模板路徑 "static_path":os.path.join(os.path.dirname(__file__), "static") , #靜態檔案路徑 "debug":True } app = tornado.web.Application([ (r"/", MainHandler), (r"/engline", EnglineHandler) ], **settings) app.listen(8888) tornado.ioloop.IOLoop.instance().start()
開啟命令： 直接執行 python3 server.py，然後開啟瀏覽器就可以看到頁面
index.html部分程式碼：
<html>
<head>
<title>fanyi-m</title>
<link type="text/css" rel="stylesheet" href="/static/css/bootstrap.min.css" />
</head>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
html {
height: 100%;
}
.buttonc button{
margin:20px 10px;
}
</style>
<script src="http://runjs.cn//js/sandbox/jquery/jquery-1.8.2.min.js"></script>
<body>
<nav class="navbar navbar-inverse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</nav>
<div class="container">
<div class="row">
<div class="col-md-5">
<textarea id="lineso" class="form-control" rows="8"></textarea>
</div>
<div class="col-md-2 buttonc" style="text-align:center">
<button type="button" class="btn btn-default btn-lg active">auto</button>
<button onclick="engline()" type="button" class="btn btn-primary btn-lg active">翻譯</button>
</div>
<div class="col-md-5">
<textarea id="linest" class="form-control" rows="8"></textarea>
</div>
</div>
</div>
</body>
<script>
// 沒什麼用，主要是美化導航欄的
$('.navbar-nav li').click(function(){
$(this).addClass('active').siblings().removeClass('active')
})
// 翻譯按鈕的單擊事件
function engline(){
var oldmsg = $('#lineso').val()
// 判斷輸入框是否為空
if(oldmsg == null || oldmsg == '' || oldmsg == undefined){
alert('input content Please')
}else{
//alert(oldmsg)
// 不為空則向該地址，發起ajax的get請求
$.ajax({
url:"http://127.0.0.1:8888/engline",
data : {'msg':oldmsg},
type : 'GET',
timeout : 3000,
success: function(data){
if(data){
$('#linest').val(data)
}else{
alert('not result')
}
},
error: function(XMLHttpRequest, textStatus, errorThrown){
//檢視錯誤資訊
alert(XMLHttpRequest.status);
alert(XMLHttpRequest.readyState);
alert(textStatus);
}
})
};
}
</script>
</html>
以上內容：僅為個人理解