使用flask來做一個小應用
前言
上周 @萍姐 問我如何抓取天貓上面店鋪的評分，看了下挺簡單的，于是花了點時間寫了個Python腳本，加上web.py做成一個web服務，使用起來還不錯，今天來看的時候發現當時為了方便直接用web.py開發有點簡陋，自己也好久沒用flask寫過東西了，打算用flask再寫一遍，順便復習下舊的知識，如果你是flask初學者，可以參考這個例子。
提示： 博主默認你已經具備了Python的基礎知識，已經能夠很順暢的編寫一些Python腳本， 否則接下來你會比較難看懂。
舊版
這里先給出舊版本的一些使用截圖，初始化的時候的樣子
模糊查詢
精確查詢
技術
這個應用比較簡單，所使用的技術也比較少，主要有以下技術要點
- requests模擬請求
- 正則匹配關鍵字
- web.py搭建web環境
- vue.js做數據自動綁定
是不是很簡單？
在這個小應用中使用web.py的時候目錄結構是這樣的
其中static目錄里面存放的是靜態資源
結構相當簡單
python代碼
這里給出全部的Python代碼
#!/usr/bin/env python
coding=utf-8
import requests
import json
import web
import sys
import re
reload(sys)
sys.setdefaultencoding('utf8')
urls = (
"/", "index",
"/query", "Query"
)
render = web.template.render('static', cache=False)
class index:
def GET(self):
return render.index('static')
class Query:
def POST(self):
keywords = str(web.input().get('shopname'))
url_base = "
headers = {"User-Agent": "iphone7"}
try:
result_base = requests.get(url=url_base, headers=headers, timeout=15).content.replace('\n', '').replace(' ','')
infostr = re.findall(r'j_shop_moreshop_more\">(.+?)</div>', result_base)
shoplist = []
for item in infostr:
scorelist = re.findall(r'\">(.+?)</span><iclass=\"', item)
thisShopname = re.findall(r'<span>(.+?)</span>', item)[0]
shoplist.append('{"shopname": "'+ thisShopname +'" , "dsr": "'+scorelist[0]+'", "service": "'+scorelist[1].split('">')[1]+'","ship": "'+scorelist[2].split('">')[1]+'"}')
return json.dumps({"code": 0, "rows":list(set(shoplist))})
except Exception, e:
print e
return json.dumps({"code": -1, "msg": "沒查詢到相關店鋪"})
if name == "main":
app = web.application(urls, globals())
app.run()</code></pre>
前端HTML代碼
$def with (urlbase)
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="renderer" content="webkit">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hello world</title>
</head>
<body>
<input type="text" name="shopname">
<input type="button" value="提交" @click="query">
<div class="info" v-for="item in shopes" style="border-bottom: #ccc 1px dashed">
<p>店鋪：{{ item.shopname }}</p>
<p>描述相符:{{ item.dsr }}<br>服務態度:{{ item.service }}<br>物流服務:{{ item.ship }}</p>
</div>
<script type="text/javascript" src="$urlbase/jquery.min.js"></script>
<script type="text/javascript" src="$urlbase/vue.js"></script>
<script type="text/javascript" src="$urlbase/index.js"></script>
</body>
</html>
js代碼
var mainVM = new Vue({
el: 'body',
data: {
shopes:[
{
shopname:'未查詢',
dsr:'未查詢',
service:'未查詢',
ship:'未查詢'
}
]
},
methods:{
query:function(){
var _self = this,keyword = $('input[name="shopname"]').val();
$.post('/query',{"shopname":keyword},function (data) {
if(data.code == 0){
_self.shopes = [];
for(var k in data.rows){
var thisdata = JSON.parse(data.rows[k]);
_self.shopes.push({
shopname:thisdata.shopname,
dsr:thisdata.dsr,
service:thisdata.service,
ship:thisdata.ship
})
}
}else{
alert('查詢出錯，錯誤信息：'+data.msg);
}
},"json");
}
}
});</code></pre>
可以說代碼部分也是相當簡單，前端HTML和js的代碼就不解釋了，很容易看懂，這里只對app.py做簡單的解釋。
觀察天貓的搜索頁面，發現天貓pc端跟手機端頁面都可以輕松抓取，但是使用手機端頁面會更加快速方便，因為結構上更加清晰，而且數據量少，抓取速度更快
如何實現只抓取手機端頁面的數據呢？很簡單，這里我們只需要定義以下HTTP的請求頭信息就可以了，也就是headers，如下定義
headers = {"User-Agent": "iphone7"}
天貓的搜索鏈接是使用的get請求，地址為
"https://list.tmall.com/search_product.htm?q="+keywords
參數只需要傳入一個關鍵字就可以了，前端使用ajax把數據POST給服務端，服務端接收使用下面的這句話
keywords = str(web.input().get('shopname'))
是不是馬上就搞定了關鍵的幾步了？接下來發起請求拿到數據就可以了
result_base = requests.get(url=url_base, headers=headers, timeout=15).content.replace('\n', '').replace(' ','')
注意，這里我把返回的結果中的換行跟空格都去掉了，因為我這里所需要的數據很簡單，為了匹配方便我直接給替換成可空，也就是后面的這個
.replace('\n', '').replace(' ','')
然后根據正則匹配的字符串進行遍歷組合成結果返回給前端就好了，前端直接使用vue.js進行數據的綁定，幾乎不需要DOM操作就可以完成結果列表的渲染，棒！（這里強行安利一波vue.js）
前后端通信使用json進行數據交互，友好而且方便。
重寫
上面給出了所需要的技術要點和關鍵代碼，那么現在我需要使用flask重寫一遍，當然了，關鍵部分還是不用變動，只是處理方式上稍微有些差異，如果會用web.py，那么使用flask上手應該是很快的。
1、web.py的處理方式
在使用web.py的時候我們啟動一個web服務很簡單，通常執行以下命令
python app.py
這樣我們就啟動了一個web服務，但是這樣的話會有很多問題，主要有以下幾點
- 不能關閉終端窗口，否則應用結束，一般用于調試
- 多個應用的時候公用Python環境會引起沖突
注意：
web.py并不適合高并發的應用，但是作為一般應用還是可以輕松應對的。
以上命令執行后web.py會在8080端口綁定一個web服務，如果你想創建多個應用，那么你應該在后面加上端口號
如果你使用了多個域名指向一臺機器的多個應用，那么你應該使用nginx來轉發請求，而不是直接輸入域名加端口號
在遠程vps上運行開發完成的應用時，你可以執行以下命令把web以后臺服務的形式運行
nohup python app.py
這種方式簡單粗暴，但是僅僅作為臨時方案是可行的，運行上述命令后你可以安心的關掉終端，而且web服務依然在運行，但是一旦重啟了服務器，那么就得重新登錄vps再次執行命令，不是很方便。
2、flask的處理方式
flask和web.py類似，它自帶了一個web服務器，默認綁定在5000端口，但是它本身自帶的web服務器并不是很好，安全性也不高，作為開發使用還是足夠的，正式生產環境中不太建議直接使用flask自帶的web服務。
好了，現在可以開始了，為了解決上面提到幾個問題，這里咱們來使用一個新東西，上面說了多應用環境沖突的問題，在這兒可以使用一個叫做“虛擬環境”的東西解決。
“虛擬環境”就是直接復制一個Python的全局環境，但是是獨立出來的，你可以在這個環境里面安裝各種模塊，而且不會影響到Python的全局環境，也就是說如果你把其中的一個“虛擬環境”給玩壞了，起不來了，那么你只需要刪掉壞的“虛擬環境”重新創建一個就可以了，這些操作都不會對Python全局環境有任何的影響，安全又方便，下面咱們就來創建一個“虛擬環境”。
博主使用的開發環境是Ubuntu 16.04 并沒有自帶這個軟件，使用下面的命令安裝
sudo apt-get install python-virtualenv -y
安裝完之后測試下是否安裝成功
~$ virtualenv --version
15.0.1
接下來咱們創建一個叫 tmall 虛擬環境用于運行我們的應用
~$ virtualenv tmall
Running virtualenv with interpreter /usr/bin/python2
New python executable in /home/kbdancer/tmall/bin/python2
Also creating executable in /home/kbdancer/tmall/bin/python
Installing setuptools, pkg_resources, pip, wheel...done.
創建的時候會給出創建的位置，如果你需要在指定的目錄下面創建虛擬環境，那么你得切換到目標目錄，然后執行創建命令，博主這里直接在自己的用戶目錄下面執行的創建命令，自然就是在用戶目錄下面生成的一個 tmall 文件夾，文件夾下面自動生成了Python環境
安裝完之后需要將這個環境激活才能使用，執行下面的命令進行激活
~$ source tmall/bin/activate
(tmall) :~$
接著在虛擬環境中安裝flask環境（博主默認你的Python全局環境中已經有了easy_install或者pip），博主這里使用pip進行安裝
~$ pip install flask
好了，所需要的環境配置完成，接下來就可以開始寫小應用了。
3、開始編碼
編碼這個環節應該是快速而且高效的，上面我們已經給出了舊代碼，關鍵部分直接復制過來就能用，稍微改改就可以跑起來了。
flask默認使用Jinja2作為模板引擎，Jinja2在進行模板渲染的時候通常會識別{{}}中的內容進行填充，但是這里博主遇到了一個尷尬的問題，Vue.js也是使用的{{}}作為標識符進行渲染，這就導致了沖突，訪問頁面的時候就會出現如圖所示的錯誤
當然，解決方法還是有的，參考這篇文章進行配置 解決Jinja2與Vue.js的模板沖突
解決思路也比較簡單，就是在需要Jinja2渲染的時候添加一個空格，而vue.js渲染的時候則不需要空格，python腳本如下
from flask import Flask, render_template
app = Flask(name)
app.jinja_env.variable_start_string = '{{ '
app.jinja_env.variable_end_string = ' }}'</code></pre>
前端HTML代碼修改后就成了這樣
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="renderer" content="webkit">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hello world</title>
</head>
<body>
<input type="text" name="shopname">
<input type="button" value="提交" @click="query">
<div class="info" v-for="item in shopes" style="border-bottom: #ccc 1px dashed">
<p>店鋪：{{item.shopname}}</p>
<p>描述相符:{{item.dsr}}<br>服務態度:{{item.service}}<br>物流服務:{{item.ship}}</p>
</div>
<script type="text/javascript" src="{{ url_for('static', filename='jquery.min.js') }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='vue.js') }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='index.js') }}"></script>
</body>
</html>
Jinja2默認會在templates目錄下面尋找模板文件，而靜態文件比如css，js之類的默認存儲在static目錄下面，這里我們按照Jinja2的默認設置稍微進行修改，當然，如果你想自定義模板目錄或者靜態文件的目錄也是可以的，只需要稍微的配置下就行了，博主這里按照默認的規則來設置。
很快，我們的小應用就跑起來了
這里還是需要提到幾個關鍵點：
flask中接收前端傳遞過來的參數用到的是request對象，前端使用json把數據post到后端，后端使用下面這句進行接收
request.form.get('shopname')
更多詳細使用方法參考這個地址 淺入淺出Flask框架：處理客戶端通過POST方法傳送的數據
接著測試下小應用能不能正常運行
OK，測試通過。
4、關于部署
由于這個小應用比較簡單，部署起來可以按照常規的部署方式進行，但是并不適合生產環境，所以這里暫時不寫如何部署，下次有大型網站案例的時候再詳細寫如何部署以及優化。
5、完整代碼
python部分
#!/usr/bin/env python
coding=utf-8
from flask import Flask, render_template, request
import requests
import json
import re
app = Flask(name)
app.jinja_env.variable_start_string = '{{ '
app.jinja_env.variable_end_string = ' }}'
@app.route('/')
def index():
return render_template('index.html')