先准备几张轮播图

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

前端首页接口

@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. Codeforces 567D - One-Dimensional Battle Ships - [树状数组+二分]

    题目链接:https://codeforces.com/problemset/problem/567/D 题意: 在一个 $1 \times n$ 的网格上,初始摆放着 $k$ 只船,每只船的长度均为 ...

  2. 洛谷P5002 专心OI - 找祖先

    题目概括 题目描述 这个游戏会给出你一棵树,这棵树有\(N\)个节点,根结点是\(R\),系统会选中\(M\)个点\(P_1,P_2...P_M\). 要Imakf回答有多少组点对\((u_i,v_i ...

  3. 牛客算法:DNA序列

    import java.util.*; public class Main{ public static void main(String[] args){ try(Scanner in = new ...

  4. 在浏览器端用H5实现图片压缩上传

    一.需求的场景: 在我们的需求中需要有一个在手机浏览器端,用户实现上传证件照片的功能,我们第一版上了一个最简版,直接让用户在本地选择图片,然后上传到公司公共的服务器上. 功能实现后我们发现一个问题,公 ...

  5. Java易混小知识——equals方法和==的区别

    一.equals方法和==的区别 1.equals是String对象的方法,可以通过".“调用. 2.== 是一个运算符. 二.常用的比较用法 1.基本数据类型比较. equals和==都比 ...

  6. BZOJ 4029 [HEOI2015] 定价 ( 数位DP/贪心 )

    前言 最近学了数位DP,感觉挺简单又实用.这道题就比较水,可以用300B的贪心过掉-网上似乎大多是贪心的题解,我就写写DP的做法 题意 给出正整数区间[L,R][L,R][L,R],定义荒谬值为 (去 ...

  7. Codeforces Round #595 (Div. 3) A,B,C,D

    A题:n个学生,分成任意组,要求每组中任意两名学生的技能值相差不等于1,问最小分组. #include<bits/stdc++.h> using namespace std; #defin ...

  8. Oracle 物理结构(四) 文件-控制文件

    一.什么是控制文件 控制文件是Oracle数据库中十分重要的文件.Oracle启动时,首先会读取参数文件,读取了参数文件,实例所需要的共享内存和后台进程就可以启动了,这就是数据库实例的nomunt阶段 ...

  9. MySQL sql join 算发

    在MySQL中,可以使用批量密钥访问(BKA)连接算法,该算法使用对连接表的索引访问和连接缓冲区. BKA算法支持:内连接,外连接和半连接操作,包括嵌套外连接. BKA的优点:更加高效的表扫描提高了连 ...

  10. luogu 5354 [Ynoi2017]由乃的OJ LCT+位运算

    如果做过起床困难综合征的话应该很快就能有思路,没做过那道题的话还真是挺费劲的. 我们不知道要带入的值是什么,但是我们可以知道假设带入值得当前位为 $1$ 时这一位在经过位运算后是否为 $1$. 至于这 ...