搭建自己的部落格（二十二）：通過ajax提交評論資訊，並增加公式編輯功能
阿新 • • 發佈：2018-11-21
編輯功能使用到了ckeditor的MathJax元件。ajax提交評論可以不用重新整理瀏覽器。
1、變化的部分
2、上程式碼：
ul.blog-types,ul.blog-dates { list-style-type: none; } div.blog:not(:last-child) { margin-bottom: 2em; padding-bottom: 1em; border-bottom: 1px solid #eee; } div.blog h3 { margin-top: 0.5emblog.css; } div.blog-info p { margin-bottom: 0; } div.blog-info p span{ margin-right: 10px; } div.blog-info-description { list-style-type: none; margin-bottom: 1em; } ul.blog-info-description li { display: inline-block; margin-right: 1em; } div.paginator { text-align: center; } div.container { max-width: 80%; } div.comment-area{ margin-top: 2em; } h3.comment-area-title{ border-bottom: 1px solid #ccc; padding-bottom: 0.4em; } div.django-ckeditor-widget { width: 100%; }
{# 引用模板 #} {% extends 'base.html' %} {% load staticfiles %} {% block header_extends %}blog_detail.html<link rel="stylesheet" href="{% static 'blog/blog.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> </ul> <p class="blog-content">{{ blog.content|safe }}</p> <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.username }},歡迎評論～</label> {% 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"> {% for comment in comments %} <div> {{ comment.user.username }} {{ comment.comment_time|date:"Y-m-d H:i:s" }} {{ comment.text|safe }} </div> {% empty %} {% endfor %} </div> </div> </div> </div> </div> {% endblock %} {% block js %} <script> $('#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) { if (data['status'] === 'SUCCESS') { console.log(data); // 插入資料 // es6寫法 let comment_html = `<div>${data["username"]} (${data["comment_time"]}): ${data["text"]}</div>`; $('#comment-list').prepend(comment_html); // 清空編輯框的內容 CKEDITOR.instances['id_text'].setData(''); } 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 %}
{# 引用模板 #}
{% extends 'base.html' %}
{% load staticfiles %}
{% block header_extends %}
<link rel="stylesheet" href="{% static 'blog/blog.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>
</ul>
<p class="blog-content">{{ blog.content|safe }}</p>
<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.username }},歡迎評論～</label>
{% 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">
{% for comment in comments %}
<div>
{{ comment.user.username }}
{{ comment.comment_time|date:"Y-m-d H:i:s" }}
{{ comment.text|safe }}
</div>
{% empty %}
{% endfor %}
</div>
</div>
</div>
</div>
</div>
{% endblock %}
{% block js %}
<script>
$('#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) {
if (data['status'] === 'SUCCESS') {
console.log(data);
// 插入資料
// es6寫法
let comment_html = `<div>${data["username"]} (${data["comment_time"]}): ${data["text"]}</div>`;
$('#comment-list').prepend(comment_html);
// 清空編輯框的內容
CKEDITOR.instances['id_text'].setData('');
} 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 %}
blog下的views.py
# -*- coding: utf-8 -*- # @Time : 18-11-20 下午10:47 # @Author : Felix Wang from django import forms from django.contrib.contenttypes.models import ContentType from django.db.models import ObjectDoesNotExist from ckeditor.widgets import CKEditorWidget class CommentForm(forms.Form): content_type = forms.CharField(widget=forms.HiddenInput) object_id = forms.IntegerField(widget=forms.HiddenInput) text = forms.CharField(widget=CKEditorWidget(config_name='comment_ckeditor'), error_messages={'required': '評論內容不能為空'}) def __init__(self, *args, **kwargs): if 'user' in kwargs: self.user = kwargs.pop('user') super().__init__(*args, **kwargs) # 表單驗證 def clean(self): # 判斷使用者是否登入 if self.user.is_authenticated: self.cleaned_data['user'] = self.user else: raise forms.ValidationError('使用者尚未登入') content_type = self.cleaned_data['content_type'] object_id = self.cleaned_data['object_id'] try: model_class = ContentType.objects.get(model=content_type).model_class() model_obj = model_class.objects.get(pk=object_id) self.cleaned_data['content_object'] = model_obj except ObjectDoesNotExist as e: raise forms.ValidationError('評論物件不存在') return self.cleaned_datacomment下的forms.py
from django.shortcuts import render, reverse, redirect from django.http import JsonResponse from .models import Comment from django.contrib.contenttypes.models import ContentType from .forms import CommentForm import re import copy 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'] comment.save() # 返回資料 data = { 'status': 'SUCCESS', 'username': comment.user.username, 'comment_time': comment.comment_time.strftime('%Y-%m-%d %H:%M:%S'), 'text': comment.text.strip(), } else: data = { 'status': 'ERROR', 'message': list(comment_form.errors.values())[0][0], } return JsonResponse(data)comment下的biews.py
# -*- coding: utf-8 -*- # @Time : 18-11-20 下午8:10 # @Author : Felix Wang from django import forms from django.contrib import auth from django.contrib.auth.models import User class LoginForm(forms.Form): username = forms.CharField(label='使用者名稱', required=True, widget=forms.TextInput(attrs={'class': 'form-control', 'placeholder': '請輸入使用者名稱'})) # widget指定input標籤型別 password = forms.CharField(label='密碼', widget=forms.PasswordInput(attrs={'class': 'form-control', 'placeholder': '請輸入密碼'})) def clean(self): # 驗證資料 username = self.cleaned_data['username'] password = self.cleaned_data['password'] user = auth.authenticate(username=username, password=password) if user is None: raise forms.ValidationError('使用者名稱或密碼錯誤') self.cleaned_data['user'] = user # 將驗證過的user放入clean_data return self.cleaned_data class RegisterForm(forms.Form): # 使用者名稱欄位 username = forms.CharField(label='使用者名稱', max_length=30, min_length=3, required=True, widget=forms.TextInput(attrs={'class': 'form-control', 'placeholder': '請輸入使用者名稱'})) # 郵箱欄位 email = forms.EmailField(label='郵箱', min_length=3, required=True, widget=forms.EmailInput(attrs={'class': 'form-control', 'placeholder': '請輸入郵箱'})) # 密碼欄位 password = forms.CharField(label='密碼', min_length=6, required=True, widget=forms.PasswordInput( attrs={'class': 'form-control', 'placeholder': '請輸入密碼'})) # 再次輸入密碼 password_again = forms.CharField(label='確認密碼', min_length=6, required=True, widget=forms.PasswordInput( attrs={'class': 'form-control', 'placeholder': '請再輸入一次密碼'})) def clean_username(self): username = self.cleaned_data['username'] if User.objects.filter(username=username).exists(): raise forms.ValidationError('使用者名稱已存在') return username def clean_email(self): email = self.cleaned_data['email'] if User.objects.filter(email=email).exists(): raise forms.ValidationError('郵箱已存在') return email def clean_password_again(self): password = self.cleaned_data['password'] password_again = self.cleaned_data['password_again'] if password != password_again: raise forms.ValidationError('兩次輸入的密碼不一致') return password_againmyblog下的forms.py <