flask-web页面分页和上传图片

flask-web页面分页和上传图片_第1张图片
效果图

编辑页面
flask-web页面分页和上传图片_第2张图片
flask00.png

一、分页

  • paginate(self, page=None, per_page=None, error_out=True, max_per_page=None)
    一般就传前两个参数就行
@blue.route('/all_stu/')
def all_stu():
    if request.method == 'GET':
        # 从url中获取page参数
        page = int(request.args.get('page', 1))
        pg = Student.query.paginate(page, 5)
        # 获取当页参数
        stus = pg.items
        return render_template('stus.html', stus=stus, pg=pg)

然后将pg和stus传入html模板文件解析即可


        {% for stu in stus %}
        

        {% endfor %}
        
编号 姓名 年龄
{{ loop.index}} {{ stu.s_name}} {{ stu.s_age }}

当前第{{ pg.page }}页,共{{ pg.pages }}页

{% if pg.has_prev %} 上一页 {% endif %} {% for i in pg.iter_pages() %} {% if i %} {{i}} {% else %} ... {% endif %} {% endfor %} {% if pg.has_next %} 下一页 {% endif %}

二、关联模型

  • 一对多
    在一个表中定义一个外键(多的一方)
    db.ForeignKey('关联表名.id') 例如:
g_id = db.Column(db.Integer, db.ForeignKey('grade.id'), nullable=True)

另一个表定义一个关联字段(为一的一方)
关联字段db.relatonship('关联的模型名',backref='反向引用参数') 例如:

# 定义了一个关联关系字段,和反向引用backref参数
s_g = db.relationship('Student', backref='g')
  • 多对多
    定义外键字段是通过中间表,db.Table(表名,子段)
    关联字段db.relationship('关联的模型名',secondary='中间表',backref='反向引用参数')
    relationship定义的字段,可以放在任意一个模型中
s_c = db.Table('s_c',
               db.Column('s_id', db.Integer, db.ForeignKey('student.id')),
               db.Column('c_id', db.Integer, db.ForeignKey('course.id'))
               )

class Course(db.Model):
    id = db.Column(db.Integer, primary_key=True, autoincrement=True)
    c_name = db.Column(db.String(10), unique=True, nullable=False)
    stu = db.relationship('Student', secondary=s_c, backref='cou')

上传图片

  • 视图函数
@blue.route('/edit_stu//', methods=['GET','POST'])
def edit_stu(id):
    if request.method == 'GET':
        stus = Student.query.get(id)
        return render_template('edit.html',stus=stus)
    if request.method == 'POST':
        # 接受图片,并保存图片
        icon = request.files.get('image')
        # 获取项目的根路径
        BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
        # 获取媒体文件的路径
        STATIC_DIR = os.path.join(BASE_DIR, 'static')
        MEDIA_DIR = os.path.join(STATIC_DIR, 'media')
        # 随机生成图片名称
        filename = str(uuid.uuid4())
        a = icon.mimetype.split('/')[-1:][0]
        name = filename + '.' + a
        print(name)
        # 拼接图片地址
        path = os.path.join(MEDIA_DIR, name)
        # 保存
        icon.save(path)
        print(icon)
        #修改用户的头像icon字段
        stu = Student.query.get(id)
        stu.icon = name
        stu.save()
        # 重定向
        return redirect(url_for('app.all_stu'))
  • stus.html文件增加图片和编辑的标签

编辑
  • edit.html 文件内容如下:
{% extends 'base_main.html' %}

{% block content %}

姓名:{{stus.s_name}}

头像:

{% endblock %}

你可能感兴趣的:(flask-web页面分页和上传图片)