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

后端逻辑

表单验证, 这里编辑就是和添加的内容一样,所以可以直接继承添加轮播图的表单验证,然后多加一个轮播图的id即可

编辑cmd.forms.py

class UpdateBannerForm(AddBannerForm):
    banner_id = IntegerField(validators=[InputRequired(message=‘请输入轮播图的id!‘)])

视图,编辑cms.views.py

...
from .forms import  UpdateBannerForm

@bp.route(‘/ubanner/‘,methods=[‘POST‘])
@login_required
def ubanner():
    form = UpdateBannerForm(request.form)
    if form.validate():
        banner_id = form.banner_id.data
        name = form.name.data
        image_url = form.image_url.data
        link_url = form.link_url.data
        priority = form.priority.data
        banner = BannerModel.query.get(banner_id)
        if banner:
            banner.name = name
            banner.image_url = image_url
            banner.link_url = link_url
            banner.priority = priority
            db.session.commit()
            return xjson.json_success()
        else:
            return xjson.json_param_error(message=‘没有这个轮播图!‘)
    else:
        return xjson.json_param_error(message=form.get_error())

前端逻辑

当我们点击编辑,也是弹出一个模态框,而且这个模态框其实是和添加轮播图的模态框是一样的。不同的地方就是编辑的模态框有内容。

因此我们可以复用之前的模态框,并把内用填充进表单即可。

现在关键是如何获取内容?

这里有个方法就是把需要的内容存到元素的属性中,如下,我们存入到tr标签的属性中

我们有存入:

  data-name="{{ banner.name }}"

  data-image="{{ banner.image_url }}"

  data-link="{{ banner.link_url }}"

  data-priority="{{ banner.priority }}"

  data-id="{{ banner.id }}"

    {% for banner in banners %}
        <tr data-name="{{ banner.name }}" data-image="{{ banner.image_url }}" data-link="{{ banner.link_url }}" data-priority="{{ banner.priority }}" data-id="{{ banner.id }}">
            <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>

这样我们通过js获取定位到“编辑”按钮,获取这个 按钮的父元素(td)的父元素(tr)的属性值,然后把需要的值填入到表单就可以了。

编辑banners.js

$(function () {
    $("#save-banner-btn").click(function (event) {
        event.preventDefault();
        self = $(this);
        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();
        //通过保存按钮上的属性data-type,获取数据类型,如果它的值是update,就是编辑操作了,否则就是添加操作
        var submitType = self.attr(‘data-type‘);
        //这里通过保存按钮上的属性data-id获取到轮播图的id, 如果是添加轮播图这就是个空值,不用管它
        var bannerId = self.attr("data-id");

        if(!name || !image_url || !link_url || !priority){
            zlalert.alertInfoToast(‘请输入完整的轮播图数据!‘);
            return;
        }

        //根据submitType的值来判断url应该是添加还是编辑
        var url = ‘‘;
        if(submitType == ‘update‘){
            url = ‘/cms/ubanner/‘;
        }else{
            url = ‘/cms/abanner/‘;
        }

        bbsajax.post({
            "url": url,   //这里就要改成动态获取上面的url了
            "data": {
                ‘name‘:name,
                ‘image_url‘: image_url,
                ‘link_url‘: link_url,
                ‘priority‘:priority,
                ‘banner_id‘: bannerId    //这里需要多传入一个轮播图id,就是是添加操作也无所谓,后端也没接收
            },
            ‘success‘: function (data) {
                dialog.modal("hide");
                if(data[‘code‘] == 200){
                    // 重新加载这个页面
                    window.location.reload();
                }else{
                    zlalert.alertInfo(data[‘message‘]);
                }
            },
            ‘fail‘: function () {
                zlalert.alertNetworkError();
            }

        });
    });
});

到此,我们轮播图的编辑功能就完成了!

原文地址:https://www.cnblogs.com/sellsa/p/9563268.html

时间: 2024-10-31 17:39:40

Flask实战第53天:cms编辑轮播图功能完成的相关文章

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

后台逻辑 编辑cms.views.py @bp.route('/dbanner/',methods=['POST']) @login_required def dbanner(): banner_id = request.form.get('banner_id') if not banner_id: return xjson.json_param_error(message='请传入轮播图id!') banner = BannerModel.query.get(banner_id) if not

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

编辑cms_banners.html, 在{% block main_content%}中加上表给内容如下 {% block main_content %} <table class="table table-bordered"> <thead> <tr> <th>名称</th> <th>图片链接</th> <th>跳转链接</th> <th>优先级</th&g

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

首页的布局如下 因为以后所有的内容都是在main-container里面,所以这里我们修改front_base.html,把{% block body%}{% endblock%}放到里面去 <div class="main-container"> {% block body %}{% endblock %} </div> 创建static/front/css/front_base.css, 并且在front_base.html中引入它 .main-contai

JavaScript实战项目:移动端 Touch 轮播图

Touch 轮播图 touch轮播图其实就是通过手指的滑动,来左右切换轮播图,下面我们通过一个案例,来实现下. 1. html 结构 结构上,还是用ul.li来存放轮播图片,ol.li来存放轮播小圆点: 2. 样式初始化 html的一些标签,都会有一些默认样式,比如body标签默认是有一个边距的,为了不影响美观,我们需要清除掉. /* 清除标签默认边距 */ body,ul,li,ol,img { margin: 0; padding: 0; } /* 清除 ul 等标签前面的"小圆点"

一百二十八:CMS系统之轮播图的编辑和删除功能

编辑 form,继承添加的form 视图 @bp.route('/ubanners/', methods=['POST'])@login_required@permission_required(CMSPersmission.POSTER)def ubanners(): """ 修改banner """ form = UpdateBannerForm(request.form) if form.validate(): banner_id = fo

用js实现轮播图

昨天一个朋友让我用js帮他做一个简单的轮播图,我本身就是菜鸟一个,js学得不怎么样,加上好久没敲代码,简直一头雾水,还好搞了将近一个小时终于搞定.今天有时间记录一下,分享给需要的朋友. 实现思路:轮播图其实就是一个定时器,所以我们只需要定时改变当前位置的图片即可.根据这一点实现起来就很简单了,下面直接上代码. 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.o

0199 移动端 之 轮播图

1.2.1 案例: 移动轮播图 移动端轮播图功能和基本PC端一致. 可以自动播放图片 手指可以拖动播放轮播图 1.2.2 案例分析 自动播放功能 开启定时器 移动端移动,可以使用translate 移动 想要图片优雅的移动,请添加过渡效果 自动播放功能-无缝滚动 注意,我们判断条件是要等到图片滚动完毕再去判断,就是过渡完成后判断 此时需要添加检测过渡完成事件? transitionend? 判断条件:如果索引号等于 3 说明走到最后一张图片,此时 索引号要复原为 0 此时图片,去掉过渡效果,然后

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

后台逻辑 模型 from exts import dbfrom datetime import datetime class BannerModel(db.Model): __tablename__ = 'banner' id = db.Column(db.Integer, primary_key=True, autoincrement=True) name = db.Column(db.String(255), nullable=False, comment='banner名') image_

蓝懿IOS学习UICollectionView实战轮播图

今天刘国斌老师讲了关于JSON数据源的获取与利用,通过微博的实战项目进行练习,获取的数据都是网络上请求的真实数据,这种方式学起来很轻松,很容易理解. 刘国斌老师把今天做的练习题UICollectionView轮播图实现功能的方法步骤都下了下来,我们学起来很方便.   实现轮播图 效果的步骤: 1.创建layout (UICollectionViewFlowLayout) 2.设置layout的方向 默认上下 3.创建UICollectionView 4.设置delegate dataSource