标签:重复 inpu csrf blog attr 点击 .post 基础上 word
1.登录
2.注册
-前端页面中写 username ,password,password,email
-form组件创建注册页面
-eg:username,password,repeat_pwd,email
class RegForm(forms.Form):
email = forms.EmailField(widget=widgets.EmailInput(
attrs={"class": "form-control", "placeholder": "email"}
))
-验证每个字段
- clean_username
-ret=models.UserInfo.objects.filter(username=self.cleaned_data.get("username"))
if not ret: #校验字段
return self.cleaned_data.get("username")
else:
raise ValidationError("用户名已注册")
-检查数据库中是否有username
-如果没有,验证的那个字段,则返回那个字段的值
- clean_password
-同上方法验证,但需要注意,这个判断密码不能全是数字
- clean_validCode
- 判断前端传来的验证码和session中的验证码是否相同
- 此时需要引入request, 重新写构造方法
-前端注册页面
-上一步在后端上传的form对象渲染了username,password,email
-生成头像
-<img src="/static/img/default.png" id="avatar_img">
-<input type="file" class="form-control" id="avatar_file">
(生成一个默认的灰色框头像,如用户点击上传头像,此时应该吧图片遮到上传的文件上面,
这里还有让parent设置成相对定位,children设置绝对定位,还有一点,应该不让灰色框隐藏,
而是让他的透明度为0)
-头像预览
$("#avatar_file").change(function () {
var ele_file=$(this)[0].files[0]; //拿到文件
var reader=new FileReader();
reader.readAsDataURL(ele_file);
reader.onload=function (){
$("#avatar_img")[0].src=this.result
}
});
- Ajax提交数据
- 上传二进制文件引入 FormData()
- FormData()对象追加键值对
-$("#avatar_file")[0].files[0]) # jquery转DOM对象,取files对象最近一次上传的文件
-后端注册(views中)
-判断是否是is_ajax请求
-接收从前端提交过来的数据
-form验证
if form_obj.is_valid():
username = form_obj.cleaned_data["username"]
password = form_obj.cleaned_data["password"]
email = form_obj.cleaned_data.get("email")
avatar_img = request.FILES.get("avatar_img")
................
-setting.py 如果只在这里设置 不在前端设置 用户接收不到文件
MEDIA_ROOT=os.path.join(BASE_DIR,"app01","media")
MEDIA_URL="/media/"
-urls.py
# media 配置
from django.views.static import serve
from blog import settings
url(r‘^media/(?P<path>.*)$‘, serve, {‘document_root‘: settings.MEDIA_ROOT}),
3.个人博客
1.head_title
2.左侧菜单
-个人信息
-头像
-昵称
#查询当前用户的所有文章
article_list=models.Article.object.filter(user=current_user)
-分类归档
from django.db.models import Count, Sum
category_list = models.Category.objects.all().filter(blog=current_blog).annotate(
c=Count("article__nid")).values_list("title", "c")
-标签归档
tag_list = models.Tag.objects.all().filter(blog=current_blog).annotate(c=Count("article__nid")).values_list("title",
-日期归档
date_list = models.Article.objects.all().extra(
select={"filter_create_date": "strftime(‘%%Y/%%m‘,create_time)"}).values_list("filter_create_date").annotate(
Count("nid"))
3.内容部分是个人所有文章的渲染
此处渲染的是文章title和文章摘要,发表日期,评论,点赞,阅读数
用到for循环去取,因为title是可点击进入的,所以用<a>
-<div class="article_title"><a href="/blog/{{ current_user.username }}/articles/{{ article.nid }}">{{ article.title }}</a></div>
如上,需要先分配url,让其跳转到/blog/下再跟其name等...
-还有一点需要注意的是:发表时间的渲染需要过滤date。eg:(发表于 <span>{{ article.create_time|date:"Y-m-d" }}</span> )
4.个人博客——文章的详细内容
-首先点击文章的标题,应该跳转到文章页里面,但是个人博客页的title和左侧菜单应该不变,
1.让(article_detail)页面去继承(homeSite)d的title和左侧菜单
-{% extends "homeSite.html" %}
2.在前端页面中渲染文章标题和文章内容
-标题:<h3 class="text-center">{{ article_obj.title }}</h3>
-内容:<div class="article_con">{{ article_obj.articledetail.content|safe }}</div>
-渲染文章内容时,应该让在博客园的HTML代码编辑器中渲染之后的标签页代码写入admin中,为了让去显示全部信息,必须在后面加(|safe)
5.文章页的点赞
通过点击“赞” 触发click事件,发送ajax请求,来完成点击一次,可以自加一的操作
1.在前端页面渲染点赞按钮,将点赞按钮图片保存到/static/img 中
-此处需要注意的是urls中的路由分发
urlpatterns = [
url(r‘^poll/$‘, views.poll),
]
以上渲染的代码,通过form打包给button,通过ajax去提交
2.前端页面中ajax
$.ajax({
url:"/blog/poll/",
type:"post",
data:{
csrfmiddlewaretoken:$("[name=‘csrfmiddlewaretoken‘]").val(),
article_id:"{{ article_obj.nid }}" #文章的对象
},
success:function(data){
var data=JSON.parse(data); // pollResponse
if (data.state){
var val=parseInt($("#digg_count").html())+1;
$("#digg_count").html(val)
}
else if (data.is_repeat){
$(".diggnum_error").html("重复提交").css("color","red")
}
}
})
3.后端中:
def poll(request):
#创建一条记录
user_id=request.user.nid
article_id=request.POST.get("article_id")
articleUp = models.ArticleUp.objects.create(user_id=user_id, article_id=article_id)
#找到article_id,在之前的基础上加1.(此处需要引入F)
from django.db.models import F
在views.py中:
//从数据库过滤出点赞表的对象,如果有这个对象,就让他自加一,如果没有这个对象,先创建一个对象,让给他自加一
其中用到,try异常处理,限制不能让用户点击两次赞
def poll(request):
from django.db.models import F
#创建一条记录
user_id=request.user.nid
article_id=request.POST.get("article_id")
pollResponse={"state":True,"is_repeat":None} //作为是否重复提交的判断
if models.ArticleUp.objects.filter(user_id=user_id, article_id=article_id):
//从数据库过滤出点赞表的对象
pollResponse["state"]=False
pollResponse["is_repeat"]=True
else:
try:
articleUp = models.ArticleUp.objects.create(user_id=user_id, article_id=article_id)
models.Article.objects.filter(nid=article_id).update(up_count=F("up_count") + 1)
except:
pollResponse["state"] = False
import json
return HttpResponse(json.dumps(pollResponse))
标签:重复 inpu csrf blog attr 点击 .post 基础上 word
原文地址:http://www.cnblogs.com/shaojiafeng/p/7891650.html