先准备几张轮播图

排序顺序改为根据优先级倒序排

前端首页接口

@bp.route('/')
def index():
banners = BannerModel.query.order_by(BannerModel.priority.desc()).limit(4) # 只取4条
context = {'banners': banners}
return render_template('front/front_index.html', **context)

在首页模板中动态渲染轮播图

{% for banner in banners %}
  {% if loop.first %}
    <div class="item active">
  {% else %}
    <div class="item">
  {% endif %}
  <a href="{{ banner.link_url }}"><img src="{{ banner.image_url }}" alt="{{ banner.name }}"></a>
  </div>
{% endfor %}

效果

一百三十二:CMS系统之前端动态获取后台添加的轮播图的更多相关文章

  1. 一百三十:CMS系统之七牛js和python的SDK使用示例

    1.安装: pip install qiniu 2.编写获取uptoken的接口 @app.route('/uptoken/')def uptoken(): access_key = '' secre ...

  2. Java开发笔记(一百三十二)Swing的表格

    前面介绍了程序界面上一些简单控件的组合排列,它们用来表达相互之间联系较弱的信息倒还凑合,要是用来表达关联性较强的聚合信息就力不从心了.倘若只是简单信息的罗列,例如商品名称列表.新闻标题列表.学生姓名列 ...

  3. 一百三十三:CMS系统之版块管理一

    把模型创建到公共的models里面 class BoardModel(db.Model): __tablename__ = 'board' id = db.Column(db.Integer, pri ...

  4. 一百零九:CMS系统之前端根据不同权限渲染不同菜单

    给用户绑定为开发者 个人信息中渲染角色和权限 {% extends 'cms/cms_base.html' %} {% block title %} 个人信息{% endblock %} {% blo ...

  5. 一百三十七:CMS系统之发布帖子前台布局

    把前面配置好的ueditor的文件复制到static下 把ueditor蓝图导入,注册 初始化ueditor //初始化ueditor$(function () { var ue = UE.getEd ...

  6. 一百三十一:CMS系统之轮播图上传图片功能

    将七牛js放到common下 把获取uptoken的接口放到common视图中 把初始化七牛放到banners.js中 //初始化七牛$(function () { qiniujs.setUp({ ' ...

  7. 前端-SuperSlide自动分页控制、自适应轮播图

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. day76:luffy:项目前端环境搭建&轮播图的实现

    目录 1.项目前端环境搭建 1.创建项目目录 2.前端初始化全局变量和全局方法 3.跨域CORS 4.axios配置 2.轮播图功能的实现 1.安装依赖模块 2.上传文件相关配置 3.注册home子应 ...

  9. Flask实战第49天:cms轮播图管理页面布局

    新建cms_banners.html继承cms_base.html {% extends 'cms/cms_base.html' %} {% block title %} 轮播图管理-CMS管理系统 ...

随机推荐

  1. linux下无法删除文件的解决办法

    1.使用 lsattr 命令查看文件的附加属性.查看文件是否被赋予了 a , i 属性,如果含有这两个属性,文件是不能被删除的. a:让文件或目录仅供附加用途: b:不更新文件或目录的最后存取时间: ...

  2. mysql打开报错2013解决办法

    修改mysql配置文件 在[mysqld]下面设置skip-name-resolve 重启mysql from :https://www.jb51.net/article/52637.htm

  3. uhd镜像重新安装

    USRP LW-X300连接网口,设置IP地址:192.168.10.1,子网验码:255.255.255.0 连接后uhd_usrp_probe提示更新镜像. 终端输入: uhd_image_loa ...

  4. Python+requests r.json()获取的内容,控制台显示中文Unicode转为utf-8《九》

    在接口测试中,直接使用r.json()获取到的结果,难免会在结果中带有中文,但是在控制台的中文输出默认是Unicode编码,不能通过统一在设置中进行设置utf-8,因此为了在控制台更显而易见的显示出中 ...

  5. GC详解及Minor GC和Full GC触发条件

    GC,即就是Java垃圾回收机制.目前主流的JVM(HotSpot)采用的是分代收集算法.与C++不同的是,Java采用的是类似于树形结构的可达性分析法来判断对象是否还存在引用.即:从gcroot开始 ...

  6. 如何实现UI自动化?DevExpress Winforms帮你忙

    DevExpress Winforms Controls 内置140多个UI控件和库,完美构建流畅.美观且易于使用的应用程序.无论是Office风格的界面,还是分析处理大批量的业务数据,DevExpr ...

  7. 表单文本字段预期描述(placeholder="请输入产品名称"以及prompt:'输入价格')

    普通html文本标签设置: <input id="xxx" placeholder="请输入产品名称"/> 带有jQueryEasyUI插件的htm ...

  8. ansible的两种命令执行方式 : ad-hoc / playbook以及通过setup模块获取系统参数

    一.什么是ad-hoc和playbook  ad-hoc : 如果我们敲入一些命令去快速的完成一些操作,而不需要将这些执行过的命令刻意保存下来,这样的命令就叫做as-hoc命令,这里不做过多赘述. p ...

  9. stm32中阻塞模式和非阻塞模式 in blocking mode 与 in non-blocking mode区别

    阻塞模式和非阻塞模式...... 我的理解是:阻塞模式就像是一个延时函数,当这个函数没处理完那么,所有的按照流程需要执行的代码都不会被执行,要等到这个延时完成,类似 平时看书上写的LED灯闪烁,用的d ...

  10. Mybatis各种查询

    实体Emp private int empno; private String ename; private String job; private Integer mgr; private Date ...