在前一篇我們已經建立了一套資料庫用來存儲我們的雲資源資料以及有了一個簡單的admin背景,但是這個背景畢竟太難看了,我們可以自己搭建一個更漂亮的界面來滿足上司的需求,那麼這個時候就需要template。在template中,我們存放HTML頁面,并通過Django的API能夠調用這些界面,同時能夠把一些資料傳遞到這些頁面上。
1.我們在之前已經建立好的Online檔案夾裡建立一個templates檔案夾。
2.url.py裡制定通路的網頁路徑,在這裡我們先制定兩個,一個是線上伺服器的界面,另一個是資料庫:
1
2
3
4
5
6
7
8
<code>from django.conf.urls </code><code>import</code> <code>url</code>
<code>from django.contrib </code><code>import</code> <code>admin</code>
<code>import</code> <code>Online.views</code>
<code>urlpatterns = [</code>
<code> </code><code>url(r</code><code>'^admin/'</code><code>, admin.site.urls),</code>
<code> </code><code>url(r</code><code>'^alionlineecs/'</code><code>, Online.views.alionlineecs),</code>
<code> </code><code>url(r</code><code>'^rds/'</code><code>, Online.views.rds),</code>
<code>]</code>
3.在views.py裡寫上對應的函數:
9
10
11
12
13
14
15
16
17
<code># -*- coding: UTF-8 -*-</code>
<code>from django.shortcuts </code><code>import</code> <code>render</code>
<code>from .models </code><code>import</code> <code>alionlineECS,RDS </code><code>#這裡的import是來自model.py裡的</code>
<code>def alionlineecs(request):</code>
<code> </code><code>data = alionlineECS.objects.all() </code><code>#這裡也是要跟model.py一樣</code>
<code> </code><code>context = {</code>
<code> </code><code>'data'</code><code>: data,</code>
<code> </code><code>}</code>
<code> </code><code>#跳轉到相應頁面,并将值傳遞過去</code>
<code> </code><code>return</code> <code>render(request,</code><code>'alionlineecs.html'</code><code>,context) </code><code>#規定alionlineecs.html作為展示頁</code>
<code> </code>
<code>def rds(request):</code>
<code> </code><code>data = RDS.objects.all()</code>
<code> </code><code>'data'</code><code>:data,</code>
<code> </code><code>return</code> <code>render(request,</code><code>'rds.html'</code><code>,context)</code>
這個代碼裡面我寫了 data=alionlineECS.objects.all(),這是通過DJANGO的ORM來進行SQL操作,建立context這個字典,将data值傳遞到相應頁面。
4.在template檔案夾裡面建立alionlineecs.html和rds.html 這兩個檔案,alionlineecs.html如下:
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<code><!DOCTYPE html></code>
<code><html></code>
<code><</code><code>head</code> <code>lang=</code><code>"en"</code><code>> </code>
<code> </code><code><meta charset=</code><code>"UTF-8"</code><code>> </code>
<code> </code><code><title><</code><code>/title</code><code>> </code>
<code><</code><code>/head</code><code>></code>
<code><body></code>
<code> </code><code><table></code>
<code> </code><code><</code><code>tr</code><code>></code>
<code> </code><code><th>雲伺服器名稱<</code><code>/th</code><code>></code>
<code> </code><code><th>雲伺服器類型<</code><code>/th</code><code>></code>
<code> </code><code><th>雲伺服器内網位址<</code><code>/th</code><code>></code>
<code> </code><code><th>雲伺服器外網位址<</code><code>/th</code><code>></code>
<code> </code><code><th>雲伺服器外網帶寬<</code><code>/th</code><code>></code>
<code> </code><code><th>雲伺服器配置<</code><code>/th</code><code>></code>
<code> </code><code><th>備注<</code><code>/th</code><code>></code>
<code> </code><code><</code><code>/tr</code><code>></code>
<code> </code><code>{% </code><code>for</code> <code>item </code><code>in</code> <code>data %}</code>
<code> </code><code><</code><code>tr</code><code>></code>
<code> </code><code><td>{{ item.ecs_name }}<</code><code>/td</code><code>></code>
<code> </code><code><td>{{ item.ecs_type }}<</code><code>/td</code><code>></code>
<code> </code><code><td>{{ item.ecs_inip }}<</code><code>/td</code><code>></code>
<code> </code><code><td>{{ item.ecs_outip }}<</code><code>/td</code><code>></code>
<code> </code><code><td>{{ item.ecs_ipwidth }}<</code><code>/td</code><code>></code>
<code> </code><code><td>{{ item.ecs_spec }}<</code><code>/td</code><code>></code>
<code> </code><code><td>{{ item.ecs_remarks }}<</code><code>/td</code><code>></code>
<code> </code><code><</code><code>/tr</code><code>></code>
<code> </code><code>{% endfor %}</code>
<code> </code><code><</code><code>/table</code><code>></code>
<code><</code><code>/body</code><code>></code>
<code><</code><code>/html</code><code>></code>
而rds.html的内容如下:
<code> </code><code><th>資料庫名稱<</code><code>/th</code><code>></code>
<code> </code><code><th>資料庫類型<</code><code>/th</code><code>></code>
<code> </code><code><th>mysql版本<</code><code>/th</code><code>></code>
<code> </code><code><th>資料庫規格<</code><code>/th</code><code>></code>
<code> </code><code><th>資料庫位址<</code><code>/th</code><code>></code>
<code> </code><code><th>存儲空間<</code><code>/th</code><code>></code>
<code> </code><code><td>{{ item.rds_name }}<</code><code>/td</code><code>></code>
<code> </code><code><td>{{ item.rds_type }}<</code><code>/td</code><code>></code>
<code> </code><code><td>{{ item.rds_mysql }}<</code><code>/td</code><code>></code>
<code> </code><code><td>{{ item.rds_spec }}<</code><code>/td</code><code>></code>
<code> </code><code><td>{{ item.rds_ip }}<</code><code>/td</code><code>></code>
<code> </code><code><td>{{ item.rds_remark }}<</code><code>/td</code><code>></code>
<code> </code><code><td>{{ item.rds_status }}<</code><code>/td</code><code>></code>
可以看出item裡面的各個項就是model.py裡面的項,這樣就會一一對應。其中用{% %}括起的就是django的模闆語言,在django的模闆語言中,包含了類似于for循環,if等條件判斷語句,可以非常靈活地滿足使用者的各種需求。其中,` data `用來在頁面上顯示data的值。此後,我們還将提到的include和block功能,将會非常友善地繼承網頁。
5.現在去啟動django,然後在浏覽器進入admin背景,添加兩個rds執行個體,比如:
<a href="https://s4.51cto.com/wyfs02/M00/9B/B3/wKiom1ll_8yjoGALAAB1XTXQhyQ395.png" target="_blank"></a>
然後在浏覽器嘗試url中定義的rds的路徑,就可以通路相應頁面了:
<a href="https://s3.51cto.com/wyfs02/M00/9B/B3/wKioL1lmAB2wdiKFAAC6wUy17r0483.png" target="_blank"></a>
但是我們還是不希望進入admin去改,畢竟 admin是背景,我們還是更希望在頁面裡進行增删改查的工作,那麼要通過頁面往資料庫裡傳遞資料是要通過表單的,而django的表單就叫做forms。這裡我們使用ModelForm,因為我們之前已經寫了一個model.py,而要添加的内容肯定都是model.py裡的項,是以就采用ModelForm,改動很小,甚至可以用ModelForm來改model.py。
首先現在Online這個檔案夾裡面建立一個叫form.py,内容如下:
<code># -*- coding: UTF-8 -*- </code>
<code>from</code> <code>django.forms </code><code>import</code> <code>ModelForm</code>
<code>from</code> <code>.models </code><code>import</code> <code>alionlineECS,SLB,RDS </code><code>#這裡暫時先加這三項</code>
<code>#定義Node的Form,Form名字為 模式名+Form</code>
<code>class</code> <code>alionlineForm(ModelForm):</code>
<code> </code><code>#自定義ModelForm的内容</code>
<code> </code><code>class</code> <code>Meta:</code>
<code> </code><code>#該ModelForm參照Model: alionlineECS</code>
<code> </code><code>model </code><code>=</code> <code>alionlineECS</code>
<code> </code><code>#在Form中不顯示注冊人這個字段,下面也是 </code>
<code> </code><code>exclude </code><code>=</code> <code>[</code><code>'ecs_signer'</code><code>]</code>
<code>class</code> <code>SLBForm(ModelForm):</code>
<code> </code><code>model </code><code>=</code> <code>SLB</code>
<code> </code><code>exclude </code><code>=</code> <code>[</code><code>'slb_signer'</code><code>]</code>
<code>class</code> <code>RDSForm(ModelForm):</code>
<code> </code><code>model </code><code>=</code> <code>RDS</code>
<code> </code><code>exclude </code><code>=</code> <code>[</code><code>'rds_signer'</code><code>]</code>
2.由于要建立url與頁面的關系, 我們要在url.py裡追加這樣的話:
<code>url(r</code><code>'^addalionlineecs/'</code><code>, Online.views.addalionlineecs),</code>
<code>url(r</code><code>'^addslb/'</code><code>, Online.views.addslb),</code>
<code>url(r</code><code>'^addrds/'</code><code>, Online.views.addrds),</code>
3.然後還要在view.py裡添加對應的函數關系:
<code>from</code> <code>forms </code><code>import</code> <code>alionlineForm,SLBForm,RDSForm</code>
<code>def</code> <code>addalionlineecs(request):</code>
<code> </code><code>#擷取來自alionlineForm的表單資料 </code>
<code> </code><code>form </code><code>=</code> <code>alionlineForm(request.POST </code><code>or</code> <code>None</code><code>)</code>
<code> </code><code>#判斷form是否有效</code>
<code> </code><code>if</code> <code>form.is_valid():</code>
<code> </code><code>#建立執行個體,需要做些資料處理,暫不做儲存</code>
<code> </code><code>instance </code><code>=</code> <code>form.save(commit</code><code>=</code><code>False</code><code>)</code>
<code> </code><code>#将登入使用者作為登記人</code>
<code> </code><code>instance.node_signer </code><code>=</code> <code>request.user</code>
<code> </code><code>#儲存該執行個體</code>
<code> </code><code>instance.save()</code>
<code> </code><code>#跳轉至清單頁面 </code>
<code> </code><code>return</code> <code>redirect(</code><code>'/alionlineecs/'</code><code>)</code>
<code> </code><code>#建立context來集中處理需要傳遞到頁面的資料 </code>
<code> </code><code>context </code><code>=</code> <code>{</code>
<code> </code><code>'form'</code><code>: form,</code>
<code> </code><code>#如果沒有有效送出,則仍留在原來頁面 </code>
<code> </code><code>return</code> <code>render(request, </code><code>'addalionlineecs.html'</code><code>, context)</code>
4.來到template裡新寫一個addalionlineecs.html,内容如下:
<code><head lang</code><code>=</code><code>"en"</code><code>> </code>
<code> </code><code><meta charset</code><code>=</code><code>"UTF-8"</code><code>> </code>
<code> </code><code><title><</code><code>/</code><code>title> </code>
<code><</code><code>/</code><code>head></code>
<code> </code><code><form method</code><code>=</code><code>'POST'</code> <code>action</code><code>=</code><code>''>{</code><code>%</code> <code>csrf_token </code><code>%</code><code>}</code>
<code> </code><code>{{ form }}</code>
<code> </code><code><</code><code>input</code> <code>type</code><code>=</code><code>'submit'</code> <code>value</code><code>=</code><code>'送出'</code> <code>/</code><code>></code>
<code> </code><code><</code><code>/</code><code>form></code>
<code><</code><code>/</code><code>body></code>
<code><</code><code>/</code><code>html></code>
5.來到浏覽器裡,打開對應的addonlineecs.html就會看到添加的界面了,就不用在admin裡添加了:
<a href="https://s5.51cto.com/wyfs02/M01/9B/CA/wKioL1lnKLmQLQ3ZAAEhe-I_6Mo124.png" target="_blank"></a>
點選旁邊的“送出”之後,看到位址欄機會跳到alionlineecs這個界面:
<a href="https://s1.51cto.com/wyfs02/M01/9B/CA/wKioL1lnKPigRwT_AACw8RxiNxg692.png" target="_blank"></a>
這樣一個基于頁面的增删改查的環境就搭建完畢了。
本文轉自 蘇幕遮618 51CTO部落格,原文連結:http://blog.51cto.com/chenx1242/1946950