Django个人博客搭建教程---给你的博客留言

最新推荐文章于 2023-06-20 15:51:33 发布

请叫我算术嘉

最新推荐文章于 2023-06-20 15:51:33 发布

阅读量8.2k

点赞数

分类专栏： Django 文章标签： django

本文链接：https://blog.csdn.net/ssjdoudou/article/details/101870927

版权

Django 专栏收录该内容

59 篇文章 3 订阅

订阅专栏

一、设计思路

留言功能和评论不太一样，相对简单，我这里没有使用登录的装饰器，也就是不校验是否是登录用户，对于未注册、登录的用户给一个默认头像即可，使用表单提交。

二、前端设计

<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>&lt;a
								 href="" title=""&gt; &lt;abbr title=""&gt; &lt;acronym title=""&gt;
								&lt;b&gt; &lt;blockquote cite=""&gt; &lt;cite&gt; &lt;code&gt; &lt;del
								datetime=""&gt; &lt;em&gt; &lt;i&gt; &lt;q cite=""&gt; &lt;strike&gt;
								&lt;strong&gt; </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(&quot;comment-1&quot;, &quot;1&quot;, &quot;respond&quot;, &quot;1&quot;)">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')

后端尽量多对异常清楚做出处理，这样即使后端处理失败，前端也会有反馈