• bbs--文章后台


    bbs--文章后台

     需求分析

    在个人文章后台中

    1 有添加文章的接口

      展示文章标题输入框

      文本编辑框

      标签 分类 选择框

      提交

    2 编辑文章的接口

      页面与添加文章相同,就是把该文章的内容展示到文本编辑框中

    3 删除文章的接口

      点击删除,文章清除

    4 页面2 10布局,左侧有添加文章功能

      右侧以列表形式展现每一条文章,且有分页功能 

    文章发布

    模块及插件引入

    kindeditor插件<a>

    BS4模块<a>

      安装

      pip install beautifulsoup4

      简单使用

    1. from bs4 import BeautifulSoup
    # 对一段HTML格式的内容做解析
    soup = BeautifulSoup('html内容', 'html.parser')
    2. 找标签:
    soup.a
    3. 找标签的样式:
    soup.a["class"]
    4. 找特定的标签
    soup.select("script")
    5. 删除标签
    .decompose()
    6. 取text文本内容
    soup.text
    7. 格式化html内容
    soup.prettify()
    View Code

    代码思路

    页面展示

    1 前端页面布局,然后添加文本编辑按照kindeditor插件的说明,进行配置

    2 这里说一下图片展示

      前端方面按照kindeditor插件的说明

      后端单独写一个专门对图片的视图函数

      1 接受前端发送的图片文件对象

      2 把文件对象写入我们自己定义的media下的文件夹中

      3 将文件路径,以url形式返回给前端

    文章发布

    1 前端通过form的post请求,发送 文章标题  内容  标签  

    2 后端接受上面的数据,保存数据 文章记录 和 文章详情记录 事务链接

      这里要注意的是接受的文章内容为html标签

      我们要通过bs4模块将接受的内容进行编辑

      1 将文本内容,切前150个数据作为文章描述

      2 将得到的文章格式化成字符串,保存在文章详情数据库中

    如果想用ajax获取文本内容

    实际操作

      html 

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>添加新页面</title>
        <link rel="stylesheet" href="/static/bootstrap-3.3.7/css/bootstrap.css">
    </head>
    <body>
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <form action="" method="post">
                {% csrf_token %}
                    <div class="form-group">
                        <label for="title">标题</label>
                        <input type="text" class="form-control" id="title" name="title" placeholder="标题">
                    </div>
                    <div class="form-group">
                        <label for="content">内容</label>
                        <textarea class="form-control" name="content" id="content" cols="30" rows="20"></textarea>
                    </div>
    
                    <div class="form-group">
                        <label for="category">文章分类</label>
                        <select name="category" id="category" class="form-control">
                            {% for category in category_list %}
                                <option value="{{ category.id }}">{{ category.title }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <button type="submit" class="btn btn-success">发布</button>
                </form>
            </div>
        </div>
    </div>
    <script src="/static/js/jquery.js"></script>
    <script charset="utf-8" src="/static/plugins/kindeditor/kindeditor-all.js"></script>
    <script charset="utf-8" src="/static/plugins/kindeditor/lang/zh-CN.js"></script>
    <script>
            KindEditor.ready(function(K) {
                    window.editor = K.create('#content', {
                        "uploadJson": "/blog/upload/",
                        "extraFileUploadParams": {"csrfmiddlewaretoken": $("[name='csrfmiddlewaretoken']").val()}
                    });
            });
    </script>
    </body>
    </html>
    View Code

    views

    # 添加新文章
    def add_article(request):
        if request.method == "POST":
            # 获取用户填写的文章内容
            title = request.POST.get("title")
            content = request.POST.get("content")
            category_id = request.POST.get("category")
    
            # 清洗用户发布的文章的内容,去掉script标签
            soup = BeautifulSoup(content, "html.parser")
            script_list = soup.select("script")
            for i in script_list:
                i.decompose()
            # print(soup.text)
            # print(soup.prettify())
    
            # 写入数据库
            with transaction.atomic():
                # 1. 先创建文章记录
                article_obj = models.Article.objects.create(
                    title=title,
                    desc=soup.text[0:150],
                    user=request.user,
                    category_id=category_id
                )
                # 2. 创建文章详情记录
                models.ArticleDetail.objects.create(
                    content=soup.prettify(),
                    article=article_obj
                )
            return redirect("/blog/backend/")
    
        # 把当前博客的文章分类查询出来
        category_list = models.Category.objects.filter(blog__userinfo=request.user)
        return render(request, "add_article.html", {"category_list": category_list})
    
    
    # 富文本编辑器的图片上传
    def upload(request):
        res = {"error": 0}
        print(request.FILES)
        file_obj = request.FILES.get("imgFile")
        file_path = os.path.join(settings.MEDIA_ROOT, "article_imgs", file_obj.name)
        with open(file_path, "wb") as f:
            for chunk in file_obj.chunks():
                f.write(chunk)
        # url = settings.MEDIA_URL + "article_imgs/" + file_obj.name
        url = "/media/article_imgs/" + file_obj.name
        res["url"] = url
        return JsonResponse(res)
    View Code

    删除文章

    代码思路

    1 js 点击删除,获取对应这条文章的id,传给后端

    2 后端删除数据

    修改文章

    与文章发布相同

    1 点击编辑,通过get请求得到文章的id,

    2 后端通过文章id,查询出文章内容,传给后端。

    代码思路

  • 相关阅读:
    JerryScript:物联网开发者的得力工具
    使用 scipy.fft 进行Fourier Transform:Python 信号处理
    解析WeNet云端推理部署代码
    华为云消息队列服务荣获首个双擎可信云稳定性最高级认证
    .NET从互联网上获取当前时间并更新系统时间
    豆瓣电台WP7客户端 开发记录1
    HTML格式化为标准XML
    豆瓣电台WP7客户端 开发记录6
    豆瓣电台 for WP7 客户端开源
    豆瓣电台WP7客户端 开发记录7
  • 原文地址:https://www.cnblogs.com/benson321/p/9512027.html
Copyright © 2020-2023  润新知