bbs--文章后台

需求分析

在个人文章后台中

1 有添加文章的接口

　　展示文章标题输入框

　　文本编辑框

　　标签分类选择框

　　提交

2 编辑文章的接口

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

3 删除文章的接口

　　点击删除，文章清除

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

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

文章发布

模块及插件引入

1 kindeditor插件<\a>

2 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()

代码思路

页面展示

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="" rows=""></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>

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)

删除文章

代码思路

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

2 后端删除数据

修改文章

与文章发布相同

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

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

代码思路