Django快速开发web前端

来源：互联网发布：睡觉流口水知乎编辑：程序博客网时间：2024/05/16 15:08

转载自：http://www.furion.info/235.html

首先说下背景，日常工作中有很多时候都要求查询一个域名是否在白名单中（业务相关的，实际就是一个文件），所以很多的时候我们都不得不登上设备，grep 下，不存在则添加进去。一次两次还行，时间长了，也挺烦的，有时候就是简单的查询也需要登设备，未免有点繁琐了。so引入了本篇的主题，采用django 开发一个web前端去查询、添加域名。

先放下最终效果吧，首页如下：

采用了bootstrap的框架搭建的，实际可用的功能只能查询、添加两个。

查询页面：

添加页面：

Contents [hide]

1 1.分析需求：
2 2.具体规划：
3 3.index视图函数的实现
4 4.search视图的实现：
5 5. add视图的实现
6 6.urls.py文件
7
8 7.调试工具
9 其实我觉得写好后端的时候就可以开始调试后端了，只是写好后端的时候还没有任何前端，调试起来不方便。google半天，找个一个不错的工具，httprequester。
10 8.总结

1.分析需求：

需求也挺简单的，就是django搭一个web界面，由于域名的名单是存在在一个文件中的，所以所有的操作都是针对文件的操作，而唯一需要交互的就是从客户端获取需要查找、添加的域名即可，这部分通过POST实现。

简述如下：

a)获取客户端数据（域名）

b)打开白名单文件white.conf，搜索是否匹配域名

c)在白名单文件尾部添加未匹配的域名

大致是这么一个很简单的流程。

2.具体规划：

文件树如上，分为templates、white_list两个文件夹，由于暂时没有使用数据库，就没有创建app，因此没有app的文件夹。主要后端功能由views.py实现，相关的模板存在在templates文件夹中，urls.py负责视图的展示。

后端功能主要有views.py实现，具体划分为三个视图函数：

index(request)， search(request)，add(request)。

index主要负责首页的展示，search负责域名的查找功能，add则负责域名的添加功能。

3.index视图函数的实现

首先实现后端的功能吧，哎，前端是硬伤，看我的界面就知道了。前端伤不起啊，提一次伤一次。

这里首先首先后端的代码，代码如下：

def index(request):    return render_to_response("index.html")

代码很简单就是一个简单的返回一个模板-index.html。

index.html采用的是bootsharp实现的效果，相关的代码是我从django中文社区借鉴来的。后期不打算采用Bootsharp写前端了，前端写不好，这是命，得认。。

代码如下：

<!DOCTYPE html>  <head>    <title>Twitter Bootstrap Tutorial - A responsive layout tutorial</title>    <style type='text/css'>      body {        background-color: #CCC;      }    </style>  </head>  <body>    <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css" rel="stylesheet"><div class="container">  <h1>TWITTER BOOTSTRAP TUTORIAL</h1>  <div class='navbar navbar-inverse'>    <div class='navbar-inner nav-collapse' style="height: auto;">        <ul class="nav">            <li class="active">                <a href="#">Home</a>            </li>            <li>                <a href="#">Page One</a>            </li>            <li>                <a href="#">Page Two</a>            </li>        </ul>    </div></div><div id='content' class='row-fluid'>  <div class='span9 main'>    <h2>Main Content Section</h2>    <ul class="nav nav-tabs nav-stacked">  <li><a href=''>Another Link 1</a></li>  <li><a href='#'>Another Link 2</a></li>  <li><a href='#'>Another Link 3</a></li></ul>  </div>  <div class='span3 sidebar'>    <h2>Sidebar</h2>  </div></div></div>  </body></html>

4.search视图的实现：

照例是后端代码，代码如下：

from django.http import HttpResponsefrom django.shortcuts import render_to_responsefrom django.core.context_processors import csrffrom django.template import RequestContextimport osfile = '/tmp/white.conf'#to search the white listdef search_item(white_item):    line_num = 0    #find: 0 ,not find : 1    find = 0    message = 'not find %s ' % white_item    white_file =  open(file)    for line in white_file.readlines():         line_num += 1        if line.strip()  == white_item:            message = 'find %s in %s line' %(white_item, line_num)            #find :1            find = 1            break    white_file.close()    return (message,find)def search(request):    show_result = 0    if request.method == 'POST':            items =  request.POST.get('items', 'test'),        white_items = items[0]        white_items = white_items.split('rn')        print items        result = []        show_result = 1        for item in white_items:        #get the search_item's message : 0         result.append(search_item(item)[0])            print result            return render_to_response('search.html',{'result':result,'show_result':show_result})    return render_to_response('search.html')

search_item函数是搜索域名是否在白名单文件中存在，因此add,search两个视图函数均会调用，所以写成一个单独的 search_item函数以便复用。message是搜索域名时返回的一个字符串，find是一个标准位，用以标准一个域名是否搜索到，1表示搜索到，0表示未找到。search_item函数返回一个元组，其中包含message和find。

这里稍微解释下为什么返回一个元组：

因为最开始实现 search_item函数的时候只实现了search视图函数，而search视图只需要无论查到与否都返回message给模板就可以了，所以是不需要find标志位的。但后来实现add视图的时候，发现search_item函数只返回message的话无法直接的判定这个域名是否已经在白名单中存在，所以后来额外返回了一个find标志位供add视图使用。

对应的前端模板如下：

{% extends "base.html" %}{% block title %}search the whilte list{% endblock %}{% block content %}<p>search the while list</p>{% if show_result %}    <ul>        {% for res in result %}        <li> {{ res }} </li>        {% endfor %}    </ul>{% else %}    <ul>        <form action="/search/" method="post">            <textarea name="items" cols="50" rows="10"></textarea>               <input type="submit" value="Add">        </form>    </ul>{% endif %}{% endblock %}

这个模板导入了base.html模板，采用这种写法主要是为了代码的复用，简单点。其实你也可以直接写死的，反正就一个表格的事儿。

base.html代码如下：

<!DOCTYPE HTML PUBLIC "//W3C//DTD HTML 4.01//EN"> <html lang="en"> <head>          <title>{% block title %}{% endblock %}</title> </head> <body>          <h1>CPIS white list manage</h1>          {% block content %}{% endblock %}          {% block footer %}      <hr>          <p>Any question please contact us,cpbu-opt@chinacache.com</p>          {% endblock %} </body> </html>

5. add视图的实现

后端代码如下：

def add(request):    show_result = 0    if request.method == 'POST':            items =  request.POST.get('items', 'test'),        white_items = items[0]        white_items = white_items.split('rn')        result = []        show_result = 1        #first find the all white_item        for item in white_items:        message  = search_item(item)            find = message[1]            #if find the item ,then return the line  it matches        if find :            result.append(message[0])                        #else  add item to the end        else:            white_file =  open(file,'a+')            white_file.seek(0,2)            white_file.write(item + os.linesep)            white_file.close()            message = 'add %s success ' % item            result.append(message)            return render_to_response('add.html',{'result':result,'show_result':show_result})    return render_to_response('add.html')

各个视图中使用result保存最终的返回值，用以渲染模板。show_result同样也是一个标志位，当然还是要从最初的设计说起：最初的设计是由四个视图的，分别是search_form,search_item，add_form，add_item。

其中search_form和add_form用以呈现搜索、添加的表格，search_item和add_item用以实现真正的搜索、添加操作，当然同样需要有search_item.html,add_item.html等四个模板文件。

这样功能上是实现了，但代码很乱、不能服用，而且导致urls.py中同样很凌乱，参考了《django book 2.0》中的代码，将search_form,add_form视图删除，所有的表格显示、结果显示放到一个模板中实现了。因此就需要判定什么时候显示表格，什么时候显示搜索或者添加的结果，故引入了show_result标志位，为1的时候表示显示结果，0则显示添加或者搜索表格。

对应的前端代码：

{% extends "base.html" %}{% block title %}Add the item into whilte list{% endblock %}{% block content %}<p>Add the white item</p> {% if show_result %}    <ul>        {% for res in result %}        <li> {{ res }} </li>        {% endfor %}    </ul>{% else %}    <ul>        <form action="/add/" method="post">            <textarea name="items" cols="50" rows="10"></textarea>            <input type="submit" value="Add">    </ul>{% endif %}{% endblock %}

同样导入了base.html文件。当然同样的，你也可以写死为个表格进去，无所谓的事情了。

6.urls.py文件

urls.py则负责视图的显示。代码如下：

from django.conf.urls import patterns, include, urlfrom django.conf import settings# Uncomment the next two lines to enable the admin:# from django.contrib import admin# admin.autodiscover()from white_list.views import indexfrom white_list.views import addfrom white_list.views import searchurlpatterns = patterns('',    # Examples:    # url(r'^$', 'white_list.views.home', name='home'),    # url(r'^white_list/', include('white_list.foo.urls')),    # Uncomment the admin/doc line below to enable admin documentation:    # url(r'^admin/doc/', include('django.contrib.admindocs.urls')),    # Uncomment the next line to enable the admin:    # url(r'^admin/', include(admin.site.urls)),    ('^$',index),    ('^index/$',index),    ('^add/$',add),    ('^search/$',search),)

(‘^$’,index), 和(‘^index/$’,index), 这两个url均调用index()视图函数。即打开首页可以采用http:ip/ 和http:ip/index这两种方式。(‘^add/$’,add),(‘^search/$’,search),分别匹配add,search视图函数。

7.调试工具

其实我觉得写好后端的时候就可以开始调试后端了，只是写好后端的时候还没有任何前端，调试起来不方便。google半天，找个一个不错的工具，httprequester。

httprequester可以方便的对服务器发起各种请求，GET、POST、PUT，发送特定head头，发送需要POST的参数等，同时会记录每个请求的返回码以及历史记录，极为犀利，比同等次的Poster要好用。推荐在后端写好的时候就采用httprequester测试下后端代码是否正常。

这里我是针对后端发起了一次POST请求，参数为item=’furion’，用以检测后端能否正常接收POST上来的参数，可以看出后端响应200，同时返回了我搜索的域名。说明后端代码基本测试通过。

如果访问的时候出现"django, CSRF token missing or incorrect " ,则是因为默认django开启了防跨站攻击的安全策略，解决办法由很多，我这里禁用了csrf。自行百度吧。

如果关闭debug模式出现500错误，则需要设置setting.py中的ALLOWED_HOSTS 列表，默认为空，即非debug模式不允许任何人访问，需要手动修改。

8.总结

其实搞个web界面是挺爽的一件事，但用着爽，写起来就麻烦了，这个非常简单的需求，我写起来前前后后也倒腾了很久。有些事情说起来容易，看起来也容易，但做起来还是不容易的，始知万事亲历才有资格说easy.

后续工作：

a)用户验证：

其实现在基本的功能已经实现了，但由于这个白名单的事情比较关键，所以必须有相应的用户验证，只需要登录用户才可以添加名单，所以这方便还需要做一个用户认证机制。

b)日志：

后续可以实现一个日志系统，查询某个时间段、某个域名的操作记录等，方便问题的追溯。

0 0