1,608

Flask–更新数据库,图片上传预览,删除,密码修改

刚刚接触flask不久,越来越喜欢python这门语言,开发很高效,昨天我写了一个个人信息编辑,包括姓名,邮箱,年龄,部门,职位等等。个人是小白,每次的更新个人博客文章,只是对自己写过的东西,学到的动心进行总结,可能也会有局限性,也可能有误,
如果大牛们有想补全,或想完善的可以评论,给我留言。我对文章进行完善。由于个人没有GitHub仓库,所以现在的代码都放在个人博客中,源码如下:

from . import information
from app.models import User
from flask_login import login_required, current_user
from flask_login import  current_user,request
from flask import render_template
import os,time
from flask import Flask, request, redirect, url_for  
from app import db

#定义前端渲路由
@information.route('/information')
#路由登录保护
@login_required
#个人信息渲染函数
def showInformation():
    #获取前端想要的数据
    user_info_re= db.session.query(User.nickname,User.gender,User.num,User.email,\
        User.tel,User.birthday,User.branch,User.job).filter(User.id==current_user.id).first()
    #获取上传的图片url
    user_info_img= db.session.query(User.imgurl).filter(User.id==current_user.id).first()
    imgurl_r=[]
    #判断是否为空,给初始值
    if user_info_img[0] is None:
        imgurl_r.append('/static/upload/img/1.jpg')
    else:
        imgurl_r.append(user_info_img[0])

    user_info =[]
    for i in user_info_re:
        if i is None:
            i='暂未填写'
        user_info.append(i)

    return render_template('information/index.html',user_info=user_info,imgurl_r=imgurl_r)

#定义更新个人资料的API
@information.route('/updatainfo')
@login_required
#接口函数
def updatainfo():
    #获取请求过来的值,用request.args.get('前端发送过来的变量名')
    nick_name=request.args.get('nickname')
    radios_check=request.args.get('radios_check')
    email_add=request.args.get('email_add')
    phone_num=request.args.get('phone_num')
    birthday=request.args.get('birthday')
    branch=request.args.get('branch')
    job_input=request.args.get('job_input')
    #获取当前登录用户的数据库对象
    user_r = User.query.filter_by(id=current_user.id).first()
    #把更新的数据替换原有的数据
    user_r.nickname=nick_name
    user_r.gender=radios_check
    user_r.email=email_add
    user_r.tel=phone_num
    user_r.birthday=birthday
    user_r.branch=branch
    user_r.job=job_input
    #加入session会话
    db.session.add(user_r)
    #提交到数据库
    db.session.commit()

    return '更新成功'

#修改密码API
@information.route('/updatapaw')
@login_required
#接口函数
def updatapaw():
    #获取原密码
    old_paw=request.args.get('old_paw')
    #获取新密码
    new_paw=request.args.get('new_paw')
    confirm_paw=request.args.get('confirm_paw')
    #获取User对象
    user_paw = User.query.filter_by(id=current_user.id).first()
    #验证原始密码,否则返回原密码有误给前端
    if user_paw.verify_password(old_paw):
        #加密新密码
        user_paw.password_hash=generate_password_hash(new_paw)
        #加密码后的密码存入数据库
        db.session.add(user_paw)
        db.session.commit()
        return '修改成功'

    return '原密码有误'

#限制上传件的格式
ALLOWED_EXTENSIONS = set(['png', 'jpg', 'jpeg', 'gif'])
#文件格式判断函数
def allowed_file(filename):
    #判断结果以布尔值返回
    return '.' in filename and filename.rsplit('.', 1)[1] in ALLOWED_EXTENSIONS

#图片上传API
#为了防止上传的图片的名字冲突
#我给每个文件名前面加个时间戳
@information.route('/upload_file', methods=['GET', 'POST'])
#图片上传接口
def upload_file():
    #获取当前时间戳
    time_s=int(time.time())
    #判断请求方法
    if request.method == 'POST':
        #获取file对象
        file = request.files['file']
        #判断上传的文件格式是否符合规范
        if file and allowed_file(file.filename):
            # 获取当前用户的User对象
            user_img = User.query.filter_by(id=current_user.id).first()
            #获取当前运行路径
            derec_path=os.getcwd()
            #补全上传图片的路径地址
            upload_path=derec_path+'/app/static/upload/img'
            #把时间戳和当前文件名拼接
            uploadname = (('%s'+file.filename)%time_s)
            #图片上传前先删除服务器原有的图片
            os.remove(os.path.join(upload_path, user_img.imgurl))
            #把上传的图片保存在预设的图片上传路径
            file.save(os.path.join(upload_path, uploadname))
            #获取图片的相对路径
            show_path='/static/upload/img'
            #补全图片相对路径
            user_img.imgurl=os.path.join(show_path, uploadname)
            #写入数据库
            db.session.add(user_img)
            db.session.commit()
    #把图片路径返回给前端
    return '上传成功'

前端的js代码如下:

    $(document).ready(function(){
        //点击提交按钮发送ajax
        $('#submit_btn').on('click',function(){
            //获取自己输入的input值
            var nick_name = $('#nick_name').val();
            var radios = $('#gander').val();
            var email_add = $('#email_add').val();
            var phone_num = $('#phone_num').val();
            var birthday = $('#birthday').val();
            var branch = $('#branch').val();
            var job_input = $('#job_input').val();
            //发送请求
            $.ajax({
                //请求接口
                url:'/updatainfo',
                //请求方式
                method:'GET',
                //把自己输入的值传给接口
                data:{
                    'nickname':nick_name,
                    'radios_check':radios,
                    'email_add':email_add,
                    'phone_num':phone_num,
                    'birthday':birthday,
                    'branch':branch,
                    'job_input':job_input,
                },
                //成功后回调函数,刷新当前页
                success:function(response){
                    window.location.reload();
                }
            })
        })

        //点击修改密码的ajax请求
        $('#change_btn').on('click',function(){
            //设置定时器,用于两次新密码是否一致
            var timer=null;
            clearTimeout(timer);
            //获取输入的密码
            var old_paw = $('#old_paw').val();
            var new_paw = $('#new_paw').val();
            var confirm_paw = $('#confirm_paw').val();
            //判断两次输入的新密码是否一致,一致则发送更改请求
            //否则高亮提示两次密码输入不一致
            if(new_paw==confirm_paw){
                    $.ajax({
                    url:'/updatapaw',
                    method:'GET',
                    data:{
                        'old_paw':old_paw,
                        'new_paw':new_paw,
                        'confirm_paw':confirm_paw,
                    },
                    success:function(response){
                        window.location.reload();
                        // alert(response)
                    }
                })
                }else{
                    $('#info_warn').show();
                    $('#new_paw').css({'border':'1px solid #e33'});
                    $('#confirm_paw').css({'border':'1px solid #e33'});
                    timer=setTimeout(function(){
                        $('#info_warn').hide();
                        $('#new_paw').css({'border':'1px solid rgba(33, 33, 33, 0.12)'});
                        $('#confirm_paw').css({'border':'1px solid rgba(33, 33, 33, 0.12)'});
                    },800);
                }
            
        })


        //点击更换头像,change事件
        $('#file_up').on('change',function(){
            //获取文件对象
            var r= new FileReader();
            f=document.getElementById('file_up').files[0];
            //用readAsDataURL()方法把上传的图片进行预览
            r.readAsDataURL(f);
            //加载上传的图片,预览
            r.onload=function  (e) {
                document.getElementById('show_img').src=this.result;
            };
            // file上传文件,以ajax请求上传,获取from对象
            var form = new FormData(document.getElementById("myform")); 
            //发送请求
            $.ajax({
                //请求接口
                url:'/upload_file',
                //请求方式
                type:"post",  
                //把form对象作为参数传给接口
                data:form,  
                //cache属性:为true的话会读缓存,可能真的到服务器上。
                //假如上次访问了a.html,第二次的时候得到的是上次访问的a.html的结果,而不是重新到服务器获取。
                //false的话会在url后面加一个时间缀,让它跑到服务器获取结果。
                //cache只有GET方式的时候有效。
                cache: false, 
                //processData属性,这个参数是jquery独有的。processData的默认值是true。用于对data参数进行序列化处理。 
                processData: false, 
                //编码 
                contentType: false, 
                //成功请求回调
                success:function(data){  
                    // alert("修改成功!");
                    window.location.reload()
                    $('#info_bgimg').css({
                        "background": 'url('+data+') no-repeat',
                    })
                },  
                //失败回调
                error:function(e){  
                  alert("网络错误,请重试!!");  
               } 
            })

        })
    });

发表评论

邮箱地址不会被公开。 必填项已用*标注