19.1.cms轮播图管理页面布局

(1)cms/cms_base.html

<li class="nav-group banner-manage"><a href="{{ url_for('cms.banners') }}">轮播图管理</a></li>

(2)views.y

@bp.route('/banners/')
@login_required
def banners():
return render_template('cms/cms_banners.html')

(3)cms/banners.html

{% extends 'cms/cms_base.html' %}

{% block title %}
轮播图管理
{% endblock %} {% block head %}
<style>
.top-box{
overflow: hidden;
background: #ecedf0;
padding: 10px 5px;
}
.top-box button{
float: right;
} </style>
{% endblock %} {% block page_title %}
{{ self.title() }}
{% endblock %} {% block main_content %}
<div class="top-box">
<button class="btn btn-warning">添加轮播图</button>
</div> <table class="table table-bordered">
<thead>
<tr>
<td>名称</td>
<td>图片链接</td>
<td>优先级</td>
<td>跳转链接</td>
<td>创建日期</td>
<td>操作</td>
</tr>
</thead> <tbody>
<tr> </tr>
</tbody> </table>
{% endblock %}

19.2.添加轮播图模态对话框的制作

cms_banners.html

{% block main_content %}
<div class="top-box">
<button class="btn btn-warning" data-toggle="modal" data-target="#banner-dialog">添加轮播图</button>
</div> <!-- Modal -->
<div class="modal fade" id="banner-dialog" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
aria-hidden="true">&times;</span></button>
<h4 class="modal-title" id="myModalLabel">轮播图</h4>
</div>
<div class="modal-body">
<form action="" class="form-horizontal"> <div class="form-group">
<label class="col-sm-2 control-label">名称</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="name" placeholder="轮播图名称">
</div>
</div> <div class="form-group">
<label class="col-sm-2 control-label">图片</label>
<div class="col-sm-7">
<input type="text" class="form-control" name="img_url" placeholder="轮播图图片">
</div>
<button class="col-sm-2 btn btn-info">添加图片</button>
</div> <div class="form-group">
<label class="col-sm-2 control-label">跳转</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="link_url" placeholder="跳转链接">
</div>
</div> <div class="form-group">
<label class="col-sm-2 control-label">权重</label>
<div class="col-sm-10">
<input type="number" class="form-control" name="priority" placeholder="权重">
</div>
</div>
</form>
</div> <div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary">保存</button>
</div>
</div> </div>
</div>
{% endblock %}
{% extends 'cms/cms_base.html' %}

{% block title %}
轮播图管理
{% endblock %} {% block head %}
<style>
.top-box {
overflow: hidden;
background: #ecedf0;
padding: 10px 5px;
} .top-box button {
float: right;
} </style>
{% endblock %} {% block page_title %}
{{ self.title() }}
{% endblock %} {% block main_content %}
<div class="top-box">
<button class="btn btn-warning" data-toggle="modal" data-target="#banner-dialog">添加轮播图</button>
</div> <table class="table table-bordered">
<thead>
<tr>
<td>名称</td>
<td>图片链接</td>
<td>优先级</td>
<td>跳转链接</td>
<td>创建日期</td>
<td>操作</td>
</tr>
</thead> <tbody>
<tr> </tr>
</tbody>
</table> <!-- Modal -->
<div class="modal fade" id="banner-dialog" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
aria-hidden="true">&times;</span></button>
<h4 class="modal-title" id="myModalLabel">轮播图</h4>
</div>
<div class="modal-body">
<form action="" class="form-horizontal"> <div class="form-group">
<label class="col-sm-2 control-label">名称</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="name" placeholder="轮播图名称">
</div>
</div> <div class="form-group">
<label class="col-sm-2 control-label">图片</label>
<div class="col-sm-7">
<input type="text" class="form-control" name="img_url" placeholder="轮播图图片">
</div>
<button class="col-sm-2 btn btn-info">添加图片</button>
</div> <div class="form-group">
<label class="col-sm-2 control-label">跳转</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="link_url" placeholder="跳转链接">
</div>
</div> <div class="form-group">
<label class="col-sm-2 control-label">权重</label>
<div class="col-sm-10">
<input type="number" class="form-control" name="priority" placeholder="权重">
</div>
</div>
</form>
</div> <div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary">保存</button>
</div>
</div> </div>
</div>
{% endblock %}

BBS论坛(十九)的更多相关文章

  1. BBS论坛(九)

    9.1.权限和角色模型定义 (1)cms/models class CMSPermission(object): ALL_PERMISSION = 0b11111111 # 1.访问者的权限 VISI ...

  2. centos MySQL主从配置 ntsysv chkconfig setup命令 配置MySQL 主从 子shell MySQL备份 kill命令 pid文件 discuz!论坛数据库读写分离 双主搭建 mysql.history 第二十九节课

    centos  MySQL主从配置 ntsysv   chkconfig  setup命令  配置MySQL 主从 子shell  MySQL备份  kill命令  pid文件  discuz!论坛数 ...

  3. Python之路【第十八篇】Django小项目简单BBS论坛部分内容知识点

    开发一个简单的BBS论坛 项目需求: 整体参考“抽屉新热榜” + “虎嗅网” 实现不同论坛版块 帖子列表展示 帖子评论数.点赞数展示 在线用户展示 允许登录用户发贴.评论.点赞 允许上传文件 帖子可被 ...

  4. python 学习笔记二十 django项目bbs论坛

    项目:开发一个简单的BBS论坛 需求: 整体参考“抽屉新热榜” + “虎嗅网” 实现不同论坛版块 帖子列表展示 帖子评论数.点赞数展示 在线用户展示 允许登录用户发贴.评论.点赞 允许上传文件 帖子可 ...

  5. python第一百三十天 ---简单的BBS论坛

    简单的BBS论坛 实现功能 git仓库地址:https://github.com/uge3/BBS 1.整体参考“抽屉新热榜” + “博客园” 2.实现不同论坛版块 3.帖子列表展示 4.个人博客主页 ...

  6. centos LAMP第一部分-环境搭建 Linux软件删除方式,mysql安装,apache,PHP,apache和php结合,phpinfo页面,ldd命令 第十九节课

    centos LAMP第一部分-环境搭建  Linux软件删除方式,mysql安装,apache,PHP,apache和php结合,phpinfo页面,ldd命令 第十九节课 打命令之后可以输入: e ...

  7. 开源BBS论坛软件推荐

    七款开源BBS论坛软件推荐(1) 本文介绍了七个开源的BBS论坛软件(在英文界一般叫做Forum).可能国内的朋友们比较熟悉Discuz!和PHPwind,但其实我们的选择还是很多的,而且下面介绍的这 ...

  8. ComicEnhancerPro 系列教程十九:用JpegQuality看JPG文件的压缩参数

    作者:马健邮箱:stronghorse_mj@hotmail.com 主页:http://www.comicer.com/stronghorse/ 发布:2017.07.23 教程十九:用JpegQu ...

  9. 无废话ExtJs 入门教程十九[API的使用]

    无废话ExtJs 入门教程十九[API的使用] extjs技术交流,欢迎加群(201926085) 首先解释什么是 API 来自百度百科的官方解释:API(Application Programmin ...

  10. Python之路【第十九章】:Django进阶

    Django路由规则 1.基于正则的URL 在templates目录下创建index.html.detail.html文件 <!DOCTYPE html> <html lang=&q ...

随机推荐

  1. UOJ#348. 【WC2018】州区划分

    原文链接www.cnblogs.com/zhouzhendong/p/UOJ348.html 前言 第一次知道子集卷积可以自己卷自己. 题解 这是一道子集卷积模板题. 设 $sum[S]$ 表示点集 ...

  2. python copy模块

    python copy模块 copy模块用于对象的拷贝操作 该模块只提供了两个主要的方法: copy.copy:浅复制 copy.deepcopy:深复制 直接赋值,深拷贝和浅拷贝的区别 直接赋值:简 ...

  3. python一些好文章链接收藏

    程序员之路:python3+PyQt5+pycharm桌面GUI开发 python-nmap的函数学习 python标准库中socket模块详解 python队列Queue 简单认识python cm ...

  4. js-面试题-驼峰命名

    //将字符串转为驼峰命名‘foo-bar-car-day-efg’ function toUpperCase(str){ var string=str.split('-'); var arr=[]; ...

  5. CGI、FastCGI、PHP-FPM联系与区别(理解总结自其他博文)

    参考:http://blog.csdn.net/tyrantbear/article/details/52077321 参考:http://mp.weixin.qq.com/s?src=11& ...

  6. VB使用API进行RC4加密解密(MD5密钥)

    根据网络资料整改,来源未知,已调试通过. Option Explicit Private Declare Function CryptAcquireContext Lib "advapi32 ...

  7. fildder

    来自 墨痕 :https://home.cnblogs.com/u/ink-marks/ FIDDLER的使用方法及技巧总结   一.FIDDLER快速入门及使用场景 Fiddler的官方网站:htt ...

  8. 批量删除Excel里面的换行符

    关于批量删除excel里面的换行符,应该说写程序的遇上excel大体都会有这么个问题,在解决这个问题前,我的解决办法是把excel 的数据全部复制到txt里面, 因为操作txt比操作excel更为简单 ...

  9. DOM与BOM

    DOM 1.概念起源: 文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口.在网页上,组织页面(或文档)的对象被组织在一个树形结 ...

  10. DRC错误解决办法

    一.WARNING(ORCAP-1589): Net has two or more aliases - possible short? 错误原因:一个网络有两个网络标号,可能造成短路! 问题本质:原 ...