Django - BBS - 项目学习 - 文章的修改实现

目录

一、路由设计

1-1 跳转路由

二、 视图函数设计

三、前端设计（文档渲染的两种方式）

3-1 使用后端获取文章内容，同步页面渲染

3-2 使用ajax在网页读取完毕之后进行渲染（Jquery文档加载完毕后、windows页面加载完毕后）

---

一、路由设计

     # 修改文章
    url(r'^update_article/(?P<pk>\d+)', views.update_article),
    # ajax获取文件的口
    url(r'^get_article/(?P<pk>\d+)', views.get_article),

1-1 跳转路由

<td><a href="/update_article/{{ article.pk }}">修改</a></td>

 

二、 视图函数设计

# -----------------修改文章内容----------

# def update_article(request,pk):
#     '''
#     使用后台获取文章内容提前对文章text内进行渲染（不推荐使用、）
#     :param request:
#     :param pk:
#     :return:
#     '''
#     if request.method=='GET':
#         article=models.Article.objects.get(pk=pk)
#         return render(request,'back/update_article.html',{'article':article})


def update_article(request, pk):
    '''
    使用ajax进行页面获取后渲染文章内容，后台只返回文章pk
    注意：实际修改操作使用add_article进行实现
    :param request:
    :param pk:
    :return:
    '''
    if request.method == 'GET':
        return render(request, 'back/update_article2.html', {'article_id': pk})


def get_article(request, pk):
    '''
    获取文章内容
    :param request:
    :param pk:
    :return:
    '''
    article = models.Article.objects.get(pk=pk)

    return JsonResponse({'title': article.title, 'content': article.content})

三、前端设计（文档渲染的两种方式）

3-1 使用后端获取文章内容，同步页面渲染

{% extends 'back/back_base.html' %}

{% block home %}


    <div>
        <p>修改文章</p>
        <form action="/add_article/" method="post">
            {% csrf_token %}

            <p>标题</p>
            <p><input type="text" name="title" class="form-control" value="{{ article.title }}"></p>
            <p>内容(KindEdit编辑器，不支持拖放/粘贴上传图片)</p>
            <p>
             <textarea name="content" id="editor_id" cols="30" rows="10">
                {{ article.content }}

                </textarea>

            </p>
            <input type="submit" class="btn btn-danger" value="提交">


        </form>
    </div>



    <script charset="utf-8" src="/static/kindeditor/kindeditor-all.js"></script>
    <script>
        KindEditor.ready(function (K) {
            window.editor = K.create('#editor_id', {
                width: '100%',
                height: '500px',
                //item 控制要显示的控件
                //控制控件不能拖动
                resizeType: 0,
                //上传图片,uploadJson 指的是上传的路径,也就是咱们的路由
                uploadJson: '/upload_img/',
                //添加一些额外的参数
                extraFileUploadParams: {
                    'csrfmiddlewaretoken': '{{ csrf_token }}',
                    'article_id': '1'
                },
                //修改默认上传文件的名字
                filePostName: 'myfile'

            })

        });
    </script>
{% endblock %}

3-2 使用ajax在网页读取完毕之后进行渲染（Jquery文档加载完毕后、windows页面加载完毕后）

{% extends 'back/back_base.html' %}

{% block home %}


    <div>
        <p>修改文章</p>
        <form action="/add_article/" method="post">
            {% csrf_token %}

            <p>标题</p>
            <p><input type="text" name="title" class="form-control" id="title" article_id="{{ article_id }}"></p>
            <p>内容(KindEdit编辑器，不支持拖放/粘贴上传图片)</p>
            <p>
             <textarea name="content" id="editor_id" cols="30" rows="10">


                </textarea>

            </p>
            <input type="submit" class="btn btn-danger" value="提交">


        </form>
    </div>



    <script charset="utf-8" src="/static/kindeditor/kindeditor-all.js"></script>
    <script>
        KindEditor.ready(function (K) {
            window.editor = K.create('#editor_id', {
                width: '100%',
                height: '500px',
                //item 控制要显示的控件
                //控制控件不能拖动
                resizeType: 0,
                //上传图片,uploadJson 指的是上传的路径,也就是咱们的路由
                uploadJson: '/upload_img/',
                //添加一些额外的参数
                extraFileUploadParams: {
                    'csrfmiddlewaretoken': '{{ csrf_token }}',
                    'article_id': '1'
                },
                //修改默认上传文件的名字
                filePostName: 'myfile'

            })

        });
        //当页面加载完成以后,发ajax请求,拿回文章数据
        //jquery 的页面加载完成（仅页面文档加载完毕之后执行）
        $(function () {
            var id = $("#title").attr('article_id');
            $.ajax({
                url: '/get_article/' + '{{ article_id }}',
                type: 'get',
                success: function (data) {
                    console.log(data);
                    $("#title").val(data.title);
                    // 设置HTML内容
                    window.editor.html(data.content);

                }

            })
        });
        //window 的页面加载完成(页面所有资源加载完毕之后执行)
        /*
        window.onload = function () {
            //拿到我隐藏的id
            var id = $("#title").attr('article_id')
            $.ajax({
                url: '/get_article/' + '{{ article_id }}',
                type: 'get',
                success: function (data) {
                    console.log(data)
                    $("#title").val(data.title)
                    // 设置HTML内容
                    window.editor.html(data.content);

                }

            })

        }
        */
    </script>
{% endblock %}