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 %}