第五期 · 實踐：豆瓣影視查詢（1）- 產品功能規劃與開發環境搭建

開篇綜述

很久沒和大家招呼了，我還活著，勿念。

通過前四期的簡明教程，相信大家對Python與Flask有了更進一步的認識，如果只是看不實踐那肯定是紙上談兵，所以從這一期開始我們將動手做一點東西，用於對之前的學習加深理解，同時引出後續我們要學習的新內容。

簡明教程之後也會保持這個特色：即連續幾期的知識點講解後，會插入幾期的實踐文章。實踐篇里會有意安排一些對以前所學內容的實際應用，同時也有意添加一些以前還沒學到，但馬上教程會談及的新內容，這樣實踐將作為承上啟下之用，幫助大家溫故而知新，這就是簡明教程的特色之一。

簡明教程的另一個特色在於「完整的實踐」。與其他專欄教程很大的不同在於，簡明教程較「完整」的涉及「做一點東西」的全流程環節，大家通過簡明教程將不僅僅了解和學習到Python或者編程的相關知識，而是做一個互聯網產品所需要的全部。

之前我有談到過簡明教程隱含一個順序邏輯 —— 文章內容也從淺到深，從窄到寬，從易到難，這樣之前已經多次談及，大家已經了解的內容後續將漸漸不再詳細提及或一帶而過，所以下一次實踐時，大家就看不見這個啰里八嗦的「開篇綜述」了，23333...

實踐概述

我們將一起做一個Web程序（網站），從產品立意一直到發布到線上。這個程序將會用到豆瓣的API。用戶基於這個網站可以輸入關鍵字，檢索影視劇條目，並查看所檢索的影視劇的相關信息，比如海報、上映時間、類型（電影還是電視劇）等，其中最重要的莫過於豆瓣評分。總的來說，這個程序類似一個簡單的影視劇搜索引擎。

通過這個程序的實踐我們將學習和接觸到：

t1. 初步認識和了解RESTful。

t2. 了解一些基本的產品設計方法和工具。

t3. 簡單了解如何使用第三方公開API。

t4. Python本地開發環境的搭建。

t5. 簡單了解和使用前端模板框架。

t6. Sass的基本概念和簡單使用。

t7. Requests包的基本使用。

t8. 基於Python+Flask做一個簡單的影視劇搜索引擎（複習前面的內容）。

本次以及以後的教程，都是基於Mac系統下的開發環境，如果你使用的是Windows，一些細節可能稍許不同，你可以搜索一下區別。很抱歉因力所能及的原因，無法為你提供Windows下的方式。

順便說一句，希望大家做好這個程序後保持本地備份或運行，因為後續的實踐我們還將基於這個小程序去擴展和豐富他。並且這個小程序並不太無聊，還是有生存的意義的。

本篇概述

在本篇中，我們將了解和學習做一個互聯網產品的最前置工作。在編寫代碼之前，我們先要思考清楚做什麼和怎麼做，以及如何利用工具快速搭建一個本地開發環境。

產品方案

我們已經明確這次要做的是一個小程序，即簡易的影視劇搜索引擎。我們雖然通過前面的學習掌握了一些知識，但能力尚且有限。所以這次的目標簡單點，我們要做的就是下面這張圖的內容：

這張圖俗稱「腦圖」，又名「思維導圖」，是產品設計師（產品經理）常用的工具和方法之一。市面上專門用於繪製這種圖的軟體主要有XMind和MindManager兩款，後者在Windows下的版本出色，前者則在Mac下的版本出色。由於我用蘋果電腦，這張圖由XMind（免費版）繪製。

MindManager和XMind都是商業付費軟體，但都可以免費使用一段時間。

這次實踐之所以引入這樣的軟體，是希望大家學會使用這個工具。這個工具十分有助於編程之前釐清程序的功能架構，在後續程序拓展時，通過不斷維護更新，這張圖的地位會愈發重要。當然，大家也可以用在其他方面，比如整理自己的知識脈絡。

兩款軟體的使用都非常簡單，這裡不多贅述相關使用教程。

PyCharm

我們目前只會使用Python和Flask，因此本次實踐的程序也基於他們構建出後端服務。

Python並沒有官方欽定的開發工具，而市面上最受歡迎、最易用的就是PyCharm。PyCharm是一種IDE開發工具，所謂IDE是指：集成開發環境（IDE，Integrated Development Environment ），你可以理解為你要做一頓飯，IDE把鍋碗瓢盆醬醋油鹽都給你提供了。你可能首先接觸過Sublime這樣的編輯器，然而我並不推薦你剛入門時使用類似的工具，因為這些工具需要耗費你一些時間去定製，他們適合高手把玩，不適合新手學習。

PyCharm由國外軟體廠商JetBrains開發。JetBrains多有名你問問身邊寫Java的同事就知道了。所以後續教程我和大家分享寫移動端的時候，也會推薦他們家的AppCode。

PyCharm分兩個版本：專業版（Professional）和社區版（Community）。專業版需要付費，提供完整的功能；社區版免費，功能被閹割了很多。我後續的教程是基於專業版講解的，請大家下載和使用專業版：PyCharm :: Download Latest Version of PyCharm

如前所述，專業版是需要付費的，有錢官方買個正版，錢少去淘寶，這個我就不多講了，你懂的。

創建後端開發環境

1、PyCharm下載後，安裝完畢。首次啟動出現如下界面：

3、選擇Flask框架：

4、接著我們要準備建立一個虛擬環境，這裡請大家照做，稍後詳細說明：

5、選擇虛擬環境的Python版本，以及建立一個虛擬環境的文件夾，這裡注意：

1）虛擬環境的Python我選擇的是最新的3.6。如果你的不是最新的，選擇3.x的版本都可以，後續教程都是基於Python3講解。如果你想用最新的3.6，你可以到 Welcome to Python.org 下載最新版本的安裝包安裝，之後下面界面的第三個下拉框里會讀取到你安裝的最新版本，你選擇該版本即可。

2）下面的界面中，Name是指項目的名稱，你隨意取名即可（別中文喲）。Location是虛擬環境文件的放置地址。當你填寫Name時，Location會自動補全Name路徑，你需要再加一個斜杠 /env（最後會詳細說明為什麼是這個名字）。因為你如果不這樣做，虛擬環境的文件包會安裝到你的Name 文件下，而一會你會在這個文件夾里放置你的代碼，那看起來就亂了。Base interpreter是指虛擬環境基於的Python包，這個配置決定了虛擬環境中Python的版本。

點擊OK，你會看到一個進度條，全部完成後就建立好了一個項目的虛擬環境。

6、虛擬環境創建完畢後，你要注意外面還有一個Location，並且是沒有設置好的。這個Location是指項目文件的地址，即放置我們編寫的代碼文件的地方。這個地址設為之前界面里的Location地址，並去掉 /env即可。

7、點擊Create（創建），會彈出一個窗口。窗口裡文字的意思是詢問你是否創建一個默認的flask工程。選擇是或者否都可以，請你自己嘗試一下兩者的區別。注意，點擊【No】是創建默認的，反之才是不創建默認的。

8、成功創建一個項目後，你會進入到IDE的開發界面。如果你讓PyCharm為你創建了一個默認的flask工程，會看到大致如下圖的文件結構。

我說大致如下的意思就是並不是一模一樣的，我下面圖裡有幾個文件你可能沒有，這沒關係。

9、點擊IDE窗口下方的Terminal，打開命令行窗口。

PyCharm會自動進入虛擬環境。之前的第二期中有告訴大家激活虛擬環境的方式是source venv/bin/activate，PyCharm則幫你輸入了這條命令。這就是IDE智能和爽的地方。

10、安裝依賴包。當然，如果你選擇PyCharm幫你創建默認的flask工程，打開IDE編輯窗口時你會注意到右下角有進度條，是表示在下載和安裝flask的包。但這裡我還建議你手動運行一下安裝命令，藉此熟悉一下環境搭建，所需的命令如下：

t1）pip install flask

t2）pip freeze > requirements.txt

如果flask已經安裝，則會提示已安裝，否則你會看到下載安裝的過程。

命令的第一條是安裝flask。

命令的第二條是將已安裝的包記錄到requirements.txt這個文件中，這樣就形成了你在第二期里看到的，如何在另一台電腦（伺服器上）安裝程序必須的擴展時用到的requirements.txt這個文件。

如果你細心，你會發現命令行程序提示你pip版本過舊，你可以使用如下命令升級依賴包：

tpip install -U pip

同樣，這個升級命令你只要將-U後面的pip改成別的包名，就能升級別的包了。需要注意的是，除非你很清楚你手動安裝的某個包，否則其他包不要隨便升級，因為容易遇到包版本引起的程序故障。

至此，後端開發環境構建告一段落。

創建前端開發環境

我們可以預料到本次實踐的程序有一些前端界面需要開發。你可能會認為寫前端的話用別的編輯器或者IDE，而不是PyCharm，因為這是寫Python的呀，其實不是這樣。

PyCharm的開發商JetBrains旗下有專門寫前端的IDE工具叫WebStorm，和PyCharm界面長得很像。實際上JetBrains旗下針對各種語言的IDE界面都像親兄弟，然而我不是要推薦你用WebStorm寫前端，那是殺雞用牛刀。

我想說的是，他們之所以長的像就是有一層含義：一個專門針對某個語言的IDE，有時稍加配置就能用於另一門語言的編程。

寫前端的話，針對本次實踐，我們至少有這樣兩個要求：

t1）支持前端相關語言：HTML、CSS、JS等。

t2）支持前端文件壓縮：Minifier工具。

第一點PyCharm已默認支持。關於第二點是這麼回事：你可能見到過，一些前端方面的文件，文件名里會有.min字樣，例如xxx.min.css，xxx.min.js等，帶min字樣的文件是指被壓縮過的文件，你打開這種文件，你會發現代碼都是沒換行的，看起來亂糟糟的。你可以嘗試在同一路徑下去訪問去掉.min的文件，通常也會獲得一個有換行的格式文件。這種min文件本質就是壓縮源文件形成的一個精簡格式的文件，這個文件比源文件更小，就像你下的壓縮包.rar和.zip一樣，目的都是為了方便快速傳輸，說白了就是讓網站訪問者打開網站更快 —— 因為要下載的文件更小了。當然，這種壓縮技術並不是單純的去掉空格這麼簡單，還會有一些其他方式減小文件體積，這樣做都是因為終端用戶不會關心你文件里的代碼，他們只要打開網站快就行。

我們需要配置一下PyCharm使其滿足上面的第二點需求。這裡就要額外的安裝一個包：YUI Compressor。YUI Compressor是Yahoo前端技術團隊弄出來的一個前端開發工具，我們用這個工具目的主要是壓縮我們的CSS文件和JS文件。這個工具的下載地址：yui/yuicompressor，下載得到一個.jar格式的文件即可，之後放到某個文件夾中。

打開PyCharm的配置界面：點擊PyCharm菜單，再選擇如下圖所示的子菜單：

找到Tools下面的File Watchers：

點擊【+】按鈕，看到如下圖所示的列表，我們要用到的是最後兩個：

隨便點擊一個CSS或JS的，看到的界面是類似的，以CSS為例子，看到如下圖的界面。除了Program，其他的配置都不要動。

Program選擇我們剛下載的.jar包的地址，點擊【ok】就行，同樣的方法添加好JS的即可。

這個File Watchers配置實際就是一個文件監控，會根據你添加的擴展去監控文件並完成相應的工作。而我們添加兩個監控分別是針對CSS和JS文件的，一旦我們後面編輯CSS或JS文件時，File Watchers會監控並基於YUI Compressor幫助我們自動生成對應的壓縮文件。

至此，我們本次實踐所需的前端開發環境也配置完畢。

這樣，我們只要使用一個PyCharm就把前端和後端的編程所需給包圓了。

重點與疑難說明

最後，有關本節的一些重點和讓人容易疑惑的地方，作如下說明：

Python環境：PyEnv 與 Virtualenv

如果你網上經常搜索一些Python教程，一定見到過pyenv與virtualenv。有時這兩個東西讓人傻傻分不清。

pyenv與virtualenv實際上根本不是一個東西，兩者使用場景也很不一樣。

pyenv是一個環境隔離（管理）工具。他的作用場景在於，如果你電腦里有Python2.x，但你想使用Python3.x，有時遇到這樣一個問題：在有些操作系統（比如蘋果電腦的）中，Python2.x是操作系統內置的，是因為操作系統中一些東西要依賴Python2.x。操作系統並不允許你隨意升級和卸載掉老版本的Python，如果你強行為之，操作系統可能會出現故障。為此我們必須安裝一個Python3.x。但安裝Python3.x以後，操作系統並不會默認啟用新版本的Python，如果你需要使用新版本的Python，你需要進行一些設置，而多數情況下你又會時常想用完新版本的Python回到老版本，這樣新老版本來回切換，繁雜而枯燥的配置工作周而復始的進行實在是浪費時間，而且一不小心會搞亂系統原來的環境。安裝pyenv後，通過pyenv可以很方便的切換新老版本的Python。

virtualenv是一個虛擬環境工具，他能基於你當前系統中存在的Python提供一個虛擬環境。我們上面的教程所謂的虛擬環境，就是使用virtualenv構建。只不過PyCharm很智能，你只需要配置下目錄，他就自動幫你把虛擬環境建好了。

這樣，再具體一點的不同點在於：

t1）pyenv在讓你在操作系統層面切換到不同版本的Python。virtualenv不能做這個切換，而是能基於當前操作系統中已有的Python版本，在你指定位置創建一個指定版本的虛擬環境。

t2）pyenv是隔離不同版本的Python。virtualenv是隔離同一個版本或者不同版本的Python環境。

t3）pyenv隔離的Python通常每一個版本同時只有一份存在，比如pyenv隔離出一個Python3.6，那操作系統中就只有一份Python3.6，這意味著你此時pip安裝的包都在這個Python3.6下。而virtualenv虛擬的環境不受數量與版本限制，你願意做多少個Python3.6的虛擬環境都行，當時激活的是哪個虛擬環境，則pip安裝的包都在這個當前激活的環境下。

再進一步說明，比如你當前操作系統中有Python2.6，你可以再安裝Python2.7、2.8、3.2、3.5、3.6然後用pyenv來回切換。

如果你的程序都是基於Python3.x寫的，你可以用virtualenv創建3個Python3.5的虛擬環境，4個3.6的虛擬環境。

當你使用pyenv切換到3.6環境下時，你運行pip安裝的一切依賴包都安裝到了操作系統中的Python3.6目錄下。

當你使用virtualenv創建虛擬環境並激活其中的一個（比如上面4個3.6虛擬環境的第2個）時，即使你現在操作系統是使用pyenv切換成了2.7，你當前在虛擬環境下運行pip安裝的一切依賴包都安裝到了當前這個（上面4個3.6虛擬環境的第2個）中，並沒有安裝到操作系統中的3.6中，也沒有安裝到4個虛擬環境的其他3個中。

pip最新版本的警示信息：--format

如果你升級到了pip的最新版本，運行一些命令時會看到紅色文字提示（有時不是紅色）：You can use --format=(legacy|columns) (or define a format=(legacy|columns) in your pip.conf under the [list] section) to disable this warning.

這段提示看起來是很要緊的錯誤，其實不是。這只是個警告提示信息，意思是告訴你pip的包清單後續會採用更規範的格式。你有兩種方式避免這種警告信息的出現：

t1）運行出現這種提示的命令時，加上：--format= columns。

t2）在~/pip/pip.conf 中加入format=columns。

我建議你們用第一種就行，當然，你不用理會現在也沒什麼問題。

PyCharm創建虛擬環境會出現（1）（2）（3）……等多個

好奇的同學如果點擊查看PyCharm的項目配置界面（下圖），有時會看見虛擬環境清單里，有好幾條同一個路徑但是尾綴（1）（2）（3）的虛擬環境。強迫症的同學如果見不得這種，可以刪掉帶尾綴括弧的虛擬環境，只留不帶括弧的，並將當前項目選擇到不帶括弧的虛擬環境路徑中。但如果之前你用的是帶尾綴括弧的，可能擴展包都安裝到了那個虛擬環境中，因此你需要重新安裝一遍包。

/env和requirements.txt

虛擬環境都經常於項目（代碼目錄）下再創建一個目錄，命名是env、venv或ENV，是取的virtualenv末尾的字母，這是一個習慣命名，而並不是要求你只能取這個名字。

requirements.txt是依賴包清單，你可以在得到這個文件後（命令上面有），在其他地方運行 pip install -r requirements.txt，系統會照著這個文件所列的清單安裝程序所需的全部依賴包。命名requirements.txt也是約定俗成，並且不建議你修改這個名字，因為IDE會自動識別這個名字的文件並做一些相關工作。

好，本節就到此為止。如果大家當前的開發環境不是上面這樣的，推薦大家把自己的開發環境配置成上面這樣。

我們下期再見！