Flask Todo项目:个人事项(3)

Flask Todo代办事项项目

1.创建基本视图

2.注册功能

2.1 基本注册

2.2 邮箱注册(1)

2.3 邮箱注册(2)

2.4 手机注册

2.5 第三方注册

2.6 用户权限

3.修改个人页面

3.1 个人页面展示(1)

3.1个人页面展示(2)

3.3个人页面展示(3)

3.增加personal.html中各种修改

0.示例代码

https://github.com/ningwenyan/Flask_Todo_Demo/tree/v1.07

3.修改用户头像

可以先阅读下面的设置后台.然后返回这里继续修改.

修改用户头像,很明显是要上传一个图片文件到服务器,这里可以使用外链图床的方式,也可以使用上传文件的方式,我这里使用Flask_upload的方式上传.

• 创建Flask_upload

# exts.py
from flask_uploads import UploadSet
photos = UploadSet('PHOTO')

• 更新__init__.py文件

from .commons.exts import photos

def create_app():
    app = Flask(__name__)
    app.config.from_object(config)

    # 初始化插件
    bootstrap.init_app(app)
    login_manager.init_app(app)
    db.init_app(app)
    bcrypt.init_app(app)
    csrf.init_app(app)
    mail.init_app(app)
    # 限制文件上传大小
    patch_request_class(app, 5*1024*1024)
    # 指定文件类型
    configure_uploads(app, photos)
    # 注册蓝图
    app.register_blueprint(auth_bp)     # 登录
    app.register_blueprint(main_bp)     # 逻辑
    app.register_blueprint(commons_bp)  # 公共
    app.register_blueprint(utils_bp)    # 工具
    app.register_blueprint(v1_bp)       # API
    app.register_blueprint(v2_bp)       # API role
    app.register_blueprint(cms_bp)      # 后台(权限控制)
    return app

• 配置config.py

# 指定文件上传
# 配置文件上传
Dir = os.path.dirname(os.path.abspath(__file__))
UPLOADED_PHOTO_DEST=Dir+'/app/upload/'
UPLOAD_PHOTO_ALLOW = IMAGES

• 在app下创建upload文件夹用以保存文件

• 更新personal.html

 <tr class="table-primary">
                            <td>用户头像:</td>
                            <td>
                                <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12" id="picture_view">
                                    <div class="hovereffect">
                                        <img id="avatar_img" class="img-responsive"  src="{{ url_for('static', filename='images/avatar.jpg') }}" alt="avatar" style="width: 70px;height: 70px;display: flex;border-radius: 50%;align-items: center;justify-content: center;overflow: hidden;">
                                        <div class="overlay" id="avatar">
                                            <h2>change</h2>
                                        </div>
                                    </div>
                                </div>
                                <div id="picture_edit" class="form-group" style="display: none;">
                                    <form action="" method="post" enctype="multipart/form-data">
                                        {{ form.csrf_token() }}
                                        <input type="file" class="form-control-file" id="avatar_file_input" aria-describedby="fileHelp" name="photo">
                                        <small id="fileHelp" class="form-text text-muted">支持pngjpg等图片格式</small>
                                        <div class="btn-group" role="group" aria-label="Basic example">
                                            <button type="submit" class="btn btn-secondary">提交</button>
                                            <button type="button" class="btn btn-secondary" id="picture_cancel">取消</button>
                                        </div>
                                    </form>
                                </div>
                            </td>
                        </tr>

• 添加JavaScript控制

    <script>
        $(function () {
            $('#picture_view').click(function () {
                $(this).attr({style:"display:none"});
                $('#picture_edit').attr({style:'display:block'})
            });
            $('#picture_cancel').click(function (event) {
                event.preventDefault();
                $('#picture_view').attr({style:'display:block'});
                $('#picture_edit').attr({style:'display:none'})
            });
        })
    </script>

• 更新auth/form.py, 注意,photos是从exts中导入的.

from wtforms import FileField
from flask_wtf.file import FileAllowed, FileRequired
from app.commons.exts import photos

class UploadImgForm(FlaskForm):
    photo = FileField(validators=[FileAllowed(photos,message='only images'), FileRequired('no files')])

• 更新视图

@auth_bp.route('/personal/', methods=['GET', 'POST'])
@login_required
def auth_personal():
    form = UploadImgForm()
    if form.validate_on_submit():
        file = form.photo.data
        app = current_app._get_current_object()
        file_path = app.config['UPLOADED_PHOTO_DEST']
        if not os.path.exists(file_path + current_user.username + '/avatar'):
            os.makedirs(file_path + current_user.username + '/avatar')
            filename = photos.save(file, folder=current_user.username)
            current_user.avatar = photos.url(filename)
            db.session.add(current_user)
            db.session.commit()
        else:
            shutil.rmtree(file_path + current_user.username + '/avatar')
            os.makedirs(file_path + current_user.username + '/avatar')
            filename = photos.save(file, folder=current_user.username+'/avatar')
            current_user.avatar = photos.url(filename)
            db.session.add(current_user)
            db.session.commit()
        return redirect(url_for('auth.auth_personal'))
    return render_template('auth/personal.html', current_user = current_user, form=form)

这个视图函数会创建用户名同名的文件夹,但是直接创建是有风险的,需要配合文件夹的权限和运行flask的账户.

$ chmod 444 upload
$ chomd flask, flask upload

4.添加权限

修改图片是应该添加到api中的.否则无法验证权限.最好使用jQuery插件去完成这项工作.这里为了演示flask-upload.如果你需要更准确的权限控制,就选择用AJAX的方式.

– END –