BBS論壇（二十）

20.1.cms新增輪播圖後臺邏輯程式碼完成

（1）apps/models.py

from exts import db
from 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)
    img_url = db.Column(db.String(255), nullable=False)
    link_url = db.Column(db.String(255), nullable=False)
    priority = db.Column(db.Integer, default=0)
    create_time = db.Column(db.DateTime, default=datetime.now)

（2）manage.py

from apps.models import BannerModel

（3）生成到資料庫

python manage.py db migrate

python manage.py db upgrade

（4）cms/forms.py

class AddBannerForm(BaseForm):
    name=StringField(validators=[InputRequired(message='
 
請輸入輪播圖名稱')])
    img_url=StringField(validators=[InputRequired(message='請輸入輪播圖連結')])
    link_url=StringField(validators=[InputRequired(message='請輸入輪播圖跳轉連結')])
    priority=IntegerField(validators=[InputRequired(message='請輸入輪播圖優先順序')])

（5）cms/views.py

@bp.route('/abanner/',methods=['POST'])
def abanner():
    form=AddBannerForm(request.form)
    if form.validate():
        name=form.name.data
        img_url=form.img_url.data
        link_url=form.link_url.data
        priority=form.priority.data
        banner=BannerModel(name=name,img_url=img_url,link_url=link_url,priority=priority)
        db.session.add(banner)
        db.session.commit()
        return restful.success()
    else:
        return restful.params_error(message=form.get_error())

20.2.cms新增輪播圖前臺邏輯完成

（1）cms/js/banner.js

$(function () {
    $('#save_banner_btn').click(function (event) {
        event.preventDefault();
        var dialog = $('#banner-dialog');
        var nameInput = $("input[name='name']");
        var imgInput = $("input[name='img_url']");
        var linkInput = $("input[name='link_url']");
        var priorityInput = $("input[name='priority']");

        var name = nameInput.val();
        var img_url = imgInput.val();
        var link_url = linkInput.val();
        var priority = priorityInput.val();

        if (!name || !img_url || !link_url || !priority) {
            zlalert.alertInfo('請輸入完整的輪播圖資料');
            return;
        }

        zlajax.post({
            'url': '/cms/abanner/',
            'data': {
                'name': name,
                'img_url': img_url,
                'link_url': link_url,
                'priority': priority
            },
            'success': function (data) {
                if (data['code'] == 200) {
                    dialog.modal('hide');
                    window.location.reload()
                } else {
                    zlalert.alertInfo(data['message']);
                }
            },
            'fail': function (error) {
                zlalert.alertNetworkError()
            }
        });
    });

});

（2）cms/cms_banners.html

{% from 'common/_macros.html' import static %}


<script src="{{ static('cms/js/banners.js') }}"></script>

（3）cms/views.py

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

（4）cms_banners.html

<tbody>
        {% for banner in banners %}
            <tr>
                <td>{{ banner.name }}</td>
                <td><a href="{{ banner.img_url }}" target="_blank">{{ banner.img_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>

 

20.1.cms新增輪播圖後臺邏輯程式碼完成

20.2.cms新增輪播圖前臺邏輯完成

20.1.cms新增輪播圖後臺邏輯程式碼完成

（1）apps/models.py

from exts import db
from 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)
    img_url = db.Column(db.String(255), nullable=False)
    link_url = db.Column(db.String(255), nullable=False)
    priority = db.Column(db.Integer, default=0)
    create_time = db.Column(db.DateTime, default=datetime.now)

（2）manage.py

from apps.models import BannerModel

（3）生成到資料庫

python manage.py db migrate

python manage.py db upgrade

（4）cms/forms.py

class AddBannerForm(BaseForm):
    name=StringField(validators=[InputRequired(message='請輸入輪播圖名稱')])
    img_url=StringField(validators=[InputRequired(message='請輸入輪播圖連結')])
    link_url=StringField(validators=[InputRequired(message='請輸入輪播圖跳轉連結')])
    priority=IntegerField(validators=[InputRequired(message='請輸入輪播圖優先順序')])

（5）cms/views.py

@bp.route('/abanner/',methods=['POST'])
def abanner():
    form=AddBannerForm(request.form)
    if form.validate():
        name=form.name.data
        img_url=form.img_url.data
        link_url=form.link_url.data
        priority=form.priority.data
        banner=BannerModel(name=name,img_url=img_url,link_url=link_url,priority=priority)
        db.session.add(banner)
        db.session.commit()
        return restful.success()
    else:
        return restful.params_error(message=form.get_error())

20.2.cms新增輪播圖前臺邏輯完成

（1）cms/js/banner.js

$(function () {
    $('#save_banner_btn').click(function (event) {
        event.preventDefault();
        var dialog = $('#banner-dialog');
        var nameInput = $("input[name='name']");
        var imgInput = $("input[name='img_url']");
        var linkInput = $("input[name='link_url']");
        var priorityInput = $("input[name='priority']");

        var name = nameInput.val();
        var img_url = imgInput.val();
        var link_url = linkInput.val();
        var priority = priorityInput.val();

        if (!name || !img_url || !link_url || !priority) {
            zlalert.alertInfo('請輸入完整的輪播圖資料');
            return;
        }

        zlajax.post({
            'url': '/cms/abanner/',
            'data': {
                'name': name,
                'img_url': img_url,
                'link_url': link_url,
                'priority': priority
            },
            'success': function (data) {
                if (data['code'] == 200) {
                    dialog.modal('hide');
                    window.location.reload()
                } else {
                    zlalert.alertInfo(data['message']);
                }
            },
            'fail': function (error) {
                zlalert.alertNetworkError()
            }
        });
    });

});

（2）cms/cms_banners.html

{% from 'common/_macros.html' import static %}


<script src="{{ static('cms/js/banners.js') }}"></script>

（3）cms/views.py

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

（4）cms_banners.html

<tbody>
        {% for banner in banners %}
            <tr>
                <td>{{ banner.name }}</td>
                <td><a href="{{ banner.img_url }}" target="_blank">{{ banner.img_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>