Django快速开发web前端

最新推荐文章于 2024-09-05 14:43:24 发布

NLP万事通

最新推荐文章于 2024-09-05 14:43:24 发布

阅读量1w

点赞数 1

分类专栏：工具

工具专栏收录该内容

20 篇文章 0 订阅

订阅专栏

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

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

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

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

查询页面：

添加页面：

Contents [hide]

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")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>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 HttpResponse
from django.shortcuts import render_to_response
from django.core.context_processors import csrf
from django.template import RequestContext
import os

file = '/tmp/white.conf'
#to search the white list
def 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')'/tmp/white.conf'
#to search the white list
def 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 %}<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> 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')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 %}<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, url
from 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 index
from white_list.views import add
from white_list.views import search

urlpatterns = 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),
)'',
    # 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),
)