利用django框架实现带表单验证加自定义分页功能的留言板。
views.py
1 from django.shortcuts import render,redirect,HttpResponse 2 from guest_book import models 3 from .forms import GuestForm 4 import json 5 6 def guestbook(request,pid): 7 ret = {'status': True, 'error': None, 'data': None} 8 if request.method == 'GET': 9 if pid == None: 10 pid = 1 11 current_page = int(pid) 12 # 起始索引，（当前页码-1）* 每页显示条数 13 start = (current_page - 1) * 10 14 end = current_page * 10 15 # 从数据库取值的范围 16 guest_list = models.GuestBook.objects.all()[start:end] 17 total_count = models.GuestBook.objects.all().count() 18 # 总条数除以每页显示10条，得到页数，余数不等于0，另起一页 19 total_page, a = divmod(total_count, 10) 20 if a != 0: 21 total_page += 1 22 23 # 显示的页码数 24 page_list = [] 25 # 如果当前页为第一页，上一页则不再跳转 26 if current_page == 1: 27 page_list.append("<a href='javascript:void(0);' style='text-decoration:none'><上一页</a>") 28 else: 29 page_list.append("<a href='/guestbook/%s'><上一页</a>"% (current_page - 1, )) 30 31 global page_start,page_end 32 if total_page <= 11: 33 page_start = 1 34 page_end = total_page 35 else : 36 if current_page <= 6: 37 page_start = 1 38 page_end = 11 + 1 39 elif current_page > 6: 40 # 生成首页 和 ... 41 page_list.append("<a href='/guestbook/%s'>1</a>" % (1,)) 42 page_list.append("<a href='javascript:void(0);'>...</a>") 43 44 if total_page - current_page >= 5: 45 page_start = current_page - 3 46 page_end = current_page + 4 47 else: 48 page_start = total_page - 8 49 page_end = total_page + 1 50 51 # 接上，最后一页为当前页+6，但不能让他一直+6，当最后一页的页码数大于最大页码数时，让最后一页变成当前页，不再加了 52 if page_end >= total_page: 53 page_end = current_page + 1 54 if current_page + 5 >= total_page: 55 page_end = total_page + 1 56 57 # 根据不同的起始页和终止页生成相应的页码 58 for page in range(page_start, page_end): 59 # 当前页增加样式 60 if page == current_page: 61 page_list.append("<a class='active' href='/guestbook/%s'>%s</a>"% (page, page)) 62 else: 63 page_list.append("<a href='/guestbook/%s'>%s</a>"% (page, page)) 64 # 生成 ... 和 尾页 65 if current_page > 6 and (total_page - current_page >= 6): 66 page_list.append("<a href='javascript:void(0);'>...</a>") 67 page_list.append("<a href='/guestbook/%s'>%s</a>" % (total_page, total_page)) 68 69 # 如果当前页为总页数，下一页则不再跳转 70 if current_page == total_page: 71 page_list.append("<a href='javascript:void(0);' style='text-decoration:none'>下一页></a>") 72 else: 73 page_list.append("<a href='/guestbook/%s'>下一页></a>" % (current_page + 1,)) 74 75 page_list = ''.join(page_list) 76 77 return render(request,'guestbook.html',{'guest_list':guest_list,'total_count':total_count, 'page_list':page_list}) 78 79 elif request.method == "POST": 80 obj = GuestForm(request.POST) 81 print (request.POST) 82 if obj.is_valid(): 83 models.GuestBook.objects.create(**obj.cleaned_data) 84 else: 85 res_str = obj.errors.as_json() # res_str是一个字符串 86 ret['status'] = False 87 ret['error'] = res_str 88 return HttpResponse(json.dumps(ret))
guestbook.html
运用kindeditor富文本框。
1 {% load static %} 2 <!DOCTYPE html> 3 <html lang="en"> 4 <head> 5 <meta charset="UTF-8"> 6 <title>Title</title> 7 <link rel="stylesheet" type="text/css" href="{% static 'css/reset.css' %}"> 8 9 <style> 10 .guestbook { 11 margin: 50px auto; 12 background-color: lightblue; 13 width: 900px; 14 height: 2200px; 15 16 } 17 .header { 18 border-bottom: 2px solid white; 19 width: 800px; 20 height: 150px; 21 margin: 0 auto; 22 23 24 } 25 .header span { 26 font-size: 22px; 27 color: white; 28 display: inline-block; 29 margin-top: 100px; 30 31 } 32 .master_say { 33 width: 800px; 34 height: 150px; 35 margin: 0 auto; 36 } 37 .master_say span { 38 font-size: 16px; 39 color: white; 40 display: inline-block; 41 margin-top: 20px; 42 43 } 44 .message { 45 width: 800px; 46 margin: 0 auto; 47 48 } 49 .message span { 50 font-size: 16px; 51 color: white; 52 display: inline-block; 53 } 54 .form { 55 margin: 0; 56 } 57 .form textarea { 58 display: block; 59 visibility:hidden; 60 width: 800px; 61 } 62 .form input { 63 display: inline-block; 64 width: 200px; 65 height: 30px; 66 } 67 68 .commit input { 69 margin-top: 10px; 70 height: 25px; 71 width: 80px; 72 text-align: center; 73 line-height: 25px; 74 border-radius: 5px; 75 font-size: 17px; 76 background-color: white; 77 color: lightblue; 78 } 79 80 .message_history { 81 width: 800px; 82 height: 1000px; 83 } 84 .message_history .header { 85 border-bottom: 2px solid white; 86 height: 100px; 87 } 88 .message_history .header span { 89 margin-top: 60px; 90 font-size: 17px; 91 } 92 .message_history li { 93 height: 130px; 94 border-bottom: 1px solid white; 95 96 } 97 98 .message_history p:nth-child(1){ 99 100 margin-top: 10px; 101 height: 20px; 102 width: auto; 103 } 104 .message_history p:nth-child(2){ 105 margin-top: 10px; 106 107 } 108 .message_history p:nth-child(3){ 109 margin-top: 30px; 110 color: #337FE5; 111 height: 20px; 112 width: auto; 113 114 } 115 .pagination { 116 width: auto; 117 height: 30px; 118 margin: 30px auto; 119 text-align: center; 120 } 121 .pagination a { 122 display: inline-block; 123 height: 30px; 124 width: 40px; 125 line-height: 30px; 126 margin: auto 5px; 127 } 128 .pagination a:nth-child(1){ 129 width: 60px; 130 } 131 .pagination a:nth-last-child(1){ 132 width: 60px; 133 } 134 .active { 135 background-color: white; 136 } 137 138 </style> 139 </head> 140 141 <body> 142 143 <div class="guestbook"> 144 <div class="header"> 145 <span >留言簿</span> 146 </div> 147 <div class="master_say"> 148 <span>主人寄语</span> 149 <br> 150 <span>欢迎光临我的空间，请留下您想对我说的话。</span> 151 </div> 152 <div class="message"> 153 <span>发表您的留言：</span> 154 <form method="POST" class="form" id="form"> 155 {% csrf_token %} 156 <textarea name="content" id="content" ></textarea> 157 <br> 158 <span>留下您的大名：</span> 159 <br> 160 <input type="text" name="username" id="username"> 161 <div class="commit"> 162 <input type="button" value="提交" id="btn"> 163 </div> 164 </form> 165 <div class="message_history"> 166 <div class="header"> 167 <span>留言（{{ total_count }}）</span> 168 </div> 169 <ul> 170 {% for row in guest_list %} 171 <li> 172 <p>{{ row.username }}</p> 173 <p>{{ row.content | safe }}</p> 174 <p>{{ row.date | date:'Y-m-d H:i:s' }}</p> 175 </li> 176 {% endfor %} 177 </ul> 178 <div class="pagination"> 179 {{ page_list | safe }} 180 </div> 181 </div> 182 </div> 183 184 185 </div> 186 <script src="{% static 'js/jquery-1.8.3.min.js'%}"></script> 187 <script src="{% static 'plugins/kind-editor/kindeditor-min.js'%}"></script> 188 <script> 189 $(function () { 190 initKindEditor(); 191 192 function initKindEditor() { 193 var kind = KindEditor.create('#content', { 194 resizeType : 0, 195 allowImageUpload : false, 196 items : [ 197 'fontname', '|','fontsize', '|', 'forecolor','|', 'hilitecolor', 'bold', 'italic', 'underline', 198 'removeformat', '|', 'justifyleft', 'justifycenter', 'justifyright', 'insertorderedlist', 199 'insertunorderedlist', '|', 'emoticons', 'image', 'link'], 200 afterBlur: function(){this.sync();} 201 // 这句的作用是，同步KindEditor的值到textarea文本框中 202 //这样才能取到文本框的中值 203 }); 204 } 205 $('#btn').click(function () { 206 $.ajax({ 207 url: "guestbook.html", 208 data: $('#form').serialize(), 209 type: 'POST', 210 success: function (arg) { 211 $('.error-msg').remove(); 212 // 将后台返回的字符串解析成JSON对象 213 var obj = JSON.parse(arg); 214 // obj ---->{status: false, error: "{"username": [{"message": "\u5927\", "code": "required"}]}", data: null} 215 if (!obj.status) { 216 var error_obj = JSON.parse(obj.error); 217 console.log(error_obj); 218 // error_obj----> 0:{message: "内容不可以为空哦！", code: "required"} 219 220 // 遍历error_obj中的对象，分别在其后面添加一个span标签，并将错误信息设置为其属性 221 $.each(error_obj, function (k, v) { 222 var tag = document.createElement('span'); 223 tag.className = 'error-msg'; 224 tag.innerHTML = v[0].message; 225 $("textarea[name='" + k + "']").after(tag); 226 $("input[name='" + k + "']").after(tag); 227 }) 228 } else { 229 // 刷新当前页面 230 location.href = "guestbook.html" 231 } 232 } 233 234 }) 235 }); 236 }); 237 238 239 </script> 240 </body> 241 </html>
models.py
1 from django.db import models 2 3 class GuestBook(models.Model): 4 username = models.CharField(max_length=32, null=None) 5 content = models.CharField(max_length=255, null=None) 6 date = models.DateTimeField(auto_now_add=True) 7 8 class Meta: 9 # 根据日期倒叙排序 10 ordering = ['-date']
forms.py
# -*- coding=utf-8 -*- from django import forms class GuestForm(forms.Form): username = forms.CharField(error_messages={'required': '大名不可以为空哦！'}) content = forms.CharField(error_messages={'required': '内容不可以为空哦！'})
urls.py
# -*- coding=utf-8 -*- from django.conf.urls import url from guest_book import views urlpatterns = [ url(r'^guestbook/(?P<pid>\d+)*',views.guestbook), ]
效果：
始终保留首页和尾页。
简单的表单验证功能。
'源码在这里'
希望大家给出宝贵意见和建议，谢谢！