BBS论坛（十九）
2025-01-14 02:16:49
LIKE.TG 成立于2020年，总部位于马来西亚，是首家汇集全球互联网产品，提供一站式软件产品解决方案的综合性品牌。唯一官方网站：www.like.tg
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 %}
现在关注【LIKE.TG出海指南频道】、【LIKE.TG生态链-全球资源互联社区】,即可免费领取【WhatsApp、LINE、Telegram、Twitter、ZALO云控】等获客工具试用、【住宅IP、号段筛选】等免费资源，机会难得，快来解锁更多资源，助力您的业务飞速成长！点击【联系客服】
本文由LIKE.TG编辑部转载自互联网并编辑，如有侵权影响，请联系官方客服，将为您妥善处理。
This article is republished from public internet and edited by the LIKE.TG editorial department. If there is any infringement, please contact our official customer service for proper handling.
