DAY17 个人中心头像设置

技术DAY17 个人中心头像设置 DAY17 个人中心头像设置先来说存储文件的两种情形,同文件不同名的存储以及同名不同文件的存储
解决的方法就是指纹,用指纹来识别文件,并通过指纹进行文件的获取
写入

第17天个人中心头像设置。

我们来说一下存储文件的两种情况,即存储不同名称的文件和存储不同名称的文件。

解决方案是指纹,用于识别文件,通过指纹获取文件。

写指纹和获取指纹可以通过自己搭建服务器或者使用第三方平台来完成。在这里,

我们用的是第三方奇牛云,pip奇牛可以自己下载使用,比较方便。

获取齐牛云给出的需要拼接的文件地址、需要书写的指纹、域名。

之后,我们将完成头像的设置,并上传文件并获得它。

用户头像的设置

后台代码

首先,这是新的一页。首先,我们构建相应的视图并渲染页面,并注意页面是否需要。

在渲染数据时,是否需要构建对应的上下文,在设置URL时,需要与js中的ajax URL一致,请求方式一致。

获取呈现页面的请求,并发布接收和修改用户文件数据的请求。

或者先分析思路写评论。

第一步:

# 1.验证用户登录状态。

用户=g.user

如果不是用户:

返回重定向(url_for('index.index ')

当用户未登录时,跳转到主页。

第二步

get请求:

# 2.根据不同的要求执行不同的操作。

# 2.1 GET请求。

if request.method=='GET':

# 2.1.1施工背景。

上下文={ 0

用户' : user.to_dict(),如果用户无其他

}

# 2.1.2页面渲染。

返回render _ template(' news/user _ pic _ info . html ',**context)

我们需要将用户的头像发送到前端进行渲染,在用户的to_dict()函数中拼接文件地址,也就是可以从齐牛云那里得到文件。

七牛云域名我们在配置表中有,方便修改。

字典做出的评估意味着只有指纹存储在我们的数据库中。

post请求:

# 2.2POST请求。

if request.method=='POST':

# 2.2.1接收参数(文件、头像)。

avatar=request . files . get(' avatar ')

# 2.2.2检查参数。

尝试:

image=avatar.read()

e :除外

current_app.logger.error(e)

返回jsonify (errno=ret。paramerr,errmsg='参数错误')。

# 2.2.3上传图片到七牛云获取指纹。

尝试:

key=upload_file(图像)

e :除外

current_app.logger.error(e)

返回jsonify (errno=ret。thirderrr,errmsg='图片保存失败')。

#2.2.4更新用户头像信息。

user.avatar_url=key

尝试:

db.session.commit()

e :除外

current_app.logger.error(e)

db.session.rollback()

返回jsonify (errno=ret.dberr,errmsg=' save failed ')。

数据={ 0

avatar_url':常量。QINIU_DOMIN_PREFIX键

}

# 2.2.4返回json数据。

br> return jsonify(errno=RET.OK,errmsg="成功",data = data)

  

我们需要接收我们文件,request.files.get来接收文件数据,这里校验使用了read,当用户上传了文件,我们

最终接收到的是文件类型,它是可以读,如果不能就说明没有上传或者不是文件类型的文件,所以对参数进行了

是否有值和类型的校验,它是可以接收文本文件的,但是前端不能渲染。read后的数据为文件的二进制格式,

我们进行保存并将它上传到 七牛云

这个文件保存在utils ,也就是我们的工具文件夹。

upload_file 就是将文件上传到七牛云,并将指纹返回,这是第三方的操作记得进行异常捕捉并作出处理

完成后用变量保存并将它存到用户的资料中,也就是对我们查到的用户信息进行修改。

当修改完成之后前端的回调函数需要我们将完整的地址拼接好传给它进行刷新替换,所以我们最后的返回数据需要将完整的地址返回

前端代码:

HTML

!DOCTYPE html
html lang="en"
head
	meta charset="UTF-8"
	title用户中心/title
	link rel="stylesheet" type="text/css" href="../../static/news/css/reset.css"
	link rel="stylesheet" type="text/css" href="../../static/news/css/main.css"
    script type="text/javascript" src="../../static/news/js/jquery-1.12.4.min.js"/script?
    script type="text/javascript" src="../../static/news/js/jquery.form.min.js"/script
    script type="text/javascript" src="../../static/news/js/user_pic_info.js"/script
/head
body class="inframe_body"
    form class="pic_info"
        h3头像设置/h3
        div class="form-group"
            label class="label01"当前图像:/label
            img src="{% if user.avatar_url %}{{ user.avatar_url }}{% else %}../../static/news/images/user_pic.png{% endif %}" class="now_user_pic"
        /div
        div class="form-group"
            label上传图像:/label
            input type="file" name="avatar" class="input_file"
        /div
        
        div class="form-group"
            input type="submit" value="保 存" class="input_sub"
        /div
    /form
/body
/html

  

对img标签的src进行了判断,并给出不同展示,当有值时展示字典中拼接好的图片地址,也就是图片。没有值时就展示静态资源中默认的图片,

这样我们前端HTML中所有渲染用户头像的img标签的值都需要进行这样的修改,并且将传的user数据进行字典化,并且判断没有时的传入内容

不然未登录用户获取到的user为NONE,NONE是不能字典化,当user为NON时,我们就不进行字典化,且传NONE给前端,新闻首页和详情页都要修改以及用户中心

js文件

function getCookie(name) {
    var r = document.cookie.match("\\b" + name + "=([^;]*)\\b");
    return r  r[1] : undefined;
}
$(function () {
    $(".pic_info").submit(function (e) {
        e.preventDefault();
        //TODO 上传头像
        $(this).ajaxSubmit({
            url: "/user/pic_info",
            type: "POST",
            headers: {
                "X-CSRFToken": getCookie('csrf_token')
            },
            success: function (resp) {
                if (resp.errno == "0") {
                    $(".now_user_pic").attr("src", resp.data.avatar_url);
                    $(".user_center_picimg", parent.document).attr("src", resp.data.avatar_url);
                    $(".user_loginimg", parent.document).attr("src", resp.data.avatar_url)
                }else {
                    alert(resp.errmsg)
                }
            }
        });
    });
});

  

内容来源网络,如有侵权,联系删除,本文地址:https://www.230890.com/zhan/52945.html

(0)

相关推荐

  • 造纸术是哪个朝代发明的,纸的发明经历了哪四个时间段

    技术造纸术是哪个朝代发明的,纸的发明经历了哪四个时间段上古时代祖先主要依靠结绳记事,以后渐渐发明了文字,开始用甲骨来作为书写材料。后来又发现和利用竹片和木片(即简牍)以及缣帛作为书写材料。但由于缣帛太昂贵,竹木太笨重,于

    生活 2021年10月30日
  • 如何分析python在键值对的数据集合Dict

    技术如何分析python在键值对的数据集合Dict如何分析python在键值对的数据集合Dict,针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。dict是

    攻略 2021年12月4日
  • 外滩英文,用英语说出上海有名的地方

    技术外滩英文,用英语说出上海有名的地方老城隍庙 Town Gods Temple 豫园 Yuyan Garden 南京路 Nanjing Road
    外滩 the Bund
    新外滩 the new Bund
    玉佛寺

    生活 2021年10月28日
  • git版本控制gitosis的安装与使用是怎样的

    技术git版本控制gitosis的安装与使用是怎样的git版本控制gitosis的安装与使用是怎样的,很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所

    攻略 2021年11月10日
  • 喜欢的英语单词,大家最喜欢嘚英语单词是什么啊

    技术喜欢的英语单词,大家最喜欢嘚英语单词是什么啊最喜欢的英文单词是:favouritefavourite 英[ˈfeɪvərɪt] 美[fevərɪt] adj. 特别受喜爱的; n.

    生活 2021年10月26日
  • Activiti中28张数据表的含义是什么

    技术Activiti中28张数据表的含义是什么这期内容当中小编将会给大家带来有关Activiti中28张数据表的含义是什么,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。Activiti

    攻略 2021年10月20日