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>
以上內容:僅為個人理解