基于 flask 框架的模拟instagram 图片分享网站的开发 4

最新推荐文章于 2024-08-01 18:54:16 发布

枯萎的海风

最新推荐文章于 2024-08-01 18:54:16 发布

阅读量1.6k

点赞数

分类专栏： javascript flask python 文章标签： flask python ajax javascript

本文链接：https://blog.csdn.net/zhyh1435589631/article/details/51875654

版权

python 同时被 3 个专栏收录

47 篇文章 1 订阅

订阅专栏

flask

9 篇文章 0 订阅

订阅专栏

javascript

4 篇文章 0 订阅

订阅专栏

1. 摘要

这次添加的功能是个人页图片上传功能和图片详情页评论异步加载功能
传送门：
基于 flask 框架的模拟instagram 图片分享网站的开发 3
基于 flask 框架的模拟instagram 图片分享网站的开发 2
基于 flask 框架的模拟instagram 图片分享网站的开发 1

2. 流程

2.1 添加评论功能

首先为点击的空间添加id 方便js 查找
<section class="discuss-edit"> <a class="icon-heart-empty"></a> <input placeholder="添加评论..." id = "jsCmt" type="text"> <button class="more-info" id = "jsSubmit">更多选项</button> </section>

添加js 响应文件

$(function () {
    var oExports = {
        initialize: fInitialize,
        encode: fEncode
    };
    oExports.initialize();

    function fInitialize() {
        var that = this;
        var sImageId = window.imageId;
        var oCmtIpt = $('#jsCmt');
        var oListDv = $('ul.js-discuss-list');

        // 点击添加评论
        var bSubmit = false;
        $('#jsSubmit').on('click', function () {
            var sCmt = $.trim(oCmtIpt.val());
            // 评论为空不能提交
            if (!sCmt) {
                return alert('评论不能为空');
            }
            // 上一个提交没结束之前，不再提交新的评论
            if (bSubmit) {
                return;
            }
            bSubmit = true;
            $.ajax({
                url: '/addcomment/',
                type: 'post',
                dataType: 'json',
                data: {image_id: sImageId, content: sCmt}
            }).done(function (oResult) {
                if (oResult.code !== 0) {
                    return alert(oResult.msg || '提交失败，请重试');
                }
                // 清空输入框
                oCmtIpt.val('');
                // 渲染新的评论
                var sHtml = [
                    '<li>',
                        '<a class="_4zhc5 _iqaka" title="', that.encode(oResult.username), '" href="/profile/', oResult.user_id, '">', that.encode(oResult.username), '</a> ',
                        '<span><span>', that.encode(sCmt), '</span></span>',
                    '</li>'].join('');
                oListDv.prepend(sHtml);
            }).fail(function (oResult) {
                alert(oResult.msg || '提交失败，请重试');
            }).always(function () {
                bSubmit = false;
            });
        });
    }

    function fEncode(sStr, bDecode) {
        var aReplace =["&#39;", "'", "&quot;", '"', "&nbsp;", " ", "&gt;", ">", "&lt;", "<", "&amp;", "&", "&yen;", "¥"];
        !bDecode && aReplace.reverse();
        for (var i = 0, l = aReplace.length; i < l; i += 2) {
             sStr = sStr.replace(new RegExp(aReplace[i],'g'), aReplace[i+1]);
        }
        return sStr;
    };

});

简单的分析一下这段代码：
点击提交之后，通过 ajax 请求，将评论内容和图片id 通过post 方式，发送到路由‘ /addcomment/’上面，后端处理后，返回所需要的 json 数据（code， username， user_id），实现相应html 代码加载

添加评论的路由响应

@app.route('/addcomment/', methods=['POST'])
def addcomment():
    image_id = int(request.values['image_id'])
    content = request.values['content'].strip()
    comment = Comment(content, image_id, current_user.id)
    db.session.add(comment)
    db.session.commit()
    map = {'user_id':current_user.id, 'username' : current_user.username, 'code':0}
    return json.dumps(map)

2.2 图片上传功能

添加相应的前端响应

{% if current_user.id == user.id %}
                                    <span class="verified" title="已验证">已验证</span>
                                    <span class="_jxp6f _e616g" style="display:inline-block;position:relative;">
                                        <form method="post" action="/upload/" enctype="multipart/form-data">
                                            <button class="btn-success">上传图片</button>
                                            <input name="file" type="file" onchange="this.parentNode.submit()" style="opacity:0;position:absolute;top:0;left:0;display:block;width:100%;height:100%;">
                                        </form>
                                    </span>
                                    <button class="more-info">选项</button>
                                {%endif%}

同时创建存储路由
这里面逻辑流程很简单，首先从http的post 请求中获取file文件流，并将其保存在本地（或者云服务器端），同时返回一个图片的访问地址，以及定义一个相应的访问该图片的路由即可
下面是存储本地的代码

def save_to_local(file, file_name):
    save_dir = app.config['UPLOAD_DIR']
    file.save(os.path.join(save_dir, file_name))
    return '/image/' + file_name

@app.route('/image/<image_name>')
def view_image(image_name):
    return send_from_directory(app.config['UPLOAD_DIR'], image_name)

@app.route('/upload/', methods=['POST'])
def upload():
    file = request.files['file']
    if file.filename.find('.') > 0:
        file_ext = file.filename.rsplit('.', 1)[1].strip().lower()
        if file_ext in app.config['ALLOWED_EXT']:
            file_name = str(uuid.uuid1()).replace('-', '') + '.' + file_ext
            if app.config['SAVE_IN_LOCAL'] == True:
                url = save_to_local(file, file_name)
            else:
                url = save_file_to_cloud(file_name, file)
            if url != None:
                db.session.add(Image(url, current_user.id))
                db.session.commit()

    return redirect('/profile/%d/' % current_user.id)

这是存储在云端的api

access_key = app.config['QINIU_ACCESS_KEY']
secret_key = app.config['QINIU_SECRET_KEY']
bucket_name = app.config['QINIU_BUCKET_NAME']

q = Auth(access_key, secret_key)

def save_file_to_cloud(save_filename, source_file):
    #生成上传 Token，可以指定过期时间等
    token = q.upload_token(bucket_name, save_filename)
    filepath = os.path.join(app.config['UPLOAD_DIR'], save_filename)
    source_file.save(filepath)
    ret, info = put_file(token, save_filename, filepath)

    # ret, info = put_stream(token, save_filename, source_file.stream,
    #                        "qiniu" ,os.fstat(source_file.stream.fileno()).st_size)
    print info
    if info.status_code == 200:
        return os.path.join(app.config['QINIU_DOMAIN'], save_filename)
    return None