首页我们在模态框中的保存按钮加一个id,这样方便我们选取这个按钮

<button type="button" class="btn btn-primary" id="save-banner-btn">保存</button>

在static/cms/js/下新建banners.js

$(function () {
$("#save-banner-btn").click(function (event) {
event.preventDefault();
var dialog = $("#banner-dialog");
var nameInput = dialog.find("input[name='name']");
var imageInput = dialog.find("input[name='image_url']");
var linkInput = dialog.find("input[name='link_url']");
var priorityInput = dialog.find("input[name='priority']"); var name = nameInput.val();
var image_url = imageInput.val();
var link_url = linkInput.val();
var priority = priorityInput.val(); if(!name || !image_url || !link_url || !priority){
zlalert.alertInfoToast('请输入完整的轮播图数据!');
return;
} bbsajax.post({
"url": '/cms/abanner/',
"data": {
'name':name,
'image_url': image_url,
'link_url': link_url,
'priority':priority,
},
'success': function (data) {
dialog.modal("hide");
if(data['code'] == 200){
// 重新加载这个页面
window.location.reload();
}else{
zlalert.alertInfo(data['message']);
}
},
'fail': function () {
zlalert.alertNetworkError();
} });
});
});

编辑cms.view.py中的banners视图, 获取数据库数据

@bp.route('/banners/')
@login_required
def banners():
banners = BannerModel.query.order_by(BannerModel.priority.desc()).all()
return render_template('cms/cms_banners.html', banners=banners)

编辑cms_banners.html, <tbody>中的内容动态展示

        <tbody>
{% for banner in banners %}
<tr>
<td>{{ banner.name }}</td>
<td><a href="{{ banner.image_url }}" target="_blank">{{ banner.image_url }}</a></td>
<td><a href="{{ banner.link_url }}" target="_blank">{{ banner.link_url }}</a></td>
<td>{{ banner.priority }}</td>
<td>{{ banner.create_time }}</td>
<td>
<button class="btn btn-default btn-xs edit-banner-btn">编辑</button>
<button class="btn btn-danger btn-xs delete-banner-btn">删除</button>
</td>
</tr>
{% endfor %}
</tbody>

然后在cms_banners.html中引入banners.js

{% block head %}
<script src="{{ url_for('static', filename='cms/js/banners.js')}}"></script>
...
{% endblock %}

这样,我们添加轮播图的功能就完成了,现在可以加轮播图试试

Flask实战第52天:cms添加轮播图前端代码逻辑完成的更多相关文章

  1. Flask实战第51天:cms添加轮播图后端代码逻辑完成

    首先,我们需要给轮播图设计一张表,因为轮播图前端要展示,CMS要管理,所以我们在apps下新建个models.py 编辑apps.models.py from exts import db from ...

  2. Flask实战第50天:cms添加轮播图的模态对话框制作

    编辑cms_banners.html, 在{% block main_content%}中加上表给内容如下 {% block main_content %} <table class=" ...

  3. Flask实战第53天:cms编辑轮播图功能完成

    后端逻辑 表单验证, 这里编辑就是和添加的内容一样,所以可以直接继承添加轮播图的表单验证,然后多加一个轮播图的id即可 编辑cmd.forms.py class UpdateBannerForm(Ad ...

  4. 一百二十六:CMS系统之轮播图管理页面布局和添加轮播图的模态对话框制作

    视图 @bp.route('/banners/')@login_required@permission_required(CMSPersmission.POSTER)def banners(): re ...

  5. Android项目实战(四十七):轮播图效果Viewpager

    简易.常用的轮播图效果ViewPager ,老技术了,记一笔留着以后ctrl C + ctrl V    需求如下: 不定张个数的ImagView轮播,右下角显示轮播点图标,每隔固定时间切换下一张,最 ...

  6. Flask实战第48天:首页轮播图实现

    首页的布局如下 因为以后所有的内容都是在main-container里面,所以这里我们修改front_base.html,把{% block body%}{% endblock%}放到里面去 < ...

  7. Flask实战第54天:cms删除轮播图功能完成

    后台逻辑 编辑cms.views.py @bp.route('/dbanner/',methods=['POST']) @login_required def dbanner(): banner_id ...

  8. 一百二十七:CMS系统之添加轮播图前后台逻辑

    后台逻辑 模型 from exts import dbfrom datetime import datetime class BannerModel(db.Model): __tablename__ ...

  9. 潭州课堂25班:Ph201805201 django 项目 第二十三课 文章主页 轮播图前端实现 热门新闻推荐实现 详情页实现 (课堂笔记)

    前台代码 // 在static/js/news/index.js文件中 $(function () { // 新闻列表功能 let $newsLi = $(".news-nav ul li& ...

随机推荐

  1. 牛客网刷题(纯java题型 31~60题)

    牛客网刷题(纯java题型 31~60题) 重写Override应该满足"三同一大一小"三同:方法名相同,参数列表相同,返回值相同或者子类的返回值是父类的子类(这一点是经过验证的) ...

  2. HDU 1234 开门人和关门人 (模拟)

    题目链接 Problem Description 每天第一个到机房的人要把门打开,最后一个离开的人要把门关好.现有一堆杂乱的机房签  到.签离记录,请根据记录找出当天开门和关门的人.    Input ...

  3. MSSQL数据库 事务隔离级别

    数据库事务的隔离级别有4个,由低到高依次为Read uncommitted .Read committed .Repeatable read .Serializable ,这四个级别可以逐个解 脏读 ...

  4. Jquery checkbox 遍历

    checkbox 全选\全部取消 $("#ChkAll").click(function(){    $("#divContent input[type='checkbo ...

  5. Object的公用方法们

    如图所示,Object一共有10种方法: 下面详细描述: 1.public Object() 方法,默认构造函数方法,当新建一个Object对象的时候,调用这个方法向堆区申请一片内存: 2.priva ...

  6. android CVE 漏洞汇总

    arm exploits 技术教程: Learning Pentesting for Android Devices CVE-2015-1530 ,CVE-2015-1474 两个android整数溢 ...

  7. fork与printf缓冲问题

    printf输出条件: (1) 调用fflush: (2) 缓冲区满了: (3) 遇到\n \r这些字符 (4) 遇到scanf这些要取缓冲区的: (5) 线程或者进程退出: fork之后会拷贝父进程 ...

  8. DTW 算法(转)

    DTW为(Dynamic Time Warping,动态时间归准)的简称.应用很广,主要是在模板匹配中,比如说用在孤立词语音识别,计算机视觉中的行为识别,信息检索等中.可能大家学过这些类似的课程都看到 ...

  9. Keepalived 安装与简单配置

    Keepalived 安装与简单配置 http://sivxy.lofter.com/post/1d21ebb9_7e15000

  10. udp调用connect有什么作用(转)

    原文链接如下: http://blog.csdn.net/wannew/article/details/18218619 整理一下.1:UDP中可以使用connect系统调用 2:UDP中connec ...