先准备几张轮播图

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

前端首页接口

@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. Flyme密码验证策略升级,忘记锁屏密码及「关机密码」功能

      手机里有很多需要用到密码的地方,比如「手机密码」.「文档锁定区」.「应用加密」.「隐私模式」.忘记密码可是一件麻烦事,以前只能通过清除数据或格式化存储盘来解决.现在有了「关联魅族账号」功能,这些功 ...

  2. WPF绑定属性

    1.创建model类 model类要继承接口INotifyPropertyChanged,用于通知客户端属性值已更改 public class StudentModel : INotifyProper ...

  3. Selenium(二)开发环境的搭建

    1.安装python的开发集成环境 我之前有写,可参考https://www.cnblogs.com/dydxw/p/10405797.html 2.使用selenium打开火狐浏览器 先从selen ...

  4. Spring boot dubbo+zookeeper 搭建------基于gradle项目的消费端与服务端分离实战

    1. Dubbo简介 Dubbo是Alibaba开源的分布式框架,是RPC模式的一种成熟的框架,优点是可以与Spring无缝集成,应用到我们的后台程序中.具体介绍可以查看Dubbo官网. 2. Why ...

  5. python manage.py makemigrat Please select a fix: 1) Provide a one-off default now (will be set on all existing rows with a null value for this column) 2) Quit, and let me add a default in models.py

    更新models字段 出现的问题: $ python manage.py makemigrations None You are trying to add a non-nullable field ...

  6. const int* p

    若纠结于const int* p,int const* p,int* const p这三个指针,可以看视频 https://www.icourse163.org/learn/BUPT-10035640 ...

  7. synchronized和AtomicXXX效率比较

    在Java中,i++和++i都是xian线程不安全的,如果要用十个线程累加一个资源,就会出现错误.synchronized和Atomic是实现线程安全常用方法.而二者效率问题孰优孰劣?本着规律符合任意 ...

  8. SpringMVC指定webapp的首页

    webapp的首页指的是http://localhost:8080/ 方法一 追加一个[/]URI的请求方法 @Controller public class WelcomeController { ...

  9. Liunx之基础学习

    用户提权命令之-sudo sudo命令用来以其他身份来执行命令,预设的身份为root.在/etc/sudoers中设置了可执行sudo指令的用户.若其未经授权的用户企图使用sudo,则会发出警告的邮件 ...

  10. 查询Oracle正在执行的sql语句及kill被锁的表

    查询Oracle正在执行的sql语句及执行该语句的用户SELECT b.sid oracleID, b.username 登录Oracle用户名, b.serial#, spid 操作系统ID, pa ...