先准备几张轮播图

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

前端首页接口

@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. 使用C#的Flags特性

    举个例子:我有如下的一个需求,当我想要取得用户信息的时候,会先从本地缓存中查找,找不到然后从分布式缓存中查找,最后找不到再从数据库中查询.但是有些场景我又不需要查询数据库. 所以我想建立如下这种模型. ...

  2. 大数据之路week03--day05(线程 II)

    今天,咱们就把线程给完完全全的结束掉,但是不是说,就已经覆盖了全部的知识点,可以说是线程的常见的问题及所含知识基本都包含. 1.多线程(理解) (1)JDK5以后的针对线程的锁定操作和释放操作 Loc ...

  3. python_公共方法

    1.计算长度 value = "wangdianchao" # 计算字符个数(长度) number = len(value) print(number) 2.索引取值 value ...

  4. Educational Codeforces Round 74 (Rated for Div. 2) A. Prime Subtraction

    链接: https://codeforces.com/contest/1238/problem/A 题意: You are given two integers x and y (it is guar ...

  5. Codeforces Round #584 C. Paint the Digits

    链接: https://codeforces.com/contest/1209/problem/C 题意: You are given a sequence of n digits d1d2-dn. ...

  6. 删除harbor项目下的所有镜像

    user= pswd= url= proid= REPOS=$(curl -s -X GET --header 'Accept: application/json' "${url}/api/ ...

  7. 【题解】Knight Moves-C++

    题目Description在一个8*8的棋盘上,一只中国象棋中的马要从一个点跳到另一个点.问最少需要多少步.Input整个测试组由多组数据组成,请做到文件底结束.对于每组数据,前两个坐标代表出发点,后 ...

  8. React事件处理和原生JS事件处理

    1.原生JS 事件触发调用有三种方式: 1. on[event]事件属性,手动触发  ❗️on[event]事件是Window对象上的方法. 2. on[event]事件属性,通过htmlElemen ...

  9. iis大文件上传

    IS出于安全考虑限制了大文件的上传,而网上百度到的大部分解决方法都是用一个管理员权限的记事本打开一个文件修改参数,但是我发现里面根本没有网上所说的那些参数,最后自己找到了修改发布文件的webconfi ...

  10. mac charles 代理https

    1.安装根证书:help - ssl proxying - install charles root certificate 2.这时候会弹出一个根证书界面,如果没有弹出,则可以去chrome,高级设 ...