一百二十七：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_url = db.Column(db.String(255), nullable=False, comment=‘banner图片链接地址‘)    link_url = db.Column(db.String(255), nullable=False, comment=‘点击banner跳转链接地址‘)    priority = db.Column(db.Integer, default=0, comment=‘优先级‘)    create_time = db.Column(db.DateTime, default=datetime.now)

manager管理

python manager.py db migrate
python manager.py db upgrade

form

class AddBannerForm(BaseForm):    name = StringField(validators=[InputRequired(message=‘请输入轮播图名称‘)])    image_url = StringField(validators=[InputRequired(message=‘请输入轮播图图片链接‘)])    link_url = StringField(validators=[InputRequired(message=‘请输入轮播图跳转链接‘)])    priority = IntegerField(validators=[InputRequired(message=‘请输入轮播图优先级‘)])

视图

@bp.route(‘/banners/‘)@login_required@permission_required(CMSPersmission.POSTER)def banners():    banners = BannerModel.query.all()    return render_template(‘cms/cms_banners.html‘, banners=banners)

@bp.route(‘/abanners/‘, methods=[‘POST‘])@login_required@permission_required(CMSPersmission.POSTER)def abanners():    """ 添加banner图 """    form = AddBannerForm(request.form)    if form.validate():        name = form.name.data        image_url = form.image_url.data        link_url = form.link_url.data        priority = form.priority.data        banner = BannerModel(name=name, image_url=image_url, link_url=link_url, priority=priority)        db.session.add(banner)        db.session.commit()        return restful.success()    else:        return restful.params_error(form.get_error())

模板中渲染轮播图信息

<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">编辑</button>                <button class="btn btn-danger btn-xs">删除</button>            </td>        </tr>    {% endfor %}</tbody>

因为后面会有很多地方用到top-box，所以把top-box的css放到base里面

js

$(function () {   $(‘#save-banner-btn‘).click(function (event) {       event.preventDefault();       var dialog = $(‘#banner-dialog‘);       var nameInput = $(‘input[name="name"]‘);       var imageInput = $(‘input[name="image_url"]‘);       var linkInput = $(‘input[name="link_url"]‘);       var priorityInput = $(‘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 ){           xtalert.alertInfoToast(‘请输入完整数据‘);           return;       }       ajax.post({           ‘url‘: ‘/cms/abanners/‘,           ‘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{                   xtalert.alertInfo(data[‘message‘]);               }           },           ‘fail‘: function (error) {                xtalert.alertNetworkError();           }

       });   });});

模板中引用js

操作

原文地址：https://www.cnblogs.com/zhongyehai/p/11964139.html