美文网首页
flask-web页面分页和上传图片

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

作者: 憧憬001 | 来源:发表于2019-01-24 17:05 被阅读0次
    效果图
    编辑页面
    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') 例如:
    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文件增加图片和编辑的标签
    <td><img src="/static/media/{{ stu.icon }}" style="width: 100px"></td>
    <td><a href="{{ url_for('app.edit_stu',id=stu.id)}}">编辑</a></td>
    
    • 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 %}
    

    相关文章

      网友评论

          本文标题:flask-web页面分页和上传图片

          本文链接:https://www.haomeiwen.com/subject/dxrujqtx.html