一、设计思路
留言功能和评论不太一样，相对简单，我这里没有使用登录的装饰器，也就是不校验是否是登录用户，对于未注册、登录的用户给一个默认头像即可，使用表单提交。
二、前端设计
<form method="POST" id="messageform" class="comment-form">
{% csrf_token %}
<div class="wrap form-group">
<div class="comment-form-author">
<label for="author">Your name <span class="required">*</span></label>
<input type="text" id="author" name="username" size="30" aria-required="true" placeholder="enter your name here" maxlength="20">
</div>
<div class="comment-form-email">
<label for="email">Email address <span class="required">*</span></label>
<input type="text" id="email" name="email" size="30" aria-required="true" placeholder="enter your email address" maxlength="20" onblur="isEmail()">
<script>
function isEmail() {
var regu = "^(([0-9a-zA-Z]+)|([0-9a-zA-Z]+[_.0-9a-zA-Z-]*[0-9a-zA-Z]+))@([a-zA-Z0-9-]+[.])+([a-zA-Z]{2}|net|NET|com|COM|gov|GOV|mil|MIL|org|ORG|edu|EDU|int|INT)$";
var myemail = document.getElementById("email").value;
if (myemail.search(regu)!= -1) {
return true;
} else {
swal(
"请输入有效合法的E-mail地址 ！",
'',
'warning'
);
return false;
}
}
</script>
</div>
</div>
<div class="wrap form-group">
<div class="comment-form-tel">
<label for="nmber">Phone number <span class="required">(Optional)</span></label>
<input type="tel" id="number" name="phone" placeholder="Phone number" size="30" maxlength="11">
</div>
<div class="comment-form-url">
<label for="url">Title <span class="text-light">*</span></label>
<input type="text" id="title" name="title" size="100" value="" maxlength="20">
</div>
</div>
<div class="comment-form-comment">
<label for="comment">Message * <span class="required">*</span></label>
<textarea id="message" name="content" rows="3" cols="72" aria-required="true" placeholder="Write your message here" maxlength="500"></textarea>
</div>
<p class="form-allowed-tags hidden">You may use these <abbr title="HyperText Markup Language">HTML</abbr> tags and attributes: <code><a
href="" title=""> <abbr title=""> <acronym title="">
<b> <blockquote cite=""> <cite> <code> <del
datetime=""> <em> <i> <q cite=""> <strike>
<strong> </code></p>
<div class="form-submit">
<input type="button" name="submit" value="Leave a comment" onclick="DoSubmit()">
<input type="hidden" name="comment_post_ID" value="1" id="comment_post_ID">
<input type="hidden" name="comment_parent" id="comment_parent" value="0">
</div>
</form>
<script>
function DoSubmit(){
var author = document.getElementById("author").value;
var email = document.getElementById("email").value;
var number = document.getElementById("number").value;
var title = document.getElementById("title").value;
var content = document.getElementById("message").value;
var regu = "^(([0-9a-zA-Z]+)|([0-9a-zA-Z]+[_.0-9a-zA-Z-]*[0-9a-zA-Z]+))@([a-zA-Z0-9-]+[.])+([a-zA-Z]{2}|net|NET|com|COM|gov|GOV|mil|MIL|org|ORG|edu|EDU|int|INT)$";
if( author == ''){
swal(
'name不能为空！',
'',
'warning'
);
return false;
}
if( email == ''){
swal(
'email不能为空！',
'',
'warning'
);
return false;
} else if (email.search(regu)== -1) {
swal(
"请输入有效合法的E-mail地址 ！",
'',
'warning'
);
return false;
}else if (title == ''){
swal(
'title不能为空！',
'',
'warning'
);
return false;
}else if (content == ''){
swal(
'message不能为空！',
'',
'warning'
);
return false;
}else $.ajax({
cache: false,
type: "POST",
url: "/JiaBlog/savemessage/",
data: $('#messageform').serialize(),
beforeSend: function (xhr, settings) {
xhr.setRequestHeader("X-CSRFToken", "{{ csrf_token }}");
},
success: function (data) {
$('#messageform')[0].reset();
var username = data.username;
var content = data.content;
var created_time = data.time;
var messpic = data.messpic;
var s = `<div class="commentlist-item">
<div class="comment even thread-even depth-1" id="comment-1">
<div class="avatar-holder">
<img alt="image description" src="${messpic}" class="avatar avatar-48 photo avatar-default">
</div>
<div class="commentlist-holder">
<p class="meta">
<strong class="name"><a href="#">${username}</a></strong>
<a href="#"><time datetime="2011-01-12">${ created_time }</time></a>
</p>
<p>${ content }</p>
<p><a class="comment-reply-link" href="#" onclick="return addComment.moveForm("comment-1", "1", "respond", "1")">REPLY</a></p>
</div>
</div>
</div>`;
$(".commentlist").append(s);
swal(
'评论成功！',
"",
"success"
)
},error:function(data){
var status = data.status;
swal(
'服务器好像出了点问题，请稍后重试！',
"",
"error"
)
}
})
}
</script>
对数据库必填字段进行前端校验，通过ajax方式发送表单
三、forms.py
from django import forms
from JiaBlog.models import Comment,Message,Articles
class MessageForm(forms.ModelForm):
class Meta:
model = Message
fields = ['username', 'email', 'phone','title','content']
四、数据库模型设计
class Message(models.Model):
username = models.CharField(max_length=256)
title = models.CharField(max_length=512)
content = models.TextField(max_length=256)
email = models.EmailField()
publish = models.DateTimeField(auto_now_add=True)
phone = models.CharField(max_length=11,blank=True,default="",null=True)
messpic = models.CharField(max_length=50,null=True)
# 为了显示
def __str__(self):
tpl = '<Message:[username={username}, title={title}, content={content}, publish={publish}]>'
return tpl.format(username=self.username, title=self.title, content=self.content, publish=self.publish)
五、views.py
def savemessage(request):
if request.method == 'POST':
form = MessageForm(request.POST)
data = {}
if form.is_valid():
message = form.save(commit=False)
try:
message.save()
except Exception as e:
data['status'] = '500'
else:
thismessage = Message.objects.get(id=message.id) # 刚入库的留言
usernames = models.BlogUser.objects.all().values('name') # 用户表所有name
usernames = [item[key] for item in usernames for key in item]
if message.username in usernames:
thismessage.messpic = BlogUser.objects.get(name=thismessage.username).userpic.url
thismessage.save()
data["username"] = thismessage.username
data["title"] = thismessage.title
data["content"] = thismessage.content
data["email"] = thismessage.email
data['time'] = thismessage.publish.strftime("%Y-%m-%d %H:%M:%S")
data["phone"] = thismessage.phone
data["messpic"] = thismessage.messpic
email_title = '每一点进步离不开你的宝贵意见，由衷感谢你的支持~'
email_body = '已经收到你的宝贵意见，我们会持续改进。--From ArithmeticJia'
email = thismessage.email # 对方的邮箱
try:
send_mail(email_title, email_body, '1524126437@qq.com', [email])
except Exception as e:
data['status'] = '500'
return HttpResponse(json.dumps(data), content_type='application/json')
return HttpResponse(json.dumps(data), content_type='application/json')
else:
thismessage.messpic = '/static/JiaBlog/images/img56.jpg'
thismessage.save()
data["username"] = thismessage.username
data["title"] = thismessage.title
data["content"] = thismessage.content
data["email"] = thismessage.email
data['time'] = thismessage.publish.strftime("%Y-%m-%d %H:%M:%S")
data["phone"] = thismessage.phone
data["messpic"] = thismessage.messpic
email_title = '每一点进步离不开你的宝贵意见，由衷感谢你的支持~'
email_body = '已经收到你的宝贵意见，我们会持续改进。--From ArithmeticJia'
email = thismessage.email # 对方的邮箱
# send_mail(email_title, email_body, '1524126437@qq.com', [email])
try:
send_mail(email_title, email_body, '1524126437@qq.com', [email])
except Exception as e:
data['status'] = '500'
return HttpResponse(json.dumps(data), content_type='application/json')
return HttpResponse(json.dumps(data), content_type='application/json')
后端尽量多对异常清楚做出处理，这样即使后端处理失败，前端也会有反馈
