有些日子沒寫筆記,O(∩_∩)O哈哈~實在是肚子沒有墨水啦!今天不寫數據結構啦!多懷念研究數據結構的日子啊!
可是呢!最近有個項目要搞圖像管理方面的,具體內容就不說啦!我們今天來實現一個簡單的相冊管理系統!
使用的系統是linux ubuntu;python2.7 ;django版本可以通過以下方式查詢;
我的是1.8.1目前是最新的吧!
好啦!看看我們將要完成的任務;
1)實現上傳圖像的功能;
2)在圖像管理界面顯示每一張圖像的名字,還有縮略圖;
簡單的說django已經幫我們做啦大部分工作,我們需要寫的東西非常簡單的;
Solution
1)創建項目;
django-admin.py startproject myproject
2)進入項目
cd myproject
3)創建應用
django-admin.py startapp myapp
4)查看你當前的目錄是不是像下面這樣的;
好啦!工程創建完畢;配置配置啦!不要說到配置就怕啦!(以前配置apache我就挺煩的)
1)進入內層的myproject目錄
cd myproject
2)編輯settings.py文件(目前需要修改兩處)
注意,我們與其他的內容保持隊形:D添加好myapp后;由於我們需要上傳文件,所以暫時需要禁用csrf..
好啦!配置完成啦!我們可以進入到myapp里面寫些自己想實現的東西啦;
1)用vim打開models.py
2)執行makemigrations命令
3)執行migrate命令
4)執行syncdb命令(同時選擇創建管理員用戶)
5)好啦!一切完成后可以運行服務器啦;
6)輸入127.0.0.1:8000/admin/網址;
好啦!這個從模型編寫到在網站上顯示這個過程太快啦!你可以暫時休息休息,思考一下啦;
並且,試着去測試一下圖像是否能夠上傳?問問自己圖像到底會上傳到什么位置?
現在能不能看到圖像的縮略形式呈現呢?
點擊+號,添加一張圖片看看就知道啦;
結果你不要驚訝!看看如下的結果是不是和你一樣呢?
我們沒有看到縮略圖的出現。現在我們解決它;
1)我需要一個方法來返回一段html語句,用html來顯示圖片;
看起來image_path有些怪怪的,不過先不要管它,待會我們會知道它到底是什么;
2)注冊我們這個方法屬性到管理模塊;
3)下面可以到瀏覽器測試啦;
我們得到的結果,確真的只是一段html源碼,我們可是希望它能夠顯示一張圖片的;怎么辦呢?
4)我們發現images/images/1414.jpg這個地址有些難懂,到底是存在什么位置啊;
雖然是我們親自上傳的,但是真的搞不清楚它存在的位置;因此,我們就自然想着要自己定義一個專用位置;
vim settings.py
MEDIA_ROOT本身就是一個全局變量,但是默認值是空的,因此我們給自己設定一個目錄;
注意,landpack是我的用戶名,你應該換成你自己的用戶名字例如,peter等;
檢查一下,你是否創建了這個目錄哦;
5)我們現在可以再次嘗試測試啦!我們這次主要上傳一張相片,看他是不是老老實實的存到指定位置;
好啦!頁面顯示上傳成功啦!同樣,我們檢查的目錄下面的images目錄下有了一個1414.jpg文件。我們上傳成功,保存位置符合指定要求;
可是呢?我們的頁面還是沒有顯示我們的圖片;為啦節省空間,我就截盡量小的圖表示啦;
仔細觀察你會發現,src的地址並不是我們的圖片存放的位置,這樣怎么可以顯示圖片呢。
6)因此,我們現在要再次殺回settings.py設置一個叫做MEDIA_URL的變量;
現在運行服務器程序,如果你壓根就沒有停止python mange.py runserver那么請刷新一下瀏覽器哈;
還是沒有顯示,這時候你可能已經着急啦!我們先思考一下是不是路徑還是不對呢?
哈哈,答對啦!就是路徑不對,你看看這個可不是我們希望顯示的圖片所在位置;
7)我們看看我們在models.py里面定義的內容;
我們發現錯誤的原因是images多余啦!我們現在就把他刪除啦;
改成啦下面的形式,刷新瀏覽器,故障依舊;實在受不了啦吧;要知道為了解決這個問題我可是google了三天呢;
我們發現,這個位置的確是我們MEDIA_URL設定哪個,圖片名字也對啦!怎么就不能顯示呢?還記得我們的圖片保存位置嗎?我們需要怎么通過這個url映射到我們對應的圖片實際存放位置呢?這時候我們想到了urls.py文件啦;
8)首先你要知道讓urls知道你將要使用settings.py里面定義的MEDIA_ROOT文件;當然 patterns你應該知道它的作用啦;
下面就是完成映射動作;
9)接下來,刷新瀏覽器,發現還是不能顯示圖片;實在受不了啦。我們繼續觀察;
發現html語句咱們寫height=40是不是應該改成height="40"啊;
可是改完以后還是不行,實在不行啦只有用最簡單暴力的方法啦!
直接報地址放到瀏覽器上測試;
第一次測試結果是這樣的;
很快,我們確定啦原因是端口號不對啦,我們使用的是8000,這里得地址沒有體現出來;
第二次測試;
結果如下;
哈哈,我上傳的圖片有些多啦!不好意思,也是為了直接將來回憶起來能夠更加清晰;
10)現在我們可以邁開腳步往settings.py走去,修改MEDIA_URL的地址加上端口號;
結果呢?還是沒有顯示出來,這個問題就是傷腦筋,我之所以有重現這些,是因為我實在是覺得這個問題比較棘手,因此記錄下每一步嘗試;
你現在肯定在想一會是html文件,一會又是python文件,實在是受不了啦!咱們到底能不能分開寫;
當然可以啦!!
首先,我們使用一個render_to_string的功能;
打開我們的models.py文件;
那么咱們怎么引入render_to_string 呢?
好啦!現在我們需要的全部是python代碼已經寫完,可以放心的去寫html文件啦
11)那么首先需要一個地方保存html文件,好吧現在咱們是在myapp目錄下;
然后你得進入templates再動手;
接下來是怎么去寫咱們的html文件啦;
好啦!現在終於可以測試啦;
好啦!結果終於讓我們有高興起來啦!不過你現在肯定再想,為什么剛才的寫法就是無法顯示圖片呢?那得自己去思考思考啦。
最后,不得不得表示歉意,沒有一句可以copy的代碼,全是截圖;
原因有二:
第一,我是在虛擬機上寫的代碼,在mac上寫的博客,所以無法復制粘貼代碼;
第二,我們還是自己寫比較記得牢些哈;