BBS-添加文章及文章中图片

Posted 2021-03-22 mqhpy

目录

• BBS项目中的添加文章
• BBS项目中的添加文章中的图片

BBS项目中的添加文章

1.添加文章的时候，我们需要特别注意的是这个地方需要利用到到BeautifulSoup这个模块，因为我们在input的框中输入的内容，到了后端我们需要通过BeautifulSoup模块进行转成后端可以使用的文档

from bs4 import BeautifulSoup
# 添加文章
def add_article(request):
    tag_list = models.Tag.objects.filter(blog=request.user.blog)
    categroy_list = models.Categroy.objects.filter(blog=request.user.blog)
    if request.method == 'POST':
        title = request.POST.get('title')
        content = request.POST.get('content')
        tags_list_id = request.POST.getlist('tags_list')
        categroy_id = request.POST.get('tategroy')
        print('获取分类id', categroy_id)

        # 先生成一个模块对象,将文章放进去，获得一个转义后的文章对象
        soup = BeautifulSoup(content, 'html.parser')
        # print(soup.text),获取的是纯文本
        tags = soup.find_all()
        # print(tags)获取文章全部标签
        for tag in tags:
            if tag.name == 'script':  # 找到标签名叫script的标签
                tag.decompose()  # 删除标签

        # 截取文章获取文章的150个字符串
        desc = soup.text[0:150]
        # 操作文章表添加数据到数据库
        article_obj = models.Article.objects.create(title=title, content=str(soup), desc=desc, category_id=categroy_id,
                                                    blog=request.user.blog)
        
        # 操作第三张表
        obj_list = []
        for tag_id in tags_list_id:
            obj_list.append(models.Article2Tag(article=article_obj, tag=tag_id))
        models.Article2Tag.objects.bulk_create(obj_list)  # 这里我们可以通过bulk_create来进行批量创建

        return redirect('/backend/')
    return render(request, 'backend/add_article.html', locals())

2.在文章编辑的时候可以使用kindeditor编辑器，我们需要从网上下载下来，保存到我们的本地静态文件中，然后导入就可以使用了

//导入kindeditor编辑器
<script charset="utf-8" src="/static/kindeditor/kindeditor-all-min.js"></script>
//使用kindeditor编辑器
<script>
    KindEditor.ready(function (K) {
    window.editor = K.create('#id_comment',{
        width: '100%',
        height:'450px',
        resizeType:0,
        uploadJson : '/upload_img/',//上传到这个URL
        extraFileUploadParams : {
            csrfmiddlewaretoken : '{{ csrf_token }}',
        }
    });
});
</script>

BBS项目中的添加文章中的图片

文章内上传图片这里需要特别注意点，我们使用什么编辑器，从编辑器中找适合我们所需要上传图片的方法。这里我们需要手动拼存放图片/静态文件的文件路径。

# media配置，能够将用户上传的所有文件都统一指定到这个文件夹下
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')

# 上传静态文件或者图片
import os
from BBS import settings
def upload_img(request):
    '''
    上传图片这里需要特别注意点，
    我们用的什么编辑器，从使用的编辑器中找，
    适合我们所需要上传图片的方法
    :param request:
    :return:
    '''

    back_dic = {'error': 0}
    # 获取用户上传的图片，然后保存到本地
    if request.method == 'POST':
        # 获取文件或图片
        file_obj = request.FILES.get('imgFile')
        # 手动拼接文件存储的文件路径
        file_path = os.path.join(settings.BASE_DIR, 'media', 'article_img')
        if not os.path.isdir(file_path):  # 判断是否有这个文件夹，
            os.mkdir(file_path)  # 如果没有就创建一个这样的文件夹
        # 文件操作
        # 手动拼接文件名全路径,(地址加文件名)
        img_path = os.path.join(file_path, file_obj.name)
        with open(img_path, 'wb') as f:
            for line in file_obj:
                f.write(line)
        """
   //成功时
{
       "error" : 0,
       "url" : "http://www.example.com/path/to/file.ext"
       这个路径是文件或者是图片的全路径
}
//失败时
{
       "error" : 1,
       "message" : "错误信息"
}

"""
        _url = '/media/article_img/%s' % file_obj.name
        back_dic['url'] = _url
    return JsonResponse(back_dic)