博客功能更新及细节优化

类视图的CSRF验证

为了防止跨域攻击，Django引入了CSRF验证，凡是POST请求，都需要验证通过后才能与服务器交互。CSRF验证需要前后端共同实现。

前端添加CSRF验证仅需要在<form></form>标签内添加{% csrf_token %}即可。在返回网页时，Django会自动将其替换成value="csrf信息"的input标签。

后端分两种情况，一种为url引用的方法，另一种为url引用的类试图如Example.as_view( )。这两种情况引入CSRF验证的方法也不一样。

对于方法，仅需要在方法前添加装饰器：@csrf_exempt即可，例如：

@csrf_exempt
def example(request):
	"""方法实现"""
	return xxx

对于类视图，则需要使用csrf_exempt(Example.as_view( ))将其包裹例如：

urlpatterns = [
    path('example/', csrf_exempt(views.Example.as_view()), name='example'),  # 路由
]

阿里云服务器发送邮件

在配置博客的时候，在这里踩了一个坑。阿里云服务器屏蔽了25端口，所以所有配置成25端口的SMTP邮箱都会出现响应超时的情况，最后把它改成465端口才解决这个问题。

文章的自动保存

文章自动保存功能以上线，每1min文章就会自动保存一次。

为了实现文章自动保存的功能，我将原先的create方法和update方法合并在了一起，形成了operations方法。

原代码在新建文章时，所有的数据都保存在前端，只有前端发出POST请求时，才new article进行存储。现在新建文章时，会先new一个article对象，再进行后续的操作。因此，网页模板从原先的create.html和update.html变成了现在仅有一个update.html。新的article对象保存和发布使用的同一个方法，通过传入is_save参数判断是需要保存，还是需要发布。未发布的文章，通过is_show判断其是否该显示在列表。

不知道是因为jq的bug还是什么原因，Ajax发送请求时，只要发送了经过.replace( )处理了的数据，前端就会报错。因此也只能将标签多分隔符的功能给转到后端去了。

小BUG：因在article.modle中设置了title、body不可为空，所以在title或body其中一个为空时，文章无法正确保存。后续会对其进行修改，同时也会涉及到后续提交文章时对title、body的判断。(已于文章发布当晚处理完成。设置title、body可为空，改为在发布时检查是否为空，为空则不允许发布)

文章及评论显示头像

在文章及评论中添加了头像显示，具体实现非常简单，就不过多赘述。此外，还有个人信息卡没有合理的利用起来，后续考虑增加相关功能。

在实现这个功能时，我顺带更改了头像上传后的处理方式。原先头像上传后会将其短边缩放成60px，考虑到头像只使用方形，故此现在的处理逻辑，时将图片缩放后，从中间截取60x60的正方形。便于数据的轻量化，加快网页的加载。

此外，考虑到个人博客人流量较小(有一部分我禁止了未登录访问的原因)，我将个人头像的文件名固定，每当上传新头像时，旧头像就会被删除，降低了服务器的空间占用，也方便检索个人头像。

ckeditor工具栏更改

事实证明，我昨天的想法是非常可行的，通过js的.after( )方法，我将保存和发布按钮添加到了文章的工具栏上，同时保存按钮兼具了保存状态的显示。

我以前是比较抗拒js的学习的，通过这几天使用js编辑前端界面、发送ajax请求等，我觉得我大概是了解js脚本的写法了。js代码整体和Java差不了多少，只是面向的对象不一样，一些方法始终是有些不同。

快捷键的添加

监听用户的键盘输入就可以实现快捷键功能，代码模板如下：

$(window).keydown(function(e) {  // 此处使用Jquery选择器
        if (e.keyCode === 83 && e.ctrlKey) {  // 根据按键ASCII码判断用户按下的案件
            e.preventDefault();  // 禁止浏览器响应快捷键（浏览器会响应Ctrl+S保存HTML文件）
            saveArticle();  // 检测到快捷键被按下后的方法
        }
    });

结合前边修改ckeditor工具栏的内容，在元素中添加属性data-cke-tooltip-text="保存(Ctrl+S)"即可在鼠标悬浮在按钮上时进行提示(此处使用ckeditor自有功能)。

最后附上键盘按键对应的ASCII 编码：