发布文章管理系统开发中遇到的问题整理 Django + Ckeditor + Apache

这几天打完了黑魂3，感觉黑魂3我都能通关，还有什么能难倒我的？

所以作为网站开发菜鸡的我，准备挑战实现给网站增加动态发布文章的需求，有点类似博客管理，构建一个可以发布文章的后台，然后通过循环的方式将数据库内容展示到前端。

终于把这个需求给完成了，开心之余将遇到的一些坑在这里记录一下。

一、写在前面

首先，如果单说我要构建一个文章后台管理系统，逻辑还是很简单的，Git clone……，就是构建后台数据库->构建后台->构建前端这三步走。

那么在已有网站上新增这样的功能，其实原理也是一样的。

但是，在这三步中，我遇到了很多的小坑，所以在这针对三个步骤进行坑的总结。

二、后台数据库设计

有的朋友要问了，数据库设计有啥好讲的，其实在这里算是一个tricks的分享吧。数据库表中的内容，是全部可以用于前端页面的，包括显式内容，就是我们打开网页能直接看到的内容；以及隐含内容，我们看不到的，比如网页的description、keywords这种，用于描述网站、优化网站检索结果排名的内容。那么，我们在构建数据库的时候，顺便，就可以把隐含和显式的内容全部存储到数据库中。这样，在我们后台获取数据库内容之后，可以通过js动态渲染和加载的方式，将内容加载到前端中，大大的提高网页的灵活度。

三、Ckeditor安装

3.1 无网络环境下ckeditor配置安装环境

       后台我们采用Django自带的admin后台，搭配可以上传图片的富文本框Ckeditor，对其进行改造[1]（https://blog.csdn.net/paul0926/article/details/93874640， 跟着这个博客一步步来，就能完成使用Ckeditor的使用）

图1 RichTextUploadingField直接一罩就完事儿，so easy

我的开发环境是断网的，访问的时候会做映射来访问，所以安装ckeditor需要离线。我们需要提前下载好django_ckeditor[2]（https://pypi.org/project/django-ckeditor/#files）和其所依赖的django_js_asset[3]（https://pypi.org/project/django-js-asset/#files）。先安装django_js_asset，再安装django_ckeditorh。此外，有说pillow的依赖的俺不清楚，可能Anaconda安装的时候自带了，所以这个我没有重装。

3.2  Ckeditor的 JS、CSS文件的配置

Ckeditor的 RichTextUploadingField方法在网页中会使用到ckeditor自带的js文件和css文件，由于我托管给了apache，最简单方便的方式：直接将整个文件夹复制到项目的static文件中。

图2 复制的位置图

我的这个文件的原位置是：“D:\anaconda3\Lib\site-packages\ckeditor_uploader\static\ckeditor”，可以参考一下

3.3 Apache 配置media文件访问权限

如果没有配置Apache的conf文件，会只有图片目录，但是不能访问图片的情况，这是Apache的安全机制吧。

图3 加载图片一直转圈无法显示，说明是被Apache给ban了

图4 修改Apache配置文件

图5 修改media内容，如上

修改之后restart服务就好了。

图6 修改之后，重启Apache服务，图片加载成功

四、前端加载

4.1 标题生成

前端构造如下：

{% for item in wikis %}
 <li >
 <span class="date-list">{{ item.publish_date }}</span>
 <a href="{% url 'showwiki' item.article_id %}" target="_blank" title="{{ item.title }}">{{ item.title }}</a>
 </li>
 {% endfor %}

知识点：

    1）构造超链接url标签，模板生成[4]：https://blog.csdn.net/chengcheng95588/article/details/78867957

    2）wikis 是返回词典结构中的key的名字

后台返回数据如下：

def wiki(request):
    info = 表名.objects.order_by('id').all()

    content = {
        'wikis' : info,
    }
    return render(request, '网站名.html', content)

知识点：1）查表结果直接构造返回结果。根据需求可以进一步改造content。

4.2 富文本内容展示

直接使用{{}}方法加载ckeditor生成的html标签，是不能加载出html结构的，我们需要添加autoescape标签[5]如下：

 {% autoescape off %}
 {{ ckeditor产生的富文本结果 }}
 {% endautoescape %}

五、最后

简单把文章发布三步走的过程中遇到的问题都记录了了下来，网站需求也要随着毕业将近也要告一段落了，调通bug那一瞬间是真的爽歪歪啊。

最后，遇事而迎，希望接下来的答辩也顺顺利利。

 

参考

[1] django项目中富文本ckeditor的设置（图片上传、添加代码等功能）: https://blog.csdn.net/paul0926/article/details/93874640

[2] django_ckeditor pip目录：https://pypi.org/project/django-ckeditor/#files

[3] django_js_asset pip目录：https://pypi.org/project/django-js-asset/#files

[4] 利用Django中的url方法实现地址动态拼接自动生成超链接地址：https://blog.csdn.net/chengcheng95588/article/details/78867957

[5] Built-in template tags and filters: https://docs.djangoproject.com/en/3.1/ref/templates/builtins/

[6] 最终效果：http://corpus.njau.edu.cn/wiki/