BBS论坛(十九)
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">×</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">×</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论坛(十九)的更多相关文章
- BBS论坛(九)
9.1.权限和角色模型定义 (1)cms/models class CMSPermission(object): ALL_PERMISSION = 0b11111111 # 1.访问者的权限 VISI ...
- centos MySQL主从配置 ntsysv chkconfig setup命令 配置MySQL 主从 子shell MySQL备份 kill命令 pid文件 discuz!论坛数据库读写分离 双主搭建 mysql.history 第二十九节课
centos MySQL主从配置 ntsysv chkconfig setup命令 配置MySQL 主从 子shell MySQL备份 kill命令 pid文件 discuz!论坛数 ...
- Python之路【第十八篇】Django小项目简单BBS论坛部分内容知识点
开发一个简单的BBS论坛 项目需求: 整体参考“抽屉新热榜” + “虎嗅网” 实现不同论坛版块 帖子列表展示 帖子评论数.点赞数展示 在线用户展示 允许登录用户发贴.评论.点赞 允许上传文件 帖子可被 ...
- python 学习笔记二十 django项目bbs论坛
项目:开发一个简单的BBS论坛 需求: 整体参考“抽屉新热榜” + “虎嗅网” 实现不同论坛版块 帖子列表展示 帖子评论数.点赞数展示 在线用户展示 允许登录用户发贴.评论.点赞 允许上传文件 帖子可 ...
- python第一百三十天 ---简单的BBS论坛
简单的BBS论坛 实现功能 git仓库地址:https://github.com/uge3/BBS 1.整体参考“抽屉新热榜” + “博客园” 2.实现不同论坛版块 3.帖子列表展示 4.个人博客主页 ...
- centos LAMP第一部分-环境搭建 Linux软件删除方式,mysql安装,apache,PHP,apache和php结合,phpinfo页面,ldd命令 第十九节课
centos LAMP第一部分-环境搭建 Linux软件删除方式,mysql安装,apache,PHP,apache和php结合,phpinfo页面,ldd命令 第十九节课 打命令之后可以输入: e ...
- 开源BBS论坛软件推荐
七款开源BBS论坛软件推荐(1) 本文介绍了七个开源的BBS论坛软件(在英文界一般叫做Forum).可能国内的朋友们比较熟悉Discuz!和PHPwind,但其实我们的选择还是很多的,而且下面介绍的这 ...
- ComicEnhancerPro 系列教程十九:用JpegQuality看JPG文件的压缩参数
作者:马健邮箱:stronghorse_mj@hotmail.com 主页:http://www.comicer.com/stronghorse/ 发布:2017.07.23 教程十九:用JpegQu ...
- 无废话ExtJs 入门教程十九[API的使用]
无废话ExtJs 入门教程十九[API的使用] extjs技术交流,欢迎加群(201926085) 首先解释什么是 API 来自百度百科的官方解释:API(Application Programmin ...
- Python之路【第十九章】:Django进阶
Django路由规则 1.基于正则的URL 在templates目录下创建index.html.detail.html文件 <!DOCTYPE html> <html lang=&q ...
随机推荐
- UOJ#348. 【WC2018】州区划分
原文链接www.cnblogs.com/zhouzhendong/p/UOJ348.html 前言 第一次知道子集卷积可以自己卷自己. 题解 这是一道子集卷积模板题. 设 $sum[S]$ 表示点集 ...
- python copy模块
python copy模块 copy模块用于对象的拷贝操作 该模块只提供了两个主要的方法: copy.copy:浅复制 copy.deepcopy:深复制 直接赋值,深拷贝和浅拷贝的区别 直接赋值:简 ...
- python一些好文章链接收藏
程序员之路:python3+PyQt5+pycharm桌面GUI开发 python-nmap的函数学习 python标准库中socket模块详解 python队列Queue 简单认识python cm ...
- js-面试题-驼峰命名
//将字符串转为驼峰命名‘foo-bar-car-day-efg’ function toUpperCase(str){ var string=str.split('-'); var arr=[]; ...
- CGI、FastCGI、PHP-FPM联系与区别(理解总结自其他博文)
参考:http://blog.csdn.net/tyrantbear/article/details/52077321 参考:http://mp.weixin.qq.com/s?src=11& ...
- VB使用API进行RC4加密解密(MD5密钥)
根据网络资料整改,来源未知,已调试通过. Option Explicit Private Declare Function CryptAcquireContext Lib "advapi32 ...
- fildder
来自 墨痕 :https://home.cnblogs.com/u/ink-marks/ FIDDLER的使用方法及技巧总结 一.FIDDLER快速入门及使用场景 Fiddler的官方网站:htt ...
- 批量删除Excel里面的换行符
关于批量删除excel里面的换行符,应该说写程序的遇上excel大体都会有这么个问题,在解决这个问题前,我的解决办法是把excel 的数据全部复制到txt里面, 因为操作txt比操作excel更为简单 ...
- DOM与BOM
DOM 1.概念起源: 文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口.在网页上,组织页面(或文档)的对象被组织在一个树形结 ...
- DRC错误解决办法
一.WARNING(ORCAP-1589): Net has two or more aliases - possible short? 错误原因:一个网络有两个网络标号,可能造成短路! 问题本质:原 ...