标签：一个 头像 xtend password dom document 二进制文件 密码 errors
1.登录：http://www.cnblogs.com/shaojiafeng/p/7868195.html
2.注册
- urls
-前端页面中写 username ,password,password,email,头像
-form组件创建注册页面
-widget的作用是，如果不加widget生成的前端标签是原生的input框，加上之后会变成渲染之后的
-eg：username,password,repeat_pwd,email
class RegForm(forms.Form):
email = forms.EmailField(widget=widgets.EmailInput(
attrs={"class": "form-control", "placeholder": "email"}
))
....还有username，password，repeat_pwd
如果form中有这些字段，则可以在前端页面中{{form_obj.username}}，{{form_obj.password}}这样的方式取到值
-验证每个字段
- clean_username(self):(用到了局部钩子)
cleaned_data它代表的是一个字典
-ret=models.UserInfo.objects.filter(username=self.cleaned_data.get("username"))
if not ret: #校验字段
return self.cleaned_data.get("username")
else:
raise ValidationError("用户名已注册")
-检查数据库中是否有username
-如果没有，验证的那个字段，如果有这个username，则返回cleaned_data取到的值，如果已经存在该用户，就走ValidationError，显示error信息
- clean_password(self):(用到了局部钩子)
-同上方法验证，但需要注意，这个判断密码不能全是数字
def clean_validCode(self):(用到全局钩子)
-前端注册页面
-上一步在后端上传的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)
-头像预览
-找到头像标签，用到change事件，用一个变量去接受当前拿到的文件,然后对去到该文件的路径，让他付给this.result
$("#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()
- FormData()对象追加键值对
-$("#avatar_file")[0].files[0]) # jquery转DOM对象,取files对象最近一次上传的文件
$.ajax({
url:"/reg/",
type:"POST",
data:formdata,
contentType:false,
processData:false,
headers:{"X-CSRFToken":$.cookie(‘csrftoken‘)}, //为了避免Forbedent禁止
success:function (data) {
console.log(data);
var data=JSON.parse(data);
//能拿到user代表注册成功，跳转到登录页面
if (data.user){
location.href="/login/"
}
//反之
else{
console.log(data.errorsList);
$.each(data.errorsList,function (i,j) {
console.log(i,j);
$span=$("<span>");
$span.addClass("pull-right").css("color","red");
$span.html(j[0]);
$("#id_"+i).after($span).parent().addClass("has-error");
if (i=="__all__"){
$("#id_repeat_pwd").after($span)
}
})
}
注释：i为出错form组件字段、j为报错
each循环报错信息、新建span标签，给其增加样式（右漂浮，红色）
span的内容为报错信息
给出错的input标签后边添加span标签,并使其父级标签has-error
如果i使__all__：将报错添加到重新输入密码后边的span中
-后端注册(views中)
-判断是否是is_ajax请求
-接收从前端提交过来的数据
-form验证
实例化对象，然后进行校验，将校验的结果和数据库进行匹配验证，获取校验结果，cleaned_data是一个字典的形式，
如果校验失败，则走errors错误信息的列表
form_obj=forms.RegForm(request.POST) #接收从前端提交来的数据，规则和数据放在一起
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))
标签：一个 头像 xtend password dom document 二进制文件 密码 errors
原文地址：http://www.cnblogs.com/shaojiafeng/p/7896961.html
