百二十から七：前とカルーセル駅の論理図CMSシステムを追加した後

 

ロジックの背後に

モデル

EXTSからDBをインポート
日時インポート日時から


：クラスBannerModel（db.Model）
    __tablename__ = 'バナー' 
    ID = db.Column（db.Integer、PRIMARY_KEY = Trueの場合、自動インクリメント=真）
    名= db.Column（db.String（255 ）、NULL可能= Falseのコメント= 'バナー名'） 
    、コメント= 'バナー图片链接地址'）IMAGE_URL = db.Column（db.String（255）、NULL可能= Falseの
    LINK_URL = db.Column（db.String（255 ）、NULL可能= Falseのコメント= '点击バナー跳转链接地址'）
    の優先度= db.Column（db.Integer、デフォルト= 0、コメント= '优先级'）
    CREATE_TIME = db.Column（db.DateTime、デフォルト= datetime.now）

マネージャの管理

パイソンmanager.py DB移行
のpython manager.pyデシベルのアップグレード

形

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

操作