後端邏輯

表單驗證， 這裏編輯就是和添加的內容一樣，所以可以直接繼承添加輪播圖的表單驗證，然後多加一個輪播圖的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();
            }

        });
    });
});

到此，我們輪播圖的編輯功能就完成了！

Flask實戰第53天：cms編輯輪播圖功能完成