flask-web分页和上传图片

Dear 丶 2022-04-23 06:42 189阅读 0赞

![效果图][1240]  
**编辑页面**  
![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模板文件解析即可

<table>
            <thead>
    	        <th>编号</th>
    	        <th>姓名</th>
    	        <th>年龄</th>
            </thead>
    
            <tbody>
            {% for stu in stus %}
            <tr>
                <td>{
       { loop.index}}</td>
                <td>{
       { stu.s_name}}</td>
                <td>{
       { stu.s_age }}</td>
            </tr>
    
            {% endfor %}
            </tbody>
    
    </table>
        <p>当前第{
       { pg.page }}页，共{
       { pg.pages }}页</p>
        {% if pg.has_prev %}
        <a href="{ { url_for('app.all_stu')}}?page={ { pg.prev_num}}">上一页</a>
        {% endif %}
    
        {% for i in pg.iter_pages() %}
            {% if i %}
            <a href="{ { url_for('app.all_stu')}}?page={ {i}}">{
       {i}}</a>
            {% else %}
                ...
            {% endif %}
        {% endfor %}
    
        {% if pg.has_next %}
        <a href="{ { url_for('app.all_stu')}}?page={ { pg.next_num}}">下一页</a>
        {% endif %}

### 二、关联模型 ###

*  一对多  
    在一个表中定义一个外键(多的一方)  
    db.ForeignKey(‘[关联表名.id][.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/<int:id>/', 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 %}
    
    <form action="" method="post" enctype="multipart/form-data">
        <p>姓名：{
       {stus.s_name}}</p>
        <p>头像：<input type="file" name="image"></p>
        <p><input type="submit" value="提交"></p>
    </form>
    
    {% endblock %}

[1240]: /images/20220323/4e23deb266e542c086f5f336aaae3c0c.png
[flask00.png]: /images/20220323/297fe56de75b42278b426793de59d3e2.png
[.id]: http://xn--d6q46dt07dm0g.id