搭建自己的部落格（二十八）：增加繫結郵箱的功能，完善使用者資訊
阿新 • • 發佈：2018-11-29
1、郵箱伺服器使用了騰訊伺服器
具體操作見：python自動發郵件
2、變化的部分
3、上程式碼：
{# 引用模板 #} {% extends 'base.html' %} {% load staticfiles %} {% load comment_tags %} {% load likes_tags %} {% block header_extends %} <link rel="stylesheet" href="{% static 'blog/blog.css' %}"> <link rel="stylesheet"blog下的blog_detail.htmlhref="{% static 'fontawesome-free-5.5.0-web/css/all.min.css' %}"> {# 處理公式 #} <script src='https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML' async></script> <script type="text/javascript" src="{% static "ckeditor/ckeditor-init.js" %}"></script> <script type="text/javascript" src="{% static "ckeditor/ckeditor/ckeditor.js" %}"></script> {% endblock %} {# 標題 #} {% block title %} {{ blog.title }} {% endblock %} {# 內容#} {% block content %} <div class="container"> <div class="row"> <div class="col-10 offset-1"> <ul class="blog-info-description"> <h3>{{ blog.title }}</h3> <li>作者：{{ blog.author }}</li> {# 時間過濾器讓時間按照自己需要的格式過濾 #} <li>釋出日期：{{ blog.created_time|date:"Y-m-d H:i:s" }}</li> <li>分類： <a href="{% url 'blogs_with_type' blog.blog_type.pk %}"> {{ blog.blog_type }} </a> </li> <li>閱讀({{ blog.get_read_num }})</li> <li>評論({% get_comment_count blog %})</li> </ul> <div class="blog-content">{{ blog.content|safe }}</div> <div class="like" onclick="likeChange(this,'{% get_content_type blog %}',{{ blog.pk }})"> <i class="far fa-thumbs-up {% get_like_status blog %}"></i> <span class="liked-num">{% get_like_count blog %}</span> <span>喜歡</span> </div> <p>上一篇： {% if previous_blog %} <a href="{% url 'blog_detail' previous_blog.pk %}">{{ previous_blog.title }}</a> {% else %} <span>沒有了</span> {% endif %} </p> <p>下一篇： {% if next_blog %} <a href="{% url 'blog_detail' next_blog.pk %}">{{ next_blog.title }}</a> {% else %} <span>沒有了</span> {% endif %} </p> </div> </div> <div class="row"> <div class="col-10 offset-1"> <div class="comment-area"> <h3 class="comment-area-title">提交評論</h3> {% if user.is_authenticated %} <form id="comment-form" action="{% url 'update_comment' %}" method="post" style="overflow: hidden"> {% csrf_token %} <label for="form-control">{{ user.get_nickname_or_username }},歡迎評論～</label> <div id="reply-content-container" style="display: none;"> <p id="reply_title">回覆：</p> <div id="reply-content"> </div> </div> {% get_comment_form blog as comment_form %} {% for field in comment_form %} {{ field }} {% endfor %} <span id="comment-error" class="text-danger float-left"></span> <input type="submit" value="評論" class="btn btn-primary float-right"> </form> {% else %} 您尚未登入，登入之後方可評論 {# 提交登入的時候帶上從哪裡訪問的路徑 #} <a class="btn btn-primary" href="{% url 'login' %}?from={{ request.get_full_path }}">登入</a> <span> or </span> <a class="btn-danger btn" href="{% url 'register' %}?from={{ request.get_full_path }}">註冊</a> {% endif %} </div> <div class="-comment-area"> <h3 class="comment-area-title">評論列表</h3> <div id="comment-list"> {% get_comment_list blog as comments %} {% for comment in comments %} <div id="root-{{ comment.pk }}" class="comment"> <span>{{ comment.user.get_nickname_or_username }}</span> <span>{{ comment.comment_time|date:"Y-m-d H:i:s" }}</span> <div id="comment-{{ comment.pk }}">{{ comment.text|safe }}</div> {# 點贊 #} <div class="like" onclick="likeChange(this,'{% get_content_type comment %}',{{ comment.pk }})"> <i class="far fa-thumbs-up {% get_like_status comment %}"></i> <span class="liked-num">{% get_like_count comment %}</span> </div> <a href="javascript:reply({{ comment.pk }})">回覆</a> {% for reply in comment.root_comment.all %} <div class="reply"> <span>{{ reply.user.get_nickname_or_username }}</span> <span>{{ reply.comment_time|date:"Y-m-d H:i:s" }}</span> <span>回覆：</span><span>{{ reply.reply_to.get_nickname_or_username }}</span> <div id="comment-{{ reply.pk }}">{{ reply.text|safe }}</div> {# 點贊 #} <div class="like" onclick="likeChange(this,'{% get_content_type reply %}',{{ reply.pk }})"> <i class="far fa-thumbs-up {% get_like_status reply %}"></i> <span class="liked-num">{% get_like_count reply %}</span> </div> <a href="javascript:reply({{ reply.pk }})">回覆</a> </div> {% endfor %} </div> {% empty %} <span id="no-comment">暫無評論</span> {% endfor %} </div> </div> </div> </div> </div> {% endblock %} {% block js %} <script> // 處理點贊 function likeChange(obj, content_type, object_id) { let is_like = obj.getElementsByClassName('active').length === 0; $.ajax({ url: "{% url 'like_change' %}", type: 'GET', data: { content_type: content_type, object_id: object_id, is_like: is_like, }, cache: false, success: function (data) { console.log(data); if (data['status'] === 'SUCCESS') { // 更新點贊狀態 let element = $(obj.getElementsByClassName('fa-thumbs-up')); if (is_like) { element.addClass('active'); } else { element.removeClass('active'); } // 更新點贊數量 let like_num = $(obj.getElementsByClassName('liked-num')); like_num.text(data['liked_num']); } else { if (data['code'] === 400) { $('#login_model').modal('show'); } else { alert(data['msg']); } } }, error: function (xhr) { console.log(xhr); } }); } // 處理回覆 function reply(reply_comment_id) { $('#reply_comment_id').val(reply_comment_id); let html = $('#comment-' + reply_comment_id).html(); $('#reply-content').html(html); $('#reply-content-container').show(); // 顯示內容 // 滾動富文字編輯器 $('html').animate({scrollTop: $('#comment-form').offset().top - 60}, 300, function () { // 動畫執行完畢後執行的方法 // 讓富文字編輯器獲得焦點 CKEDITOR.instances['id_text'].focus(); }); } function numFormat(num) { return ('00' + num).substr(-2); } function timeFormat(timestamp) { let datetime = new Date(timestamp * 1000); let year = datetime.getFullYear(); let month = numFormat(datetime.getMonth() + 1); let day = numFormat(datetime.getDate()); let hour = numFormat(datetime.getHours()); let minute = numFormat(datetime.getMinutes()); let second = numFormat(datetime.getSeconds()); return `${year}-${month}-${day} ${hour}:${minute}:${second}` } // 提交評論 $('#comment-form').submit(function () { // 獲取錯誤框 let comment_error = $('#comment-error'); comment_error.text(''); // 更新資料到textarea CKEDITOR.instances['id_text'].updateElement(); let comment_text = CKEDITOR.instances['id_text'].document.getBody().getText().trim(); // 判斷是否為空 if (!(CKEDITOR.instances['id_text'].document.getBody().find('img')['$'].length !== 0 || comment_text !== '')) { // 顯示錯誤資訊 comment_error.text('評論內容不能為空'); return false; } //非同步提交 $.ajax({ url: "{% url 'update_comment' %}", type: 'POST', data: $(this).serialize(),// 序列化表單值 cache: false, // 關閉快取 success: function (data) { let reply_comment = $('#reply_comment_id'); if (data['status'] === 'SUCCESS') { console.log(data); // 插入資料 // es6寫法 let like_html = `<div class="like" onclick="likeChange(this,'${data['content_type']}',${data["pk"]})"> <i class="far fa-thumbs-up"></i> <span class="liked-num">0</span> </div>`; if (reply_comment.val() === '0') { // 插入評論 let comment_html = `<div id="root-${data["pk"]}" class="comment"> <span>${data["username"]}</span> <span>${timeFormat(data["comment_time"])}</span> <div id="comment-${data["pk"]}">${data["text"]}</div> ${like_html} <a href="javascript:reply(${data["pk"]})">回覆</a> </div>`; $('#comment-list').prepend(comment_html); } else { // 插入回覆 let reply_html = `<div class="reply"> <span>${data["username"]}</span> <span>${timeFormat(data["comment_time"])}</span> <span>回覆：</span><span>${data["reply_to"]}</span> <div id="comment-${data["pk"]}">${data["text"]}</div> ${like_html} <a href="javascript:reply(${data["pk"]})">回覆</a> </div>`; $('#root-' + data['root_pk']).append(reply_html); } // 清空編輯框的內容 CKEDITOR.instances['id_text'].setData(''); $('#reply-content-container').hide(); // 回覆完隱藏掉要回復的內容 reply_comment.val('0'); // 將回復標誌重置0 $('#no-comment').remove(); // 如果有沒回復標誌，清除掉5 comment_error.text('評論成功'); } else { // 顯示錯誤資訊 comment_error.text(data['message']) } }, error: function (xhr) { console.log(xhr); } }); return false; }); </script> <script> $(".nav-blog").addClass("active").siblings().removeClass("active"); </script> {% endblock %}
from django.http import JsonResponse from django.contrib.contenttypes.models import ContentType from .models import Comment from .forms import CommentForm def update_commit(requests): comment_form = CommentForm(requests.POST, user=requests.user) if comment_form.is_valid(): comment = Comment() comment.user = comment_form.cleaned_data['user'] comment.text = comment_form.cleaned_data['text'] comment.content_object = comment_form.cleaned_data['content_object'] parent = comment_form.cleaned_data['parent'] if parent is not None: comment.root = parent.root if parent.root is not None else parent comment.parent = parent comment.reply_to = parent.user comment.save() # 返回資料 data = { 'status': 'SUCCESS', 'username': comment.user.get_nickname_or_username(), 'comment_time': comment.comment_time.timestamp(), # 返回時間戳 'text': comment.text.strip(), 'reply_to': comment.reply_to.get_nickname_or_username() if parent is not None else '', 'pk': comment.pk, 'root_pk': comment.root.pk if comment.root is not None else '', 'content_type': ContentType.objects.get_for_model(comment).model, } else: data = { 'status': 'ERROR', 'message': list(comment_form.errors.values())[0][0], } return JsonResponse(data)comment下的views.py
""" Django settings for myblog project. Generated by 'django-admin startproject' using Django 2.1.3. For more information on this file, see https://docs.djangoproject.com/en/2.1/topics/settings/ For the full list of settings and their values, see https://docs.djangoproject.com/en/2.1/ref/settings/ """ import os # Build paths inside the project like this: os.path.join(BASE_DIR, ...) BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__))) # Quick-start development settings - unsuitable for production # See https://docs.djangoproject.com/en/2.1/howto/deployment/checklist/ # SECURITY WARNING: keep the secret key used in production secret! SECRET_KEY = 'ea+kzo_5k^[email protected]([email protected]*+w5d11=0mp1p5ngr' # SECURITY WARNING: don't run with debug turned on in production!2. DEBUG = True ALLOWED_HOSTS = ['*'] # Application definition INSTALLED_APPS = [ 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes', 'django.contrib.sessions', 'django.contrib.messages', 'django.contrib.staticfiles', 'ckeditor', 'ckeditor_uploader', 'blog.apps.BlogConfig', # 將自己建立的app新增到設定中 'read_statistics.apps.ReadStatisticsConfig', # 註冊閱讀統計app 'comment.apps.CommentConfig', # 註冊評論 'likes.apps.LikesConfig', # 註冊點贊 'user.apps.UserConfig', # 使用者相關 ] MIDDLEWARE = [ 'django.middleware.security.SecurityMiddleware', 'django.contrib.sessions.middleware.SessionMiddleware', 'django.middleware.common.CommonMiddleware', 'django.middleware.csrf.CsrfViewMiddleware', 'django.contrib.auth.middleware.AuthenticationMiddleware', 'django.contrib.messages.middleware.MessageMiddleware', 'django.middleware.clickjacking.XFrameOptionsMiddleware', 'blog.middleware.mymiddleware.My404', # 新增自己的中介軟體 ] ROOT_URLCONF = 'myblog.urls' TEMPLATES = [ { 'BACKEND': 'django.template.backends.django.DjangoTemplates', 'DIRS': [ os.path.join(BASE_DIR, 'templates'), ], 'APP_DIRS': True, 'OPTIONS': { 'context_processors': [ 'django.template.context_processors.debug', 'django.template.context_processors.request', 'django.contrib.auth