先准备几张轮播图

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

前端首页接口

@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. TightVNC安装

    软件版本:tightvnc-2.8.8-gpl-setup-64bit.msi 后面一路默认,虚拟机端口默认从5900开始递增.

  2. 深度学习—从LeNet到DenseNet

    CNN从90年代的LeNet开始,21世纪初沉寂了10年,直到12年AlexNet开始又再焕发第二春,从ZF Net到VGG,GoogLeNet再到ResNet和最近的DenseNet,网络越来越深, ...

  3. PHP实现月份自动加1

    <?php date_default_timezone_set('PRC'); $date = date("Y-m-d"); $firstday = date('Y-m-01 ...

  4. ASP.NET Uploadify 上传文件过大报错

    Uploadify上传文件原来很早之前用过,没发现什么问题.今天再使用过程中,当文件大于30M的时候就会报错404.查看错误消息提示配置最大上传太小了.需要修改. 记得原来配置上传文件大小在这里:&l ...

  5. webstorm双击鼠标出现光标块

    将Vim 选项对勾去掉

  6. mac brew 使用教程

    brew services list                  #查看系统通过 brew 安装的服务 brew services cleanup               #清除已卸载无用的 ...

  7. I Hate It (HDU 1754)

    Problem 很多学校流行一种比较的习惯.老师们很喜欢询问,从某某到某某当中,分数最高的是多少.  这让很多学生很反感.  不管你喜不喜欢,现在需要你做的是,就是按照老师的要求,写一个程序,模拟老师 ...

  8. vue怎么引入echats并使用 (柱状图 字符云)

    安装 npm install echarts --save 下面看一下如何简单的使用: 在main.js中引入(全局引入) // 引入echarts import echarts from 'echa ...

  9. vue的一些随笔

    一.点击路由后的样式,可以在路由文件index.js中设置 再在样式里面设置active的类名对应的样式. ———————————————————————————————————————————— 二 ...

  10. HDU 1114 Piggy-Bank ——(完全背包)

    差不多是一个裸的完全背包,只是要求满容量的最小值而已.那么dp值全部初始化为inf,并且初始化一下dp[0]即可.代码如下: #include <stdio.h> #include < ...